challenge-landing-page/index.html

<!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">
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap" rel="stylesheet">
    <title>M3</title>
</head>
<body>
       <header>
        <figure class="logo">
               <a href="/">
                   <img class="m3" src="imagens/Logo-M3Academy 1.svg" alt="Logo-M3Academy" width="100%">
               </a>
        </figure>
       </header>
       <main>
          <figure>
                  <img src="imagens/Rectangle 9 (6).png" alt="imagem de computador" width="100%">
         </figure>
                       <div class="texto1">
                           <h3>Lorem ipsum</h3> 

                           <p class="sub-titulo"> dolor sit amet</p>

                          <p class="paragrafo1">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. 
                      </div>

             <figure class="pcs">
                    <img src="imagens/fxemoji_threenetworkedcomputers (2).png" width="33%" alt="imagem com três computadores">
             </figure>

                 <section class="card-compra">
                           
                         <div class="card">
                                  <img src="imagens/cesto.png" alt="imagem de um cesto">

                                   <figcaption>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
                                   </figcaption>
                         </div>

                         <div class="card">
                                   <img src="imagens/sacola.png" alt="imagem de uma sacola">

                                   <figcaption>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
                                   </figcaption>
                        </div>

                        <div class="card">
                                <img src="imagens/moeda.png" alt="imagem de uma mão pegando moeda">

                                <figcaption>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
                                   </figcaption>
                        </div>

                 </section>

                   <div class="fundo-cinza">

                    <div class="notebooks">

                   
                        <img src="imagens/fundopc1.png" alt="imagem de computador" width="29.88%">
                        <img src="imagens/fundopc2.png" alt="imagem de computador" width="29.88%">
                        <img src="imagens/fundopc3.png" alt="imagem de computador" width="29.88%">
    
    
                    </div>
    
    
                   </div>

                 <section class="card-compra">
                       <div class="cards">
                                 <img src="imagens/dinheiro.png" alt="imagem de dinheiro">

                                 <figcaption>
                                 <p>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>
                                 </figcaption>
                       </div>
                       <div class="cards">
                            <img src="imagens/moeda.png" alt="imagem de uma mão pegando moeda">
                            <figcaption>
                                <p>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>
                                </figcaption>
                       </div>
                       <div class="cards">
                                <img src="imagens/laptop.png" alt="imagem de um laptop">
                                <figcaption>
                                    <p>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>
                                    </figcaption>
                       </div>
                       <div class="cards">
                                <img src="imagens/celular (1).png" alt="imagem de celular">

                                <figcaption>
                                    <p>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>
                                    </figcaption>
                       </div>
                 </section>

      <article>

          <div class="artigo">
            <h4>Lorem ipsum dolor sit amet</h4>
             
            <p>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>

            </article>

            <figure style="text-align:center; margin-top: -160px;">
                  <img src="imagens/imagem_desfocada.png" alt="imagem borrada" srcset="" width="70%">
            </figure>

             <footer class="footer">
                     <nav class="redes-sociais">
                        <div class="centralizar">
                        <a href="/">
                              <img src="imagens/Group (2).png" alt="logo instragan">
                        </a> 
                        <a href="/">
                              <img src="imagens/facebook-logo.png" alt="logo facebook">
                        </a> 
                        <a href="/">
                              <img src="imagens/youtube 2.png" alt="logo youtube">
                        </a> 
                        </div>

                        <div>
                            <p>Copyright © 2020 - Loja  Comércio Eletrônico CNPJ: 000.000.000/0001-00
                          </p>
                         </div>
                    </nav>
                      
                    
             </footer>
                
                  
        </main>


</body>
</html>
feat(primeiro commit) finalizando header 2022-10-10 20:38:20 +00:00			`<!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">`
			`<link rel="stylesheet" href="style.css">`
feat(adiciona a foto do notebok e os 3 computadores com um texto entre eles) 2022-10-11 01:57:34 +00:00			`<link rel="preconnect" href="https://fonts.googleapis.com">`
			`<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>`
			`<link href="https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap" rel="stylesheet">`
feat(primeiro commit) finalizando header 2022-10-10 20:38:20 +00:00			`<title>M3</title>`
			`</head>`
			`<body>`
			`<header>`
			`<figure class="logo">`
			`<a href="/">`
feat(adiciona a foto do notebok e os 3 computadores com um texto entre eles) 2022-10-11 01:57:34 +00:00			`<img class="m3" src="imagens/Logo-M3Academy 1.svg" alt="Logo-M3Academy" width="100%">`
feat(primeiro commit) finalizando header 2022-10-10 20:38:20 +00:00			`</a>`
			`</figure>`
			`</header>`
