diff --git a/imagens/Group (1).png b/imagens/Group (1).png new file mode 100644 index 0000000..be01082 Binary files /dev/null and b/imagens/Group (1).png differ diff --git a/imagens/Group (2).png b/imagens/Group (2).png new file mode 100644 index 0000000..60207d8 Binary files /dev/null and b/imagens/Group (2).png differ diff --git a/imagens/Group (3).png b/imagens/Group (3).png new file mode 100644 index 0000000..2013cf8 Binary files /dev/null and b/imagens/Group (3).png differ diff --git a/imagens/Group (4).png b/imagens/Group (4).png new file mode 100644 index 0000000..0abd451 Binary files /dev/null and b/imagens/Group (4).png differ diff --git a/imagens/Group.png b/imagens/Group.png new file mode 100644 index 0000000..c2cdc08 Binary files /dev/null and b/imagens/Group.png differ diff --git a/imagens/Logo-M3Academy 1.svg b/imagens/Logo-M3Academy 1.svg new file mode 100644 index 0000000..698965a --- /dev/null +++ b/imagens/Logo-M3Academy 1.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/imagens/Rectangle 13.png b/imagens/Rectangle 13.png new file mode 100644 index 0000000..cc13ced Binary files /dev/null and b/imagens/Rectangle 13.png differ diff --git a/imagens/Rectangle 15 (2).png b/imagens/Rectangle 15 (2).png new file mode 100644 index 0000000..03e43ac Binary files /dev/null and b/imagens/Rectangle 15 (2).png differ diff --git a/imagens/Rectangle 15.png b/imagens/Rectangle 15.png new file mode 100644 index 0000000..42190a3 Binary files /dev/null and b/imagens/Rectangle 15.png differ diff --git a/imagens/Rectangle 16.png b/imagens/Rectangle 16.png new file mode 100644 index 0000000..f7ed233 Binary files /dev/null and b/imagens/Rectangle 16.png differ diff --git a/imagens/Rectangle 17.png b/imagens/Rectangle 17.png new file mode 100644 index 0000000..1d1cbd6 Binary files /dev/null and b/imagens/Rectangle 17.png differ diff --git a/imagens/Rectangle 9 (2).png b/imagens/Rectangle 9 (2).png new file mode 100644 index 0000000..5118021 Binary files /dev/null and b/imagens/Rectangle 9 (2).png differ diff --git a/imagens/Rectangle 9.png b/imagens/Rectangle 9.png new file mode 100644 index 0000000..08b5be8 Binary files /dev/null and b/imagens/Rectangle 9.png differ diff --git a/imagens/facebook-logo.png b/imagens/facebook-logo.png new file mode 100644 index 0000000..87adee7 Binary files /dev/null and b/imagens/facebook-logo.png differ diff --git a/imagens/fxemoji_threenetworkedcomputers.png b/imagens/fxemoji_threenetworkedcomputers.png new file mode 100644 index 0000000..2af63bd Binary files /dev/null and b/imagens/fxemoji_threenetworkedcomputers.png differ diff --git a/imagens/laptop 1.png b/imagens/laptop 1.png new file mode 100644 index 0000000..66be1e8 Binary files /dev/null and b/imagens/laptop 1.png differ diff --git a/imagens/money (1) 2.png b/imagens/money (1) 2.png new file mode 100644 index 0000000..656f073 Binary files /dev/null and b/imagens/money (1) 2.png differ diff --git a/imagens/shopping-bag (1) 1.png b/imagens/shopping-bag (1) 1.png new file mode 100644 index 0000000..97f8ad4 Binary files /dev/null and b/imagens/shopping-bag (1) 1.png differ diff --git a/imagens/youtube 2.png b/imagens/youtube 2.png new file mode 100644 index 0000000..09d8cd6 Binary files /dev/null and b/imagens/youtube 2.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..9161d25 --- /dev/null +++ b/index.html @@ -0,0 +1,121 @@ + + + + + + + + + + + Desafio 1 - Landing Page + + +
+ Imagem m3 Academy +
+
+
+ imagem de computador + imagem de computador +
+

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.

