trabalho pratico pronto

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){
+    
+}

index.html

@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Pratica 001 - M3 Academy </title>
+    <link rel="stylesheet" href="/css usados/index.css">
+</head>
+<body>
+    <!--parte preta com o simbolo da M3, "cabeçario"-->
+    <header>    
+        <a href="index.html">
+            <img class="logom3" src="imagens/Logo M3 [branco] (4) 1.png" alt="Logo M3 ">
+        </a>
+    </header>
+    <!--Parte do conteudo principal da Page-->
+    <main> 
+        <!-- 1° bloco (section) -Imagem principal, computador encima da mesa-->
+        <section>
+            <img class="imagemcomputador" src="imagens/Rectangle 9.jpg" alt="Imagem computador encima da mesa">
+            <img class="imagemcomputadorpequena" src="imagens/Imagem principal pequena.png" alt="Imagem computador encima da mesa pequena ">
+        </section>
+        <!--2° bloco, Descrição e a imagem dos 3 computadores ao lado-->
+        <section class="info2bloco">
+            <!--div não é semantico, usava somente p ajuda a organizar o css-->
+                <div class="texto2bloco"> 
+                    <h2 class="escrito2bloco">Lorem Ipsum</h2>
+                    <h1 class="escritog2bloco">Dolor sit amet</h1>
+                    <p class="p2bloco">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. </p>
+                </div>
+                <img class="imagem3pc" src="imagens/Imagem 3 computadores.png" alt="Imagem 3 computadores">
+                <img class="imagem3pcpq" src="imagens/Imagem 3 computadores pequeno.png" alt="imagem 3 computadores pequeno">
+        </section>
+        <!--3° bloco, sessão dos 3 quadrados com informaçoes-->
+        <section class="bloco3">
+            <!--Cada div é referente a um quadradinho-->
+            <div class="quadradosbloco3">
+                <img class="imgbloco3" src="imagens/imagem lojinha.png" alt="loginha">
+                <p class="descriçãobloco3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
+            </div>
+            <div class="quadradosbloco3">
+                <img class="imgbloco3" src="imagens/imagem sacolinha.png" alt="sacolinha">
+                <p class="descriçãobloco3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
+            </div>
+            <div class="quadradosbloco3">
+                <img class="imgbloco3" src="imagens/imagem mão com dinheiro.png" alt="mao com dinheiro">
+                <p class="descriçãobloco3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
+            </div>
+        </section>
+        <!--4° bloco, imagem do notebook meio aberto-->
+        <section class="bloco4">
+            <img class="imgbloco4" src="imagens/imagem notebook meio aberto.png" alt="Imagem notebook meio aberto">
+            <img class="imgbloco4pq" src="imagens/imagem notebook meio aberto pequeno.png" alt="Imagem noteboook meio aberto">
+        </section>
+        <!--5° bloco, os "buttos"-->
+        <section class="bloco05-buttoes">
+            <!--Div inglobando todos os buttões, patra fazer o efeito de deslocamento no css-->
+            <div class="deslocamentobloco5">
+                <!-- Cada Div representa 1 "button"-->
+                <div class="buttoes">
+                    <img class="imgbuttons" src="imagens/money (1).png" alt="notinha de dinheiro">
+                    <p class="textobuttons">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.</p>
+                </div>
+                <div class="buttoes">
+                    <img class="imgbuttons" src="imagens/laptop 1.png" alt="notebook">
+                    <p class="textobuttons">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.</p>
+                </div>
+                <div class="buttoes">
+                    <img class="imgbuttons" src="imagens/imagem mão com dinheiro.png" alt="mãozinha com dinheiro">
+                    <p class="textobuttons">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.</p>
+                </div>
+                <div class="buttoes">
+                    <img class="imgbuttons" src="imagens/telefonezinho.png" alt="telefonezinho">
+                    <p class="textobuttons">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.</p>
+                </div>
+            </div>     
+        </section>
+        <!--6° bloco, imagem do oculos e texto-->
+        <section class="bloco06">
+            <img class="imgbloco06" src="imagens/imagem oculos grande.png" alt="">
+            <img class="imgbloco06pq"  src="imagens/imagem oculos pequeno.png" alt="">
+            <div class="textobloco06">
+                <h2 class="titulobloco06">Lorem ipsum dolor sit amet </h2>
+                <p class="subtitulobloco06">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.</p>
+            </div>
+        </section>
+    </main>
+    <!-- Final da pagina.-->
+    <footer>
+        <!--faixa preta com links p as redes sociais e informações-->
+        <section class="faixafinal">
+            <ul class="icones">
+                <li>
+                    <a href="index.html">
+                        <img class="imgicon" src="imagens/instagram icone.png" alt="Instagram icone">
+                    </a>
+                </li>
+                <li>
+                    <a href="index.html">
+                        <img class="imgicon" src="imagens/facebook icone.png" alt="Facebook icone">
+                    </a>
+                </li>
+                <li>
+                    <a href="index.html">
+                        <img class="imgicon" src="imagens/youtube icone.png" alt="you tube icone">
+                    </a>
+                </li>    
+            </ul>
+            <p class="textofinal">
+                Copyright © 2020 - Loja  Comércio Eletrônico | CNPJ: 000.000.000/0001-00
+            </p>
+        </section>
+    </footer>
+</body>
+</html>