diff --git a/assets/top-card01.svg b/assets/top-card01.svg new file mode 100644 index 0000000..be82592 --- /dev/null +++ b/assets/top-card01.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/assets/top-card02.svg b/assets/top-card02.svg new file mode 100644 index 0000000..d330029 --- /dev/null +++ b/assets/top-card02.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/assets/top-card03.svg b/assets/top-card03.svg new file mode 100644 index 0000000..ea11a3d --- /dev/null +++ b/assets/top-card03.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/css/style.css b/css/style.css index b1642ae..09e0b10 100644 --- a/css/style.css +++ b/css/style.css @@ -66,9 +66,36 @@ body{ } .top-infocard-image{ + display: block; margin-top: 74px; } +/*** TOP CARDS ***/ +.top-cards{ + margin-top: 180px; + display: grid; + grid-template-columns: repeat(3, 18%); + gap: 20px; + justify-content: center; +} + +.card{ + width: 100%; + justify-content: center; + align-items: center; + text-align: center; + background: #FFFFFF; + box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); +} + +.card-image{ + margin-top: 36px; +} + +.card-description{ + margin: 28px 26px; +} + @media screen and (max-width: 1024px){ /*** MAIN BANNER ***/ .main-banner-desktop{ @@ -99,7 +126,22 @@ body{ .top-infocard-image{ margin-top: 65px; + width: 100%; } + + /*** TOP CARDS ***/ + .top-cards{ + grid-template-columns: repeat(1, 100%); + padding: 0 28px 0; + margin-top: 90px; + gap: 24px; + } + + .card{ + font-size: 16px; + line-height: 24px; + } + } @media screen and (min-width: 1025px){ diff --git a/index.html b/index.html index a36ee64..14bd4e7 100644 --- a/index.html +++ b/index.html @@ -54,6 +54,39 @@ + + +
+ +
+
+ Ícone de uma loja +
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. +
+
+ + +
+
+ Ícone de uma sacola de compras +
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. +
+
+ + +
+
+ Ícone de uma mão fazendo pagamentos +
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. +
+
+