+
+
+
+ Imagem de tres computadores +
+
+
+ imagem de loja +
+

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

+
+
+
+ imagem de bolsa +
+

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

+
+
+
+ imagem de dinheiro +
+

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

+
+
+
+
+
+
+ imagem de notebook fechado +
+
+ imagem de notebook quase fechado +
+
+
+ imagem de notebook aberto +
+
+
+
+
+ imagem de notebook fechado +
+
+ imagem de notebook quase fechado +
+
+ imagem de notebook aberto +
+
+
+
+
+ imagem de 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.

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

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

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

+
+
+
+
+ imagem de retangulo +

Lorem ipsum dolor sit amet

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate sapien non libero faucibus interdum. In eget tincidunt ipsum. + Quisque a tellus at lectus blandit tempor. Ut tristique auctor mi eget hendrerit. Curabitur venenatis felis vitae sagittis venenatis. + Donec finibus turpis vitae lectus interdum rutrum vitae sed augue.

+ imagem de retangulo + +
+
+ + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..543907e --- /dev/null +++ b/style.css @@ -0,0 +1,358 @@ +body{ + margin: 0; + padding: 0; + border: 0; + font-family: inter; +} +main figure{ + margin-block-start: 0; + margin-block-end: 0; + margin-inline-start: 0; + margin-inline-end: 0; +} +.cabecalho { + background-color: #000000; + text-align: center; +} +.imagemCabecalho { + width: 12%; + height: 42%; + padding-top: 1.4%; + padding-bottom: 1.4%; +} +.imagemCorpoMobile{ + display: none; +} +.imagemCorpoPt1{ + width: 100%; +} +.corpoPt1{ + display: flex; + flex-direction: column; + align-items: center; + margin: 0; +} +.corpoPt1 h2{ + margin-block-start: 0; + margin-block-end: 0; + margin-top: 73px; + line-height: 39px; + font-size: 32px; + text-transform: uppercase; +} +.corpoPt1 h1{ + margin-block-start: 0; + margin-block-end: 0; + font-weight: 500; + font-size: 48px; + text-transform: uppercase; +} +.corpoPt1 p{ + margin-top: 28px; + width: 40%; + font-size: 16px; +} +.corpoPt2{ + margin-top: 73px; + text-align: center; +} +.imagem2{ + width: 16%; +} +.corpoPt3{ + margin-top: 178px; + display: flex; + justify-content: center; + gap: 1%; + margin-bottom: 80px; +} +section figure { + text-align: center; + width: 18%; +} +section figure img{ + width: 29%; +} +section figure figcaption p{ + font-style: normal; + font-size: 16px; + margin-left: 11%; + margin-right: 11%; +} +.quadrado1 { + box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); +} +.quadrado2 { + box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); +} +.quadrado3 { + box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); +} +.quadrado1 img{ + margin-top: 47px; + margin-bottom: 38px; +} +.quadrado2 img{ + margin-top: 35px; + margin-bottom: 31px; +} +.quadrado3 img{ + margin-top: 31px; + margin-bottom: 31px; +} +.corpoPt4{ + background: #E0E0E0; + display: flex; + width: 100%; +} +.corpoPt4Mobile{ + display: none; + background: #E0E0E0; +} +.corpoPt4 div{ + position: relative; + gap: 2%; + display: flex; + flex-direction: row; + justify-content: center; + width: 100%; +} +.corpoPt4 figure { + width: 29%; + position: relative; + top: 70px; +} +.corpoPt4 figure img{ + width: 100%; +} +.corpoPt5{ + margin-top: 129px; + display: flex; + justify-content: center; + gap: 0.8%; +} +.corpoPt5 figure{ + width: 22.5%; + box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15); +} +.corpoPt5 figure p{ + font-size: 16px; + margin-bottom: 65px; +} +.box1 img{ + margin-top: 51px; + width: 24%; +} +.box2 img{ + margin-top: 41px; + width: 24%; +} +.box3 img{ + margin-top: 41px; + width: 24%; +} +.box4 img{ + margin-top: 35px; + width: 20%; +} +.corpoPt6{ + margin-top: 108px; + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +} +.corpoPt6 p{ + font-size: 16px; + width: 28%; + margin-block-start: 0; + margin-block-end: 0; + margin-bottom: 50px; +} +.corpoPt6 h1{ + font-weight: 600; + font-size: 32px; + width: 22%; + margin-block-start: 0; + margin-block-end: 0; +} +.corpoPt6 img{ + width: 71%; +} +.retanguloMobile{ + display: none; +} +footer{ + margin-top: 116px ; + background: #000000; + display: flex; + flex-direction: column; + align-items: center; +} +.divRodape{ + margin-top: 38px; + gap: 21.5px; + width: 5%; +} +.divRodape img{ + width: 23%; +} +.paragrafoRodape{ + color:#BDBDBD; + font-size: 10px; + text-transform: uppercase; + margin-bottom: 38px; +} +@media(max-width:1024px){ + .cabecalho { + height: 101px; + } + .imagemCabecalho{ + margin-top: 18px; + width: 52%; + } + .imagemCorpoMobile{ + display: flex; + width: 100%; + } + .imagemCorpoPt1{ + display: none; + } + .corpoPt1 h2{ + font-size: 20px; + } + .corpoPt1 h1{ + font-size: 28px; + } + .corpoPt1 p{ + text-align: center; + font-size: 16px; + width: 86%; + } + .imagem2{ + width: 58%; + } + .corpoPt3{ + flex-direction: column; + align-items: center; + gap: 24px; + } + section figure { + text-align: center; + width: 84%; + } + .corpoPt4Mobile div figure{ + width: 42%; + } + .corpoPt4Mobile div figure img{ + width: 100%; + } + .corpoPt4Mobile figure{ + width:100%; + background: #E0E0E0; + } + .corpoPt4Mobile figure img{ + width:86%; + } + .corpoPt4{ + display: none; + } + .corpoPt5 figure figcaption p{ + font-size: 14px; + } + .retangulo2{ + order: 1; + } + .retangulo1{ + order: 2; + } + .retangulo3{ + order: 3; + } + .corpoPt5{ + margin-top: 129px; + display: flex; + flex-direction: column; + align-items: center; + gap: 16px; + } + .corpoPt5 figure{ + width: 89%; + } + .divRodape{ + width: 25%; + } + .corpoPt6 p{ + width: 84%; + order: 3; + } + .corpoPt6 h1{ + font-size: 24px; + width: 76%; + order: 2; + } + .corpoPt6 img{ + width: 100%; + order: 1; + height: 414px; + } + .retanguloDesktop{ + display: none; + } + .retanguloMobile{ + display: flex; + margin-bottom: 50px; + } + .corpoPt4Mobile{ + display: flex; + flex-direction: column; + position: relative; + } + .corpoPt4Mobile div{ + background: #E0E0E0; + display: flex; + flex-direction: row; + justify-content: center; + width: 100%; + gap: 2%; + } + .paragrafoRodape{ + width: 63%; + text-align: center; + } +} +@media(min-width: 2500px){ + .corpoPt1 h2{ + font-size: 64px; + margin-bottom: 25px; + } + .corpoPt1 h1{ + font-size: 96px; + } + .corpoPt1 p{ + font-size: 32px; + } + section figure figcaption p{ + font-size: 32px; + } + .corpoPt4 div{ + position: relative; + gap: 2%; + display: flex; + flex-direction: row; + justify-content: center; + width: 100%; + } + .corpoPt5 figure p{ + font-size: 32px; + } + .corpoPt6 p{ + font-size: 32px; + } + .corpoPt6 h1{ + font-size: 64px; + } + .paragrafoRodape{ + font-size: 20px; + } +} \ No newline at end of file