From acdd833fb7e51f11674e68c85b52e24d3ab0ecef Mon Sep 17 00:00:00 2001 From: IO <320154041@pcpuma.acatlan.unam.mx> Date: Tue, 10 Sep 2024 15:10:04 -0600 Subject: [PATCH] fixed responsive --- conoce-la-fes/assets/css/conoce-la-fes.css | 2 + conoce-la-fes/assets/css/conoce-la-fes.less | 61 ++++++++++++++++++--- conoce-la-fes/index.html | 6 +- 3 files changed, 57 insertions(+), 12 deletions(-) diff --git a/conoce-la-fes/assets/css/conoce-la-fes.css b/conoce-la-fes/assets/css/conoce-la-fes.css index 39d71ac..0cfe2ce 100644 --- a/conoce-la-fes/assets/css/conoce-la-fes.css +++ b/conoce-la-fes/assets/css/conoce-la-fes.css @@ -9,10 +9,12 @@ main h2{ } #hero { width: 100%; + min-height: 430px; max-height: 80vh; background: linear-gradient(rgba(38, 42, 93, 0.4), rgba(0, 0, 0, 0.7)), url("../../../assets/img/bg/solid.png") fixed center; background-size: cover; position: relative; + padding: 20px; } #hero:before { content: ""; diff --git a/conoce-la-fes/assets/css/conoce-la-fes.less b/conoce-la-fes/assets/css/conoce-la-fes.less index 09bf3bc..37f2f71 100644 --- a/conoce-la-fes/assets/css/conoce-la-fes.less +++ b/conoce-la-fes/assets/css/conoce-la-fes.less @@ -1,15 +1,20 @@ /* Banner */ .banner{ overflow: visible; + display: flex; + justify-content: center; + align-items: center; &-container{ - padding-top: 20vh; + margin-top: 10%; + gap: 70px; + justify-content: end; } &-img{ width: 25%; - height: 25%; - + height: auto; + max-width: 30vw; border-radius: 2rem; transform: rotate(-45deg); @@ -21,26 +26,27 @@ object-fit: cover; } } + & .text{ + max-width: 50%; + } } /* Historia */ .historia{ - margin-bottom: 10%; - h2{ width: 40%; border-bottom: 5px solid darkgoldenrod; } &-info{ - gap: 10rem; + gap: 7rem; } &-imagenes{ position: relative; + justify-content: center; #imgUno{ - max-width: 25vw; min-height: 70vh; object-fit: cover; } @@ -59,11 +65,10 @@ /* Ideario - Juramento */ .idearioJuramento{ .floating-list { - width: 30%; max-height: 8vh; position: absolute; top: -2%; - padding: 10px; + padding: 20px; background-color: white; border-radius: 8px; @@ -110,4 +115,42 @@ } } } +} + +@media(max-width:991px){ + .banner{ + overflow: visible; + display: flex; + + &-container{ + flex-direction: column; + text-align: center; + } + + &-img{ + width: 70%; + height: auto; + } + & .text{ + max-width: 100%; + } + } + .historia{ + &-info{ + gap: 4rem; + flex-direction: column; + } + &-imagenes{ + position: relative; + width: 90%; + justify-content: center; + + #imgDos{ + max-width: 70vw; + height: 30vh; + left: 5%; + bottom: -10%; + } + } + } } \ No newline at end of file diff --git a/conoce-la-fes/index.html b/conoce-la-fes/index.html index ede4cde..6b9c89d 100644 --- a/conoce-la-fes/index.html +++ b/conoce-la-fes/index.html @@ -85,11 +85,11 @@