diff --git a/index.html b/index.html index d7eafa5..6b65189 100644 --- a/index.html +++ b/index.html @@ -41,7 +41,7 @@
-
+
Shopping

@@ -49,15 +49,15 @@

-
- Bolsa de compras +
+ Sacola

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

-
+
Moeda

@@ -70,6 +70,42 @@ Programação Programação

+ +
+
+
+ Dinheiro + +

+ 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. +

+
+ +
+ 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. +

+
+ +
+ Moeda + +

+ 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. +

+
+ +
+ Dinheiro + +

+ 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. +

+
+
+
\ No newline at end of file diff --git a/src/assets/css/style.css b/src/assets/css/style.css index 3f2a5ca..f682ec0 100644 --- a/src/assets/css/style.css +++ b/src/assets/css/style.css @@ -25,7 +25,7 @@ header { /* SECTION 1 */ -.section1 img, .section4 img { +.section1 img { width: 100%; display: block; } @@ -76,7 +76,7 @@ header { flex-wrap: wrap; } -.card { +.card-meio { text-align: center; background-color: #FFFFFF; padding: 34px 26px; @@ -84,15 +84,59 @@ header { box-shadow: 0px 4px 20px 0px #0000003B; } -.card img { +.card-meio img { padding-bottom: 26px; } -.card p { +.card-meio p { line-height: 24px; max-width: 300px; } +/* SECTION 4 */ + +.section4 { + display: flex; + justify-content: center; +} + +/* SECTION 5 */ + +.section5 { + background: linear-gradient(180deg, #00C8FF 0%, #15ACD6 100%); + margin-top: 140px; +} + +.container-cards { + display: grid; + grid-template-columns: repeat(2, max-content); + justify-content: center; + position: relative; + top: -60px; + gap: 20px; +} + +.card-baixo { + display: flex; + flex-direction: column; + align-items: center; + box-shadow: 0px 4px 16px 0px #00000026; + background: #FFFFFF; + padding: 36px 32px 66px; +} + +.card-baixo img { + display: block; + margin-bottom: 14px; +} + +.card-baixo p { + max-width: 368px; + font-size: 16px; + text-align: center; + line-height: 24px; +} + /* RESPONSIVIDADE -> NOTEBOOK */ @media screen and (min-width: 993px) and (max-width: 1280px) { @@ -107,6 +151,13 @@ header { } } +@media screen and (min-width: 769px) and (max-width: 992px) { + .card-baixo p { + max-width: 280px; + } +} + + /* RESPONSIVIDADE -> TABLET */ @media screen and (max-width: 992px) { @@ -140,11 +191,26 @@ header { gap: 16px; } - .card { + .container-cards { + grid-template-columns: 1fr; + gap: 16px; + } + + .card-baixo { + margin-top: 114px; margin: 0 32px; } - .card p { + .card-baixo p { + font-size: 14px; + line-height: 24px; + } + + .card-meio { + margin: 0 32px; + } + + .card-meio p { max-width: none; } } diff --git a/src/assets/svg/celular.svg b/src/assets/svg/celular.svg index b5c95ab..be408ca 100644 --- a/src/assets/svg/celular.svg +++ b/src/assets/svg/celular.svg @@ -1,6 +1,6 @@ - - - - - + + + + + diff --git a/src/assets/svg/compras.svg b/src/assets/svg/compras.svg index 2040b41..6a9d41e 100644 --- a/src/assets/svg/compras.svg +++ b/src/assets/svg/compras.svg @@ -1,12 +1,14 @@ - - - - - + + + + + + + - - + + diff --git a/src/assets/svg/dinheiro.svg b/src/assets/svg/dinheiro.svg new file mode 100644 index 0000000..23e32a4 --- /dev/null +++ b/src/assets/svg/dinheiro.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/assets/svg/sacola.svg b/src/assets/svg/sacola.svg new file mode 100644 index 0000000..2040b41 --- /dev/null +++ b/src/assets/svg/sacola.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + +