diff --git a/assets/images/Group.svg b/assets/images/Group.svg new file mode 100644 index 0000000..b5c95ab --- /dev/null +++ b/assets/images/Group.svg @@ -0,0 +1,6 @@ + diff --git a/assets/images/laptop.svg b/assets/images/laptop.svg new file mode 100644 index 0000000..7d13645 --- /dev/null +++ b/assets/images/laptop.svg @@ -0,0 +1,14 @@ + diff --git a/assets/images/money.svg b/assets/images/money.svg new file mode 100644 index 0000000..1090b7b --- /dev/null +++ b/assets/images/money.svg @@ -0,0 +1,14 @@ + diff --git a/assets/styles/styles.css b/assets/styles/styles.css index 221dfd4..998c0c6 100644 --- a/assets/styles/styles.css +++ b/assets/styles/styles.css @@ -79,14 +79,14 @@ header { margin-bottom: 90px; } -.cards { +.top-cards { display: flex; justify-content: center; margin: 90px 0 80px; width: 100%; } -.cards-container { +.top-cards-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); justify-content: center; @@ -94,7 +94,7 @@ header { width: 57%; } -.cards-container div { +.top-cards-container div { display: flex; flex-direction: column; align-items: center; @@ -104,12 +104,12 @@ header { width: 100%; } -.cards-container img { +.top-cards-container img { display: block; margin-bottom: 27px; } -.cards-container p { +.top-cards-container p { text-align: center; font-size: 16px; line-height: 24px; @@ -120,7 +120,7 @@ header { justify-content: center; width: 100%; background: #e0e0e0; - margin-bottom: 95px; + margin-bottom: 190px; } .gallery-container { @@ -143,6 +143,42 @@ header { width: 100%; } +.bottom-cards { + display: flex; + justify-content: center; + margin-bottom: 108px; + width: 100%; +} + +.bottom-cards-container { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(415px, 1fr)); + justify-content: center; + gap: 16px; + width: 92%; +} + +.bottom-cards-container div { + display: flex; + flex-direction: column; + align-items: center; + background: #ffffff; + box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15); + padding: 35px 32px 65px 32px; + width: 100%; +} + +.bottom-cards-container img { + display: block; + margin-bottom: 15px; +} + +.bottom-cards-container p { + text-align: center; + font-size: 16px; + line-height: 24px; +} + @media (max-width: 414px) { .banner-desktop { display: none; @@ -180,7 +216,7 @@ header { text-align: center; } - .cards { + .top-cards { margin-top: 0; } @@ -200,17 +236,28 @@ header { .image03 img { width: 208%; } -} -@media (min-width: 350px) and (max-width: 380px) { - .cards-container { + .bottom-cards-container { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } } -@media (min-width: 280px) and (max-width: 349px) { - .cards-container { - grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); +@media (min-width: 1623px) and (max-width: 1912px) { + .top-cards-container { + width: 75%; + } +} + +@media (min-width: 1264px) and (max-width: 1622px) { + .top-cards-container { + width: 90%; + } +} + +@media (min-width: 600px) and (max-width: 1241px) { + .image03 { + position: relative; + left: 54%; } } @@ -222,23 +269,24 @@ header { .gallery-container img { width: 94%; } -} -@media (min-width: 600px) and (max-width: 1241px) { - .image03 { - position: relative; - left: 54%; + .bottom-cards-container { + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } } -@media (min-width: 1623px) and (max-width: 1912px) { - .cards-container { - width: 75%; +@media (min-width: 350px) and (max-width: 380px) { + .top-cards-container { + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } } -@media (min-width: 1264px) and (max-width: 1622px) { - .cards-container { - width: 90%; +@media (min-width: 280px) and (max-width: 349px) { + .top-cards-container { + grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); + } + + .bottom-cards-container { + grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); } } diff --git a/index.html b/index.html index 028727a..00ff1a1 100644 --- a/index.html +++ b/index.html @@ -63,8 +63,8 @@ /> -
+ 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, 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, 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, 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. +
+