feat(adiciona a foto do notebok e os 3 computadores com um texto entre eles) 2022-10-11 01:57:34 +00:00			`<main>`
			`<figure>`
			`<img src="imagens/Rectangle 9 (6).png" alt="imagem de computador" width="100%">`
			`</figure>`
			`<div class="texto1">`
			`<h3>Lorem ipsum</h3>`

			`<p class="sub-titulo"> dolor sit amet</p>`

			`<p class="paragrafo1">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.`
			`</div>`

			`<figure class="pcs">`
feat(adiciona novas imagens em posicionamento central com texto e as imagens dos 3 notebooks com fundo cinza) 2022-10-12 00:51:15 +00:00			`<img src="imagens/fxemoji_threenetworkedcomputers (2).png" width="33%" alt="imagem com três computadores">`
feat(adiciona a foto do notebok e os 3 computadores com um texto entre eles) 2022-10-11 01:57:34 +00:00			`</figure>`

feat(adiciona novas imagens em posicionamento central com texto e as imagens dos 3 notebooks com fundo cinza) 2022-10-12 00:51:15 +00:00			`<section class="card-compra">`

			`<div class="card">`
			`<img src="imagens/cesto.png" alt="imagem de um cesto">`
feat(adiciona a foto do notebok e os 3 computadores com um texto entre eles) 2022-10-11 01:57:34 +00:00
feat(adiciona novas imagens em posicionamento central com texto e as imagens dos 3 notebooks com fundo cinza) 2022-10-12 00:51:15 +00:00			`<figcaption>`
			`<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>`
			`</figcaption>`
			`</div>`

			`<div class="card">`
			`<img src="imagens/sacola.png" alt="imagem de uma sacola">`

			`<figcaption>`
			`<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>`
			`</figcaption>`
			`</div>`

			`<div class="card">`
			`<img src="imagens/moeda.png" alt="imagem de uma mão pegando moeda">`

			`<figcaption>`
			`<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>`
			`</figcaption>`
			`</div>`

			`</section>`

			`<div class="fundo-cinza">`

			`<div class="notebooks">`


			`<img src="imagens/fundopc1.png" alt="imagem de computador" width="29.88%">`
			`<img src="imagens/fundopc2.png" alt="imagem de computador" width="29.88%">`
			`<img src="imagens/fundopc3.png" alt="imagem de computador" width="29.88%">`


			`</div>`



			`</div>`

feat(adiciona os ultimos 4 cards e o footer finalizando com isso a home desktop) 2022-10-12 03:52:24 +00:00			`<section class="card-compra">`
			`<div class="cards">`
			`<img src="imagens/dinheiro.png" alt="imagem de dinheiro">`

			`<figcaption>`
			`<p>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>`
			`</figcaption>`
			`</div>`
			`<div class="cards">`
			`<img src="imagens/moeda.png" alt="imagem de uma mão pegando moeda">`
			`<figcaption>`
			`<p>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>`
			`</figcaption>`
			`</div>`
			`<div class="cards">`
			`<img src="imagens/laptop.png" alt="imagem de um laptop">`
			`<figcaption>`
			`<p>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>`
			`</figcaption>`
			`</div>`
			`<div class="cards">`
			`<img src="imagens/celular (1).png" alt="imagem de celular">`

			`<figcaption>`
			`<p>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>`
			`</figcaption>`
			`</div>`
			`</section>`

			`<article>`

			`<div class="artigo">`
			`<h4>Lorem ipsum dolor sit amet</h4>`

			`<p>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>`

			`</article>`

			`<figure style="text-align:center; margin-top: -160px;">`
			`<img src="imagens/imagem_desfocada.png" alt="imagem borrada" srcset="" width="70%">`
			`</figure>`

			`<footer class="footer">`
			`<nav class="redes-sociais">`
			`<div class="centralizar">`
			`<a href="/">`
			`<img src="imagens/Group (2).png" alt="logo instragan">`
			`</a>`
			`<a href="/">`
			`<img src="imagens/facebook-logo.png" alt="logo facebook">`
			`</a>`
			`<a href="/">`
			`<img src="imagens/youtube 2.png" alt="logo youtube">`
			`</a>`
			`</div>`

			`<div>`
			`<p>Copyright © 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-00`
			`</p>`
			`</div>`
			`</nav>`


			`</footer>`
feat(adiciona novas imagens em posicionamento central com texto e as imagens dos 3 notebooks com fundo cinza) 2022-10-12 00:51:15 +00:00

feat(adiciona a foto do notebok e os 3 computadores com um texto entre eles) 2022-10-11 01:57:34 +00:00			`</main>`

feat(adiciona novas imagens em posicionamento central com texto e as imagens dos 3 notebooks com fundo cinza) 2022-10-12 00:51:15 +00:00
feat(primeiro commit) finalizando header 2022-10-10 20:38:20 +00:00			`</body>`
			`</html>`