crovadmin/AGENDA_DIGITAL
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

responsive desing agenda

Browse Source
This commit is contained in:
Christopher Ulloa 2025-02-06 16:54:19 -07:00
parent ea6fcc2fab
commit 4d22be7822
13 changed files with 325 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/Contents/DentistaSection.css
View File

@ -7,7 +7,7 @@
display: flex;
justify-content: center;
height: 600px;
margin: 3rem;
margin: 3rem 0 3rem 0;
}
@ -109,6 +109,11 @@
font-weight: 500;
}
.dentista-button-one a {
text-decoration: none;
color: #737373;
}
.dentista-button-one {
margin-top: 10px;
color: #131313;
@ -119,4 +124,30 @@
border-radius: 12px;
font-size: 14px;
cursor: pointer;
}
@media screen and (max-width: 1000px) {
.dentista-card-container {
flex-direction: column;
align-items: center;
}
.dentista-section-container {
height: auto;
}
.dentista-section-header {
display: flex;
flex-direction: column;
gap: 1rem;
align-items: center;
}
.dentista-section-tittle {
text-align: center;
}
.dentista-section-button {
width: 130px;
}
}

32
src/components/Contents/SpaSection.css
View File

@ -7,7 +7,7 @@
display: flex;
justify-content: center;
height: 600px;
margin: 3rem;
margin: 3rem 0 3rem 0;
}
@ -30,6 +30,11 @@
cursor: pointer;
}
.spa-button-one a {
text-decoration: none;
color: #737373;
}
.spa-section-tittle h2 {
font-size: 2.6rem;
font-weight: 800;
@ -119,4 +124,29 @@
border-radius: 12px;
font-size: 14px;
cursor: pointer;
}
@media screen and (max-width: 1000px) {
.spa-card-container {
flex-direction: column;
align-items: center;
}
.spa-section-container {
height: auto;
}
.spa-section-header {
display: flex;
flex-direction: column;
gap: 1rem;
align-items: center;
}
.spa-section-tittle {
text-align: center;
}
.spa-section-button {
width: 130px;
}
}

21
src/components/Contents/content.css
View File

@ -4,7 +4,7 @@
.content-container {
text-align: center;
padding-top: 4rem;
padding: 4rem 0rem 0 0rem;
}
@ -21,3 +21,22 @@
font-weight: 600;
color: #424242;
}
@media screen and (max-width: 900px) {
.content-title {
font-size: 2.1rem;
padding: 1rem 1.5rem 1rem 1.5rem;
}
.content-text {
font-size: 1.3rem;
padding: 8px 12px 8px 12px;
}
.prymary-button-landing-page {
padding-bottom: 12px;
}
.img-hero-landing-page .img-hero-container img{
width: 100%;
height: auto;
}
}

44
src/components/Services/DentalServices.css
View File

@ -1,5 +1,4 @@
.dental-services-container {
/* border: 1px red solid; */
width: 75%;
height: 100%;
margin: 3rem;
@ -18,11 +17,11 @@
grid-template-rows: repeat(6, 1fr);
gap: 2rem;
width: 100%;
height: 70%;
/* border: 1px blue solid; */
height: 100%;
}
.dental-services-one {
grid-area: 1 / 1 / 4 / 3;
border: 1px #D9D9D9 solid;
@ -128,4 +127,41 @@
border-radius: 12px;
font-size: 14px;
cursor: pointer;
}
}
@media (max-width: 800px) {
.dental-services-container {
width: 85%;
height: 100%;
}
.dental-services-grid {
grid-template-columns: 1fr; /* Una sola columna */
grid-template-rows: auto;
}
.dental-services-one {
grid-column: 1;
grid-row: auto; /* Se acomodan de manera automática */
}
.dental-services-two {
grid-column: 1;
grid-row: auto;
}
.dental-services-three {
grid-column: 1;
grid-row: auto;
}
.dental-services-four {
grid-column: 1;
grid-row: auto;
}
.dental-services-five {
display: none;
}
}

36
src/components/Services/DentalServicesPhotos.css
View File

