practice-time-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">
  <title>M3 Lading Page</title>
  <link rel="stylesheet" href="main.css">
</head>

  <body>
    <header class="page-header">
      <a href="/">
        <img class="bottom-card-image"  class="header-logo" src="./assest/Logo M3.png" alt="logo M3">
      </a>
    </header>
    <main>
      <section>
        <img class=" main-banner main-banner-desktop" src="./assest/main-banner-desktop.png" alt="Banner Principal Desktop">
        <img class ="main-banner main-banner-mobile" src="./assest/main-banner-mobile.png" alt="Banner Principal mobile">
      </section>

      <section class="top-infocard">
        <div class="top-infocard-text">
          <h2 class="top-inforcard-subtitle">Lorem ipsum</h2>
          <h1 class="top-inforcard-title">dolor sit amet</h1>
          <p class="top-inforcard-description">
            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="top-infocard-image"src="./assest/top-inforcard-image.png" alt="Banner do infocard do Topo">
      </section>
      
      <section class="top-cards">
        <div class="top-card">
          <img class="top-card-image" src="./assest/top-card-image-01.png" alt="Imagem do primeiro card do topo">
          <p class="top-card-description">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. 
          </p>
        </div>
        <div class="top-card">
          <img class="top-card-image" src="./assest/top-card-image-02.png" alt="Imagem do segundo card do topo">
          <p class="top-card-description">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. 
          </p>
        </div>
        <div class="top-card">
          <img class="top-card-image" src="./assest/top-card-image-03.png" alt="Imagem do terceiro card do topo">
          <p class="top-card-description">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. 
          </p>
        </div>
      </section>

      <section>
        <img class=" middle-banner middle-banner-desktop" src="./assest/middle-banner-desktop.png" alt="Banner do meio Desktop">
        <img class ="middle-banner middle-banner-mobile" src="./assest/middle-banner-mobile.png" alt="Banner do meio mobile">
      </section>

      <section class="bottom-cards">
        <div class="bottom-cards-wrapper">
        <div class="bottom-card">
          <img class="bottom-card-image" src="./assest/bottom-card-image-01.png" alt="Imagem do p rimeiro card de Baixo">
          <p class="bottom-card-description">
            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="bottom-card">
          <img class="bottom-card-image" src="./assest/bottom-card-image-02.png" alt="Imagem do segundo card de Baixo">
          <p class="bottom-card-description">
            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="bottom-card">
          <img class="bottom-card-image" src="./assest/bottom-card-image-03.png" alt="Imagem do terceiro card de Baixo">
          <p class="bottom-card-description">
            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="bottom-card">
          <img class="bottom-card-image" src="./assest/bottom-card-image-04.png" alt="Imagem do quarto card de Baixo">
          <p class="bottom-card-description">
            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>

      <section class="bottom-infocard">
       <img class="bottom-infocard-image" src="./assest/bottom-inforcard-image.png" alt="Banner do infocard de baixo">
        <div class="bottom-infocard-text">

          <h2 class="bottom-infocard-title">Lorem ipsum dolor sit amet</h2>
          <p class="bottom-infocard-description">
            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>
    <footer class="page-footer">
      <ul class="footer-icons">
        <li class="footer-icon">
          <a href="#" target="_blank">
            <img src="./assest/instagram-icon.png" alt="icone do Instagram"/>
          </a>
        </li>
        <li class="footer-icon">
          <a href="#" target="_blank">
            <img src="./assest/facebook-icon.png" alt="icone do Facebook"/>
          </a>
        </li>
        <li class="footer-icon">
          <a href="#" target="_blank">
            <img src="./assest/youtube-icon.png" alt="icon do Youtube"/>
          </a> 
        </li>
      </ul>
      <p class="footer-text">Copyright © 2020 - Loja  Comércio Eletrônico CNPJ: 000.000.000/0001-0</p>
  
    </footer>
  </body>
</html>
Cria o header desktop e mobile 2022-10-07 17:58:02 +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">`
			`<title>M3 Lading Page</title>`
			`<link rel="stylesheet" href="main.css">`
			`</head>`

adiciona os banners principais desktop e mobile 2022-10-07 18:32:03 +00:00			`<body>`
			`<header class="page-header">`
			`<a href="/">`
Adiciona os cards de baixo desktop e mobile 2022-10-09 14:37:27 +00:00			`<img class="bottom-card-image" class="header-logo" src="./assest/Logo M3.png" alt="logo M3">`
adiciona os banners principais desktop e mobile 2022-10-07 18:32:03 +00:00			`</a>`
			`</header>`
			`<main>`
			`<section>`
			`<img class=" main-banner main-banner-desktop" src="./assest/main-banner-desktop.png" alt="Banner Principal Desktop">`
			`<img class ="main-banner main-banner-mobile" src="./assest/main-banner-mobile.png" alt="Banner Principal mobile">`
			`</section>`
