diff --git a/assets/Css/Styles.css b/assets/Css/Styles.css index 963c718..6f57662 100644 --- a/assets/Css/Styles.css +++ b/assets/Css/Styles.css @@ -64,6 +64,32 @@ background: #000000; justify-content: center; align-items: center; } +.Cards{ + display: grid; + grid-template-columns: repeat(3,max-content); + gap: 20px; + justify-content: center; + padding: 142px 0 180px; +} +.CardBox{ + display: flex; + justify-content: center; + flex-direction: column; + align-items:center; + background: #FFFFFF; + box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); + max-width: 300px; + font-size: 16px; + height: 288px; + line-height: 24px; + font-weight: 400; +} +.CardDescription{ + text-align: center; + font-weight: 400; + font-size: 16px; + line-height: 24px; +} @media screen and (max-width: 1023px) { .MainBannerDesktop{ display: none; @@ -92,6 +118,12 @@ background: #000000; max-width: 358px; max-height: 116px; } + .Cards{ + grid-template-columns: 1fr; + padding: 90px 32px ; + gap:24px; + justify-items: center; + } } @media screen and (min-width: 1024px) { @@ -120,4 +152,18 @@ background: #000000; max-height: 704px; height: 704px; } + .CardBox{ + max-width: 600px; + font-size: 64px; + height: 578px; + line-height: 24px; + } + .imageCard{ + width: 204px; + height: 206px; + } + .CardDescription{ + font-size: 38px; + line-height: 28px; + } } diff --git a/assets/Image/coin 1.png b/assets/Image/coin 1.png new file mode 100644 index 0000000..a5e458f Binary files /dev/null and b/assets/Image/coin 1.png differ diff --git a/assets/Image/shop 1.png b/assets/Image/shop 1.png new file mode 100644 index 0000000..31a541b Binary files /dev/null and b/assets/Image/shop 1.png differ diff --git a/assets/Image/shopping-bag (1) 1.png b/assets/Image/shopping-bag (1) 1.png new file mode 100644 index 0000000..97f8ad4 Binary files /dev/null and b/assets/Image/shopping-bag (1) 1.png differ diff --git a/index.html b/index.html index 6274e3a..7fbb7f3 100644 --- a/index.html +++ b/index.html @@ -34,6 +34,30 @@
Computadores
+
+
+ icone de Loja +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
+
+
+ icone de sacola +
+ Lorem ipsum dolor sit amet, + consectetur adipiscing elit. + Cras euismod enim non dui + fringilla interdum. +
+
+
+ icone de mão com moeda +
+ Lorem ipsum dolor sit amet, + consectetur adipiscing elit. + Cras euismod enim non dui fringilla interdum. +
+
+ +