@ -1,5 +1,4 @@
.dental-service-photos-container {
/* border: 1px red solid; */
width: 75%;
height: 100%;
}
@ -18,30 +17,55 @@
gap: 2rem;
width: 100%;
height: 50vh;
/* border: 1px blue solid; */
}
.dental-service-photo-one {
grid-area: 1 / 1 / 7 / 5;
/* border: 1px red solid; */
background: url("https://alemarquitectura.com/wp-content/uploads/2021/10/diseno-clinica-dental-pequena-4.jpg") center/cover no-repeat;
border-radius: 1rem;
}
.dental-service-photo-two {
grid-area: 1 / 5 / 4 / 7;
/* border: 1px red solid; */
grid-area: 1 / 5 / 4 / 7;
border-radius: 1rem;
background: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRkgFccg6ZT-FjTVKEeqy8TIQepmiYoF95o1A&s") center/cover no-repeat;
}
.dental-service-photo-three {
grid-area: 4 / 5 / 7 / 7;
/* border: 1px red solid; */
border-radius: 1rem;
background: url("https://images.adsttc.com/media/images/5e3b/13a5/3312/fdc8/2700/0099/large_jpg/FRAN_SILVESTRE_ARQUITECTOS_VALENCIA__CLINICA_DENTAL_IMAGES_007.jpg?1580929924") center/cover no-repeat;
}
@media (max-width: 1000px) {
.dental-service-photos-container {
width: 85%;
height: 100%;
}
.dental-service-photos-grid {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto;
gap: 10px;
}
.dental-service-photo-one {
grid-column: span 2;
grid-row: 1;
}
.dental-service-photo-two {
grid-column: 1;
grid-row: 2;
}
.dental-service-photo-three {
grid-column: 2;
grid-row: 2;
}
}

39
src/components/Services/SpaServices.css
View File

@ -108,4 +108,41 @@
border-radius: 12px;
font-size: 14px;
cursor: pointer;
}
}
@media (max-width: 800px) {
.spa-services-container {
width: 85%;
height: 100%;
}
.spa-services-grid {
grid-template-columns: 1fr; /* Una sola columna */
grid-template-rows: auto;
}
.spa-services-one {
grid-column: 1;
grid-row: auto; /* Se acomodan de manera automática */
}
.spa-services-two {
grid-column: 1;
grid-row: auto;
}
.spa-services-three {
grid-column: 1;
grid-row: auto;
}
.spa-services-four {
grid-column: 1;
grid-row: auto;
}
.spa-services-five {
display: none;
}
}

30
src/components/Services/SpaServicesPhotos.css
View File

@ -45,3 +45,33 @@
background: url("https://sdg-migration-id.s3.amazonaws.com/thumbs_Interior-Design-John-Pawson-Jaffa-hotel-Tel-Aviv-spa-treatment-room-1018.770x0_q95.jpg") center/cover no-repeat;
}
@media (max-width: 1000px) {
.spa-service-photos-container {
width: 85%;
height: 100%;
}
.spa-service-photos-grid {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto;
gap: 10px;
}
.spa-service-photo-one {
grid-column: span 2;
grid-row: 1;
}
.spa-service-photo-two {
grid-column: 1;
grid-row: 2;
}
.spa-service-photo-three {
grid-column: 2;
grid-row: 2;
}
}

7
src/components/footer/Footer.jsx
View File

