diff --git a/css usados/index.css b/css usados/index.css new file mode 100644 index 0000000..2faab32 --- /dev/null +++ b/css usados/index.css @@ -0,0 +1,327 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} +header{ + background: black; + display: flex; + justify-content: center; + padding: 28px 0px; +} +.logom3{ + display:block; +} +.imagemcomputador{ + display: block; + width: 100%; +} +.imagemcomputadorpequena{ + display: none; +} +.info2bloco{ + display: flex; + align-items: center; + justify-content: center; + padding: 80px 0px 96px; +} +.texto2bloco{ + margin-right: 124px; + max-width: 766px; +} +.imagem3pc{ + display: block; +} +.imagem3pcpq{ + display: none; +} +.escrito2bloco{ + font-family: 'Inter'; + font-weight: 400; + font-size: 32px; + text-transform: uppercase; +} +.escritog2bloco{ + font-family: 'Inter'; + font-weight: 500; + font-size: 48px; + text-transform: uppercase; +} +.p2bloco{ + font-family: 'Inter'; + font-weight: 400; + font-size: 16px; +} +.bloco3{ + padding: 74px 0; + background: #F0F0F0; + display: grid; + grid-template-columns: repeat(3, max-content); + gap: 20px; + justify-content: center; + +} +.quadradosbloco3{ + padding: 34px 26px 28px; + display: flex; + flex-direction: column; + align-items: center; + background: #FFFFFF; + box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); +} +.imgbloco3{ + display: block; + margin-bottom: 26px; +} +.descriçãobloco3{ + padding: 0 26px 0; + max-width: 300px; + font-family: 'Inter'; + font-weight: 400; + font-size: 16px; + line-height: 24px; + text-align: center; + color: black; +} +.imgbloco4{ + display: block; + width: 100%; +} +.imgbloco4pq{ + display: none; +} +.bloco05-buttoes{ + margin-top: 144px; + background: linear-gradient(180deg, #00C8FF 0%, #15ACD6 100%); +} +.deslocamentobloco5{ + display: grid; + grid-template-columns: repeat(2, max-content); + justify-content: center; + grid-gap: 20px; + position: relative; + top: -62px; +} +.buttoes{ + padding: 36px 32px 66px; + display: flex; + flex-direction: column; + align-items: center; + background: #FFFFFF; + box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15); +} +.imgbuttons{ + display: block; + margin-bottom: 14px; +} +.textobuttons{ + max-width: 368px; + text-align: center; + color: black; + font-family: 'Inter'; + font-weight: 400; + font-size: 16px; + line-height: 24px; + max-width: 368px; +} +.bloco06{ + display: flex; + align-items: center; + justify-content: center; + padding: 140px 0 180px; +} +.imgbloco06{ + display: block; + margin-right: 40px; +} +.imgbloco06pq{ + display: none; +} +.textobloco06{ + max-width: 550px; +} +.titulobloco06{ + font-family: 'Inter'; + font-weight: 600; + font-size: 32px; + line-height: 20px; + color: black; + margin-bottom: 18px; +} +.subtitulobloco06{ + font-family: 'Inter'; + font-weight: 400; + font-size: 16px; + line-height: 24px; + color: black; +} + +footer{ + padding: 38px 76px 26px; + background: black; + height: 128px; + width: 100%; + +} +.faixafinal{ + display: flex; + flex-direction: column; + align-items: center; +} +.icones{ + display: flex; + list-style: none; +} +.imgicon{ + margin-right: 16px; + margin-bottom: 16px; +} +.textofinal{ + font-family: 'Inter'; + font-weight: 400; + font-size: 10px; + line-height: 12px; + text-transform: uppercase; + color: #BDBDBD; +} + +@media screen and (max-width: 414px){ + .imagemcomputador{ + display: none; + } + .imagemcomputadorpequena{ + display: block; + width: 100%; + } + .imgbloco4{ + display: none; + } + .imgbloco4pq{ + display: block; + width: 100%; + } + +} + +@media screen and (max-width: 882px){ + .bloco05-buttoes{ + margin-top: 125px; + } + .deslocamentobloco5{ + grid-template-columns: 1fr; + gap: 16px; + padding: 0px 24px; + margin-top: 54px; + } + .textobuttons{ + font-size: 14px; + } + .bloco06{ + display: flex; + flex-direction:column; + align-items: center; + justify-content: center; + padding: 80px 0 416px; + } + .imgbloco06{ + display: none; + } + .imgbloco06pq{ + display: block; + width: 100%; + margin-bottom: 50px; + } + .textobloco06{ + max-width: 350px; + } + .titulobloco06{ + font-size: 24px; + } + .subtitulobloco06{ + font-family: 'Inter'; + font-weight: 400; + font-size: 16px; + line-height: 24px; + color: black; + } +} + + +@media screen and (max-width: 1108px){ + .bloco3{ + padding: 37px 32px 54px; + background: #F0F0F0; + display: grid; + grid-template-columns: 1fr; + gap: 20px; + justify-content: center;} +} + + + +@media screen and (max-width: 1024px){ + .imagem3pc{ + display: none; + } + .imagem3pcpq{ + display: block; + } + .info2bloco{ + padding: 84px 28px 158px; + display: flex; + align-items: center; + justify-content: center; + padding: 80px 0px 96px; + flex-direction: column; + } + .texto2bloco{ + margin-right: 0px; + margin: 0 0 68px; + } + .escrito2bloco{ + font-size: 20px ; + } + .escritog2bloco{ + margin-bottom: 20px; + font-size: 28px; + } +} + +@media screen and (min-width: 1550px){ + .texto2bloco{ + margin-right: 140px; + max-width: 1000px; + } + .escrito2bloco{ + font-family: 'Inter'; + font-weight: 400; + font-size: 45px; + text-tgitransform: uppercase; + } + .escritog2bloco{ + font-family: 'Inter'; + font-weight: 500; + font-size: 65px; + text-transform: uppercase; + } + .p2bloco{ + font-family: 'Inter'; + font-weight: 400; + font-size: 30px; + } + .quadradosbloco3{ + width: 500px; + } + .imgbloco3{ + display: block; + margin-bottom: 26px; + } + .descriçãobloco3{ + max-width: 450px; + font-size: 25px; + } +} + +@media screen and (min-width: 1900){ + +} \ No newline at end of file diff --git a/imagens/Imagem 3 computadores pequeno.png b/imagens/Imagem 3 computadores pequeno.png new file mode 100644 index 0000000..775ba3b Binary files /dev/null and b/imagens/Imagem 3 computadores pequeno.png differ diff --git a/imagens/Imagem 3 computadores.png b/imagens/Imagem 3 computadores.png new file mode 100644 index 0000000..27b2d67 Binary files /dev/null and b/imagens/Imagem 3 computadores.png differ diff --git a/imagens/Imagem principal pequena.png b/imagens/Imagem principal pequena.png new file mode 100644 index 0000000..81e8d6c Binary files /dev/null and b/imagens/Imagem principal pequena.png differ diff --git a/imagens/Logo M3 [branco] (4) 1.png b/imagens/Logo M3 [branco] (4) 1.png new file mode 100644 index 0000000..dbbf68c Binary files /dev/null and b/imagens/Logo M3 [branco] (4) 1.png differ diff --git a/imagens/Rectangle 9.jpg b/imagens/Rectangle 9.jpg new file mode 100644 index 0000000..a7b1760 Binary files /dev/null and b/imagens/Rectangle 9.jpg differ diff --git a/imagens/facebook icone.png b/imagens/facebook icone.png new file mode 100644 index 0000000..1906e3f Binary files /dev/null and b/imagens/facebook icone.png differ diff --git a/imagens/imagem lojinha.png b/imagens/imagem lojinha.png new file mode 100644 index 0000000..dff5293 Binary files /dev/null and b/imagens/imagem lojinha.png differ diff --git a/imagens/imagem mão com dinheiro.png b/imagens/imagem mão com dinheiro.png new file mode 100644 index 0000000..14dc92a Binary files /dev/null and b/imagens/imagem mão com dinheiro.png differ diff --git a/imagens/imagem notebook meio aberto pequeno.png b/imagens/imagem notebook meio aberto pequeno.png new file mode 100644 index 0000000..6a1c8c3 Binary files /dev/null and b/imagens/imagem notebook meio aberto pequeno.png differ diff --git a/imagens/imagem notebook meio aberto.png b/imagens/imagem notebook meio aberto.png new file mode 100644 index 0000000..553a0fb Binary files /dev/null and b/imagens/imagem notebook meio aberto.png differ diff --git a/imagens/imagem oculos grande.png b/imagens/imagem oculos grande.png new file mode 100644 index 0000000..7c83515 Binary files /dev/null and b/imagens/imagem oculos grande.png differ diff --git a/imagens/imagem oculos pequeno.png b/imagens/imagem oculos pequeno.png new file mode 100644 index 0000000..da215cf Binary files /dev/null and b/imagens/imagem oculos pequeno.png differ diff --git a/imagens/imagem sacolinha.png b/imagens/imagem sacolinha.png new file mode 100644 index 0000000..d4c3145 Binary files /dev/null and b/imagens/imagem sacolinha.png differ diff --git a/imagens/instagram icone.png b/imagens/instagram icone.png new file mode 100644 index 0000000..76c0f44 Binary files /dev/null and b/imagens/instagram icone.png differ diff --git a/imagens/laptop 1.png b/imagens/laptop 1.png new file mode 100644 index 0000000..c9cb5c3 Binary files /dev/null and b/imagens/laptop 1.png differ diff --git a/imagens/money (1).png b/imagens/money (1).png new file mode 100644 index 0000000..6261ef8 Binary files /dev/null and b/imagens/money (1).png differ diff --git a/imagens/telefonezinho.png b/imagens/telefonezinho.png new file mode 100644 index 0000000..af49319 Binary files /dev/null and b/imagens/telefonezinho.png differ diff --git a/imagens/youtube icone.png b/imagens/youtube icone.png new file mode 100644 index 0000000..8c84747 Binary files /dev/null and b/imagens/youtube icone.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..1ab5015 --- /dev/null +++ b/index.html @@ -0,0 +1,116 @@ + + + + + + + Pratica 001 - M3 Academy + + + + +
+ + Logo M3 + +
+ +
+ +
+ Imagem computador encima da mesa + Imagem computador encima da mesa pequena +
+ +
+ +
+

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 3 computadores + imagem 3 computadores pequeno +
+ +
+ +
+ loginha +

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

+
+
+ sacolinha +

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

+
+
+ mao com dinheiro +

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

+
+
+ +
+ Imagem notebook meio aberto + Imagem noteboook meio aberto +
+ +
+ +
+ +
+ notinha 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.

+
+
+ notebook +

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.

+
+
+ mãozinha com 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.

+
+
+ telefonezinho +

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.

+
+
+
+ +
+ + +
+

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.

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