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 @@
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.
- + + +