diff --git a/assets/images/coin.svg b/assets/images/coin.svg new file mode 100644 index 0000000..ea11a3d --- /dev/null +++ b/assets/images/coin.svg @@ -0,0 +1,6 @@ + diff --git a/assets/images/shop.svg b/assets/images/shop.svg new file mode 100644 index 0000000..be82592 --- /dev/null +++ b/assets/images/shop.svg @@ -0,0 +1,13 @@ + diff --git a/assets/images/shopping-bag.svg b/assets/images/shopping-bag.svg new file mode 100644 index 0000000..d330029 --- /dev/null +++ b/assets/images/shopping-bag.svg @@ -0,0 +1,12 @@ + diff --git a/assets/styles/styles.css b/assets/styles/styles.css index 055e5bc..635187e 100644 --- a/assets/styles/styles.css +++ b/assets/styles/styles.css @@ -22,6 +22,7 @@ header { } .banner-desktop figure img { + display: block; width: 100%; } @@ -78,6 +79,42 @@ header { margin-bottom: 90px; } +.cards { + display: flex; + justify-content: center; + margin: 90px 0 80px; + width: 100%; +} + +.cards-container { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); + gap: 20px; + justify-content: center; + width: 57%; +} + +.cards-container div { + display: flex; + flex-direction: column; + align-items: center; + background: #ffffff; + box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); + padding: 35px 26px 26px; + width: 100%; +} + +.cards img { + display: block; + margin-bottom: 27px; +} + +.cards p { + text-align: center; + font-size: 16px; + line-height: 24px; +} + @media (max-width: 414px) { .banner-desktop { display: none; @@ -110,4 +147,20 @@ header { .infocard figure img { width: 58%; } + + .cards { + margin-top: 0; + } +} + +@media (min-width: 350px) and (max-width: 380px) { + .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)); + } } diff --git a/index.html b/index.html index 8970509..453db0e 100644 --- a/index.html +++ b/index.html @@ -63,6 +63,43 @@ /> +
+ 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. +
+