diff --git a/_assets/css/main.css b/_assets/css/main.css index 29e500b..ba50ac2 100644 --- a/_assets/css/main.css +++ b/_assets/css/main.css @@ -1,3 +1,4 @@ +/* Reset */ * { margin: 0; padding: 0; @@ -20,15 +21,19 @@ body { display: block; } -.top-banner-image-desktop, +.top-banner-image-desktop { + width: 100%; +} .top-banner-image-mobile { width: 100%; + display: none; } .infocard { margin: 73px 25%; justify-content: center; } + .infocard-title { text-align: center; font-weight: 500; @@ -65,18 +70,15 @@ body { } .cards-wrapper { - display: grid; - grid-template-columns: repeat(3, max-content); - gap: 21px; + gap: 16px; justify-content: center; - padding-top: 179px; - padding-bottom: 74px; text-align: center; + margin: 129px 72px 74px 72px; + display: flex; } .card { max-width: 350px; - display: flex; flex-direction: column; align-items: center; padding: 0 26px 28px; @@ -88,6 +90,7 @@ body { margin-top: 35px; margin-bottom: 15px; } + .card-description { font-weight: 400; font-size: 16px; @@ -96,36 +99,57 @@ body { } .fig-container { + display: flex; background-color: #E0E0E0; - max-height: 530px; - } -.fig-wrapper { - max-height: 530px; - display: flex; - justify-content: center; - align-items: center; - gap: 39px; - padding: 0; +.figure-wrapper { + margin-left: 72px; + margin-right: 72px; } .fig-image { + width: 100%; max-width: 566px; - width: 29%; } -.cards-wrapper2 { +.flex-img { + max-width: 100%; + display: block; +} +.flex { +/* background-color: #E0E0E0; */ + display: flex; + flex-wrap: nowrap; + max-width: 80%; + margin: 0 auto; +} + +.flex > div { + flex: 1 1 566px; + margin: 0 20px; +} + + + + + + + + + +/* bloco 4 cards */ +.cards-wrapper2 { gap: 16px; justify-content: center; text-align: center; - margin: 179px 72px 74px 72px; + margin: 129px 72px 74px 72px; display: flex; } .card2 { - + max-width: 350px; flex-direction: column; align-items: center; padding: 0 26px 28px; @@ -145,8 +169,10 @@ body { margin-top: 27px; } + +/* bloco Article */ .article { - margin-top: 108px; + margin-top: 108px; } .article-title { @@ -162,9 +188,10 @@ body { font-size: 16px; line-height: 24px; margin: 0 auto 50px auto; - } + +/* bloco bottom banner */ .bottom-banner { display: flex; align-items: center; @@ -176,6 +203,13 @@ body { width: 71%; } +.bottom-banner-mobile { + width: 100%; + display: none; +} + + +/* bloco footer */ .page-footer { margin-top: 116px; display: flex; @@ -191,7 +225,6 @@ body { } .footer-text { - color: #ffffff; text-align: center; margin: 17px 0 38px; font-size: 10px; @@ -202,125 +235,3 @@ body { - - - - - -/* Tablet e Mobile - 280px to 1024px */ -@media only screen - and (min-device-width: 280px) - and (max-device-width: 1024px) { - - .top-banner-image-desktop { - display: none; - } - - .infocard { - margin: 73px 6%; - } - - .infocard-subtitle { - font-size: 20px; - line-height: 24px; - } - - .infocard-title { - font-size: 28px; - line-height: 34px; - } - .infocard-description { - padding-top: 19px; - font-size: 16px; - line-height: 24px; - text-align: center; - } - - .pc-icon { - margin-top: 65px 0 91px; - } - - .pc-icon-image { - width: 58%; - } - - .cards-wrapper { - display: flex; - flex-direction: column; - align-items: center; - padding-top: 91px; - padding-bottom: 80px; - } - - .card { - padding: 35px 26px 28px; - background: #ffffff; - box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); - } - - .card-description { - font-weight: 400; - font-size: 16px; - line-height: 24px; - margin-top: 27px; - } - - .imageblock-wrapper { - background-color: #e0e0e0; - display: flex; - flex-direction: column; - align-items: center; - } - - .imageblock-image { - align-items: center; - display: grid; - grid-template-columns: repeat(2, 1fr); - } - - .image2 .image1 { - grid-row: span 2; - width: 43%; - } - -}; - - - - - - - - - - - -/* Desktop - 1025px to 2500px */ -@media only screen - and (min-device-width: 1025px) - and (max-device-width: 2500px) { - - .top-banner-image-mobile, - .bottom-banner-mobile { - display: none; - } - -}; - - - - - - - - - -/* Desktop 4k - 2501px above */ -@media only screen - and (min-device-width: 2501px) { - - .top-banner-image-mobile, - .bottom-banner-mobile { - display: none; - } -}; \ No newline at end of file diff --git a/index.html b/index.html index 191f42b..61e7c78 100644 --- a/index.html +++ b/index.html @@ -104,20 +104,23 @@ -