diff --git a/assets/styles.css/main.css b/assets/styles.css/main.css index 1876228..bf4f6bd 100644 --- a/assets/styles.css/main.css +++ b/assets/styles.css/main.css @@ -24,7 +24,7 @@ body { .top-infocard { display: flex; justify-content: center; - padding: 3.80vw 0 0; + padding: 4% 0 0; } .top-infocard-text { @@ -63,8 +63,8 @@ body { } .top-infocard-image { - padding: 3.80vw 0 4.63vw 0; - width: 16.4vw; + padding: 4% 0 5% 0; + width: 16.5vw; align-items: center; } @@ -76,7 +76,7 @@ body { .top-cards { background: #FFFFFF; grid-template-columns: repeat(3, max-content); - padding: 3.125vw 0 4.166vw; + padding: 3% 0 4%; display: grid; gap: 1.09vw; justify-content: center; @@ -128,12 +128,12 @@ body { background: #FFFFFF; grid-template-columns: repeat(4, 4fr); display: grid; - gap: 0.83vw; + gap: 16px; justify-content: center; - padding: 6.71875vw 0 0; text-align: center; - margin: 0 3.75vw; - width: 92.5%; + margin: 0 4%; + max-width: 92.5%; + padding-top: 7%; } .bottom-card-group { @@ -142,30 +142,26 @@ body { display: flex; background: #FFFFFF; box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15); - justify-items: center; } .bottom-card-image { - padding: 1.82vw; + padding-top: 8% ; } .bottom-card-text { - font-size: 16px; + font-size: 14px; line-height: 24px; - width: 19vw; - padding: 0 0 65px; + padding: 1% 2% 4%; } -.bottom-infocard { +.bottom-infocard-desktop { display: flex; - margin: 5.625vw 0 2.604vw; + margin: 6% 0 3%; align-items: center; justify-content: center; } -.bottom-infocard-group { - width: 29%; -} + .bottom-infocard-tittle { font-weight: 600; @@ -182,14 +178,14 @@ body { .bottom-banner-image { width: 100%; - padding: 2.6vw 14.583vw 6.04vw; + padding: 3% 15% 6%; } .page-footer { display: flex; flex-direction: column; align-items: center; - padding: 1.979vw 0; + padding: 2% 0; background-color: #000000; } @@ -206,7 +202,6 @@ body { .footer-text { text-transform: uppercase; line-height: 12px; - font-size: 10px; color: #BDBDBD; text-align: center; } @@ -215,14 +210,6 @@ body { display: none; } -.bottom-banner-image-mobile { - display: none; -} - -.bottom-infocard-mobile { - display: none; -} - @media screen and (max-width: 1025px) { .desktop { display: none; @@ -232,15 +219,15 @@ body { display: flex; } + .bottom-banner-image-desktop { + display: none; + } + .main-banner-desktop { display: none; } - .bottom-infocard-paragraph { - display: none; - } - - .bottom-infocard { + .bottom-infocard-desktop { display: none; } @@ -258,6 +245,7 @@ body { .top-infocard-subtitle { font-size: 20px; line-height: 24px; + margin-top: 18%; } .top-infocard-description { @@ -330,39 +318,53 @@ body { .bottom-card-group { grid-template-columns: 1fr; - gap: 15px; } .bottom-card { display: flex; flex-direction: column; - margin-top: 19%; + gap: 15px; + padding: 19% 0 24%; } .bottom-card-text { - width: 302px; font-size: 14px; - padding: 0 0 16%; - } - - .bottom-infocard-group { - width: 84%; - } - - .bottom-banner-image-desktop { - display: none; } .bottom-banner-image-mobile { padding: 0; - margin: 24% 0 12%; } + + .bottom-infocard-group { + max-width: 88%; + margin: 12% 0 21%; + } + + .bottom-infocard-mobile { + display: flex; + align-items: center; + justify-content: center; + text-align: center; + } + + .page-footer { + padding: 20px 0; + font-size: 12px; + } } -@media screen and (min-width: 415px) { +@media screen and (min-width: 1026px) { .main-banner-mobile { display: none; } + + .bottom-banner-image-mobile { + display: none; + } + + .bottom-infocard-mobile { + display: none; + } } @media screen and (min-width: 768px) and (max-width: 1023px) { diff --git a/index.html b/index.html index 8f19cdd..6906e7c 100644 --- a/index.html +++ b/index.html @@ -119,7 +119,7 @@
- image01-bottomcard + image01-bottomcard

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla @@ -159,7 +159,7 @@

-
+

Lorem ipsum dolor sit amet

@@ -184,7 +184,7 @@

Lorem ipsum dolor sit amet

-

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate sapien non libero faucibus interdum. In eget tincidunt ipsum. Quisque a tellus at lectus blandit tempor. Ut tristique auctor mi eget