diff --git a/src/components/Contents/DentistaSection.css b/src/components/Contents/DentistaSection.css index dea4b51..aef45eb 100644 --- a/src/components/Contents/DentistaSection.css +++ b/src/components/Contents/DentistaSection.css @@ -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; +} + } \ No newline at end of file diff --git a/src/components/Contents/SpaSection.css b/src/components/Contents/SpaSection.css index 2bb5e02..a0f6650 100644 --- a/src/components/Contents/SpaSection.css +++ b/src/components/Contents/SpaSection.css @@ -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; +} } \ No newline at end of file diff --git a/src/components/Contents/content.css b/src/components/Contents/content.css index 9faea30..b222a87 100644 --- a/src/components/Contents/content.css +++ b/src/components/Contents/content.css @@ -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; + } +} \ No newline at end of file diff --git a/src/components/Services/DentalServices.css b/src/components/Services/DentalServices.css index 09bd46b..fa05077 100644 --- a/src/components/Services/DentalServices.css +++ b/src/components/Services/DentalServices.css @@ -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; -} \ No newline at end of file +} + +@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; + } +} + + \ No newline at end of file diff --git a/src/components/Services/DentalServicesPhotos.css b/src/components/Services/DentalServicesPhotos.css index e861cc0..fd6244d 100644 --- a/src/components/Services/DentalServicesPhotos.css +++ b/src/components/Services/DentalServicesPhotos.css @@ -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; + } + } + \ No newline at end of file diff --git a/src/components/Services/SpaServices.css b/src/components/Services/SpaServices.css index 13f16ed..872c833 100644 --- a/src/components/Services/SpaServices.css +++ b/src/components/Services/SpaServices.css @@ -108,4 +108,41 @@ border-radius: 12px; font-size: 14px; cursor: pointer; -} \ No newline at end of file +} + +@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; + } +} + + \ No newline at end of file diff --git a/src/components/Services/SpaServicesPhotos.css b/src/components/Services/SpaServicesPhotos.css index be2cddc..d86e134 100644 --- a/src/components/Services/SpaServicesPhotos.css +++ b/src/components/Services/SpaServicesPhotos.css @@ -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; + } +} + diff --git a/src/components/footer/Footer.jsx b/src/components/footer/Footer.jsx index ff1af6c..2a362f0 100644 --- a/src/components/footer/Footer.jsx +++ b/src/components/footer/Footer.jsx @@ -7,6 +7,9 @@ const Footer = () => {
- + - +
diff --git a/src/components/footer/footer.css b/src/components/footer/footer.css index 1cd2438..8212de5 100644 --- a/src/components/footer/footer.css +++ b/src/components/footer/footer.css @@ -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; +} } \ No newline at end of file diff --git a/src/components/header/Header.jsx b/src/components/header/Header.jsx index 150d078..4e6904f 100644 --- a/src/components/header/Header.jsx +++ b/src/components/header/Header.jsx @@ -14,6 +14,9 @@ const Header = () => {
logo + + +
diff --git a/src/components/header/header.css b/src/components/header/header.css index 9480dc1..9baced5 100644 --- a/src/components/header/header.css +++ b/src/components/header/header.css @@ -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; + } } \ No newline at end of file diff --git a/src/pages/FormReservPage/FormReservPage.css b/src/pages/FormReservPage/FormReservPage.css index 76f15f9..239e2b7 100644 --- a/src/pages/FormReservPage/FormReservPage.css +++ b/src/pages/FormReservPage/FormReservPage.css @@ -1,6 +1,21 @@ .form-reserv-page-container { display: flex; + align-items: center; justify-content: center; gap: 3rem; margin: 2rem; -} \ No newline at end of file +} + +@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; + } +} diff --git a/src/pages/Login/LoginPage.css b/src/pages/Login/LoginPage.css index 10a9506..93d55e8 100644 --- a/src/pages/Login/LoginPage.css +++ b/src/pages/Login/LoginPage.css @@ -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; + } } \ No newline at end of file