diff --git a/Assets/SVG/Coin-icon.svg b/Assets/SVG/Coin-icon.svg new file mode 100644 index 0000000..ea11a3d --- /dev/null +++ b/Assets/SVG/Coin-icon.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/Assets/SVG/Store-icon.svg b/Assets/SVG/Store-icon.svg new file mode 100644 index 0000000..e5f7cff --- /dev/null +++ b/Assets/SVG/Store-icon.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/Assets/SVG/shopping-bag.svg b/Assets/SVG/shopping-bag.svg new file mode 100644 index 0000000..d330029 --- /dev/null +++ b/Assets/SVG/shopping-bag.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/Styles/index.css b/Styles/index.css index 07c2664..9d5553e 100644 --- a/Styles/index.css +++ b/Styles/index.css @@ -24,6 +24,8 @@ body{ display: none; } + + .text-infocard{ display: flex; flex-direction: column; @@ -32,14 +34,14 @@ body{ text-align: center; } -.text-subtitle{ +.infocard-subtitle{ font-weight: 400; font-size: 32px; line-height: 39px; text-transform: uppercase; } -.text-title{ +.infocard-title{ font-weight: 500; font-size: 48px; line-height: 58px; @@ -47,7 +49,7 @@ body{ text-transform: uppercase; } -.text-description{ +.infocard-description{ font-weight: 400; font-size: 16px; line-height: 24px; @@ -60,6 +62,33 @@ body{ align-items: center; } +.top-cards{ + display: flex; + justify-content: center; + padding: 178px 32px 80px; + gap: 26px; +} + +.top-card{ + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + width: 100%; + max-width: 350px; + padding: 40px; + gap: 40px; + box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); +} + +.card-icon{ + width: 100%; + height: 100%; + max-width: 103px; + max-height: 104px; +} + + @media screen and (max-width: 414px){ .banner-principal-desktop, .infocard-image-desktop{ @@ -83,5 +112,39 @@ body{ .text-description{ width: 100%; } - + .top-cards{ + flex-direction: column; + align-items: center; + padding: 90px 32px 80px; + } +} + +@media screen and (min-width: 2000px){ + .infocard-subtitle{ + font-size: 40px; + } + .infocard-title{ + font-size: 56px; + } + .infocard-description, + .card-description{ + font-size: 30px; + } + .top-infocard{ + display: flex; + flex-direction: column; + align-items: center; + } + .infocard-image{ + width: 100%; + max-width: 400px; + align-items: unset; + } + .top-cards{ + padding: 200px 300px 80px; + } + .top-card{ + max-width: 450px; + height: 400px; + } } diff --git a/index.html b/index.html index 69ca642..98f0541 100644 --- a/index.html +++ b/index.html @@ -33,23 +33,49 @@
-

Lorem ipsum

-

dolor sit amet

+

Lorem ipsum

+

dolor sit amet

-

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Curabitur ut tortor sed lacus egestas vulputate vel sit amet velit. Nulla suscipit magna dui.

- + +
+ infocard image desktop + infocard image mobile +
-
- infocard image desktop - infocard image mobile + +
+
+ Store icon + +

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

+
+ +
+ Shopping-bag icon + +

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

+
+ +
+ Coin icon + +

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

+
+
- \ No newline at end of file