diff --git a/assets/imagens/Group.png b/assets/imagens/Group.png new file mode 100644 index 0000000..2013cf8 Binary files /dev/null and b/assets/imagens/Group.png differ diff --git a/assets/imagens/coin 2.png b/assets/imagens/coin 2.png new file mode 100644 index 0000000..8240edb Binary files /dev/null and b/assets/imagens/coin 2.png differ diff --git a/assets/imagens/laptop 1.png b/assets/imagens/laptop 1.png new file mode 100644 index 0000000..66be1e8 Binary files /dev/null and b/assets/imagens/laptop 1.png differ diff --git a/assets/imagens/money (1) 2.png b/assets/imagens/money (1) 2.png new file mode 100644 index 0000000..656f073 Binary files /dev/null and b/assets/imagens/money (1) 2.png differ diff --git a/assets/styles/main.css b/assets/styles/main.css index dd6286d..13a33b9 100644 --- a/assets/styles/main.css +++ b/assets/styles/main.css @@ -94,44 +94,83 @@ body { } .banner-quite { - width: 1920PX; - height: 530PX; background: #E0E0E0; + padding: 62px 72px 62px; + +} + +.banner-quite-wrapper { display: grid; grid-template-columns: repeat(3, 1fr); - gap: 20px ; - padding: 62PX 72PX 62PX; + justify-content: center; + position: relative; + gap: 20px; + top: 140px; } .imagem-quite { - width: 566px; - max-height: 530px; + max-width: 566px; display: flex; - flex-direction: column; align-items: center; - padding: 72px 39px 62px 0%; } .banner-quite-imagem { display: block; margin-bottom: 26px; - width: 400PX; - height: 400PX; } +.low-card { + display: grid; + gap: 20px; + padding: 191px 32px 66px; + grid-template-columns: repeat(4, 1fr); + background: #FFFFFF; +} + +.low-cards { + display: flex; + flex-direction: column; + align-items: center; + max-width: 432px; + background: #FFFFFF; + box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15); +} + +.low-card-imagem { + display: block; + margin-bottom: 14px; +} + +.low-card-texto { + max-width: 368px; + font-weight: 400; + font-size: 16px; + line-height: 24px; + text-align: center; +} + + + @media screen and (maw-width: 1400px) { .imagem-quite { flex-direction: column; } } -@media screen and (max-width: 566px) { +@media screen and (max-width: 1200px) { .banner-quite { grid-template-columns: 1fr; padding: 36px 26px; - } - + } } + +@media screen and (max-width: 768px) { + .low-card { + grid-template-columns: 1fr; + padding: 36px 26px; + } +} + @media screen and (max-width: 768px) { .top-card { grid-template-columns: 1fr; diff --git a/index.html b/index.html new file mode 100644 index 0000000..42f2207 --- /dev/null +++ b/index.html @@ -0,0 +1,114 @@ + + + + + + + + + + + + Desafio01 + + + + + + + +
+ + + +
+ +
+
+ banner main desktop + banner main mobile +
+ +
+
+

Lorem ipsum

+

dolor sit amet

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. + Curabitur ut tortor sed lacus egestas vulputate vel sit amet velit. Nulla suscipit magna dui. +

+
+ banner emoji +
+ +
+ +
+ shop imagem +

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

+
+ +
+ bag imagem +

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

+
+ +
+ coin imagem +

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

+
+
+ + + +
+ +
+ +

+ +

+
+ +
+ +

+ +

+
+ +
+ +

+ +

+
+
+ +

+ +

+
+
+ +
+ + \ No newline at end of file