diff --git a/assets/Imagens/Rectangle 13 mobile.png b/assets/Imagens/Rectangle 13 mobile.png new file mode 100644 index 0000000..1cb8c22 Binary files /dev/null and b/assets/Imagens/Rectangle 13 mobile.png differ diff --git a/assets/Imagens/Rectangle 13.png b/assets/Imagens/Rectangle 13.png new file mode 100644 index 0000000..127cff9 Binary files /dev/null and b/assets/Imagens/Rectangle 13.png differ diff --git a/assets/svg/coin 1.svg b/assets/svg/coin 1.svg new file mode 100644 index 0000000..463bc1d --- /dev/null +++ b/assets/svg/coin 1.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/assets/svg/shop 1.svg b/assets/svg/shop 1.svg new file mode 100644 index 0000000..c38d0e3 --- /dev/null +++ b/assets/svg/shop 1.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/assets/svg/shopping-bag (1) 1.svg b/assets/svg/shopping-bag (1) 1.svg new file mode 100644 index 0000000..2040b41 --- /dev/null +++ b/assets/svg/shopping-bag (1) 1.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/index.html b/index.html index 76ee90d..145e443 100644 --- a/index.html +++ b/index.html @@ -22,7 +22,7 @@ /> macbook com codigos na tela -
+

LOREM IPSUM @@ -38,6 +38,29 @@

tres computadores -
+ +
+
+ desenho loja +

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

+
+
+ desenho sacola de compra +

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

+
+
+ desenho mao com moeda +

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

+
+
\ No newline at end of file diff --git a/style.css b/style.css index 01ed373..0d45d37 100644 --- a/style.css +++ b/style.css @@ -33,7 +33,7 @@ body{ /* info section */ .info-section{ - padding: 84px 16% 0 16%; + padding: 86px 16%; width: 100%; display: flex; align-items: center; @@ -58,6 +58,38 @@ body{ max-width: 766px; } +.info-section img{ + max-width: 90%; +} + +/* top cards */ + +.top-cards{ + background-color: #F0F0F0; + display: flex; + align-items: center; + justify-content: center; + padding: 74px 0; + gap: 20px; +} + +.top-cards-box{ + background-color: #ffffff; + box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: min(350px,90vw); + min-height: 288px; + padding: 26px; + gap: 30px; +} + +.top-cards-box p{ + text-align: center; +} + /* Banner pincipal no mobile */ @media screen and (max-width:768px) { @@ -70,7 +102,7 @@ body{ width: 100%; } -/* .info section mobile */ +/* info section mobile */ .info-section{ flex-direction: column; @@ -84,5 +116,10 @@ body{ .info-section-text h2{ font-size: 20px; } -} + /* top card mobile */ + + .top-cards{ + flex-direction: column; + } +} \ No newline at end of file