Adiciona o top inforcard desktop e mobile 2022-10-07 20:18:16 +00:00
			`<section class="top-infocard">`
			`<div class="top-infocard-text">`
			`<h2 class="top-inforcard-subtitle">Lorem ipsum</h2>`
			`<h1 class="top-inforcard-title">dolor sit amet</h1>`
			`<p class="top-inforcard-description">`
			`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="top-infocard-image"src="./assest/top-inforcard-image.png" alt="Banner do infocard do Topo">`
			`</section>`
Adiciona os cards do topo desktop e mobile 2022-10-09 12:31:14 +00:00
			`<section class="top-cards">`
			`<div class="top-card">`
			`<img class="top-card-image" src="./assest/top-card-image-01.png" alt="Imagem do primeiro card do topo">`
			`<p class="top-card-description">`
			`Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.`
			`</p>`
			`</div>`
			`<div class="top-card">`
			`<img class="top-card-image" src="./assest/top-card-image-02.png" alt="Imagem do segundo card do topo">`
			`<p class="top-card-description">`
			`Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.`
			`</p>`
			`</div>`
			`<div class="top-card">`
			`<img class="top-card-image" src="./assest/top-card-image-03.png" alt="Imagem do terceiro card do topo">`
			`<p class="top-card-description">`
			`Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.`
			`</p>`
			`</div>`
			`</section>`
Adiciona os banners para desktop e mobile 2022-10-09 12:59:09 +00:00
			`<section>`
			`<img class=" middle-banner middle-banner-desktop" src="./assest/middle-banner-desktop.png" alt="Banner do meio Desktop">`
			`<img class ="middle-banner middle-banner-mobile" src="./assest/middle-banner-mobile.png" alt="Banner do meio mobile">`
			`</section>`

Adiciona os cards de baixo desktop e mobile 2022-10-09 14:37:27 +00:00			`<section class="bottom-cards">`
			`<div class="bottom-cards-wrapper">`
			`<div class="bottom-card">`
			`<img class="bottom-card-image" src="./assest/bottom-card-image-01.png" alt="Imagem do p rimeiro card de Baixo">`
			`<p class="bottom-card-description">`
			`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="bottom-card">`
			`<img class="bottom-card-image" src="./assest/bottom-card-image-02.png" alt="Imagem do segundo card de Baixo">`
			`<p class="bottom-card-description">`
			`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="bottom-card">`
			`<img class="bottom-card-image" src="./assest/bottom-card-image-03.png" alt="Imagem do terceiro card de Baixo">`
			`<p class="bottom-card-description">`
			`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="bottom-card">`
			`<img class="bottom-card-image" src="./assest/bottom-card-image-04.png" alt="Imagem do quarto card de Baixo">`
			`<p class="bottom-card-description">`
			`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>`

Adiciona o bottom infocard desktop e mobile 2022-10-09 15:25:26 +00:00			`<section class="bottom-infocard">`
			`<img class="bottom-infocard-image" src="./assest/bottom-inforcard-image.png" alt="Banner do infocard de baixo">`
			`<div class="bottom-infocard-text">`
Adicionando icones no rodapé 2022-10-09 16:00:32 +00:00
Adiciona o bottom infocard desktop e mobile 2022-10-09 15:25:26 +00:00			`<h2 class="bottom-infocard-title">Lorem ipsum dolor sit amet</h2>`
			`<p class="bottom-infocard-description">`
			`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>`

adiciona os banners principais desktop e mobile 2022-10-07 18:32:03 +00:00			`</main>`
Adicionando icones no rodapé 2022-10-09 16:00:32 +00:00			`<footer class="page-footer">`
			`<ul class="footer-icons">`
			`<li class="footer-icon">`
			`<a href="#" target="_blank">`
			`<img src="./assest/instagram-icon.png" alt="icone do Instagram"/>`
			`</a>`
			`</li>`
			`<li class="footer-icon">`
			`<a href="#" target="_blank">`
			`<img src="./assest/facebook-icon.png" alt="icone do Facebook"/>`
			`</a>`
			`</li>`
			`<li class="footer-icon">`
			`<a href="#" target="_blank">`
			`<img src="./assest/youtube-icon.png" alt="icon do Youtube"/>`
			`</a>`
			`</li>`
			`</ul>`
			`<p class="footer-text">Copyright © 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-0</p>`

			`</footer>`
adiciona os banners principais desktop e mobile 2022-10-07 18:32:03 +00:00			`</body>`
Cria o header desktop e mobile 2022-10-07 17:58:02 +00:00			`</html>`