@ -7,6 +7,9 @@ const Footer = () => {
<section className='footer-container'>
<div className='footer'>
<nav className='nav-footer'>
<div className='nav-footer-img-query'>
<img src={logo} alt="logoImg" />
</div>
<ul>
<li>inicio</li>
<li>Nosotros</li>
@ -21,10 +24,10 @@ const Footer = () => {
</div>
<div>
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-brand-meta"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 10.174c1.766 -2.784 3.315 -4.174 4.648 -4.174c2 0 3.263 2.213 4 5.217c.704 2.869 .5 6.783 -2 6.783c-1.114 0 -2.648 -1.565 -4.148 -3.652a27.627 27.627 0 0 1 -2.5 -4.174z" /><path d="M12 10.174c-1.766 -2.784 -3.315 -4.174 -4.648 -4.174c-2 0 -3.263 2.213 -4 5.217c-.704 2.869 -.5 6.783 2 6.783c1.114 0 2.648 -1.565 4.148 -3.652c1 -1.391 1.833 -2.783 2.5 -4.174z" /></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="icon icon-tabler icons-tabler-outline icon-tabler-brand-meta"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 10.174c1.766 -2.784 3.315 -4.174 4.648 -4.174c2 0 3.263 2.213 4 5.217c.704 2.869 .5 6.783 -2 6.783c-1.114 0 -2.648 -1.565 -4.148 -3.652a27.627 27.627 0 0 1 -2.5 -4.174z" /><path d="M12 10.174c-1.766 -2.784 -3.315 -4.174 -4.648 -4.174c-2 0 -3.263 2.213 -4 5.217c-.704 2.869 -.5 6.783 2 6.783c1.114 0 2.648 -1.565 4.148 -3.652c1 -1.391 1.833 -2.783 2.5 -4.174z" /></svg>
</span>
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-brand-instagram"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 8a4 4 0 0 1 4 -4h8a4 4 0 0 1 4 4v8a4 4 0 0 1 -4 4h-8a4 4 0 0 1 -4 -4z" /><path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" /><path d="M16.5 7.5v.01" /></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" strokelinecap="round" strokelinejoin="round" className="icon icon-tabler icons-tabler-outline icon-tabler-brand-instagram"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 8a4 4 0 0 1 4 -4h8a4 4 0 0 1 4 4v8a4 4 0 0 1 -4 4h-8a4 4 0 0 1 -4 -4z" /><path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" /><path d="M16.5 7.5v.01" /></svg>
</span>
</div>
</div>

32
src/components/footer/footer.css
View File

@ -9,7 +9,7 @@
.footer {
width: 80%;
width: 85%;
margin: 0rem 0rem 2rem 0rem;
border: 1px #FBFBFB solid;
padding: 3rem;
@ -52,4 +52,34 @@
.footer-icons h5 {
font-size: 1rem;
}
.nav-footer-img-query {
display: none;
}
@media screen and (max-width: 900px) {
.nav-footer ul li img {
width: 100px;
display: none;
}
.nav-footer ul {
gap: 8px;
padding: 1.5rem;
}
.footer-icons {
width: 100%;
}
.nav-footer-img-query {
display: flex;
align-items: center;
justify-content: center;
}
.nav-footer-img-query img {
width: 120px;
height: auto;
}
}

3
src/components/header/Header.jsx
View File

@ -14,6 +14,9 @@ const Header = () => {
<div className='logo'>
<a href="">
<img src={logo} alt="logo" />
<svg width="25px" height="25px" viewBox="0 0 24 24" fill="#f5f5f5" xmlns="http://www.w3.org/2000/svg">
<path d="M3 12H21M3 6H21M3 18H21" stroke="#f5f5f5" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
</a>
</div>

27
src/components/header/header.css
View File

@ -17,6 +17,10 @@ header img {
margin-left: 10px;
}
.logo a svg {
display: none;
}
header ul {
display: flex;
list-style: none;
@ -40,4 +44,27 @@ header .buttton {
font-weight: 400;
cursor: pointer;
font-family: 'Helvetica Neue', Roboto;
}
header .buttton a {
text-decoration: none;
color: inherit;
}
@media screen and (max-width: 680px) {
.header nav ul {
display: none;
}
.logo {
display: flex;
}
.logo a svg {
display: inline-block;
}
.header img {
display: none;
}
.logo {
padding: 5px 0 0 8px;
}
}

17
src/pages/FormReservPage/FormReservPage.css
View File

@ -1,6 +1,21 @@
.form-reserv-page-container {
display: flex;
align-items: center;
justify-content: center;
gap: 3rem;
margin: 2rem;
}
}
@media (max-width: 900px) {
.form-reserv-page-container {
display: flex !important;
flex-direction: column !important;
gap: 1.2rem;
}
.form-reserv-section {
width: 350px !important;
}
.send-form-container {
width: 350px !important;
}
}

22
src/pages/Login/LoginPage.css
View File

@ -132,4 +132,26 @@
border: none;
font-size: 1rem;
font-weight: 500;
}
@media screen and (max-width: 900px) {
.LoginPage-container {
width: 90%;
}
.login-img-container {
display: none;
}
.login-content {
padding: 16px;
}
.login-content-container h3 {
font-size: 2.2rem;
}
.login-content-container p{
font-size: 1.1rem;
}
.Login-form-container {
margin: 1.2rem;
}
}