diff --git a/styles/main.css b/styles/main.css index 28f3a93..02aa6a2 100644 --- a/styles/main.css +++ b/styles/main.css @@ -8,25 +8,60 @@ body { font-family: 'Inter', sans-serif; } +.main-banner, +.top-infocard-image, +.bottom-infocard-image, +.middle-image { + width: 100%; +} + +.top-infocard, +.card, +.footer-page, +.bottom-infocard { + display: flex; + flex-direction: column; + align-items: center; +} + +.top-infocard-subtitle, +.top-infocard-title, +.card, +.bottom-card-description, +.bottom-infocard-title, +.bottom-infocard-description, +.footer-text { + text-align: center; +} + +.top-infocard-description, +.top-card-description, +.bottom-card-description, +.bottom-infocard-description { + font-weight: 400; + font-size: 16px; + line-height: 24px; +} + +.middle-images-wrapper, +.bottom-cards { + width: 92.50%; + margin: 0 auto; +} + /*Header*/ .header-page { display: flex; justify-content: center; - background: #000; } .header-page-logo { display: block; - padding: 30px 0; } /*Main Banner*/ -.main-banner { - width: 100%; -} - .main-banner-desktop { display: block; } @@ -37,10 +72,6 @@ body { /* Top Infocard */ .top-infocard { - display: flex; - flex-direction: column; - align-items: center; - padding: 74px 0; } @@ -48,11 +79,6 @@ body { width: 40%; } -.top-infocard-subtitle, -.top-infocard-title { - text-align: center; -} - .top-infocard-subtitle { text-transform: uppercase; font-weight: 400; @@ -65,15 +91,10 @@ body { font-weight: 500; font-size: 48px; line-height: 58px; - padding-bottom: 28px; } .top-infocard-description { - font-weight: 400; - font-size: 16px; - line-height: 24px; - padding-bottom: 73px; } @@ -81,10 +102,6 @@ body { width: 16%; } -.top-infocard-image { - width: 100%; -} - /*top cards*/ .cards { display: flex; @@ -93,18 +110,12 @@ body { .top-cards { gap: 21px; - width: 57%; margin: 0 auto; padding-bottom: 80px; } .card { - display: flex; - align-items: center; - flex-direction: column; - text-align: center; - box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); } @@ -118,12 +129,6 @@ body { padding-bottom: 28px; } -.top-card-description { - font-weight: 400; - font-size: 16px; - line-height: 24px; -} - /*grid area para o middle images*/ .middle-image-1 { grid-area: image1; @@ -150,21 +155,11 @@ body { display: grid; grid-template-areas: "image1 image2 image3"; gap: 39px; - - width: 92.50%; - margin: 0 auto; -} - -.middle-image { - width: 100%; } /*bottom cards*/ .bottom-cards { gap: 16px; - - width: 92.50%; - margin: 0 auto; padding-bottom: 108px; } @@ -177,19 +172,8 @@ body { padding-bottom: 18px; } -.bottom-card-description { - font-weight: 400; - font-size: 16px; - line-height: 24px; - text-align: center; -} - /*bottom infocard*/ .bottom-infocard { - display: flex; - flex-direction: column; - align-items: center; - padding-bottom: 116px; } @@ -201,15 +185,9 @@ body { font-weight: 600; font-size: 32px; line-height: 39px; - text-align: center; } .bottom-infocard-description { - font-weight: 400; - font-size: 16px; - line-height: 24px; - text-align: center; - padding-bottom: 50px; } @@ -218,31 +196,24 @@ body { } .bottom-infocard-image { - width: 100%; height: 276px; object-fit: cover; } /*footer*/ .footer-page { - display: flex; - align-items: center; - flex-direction: column; - background: #000; padding: 38px 0; } .footer-icons { list-style: none; - display: flex; gap: 16px; - padding-bottom: 16px; } -.footer-icons > li:last-child { +.footer-icons>li:last-child { margin: auto 0; } @@ -252,12 +223,20 @@ body { font-size: 10px; line-height: 12px; text-transform: uppercase; - text-align: center; } /*mobile*/ @media screen and (max-width: 1024px) { + .top-infocard-content, + .cards, + .middle-images-wrapper, + .bottom-infocard-image-container, + .bottom-infocard-image, + .bottom-infocard-content { + width: 100%; + } + /*Banner*/ .main-banner-desktop { display: none; @@ -274,10 +253,6 @@ body { padding: 74px 30px 90px 30px; } - .top-infocard-content { - width: 100%; - } - .top-infocard-subtitle { font-size: 20px; line-height: 24px; @@ -300,7 +275,6 @@ body { /*top cards*/ .cards { flex-direction: column; - width: 100%; } .top-cards { @@ -332,8 +306,6 @@ body { grid-template-areas: "image2 image1" "image3 image3"; column-gap: 14px; row-gap: 24px; - - width: 100%; } /*bottom cards*/ @@ -346,18 +318,12 @@ body { padding-bottom: 88px; } - .bottom-infocard-image-container { - width: 100%; - } - .bottom-infocard-image { - width: 100%; height: auto; object-fit: initial; } .bottom-infocard-content { - width: 100%; padding: 50px 32px 0; }