diff --git a/assets/bottom-card1.svg b/assets/bottom-card1.svg new file mode 100644 index 0000000..1090b7b --- /dev/null +++ b/assets/bottom-card1.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/assets/bottom-card3.svg b/assets/bottom-card3.svg new file mode 100644 index 0000000..7d13645 --- /dev/null +++ b/assets/bottom-card3.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/assets/bottom-card4.svg b/assets/bottom-card4.svg new file mode 100644 index 0000000..b5c95ab --- /dev/null +++ b/assets/bottom-card4.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/css/style.css b/css/style.css index 5e698e5..f5ba729 100644 --- a/css/style.css +++ b/css/style.css @@ -72,7 +72,7 @@ body{ /*** TOP CARDS ***/ .top-cards{ - margin-top: 180px; + margin-top: 178px; display: grid; grid-template-columns: repeat(3, 18%); gap: 20px; @@ -93,7 +93,9 @@ body{ } .card-description{ - margin: 28px 26px; + align-items: center; + max-width: 85%; + margin: 28px auto; } /*** MID BANNER ***/ @@ -101,12 +103,12 @@ body{ .mid-banners{ background: #E0E0E0; margin-top: 80px; - padding: 0 72px; } .mid-banner-wrapper{ display: grid; - grid-template-columns: repeat(3, 30%); + grid-template-columns: repeat(3, 29%); + width: 100%; gap: 40px; justify-content: center; position: relative; @@ -119,6 +121,16 @@ body{ width: 100%; } +/*** BOTTOM CARDS ***/ + +.bottom-cards{ + margin-top: 190px; + display: grid; + grid-template-columns: repeat(4, 22%); + gap: 16px; + justify-content: center; +} + @media screen and (max-width: 1024px){ /*** MAIN BANNER ***/ .main-banner-desktop{ @@ -164,6 +176,10 @@ body{ font-size: 16px; line-height: 24px; } + + .card-description{ + width: 82%; + } /*** MID BANNER ***/ .mid-banners{ @@ -182,6 +198,18 @@ body{ grid-area: 2 / 1 /span 2/ span 2; } + /*** BOTTOM CARDS ***/ + + .bottom-cards{ + grid-template-columns: repeat(1, 100%); + padding: 0 28px 0; + margin-top: 112px; + } + + .bottom-card-description{ + font-size: 14px; + line-height: 24px; + } } @media screen and (min-width: 1025px){ diff --git a/index.html b/index.html index 8d54e96..628fdc9 100644 --- a/index.html +++ b/index.html @@ -109,6 +109,51 @@ + + +
+ +
+
+ Ícone de uma loja +
+
+ 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. +
+
+ + +
+
+ Ícone de uma sacola de compras +
+
+ 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. +
+
+ + +
+
+ Ícone de uma mão fazendo pagamentos +
+
+ 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. +
+
+ + +
+
+ Ícone de uma sacola de compras +
+
+ 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. +
+
+
+ +