diff --git a/assets/images/bag.svg b/assets/images/bag.svg new file mode 100644 index 0000000..d330029 --- /dev/null +++ b/assets/images/bag.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/assets/images/coin.svg b/assets/images/coin.svg new file mode 100644 index 0000000..ea11a3d --- /dev/null +++ b/assets/images/coin.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/assets/images/shop.svg b/assets/images/shop.svg new file mode 100644 index 0000000..be82592 --- /dev/null +++ b/assets/images/shop.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/assets/styles/main.css b/assets/styles/main.css index c66e482..b1ec17c 100644 --- a/assets/styles/main.css +++ b/assets/styles/main.css @@ -71,6 +71,34 @@ body { width: 17%; } +.cards{ + display: flex; + justify-content: center; + align-items: center; + margin-top: 178px; + gap: 21px; +} + +.card{ + width: 18%; + text-align: center; + background: #fff; + box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); + padding: 35px 26px 26px 26px; +} + +.card-text{ + font-size: 16px; + line-height: 24px; + width: 85%; + display: inline-block; +} + +.card-icon{ + width: 29%; + margin-bottom: 30px; +} + /*4k*/ @media screen and (min-width: 2500px) { .top-infocard-subtitle{ @@ -87,6 +115,11 @@ body { font-size: 32px; line-height: 48px; } + + .card-text{ + font-size: 32px; + line-height: 48px; + } } /*MOBILE* */ diff --git a/index.html b/index.html index e9edda6..3f3c67a 100644 --- a/index.html +++ b/index.html @@ -47,6 +47,24 @@
Ilustração de computadores
+ +
+
+ Icone de loja + +

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

+
+
+ Icone de sacola de compras + +

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

+
+
+ Icone de pagamento + +

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

+
+
\ No newline at end of file