diff --git a/assets/images/bottom-banner-desktop.png b/assets/images/bottom-banner-desktop.png new file mode 100644 index 0000000..74d0711 Binary files /dev/null and b/assets/images/bottom-banner-desktop.png differ diff --git a/assets/images/bottom-banner-mobile.png b/assets/images/bottom-banner-mobile.png new file mode 100644 index 0000000..50df8d7 Binary files /dev/null and b/assets/images/bottom-banner-mobile.png differ diff --git a/assets/styles.css b/assets/styles.css index 74572ca..3b61ee1 100644 --- a/assets/styles.css +++ b/assets/styles.css @@ -1,3 +1,5 @@ +/* ---------- INITIAL ---------- */ + * { margin: 0; padding: 0; @@ -14,7 +16,7 @@ body { font-family: 'Inter', sans-serif; } -/* HEADER E BANNER */ +/* ---------- HEADER E MAIN BANNER ---------- */ .page__header { display: flex; @@ -37,7 +39,7 @@ body { } -/* TOP TEXTS */ +/* ---------- TOP TEXTS ---------- */ .top__text { display: flex; @@ -78,7 +80,7 @@ body { } -/* TOP CARDS */ +/* ---------- TOP CARDS ---------- */ .top__cards { display: grid; @@ -109,7 +111,7 @@ body { } -/* BOTTOM CARDS */ +/* ---------- BOTTOM CARDS ---------- */ .bottom__cards { background: #E0E0E0; @@ -139,12 +141,12 @@ body { display: block; } - -.bottom__card-image-3 { +.bottom__card-3 { grid-column: initial; } -/* BOTTOM INFOCARDS */ + +/* ---------- BOTTOM INFOCARDS ---------- */ .bottom__infocards { display: grid; @@ -175,13 +177,46 @@ body { } +/* ---------- BOTTOM BANNER CONTAINER ---------- */ -/* MEDIAS QUERIES */ +.bottom__banner-container { + display: flex; + align-items: center; + justify-content: center; + text-align: center; + flex-direction: column; +} + +.bottom__banner-desktop { + width: 100%; + padding: 0 280px 116px; + margin-top: 50px; +} + +.bottom__banner-mobile { + display: none; +} + +.bottom__title { + font-weight: 600; + font-size: 32px; +} + +.bottom__text { + max-width: 550px; +} + +.bottom__description { + font-size: 16px; + line-height: 24px; +} + + +/* ---------- MEDIAS QUERIES ---------- */ @media screen and (max-width: 1024px) { - /* MAIN BANNER */ - + /* ---------- MAIN BANNER ---------- */ .main__banner-desktop { display: none; } @@ -191,8 +226,16 @@ body { width: 100%; } - /* TOP CARDS */ + .bottom__banner-desktop { + display: none; + } + .bottom__banner-mobile { + display: block; + } + + + /* ---------- TOP TEXTS ---------- */ .top__text { flex-direction: column; padding: 88px 32px 90px; @@ -222,14 +265,14 @@ body { text-align: center; } + /* ---------- TOP CARDS ---------- */ .top__cards { display: grid; grid-template-columns: repeat(3, max-content); gap: 20px; justify-content: center; - padding: 0 0; } - + .top__card { display: flex; flex-direction: column; @@ -237,8 +280,8 @@ body { padding: 26px 26px 34px; } - /* BOTTOM CARDS */ - + + /* ---------- BOTTOM CARDS ---------- */ .bottom__cards { padding: 0 24px; margin-bottom: 112px; @@ -258,6 +301,12 @@ body { grid-column: 1/3; } + .bottom__card-2 { + grid-row: 1; + } + + + /* ---------- BOTTOM INFOCARDS ---------- */ .bottom__infocards { display: grid; grid-template-columns: repeat(3, max-content); @@ -273,6 +322,31 @@ body { padding: 26px 26px 34px; } + + /* ---------- BOTTOM BANNER CONTAINER ---------- */ + + .bottom__banner-container { + display: flex; + flex-direction: column-reverse; + } + + .bottom__title { + font-size: 24px; + } + + .bottom__text { + padding: 0 32px 87px; + } + + .bottom__banner-desktop { + display: none; + } + + .bottom__banner-mobile { + width: 100%; + display: block; + margin-bottom: 50px; + } } @@ -290,17 +364,13 @@ body { @media screen and (max-width: 1200px) { .top__cards { grid-template-columns: 1fr; - padding: 0 24px; + padding: 0 32px; } .bottom__infocards { grid-template-columns: 1fr; - padding: 0 24px; + padding: 0 24px 98px; } } - - - - diff --git a/index.html b/index.html index 5155ba0..9c0f42b 100644 --- a/index.html +++ b/index.html @@ -81,9 +81,20 @@ Icone de um celulara do quarto card de baixo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.

- + + +
+
+

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 hendrerit. Curabitur venenatis felis vitae sagittis venenatis. Donec finibus turpis vitae lectus interdum rutrum vitae sed augue. +

+
+ Banner do infocard de baixo + +