challenge-landing-page-guil.../index.html

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        
    <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 Academy Landing Page</title>

    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="./assets/style/main.css">
</head>
<body>
    <header class="page-header">
        <a href="/">
            <img class="header-logo" src="./assets/images/logo-m3academy.svg" alt="Logo M3 Academy">
        </a>
    </header>

    <main>
        <section>
            <img class="main-banner main-banner-desktop" src="./assets/images/main-banner-desktop.png" alt="Banner principal desktop">
            <img class="main-banner main-banner-mobile" src="./assets/images/main-banner-mobile.png" alt="Banner principal mobile">
        </section>

        <section class="top-infocard">
            <div class="top-infocard-text">
                <h2 class="top-infocard-subtitle">Lorem ipsum</h2>

                <h1 class="top-infocard-title">dolor sit amet</h1>

                <p class="top-infocard-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="./assets/images/top-infocard-image.png" alt="Imagem do infocard do topo">
        </section>

        <section class="top-cards">
            <div class="top-card">
                <img class="top-card-image" src="./assets/images/top-card-image-01.png" alt="Imagem 01 do 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="./assets/images/top-card-image-02.png" alt="Imagem 02 do 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="./assets/images/top-card-image-03.png" alt="Imagem do 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 class="middle-cards">
            <div class="middle-cards-wrapper">
                <div class="middle-cards-2">
                    <div class="middle-card">
                        <img class="middle-card-image" src="./assets/images/middle-card-image-01.png" alt="">
                    </div>
                    
                    <div class="middle-card">
                        <img class="middle-card-image" src="./assets/images/middle-card-image-02.png" alt="">
                    </div>
                </div>
                
                    <div class="middle-card">
                        <img class="middle-card-image" src="./assets/images/middle-card-image-03.png" alt="">
                    </div>
            </div>
        </section>
        
        <section class="bottom-cards">
            <div class="bottom-card">
                <img class="bottom-card-image" src="./assets/images/bottom-card-image-01.png" alt="Imagem 01 do 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="./assets/images/bottom-card-image-02.png" alt="Imagem 02 do 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="./assets/images/bottom-card-image-03.png" alt="Imagem 03 do 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="./assets/images/bottom-card-image-04.png" alt="Imagem 04 do 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>

        </section>

        <section class="bottom-infocard">
            
            <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. 
                </p>

                <p class="bottom-infocard-description">
                    Quisque  a tellus at lectus blandit tempor. Ut tristique auctor mi eget hendrerit. Curabitur venenatis felis vitae sagittis venenatis.
                </p>
                
                <p class="bottom-infocard-description">  
                    Donec finibus turpis vitae lectus interdum rutrum vitae sed augue.
                </p>
            </div>

            <img class="bottom-infocard-image bottom-infocard-image-desktop" src="./assets/images/bottom-infocard-image-desktop.png" alt="Imagem do infocard de baixo desktop">
            <img class="bottom-infocard-image bottom-infocard-image-mobile" src="./assets/images/bottom-infocard-image-mobile.png" alt="Imagem do infocard de baixo mobile">
        </section>
    </main>

    <footer class="page-footer">
         <ul class="footer-icons">
            <li class="footer-icon">
                <a href="#" target="_blank">
                    <img src="./assets/images/instagram-icon.png" alt="Ícone do Instagram">
                </a>
            </li>
            
            <li class="footer-icon">
                <a href="#" target="_blank">
                    <img src="./assets/images/facebook-icon.png" alt="Ícone do Facebook">
                </a>
            </li>
            
            <li class="footer-icon">
                <a href="#" target="_blank">
                    <img src="./assets/images/youtube-icon.png" alt="Ícone do Youtube">
                </a>
            </li>
        </ul>

        <p class="footer-text">Copyright © 2020 - Loja  Comércio Eletrônico CNPJ: 000.000.000/0001-00
        </p>
    </footer>
</body>
</html>
Adiciona arquivos iniciais 2022-10-12 21:03:13 +00:00			`<!DOCTYPE html>`
			`<html lang="pt-BR">`
			`<head>`
Adiciona infocard do topo desktop 2022-10-13 00:24:27 +00:00			`<link rel="preconnect" href="https://fonts.googleapis.com">`
			`<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>`

Adiciona arquivos iniciais 2022-10-12 21:03:13 +00:00			`<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 Academy Landing Page</title>`

Adiciona infocard do topo desktop 2022-10-13 00:24:27 +00:00			`<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">`

Renomeia pasta 'assests' para 'assets' 2022-10-13 12:07:07 +00:00			`<link rel="stylesheet" href="./assets/style/main.css">`
Adiciona arquivos iniciais 2022-10-12 21:03:13 +00:00			`</head>`
			`<body>`
Adiciona o header desktop e mobile 2022-10-12 21:18:36 +00:00			`<header class="page-header">`
Adiciona infocard do topo desktop 2022-10-13 00:24:27 +00:00			`<a href="/">`
Renomeia pasta 'assests' para 'assets' 2022-10-13 12:07:07 +00:00			`<img class="header-logo" src="./assets/images/logo-m3academy.svg" alt="Logo M3 Academy">`
Adiciona infocard do topo desktop 2022-10-13 00:24:27 +00:00			`</a>`
Adiciona arquivos iniciais 2022-10-12 21:03:13 +00:00			`</header>`

Adiciona o banner principal desktop 2022-10-12 21:29:09 +00:00			`<main>`
			`<section>`
Renomeia pasta 'assests' para 'assets' 2022-10-13 12:07:07 +00:00			`<img class="main-banner main-banner-desktop" src="./assets/images/main-banner-desktop.png" alt="Banner principal desktop">`
			`<img class="main-banner main-banner-mobile" src="./assets/images/main-banner-mobile.png" alt="Banner principal mobile">`
Adiciona o banner principal desktop 2022-10-12 21:29:09 +00:00			`</section>`
Adiciona infocard do topo desktop 2022-10-13 00:24:27 +00:00
			`<section class="top-infocard">`
			`<div class="top-infocard-text">`
			`<h2 class="top-infocard-subtitle">Lorem ipsum</h2>`

			`<h1 class="top-infocard-title">dolor sit amet</h1>`

			`<p class="top-infocard-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>`

Renomeia pasta 'assests' para 'assets' 2022-10-13 12:07:07 +00:00			`<img class="top-infocard-image" src="./assets/images/top-infocard-image.png" alt="Imagem do infocard do topo">`
Adiciona infocard do topo desktop 2022-10-13 00:24:27 +00:00			`</section>`
Adiciona os cards do topo desktop 2022-10-13 01:46:19 +00:00
			`<section class="top-cards">`
			`<div class="top-card">`
Atualiza a responsividade do conteudo desktop e mobile 2022-10-13 18:38:14 +00:00			`<img class="top-card-image" src="./assets/images/top-card-image-01.png" alt="Imagem 01 do card do topo">`
Adiciona os cards do topo desktop 2022-10-13 01:46:19 +00:00
			`<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">`
Atualiza a responsividade do conteudo desktop e mobile 2022-10-13 18:38:14 +00:00			`<img class="top-card-image" src="./assets/images/top-card-image-02.png" alt="Imagem 02 do card do topo">`
Adiciona os cards do topo desktop 2022-10-13 01:46:19 +00:00
			`<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">`
Atualiza a responsividade do conteudo desktop e mobile 2022-10-13 18:38:14 +00:00			`<img class="top-card-image" src="./assets/images/top-card-image-03.png" alt="Imagem do card do topo">`
Adiciona os cards do topo desktop 2022-10-13 01:46:19 +00:00
			`<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 cards de imagens do meio 2022-10-13 02:44:53 +00:00
			`<section class="middle-cards">`
			`<div class="middle-cards-wrapper">`
WIP atualiza a responsividade da página 2022-10-13 20:16:10 +00:00			`<div class="middle-cards-2">`
			`<div class="middle-card">`
			`<img class="middle-card-image" src="./assets/images/middle-card-image-01.png" alt="">`
			`</div>`

			`<div class="middle-card">`
			`<img class="middle-card-image" src="./assets/images/middle-card-image-02.png" alt="">`
			`</div>`
Adiciona os cards de imagens do meio 2022-10-13 02:44:53 +00:00			`</div>`

WIP atualiza a responsividade da página 2022-10-13 20:16:10 +00:00			`<div class="middle-card">`
			`<img class="middle-card-image" src="./assets/images/middle-card-image-03.png" alt="">`
			`</div>`
Adiciona os cards de imagens do meio 2022-10-13 02:44:53 +00:00			`</div>`
			`</section>`
Adiciona os cards de baixo desktop 2022-10-13 12:45:53 +00:00
			`<section class="bottom-cards">`
			`<div class="bottom-card">`
			`<img class="bottom-card-image" src="./assets/images/bottom-card-image-01.png" alt="Imagem 01 do 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="./assets/images/bottom-card-image-02.png" alt="Imagem 02 do 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="./assets/images/bottom-card-image-03.png" alt="Imagem 03 do 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="./assets/images/bottom-card-image-04.png" alt="Imagem 04 do 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>`

			`</section>`
Adiciona o infocard de baixo 2022-10-13 13:10:15 +00:00
			`<section class="bottom-infocard">`

			`<div class="bottom-infocard-text">`
			`<h2 class="bottom-infocard-title">Lorem ipsum dolor sit amet</h2>`
Atualiza a responsividade do conteudo desktop e mobile 2022-10-13 18:38:14 +00:00
Adiciona o infocard de baixo 2022-10-13 13:10:15 +00:00			`<p class="bottom-infocard-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate sapien non libero faucibus interdum. In eget tincidunt ipsum.`
			`</p>`

			`<p class="bottom-infocard-description">`
			`Quisque a tellus at lectus blandit tempor. Ut tristique auctor mi eget hendrerit. Curabitur venenatis felis vitae sagittis venenatis.`
			`</p>`

			`<p class="bottom-infocard-description">`
			`Donec finibus turpis vitae lectus interdum rutrum vitae sed augue.`
			`</p>`
			`</div>`

Atualiza a responsividade do conteudo desktop e mobile 2022-10-13 18:38:14 +00:00			`<img class="bottom-infocard-image bottom-infocard-image-desktop" src="./assets/images/bottom-infocard-image-desktop.png" alt="Imagem do infocard de baixo desktop">`
			`<img class="bottom-infocard-image bottom-infocard-image-mobile" src="./assets/images/bottom-infocard-image-mobile.png" alt="Imagem do infocard de baixo mobile">`
Adiciona o infocard de baixo 2022-10-13 13:10:15 +00:00			`</section>`
Adiciona o banner principal desktop 2022-10-12 21:29:09 +00:00			`</main>`
Adiciona arquivos iniciais 2022-10-12 21:03:13 +00:00
Adiciona o footer desktop 2022-10-13 02:51:45 +00:00			`<footer class="page-footer">`
			`<ul class="footer-icons">`
			`<li class="footer-icon">`
			`<a href="#" target="_blank">`
Renomeia pasta 'assests' para 'assets' 2022-10-13 12:07:07 +00:00			`<img src="./assets/images/instagram-icon.png" alt="Ícone do Instagram">`
Adiciona o footer desktop 2022-10-13 02:51:45 +00:00			`</a>`
			`</li>`

			`<li class="footer-icon">`
			`<a href="#" target="_blank">`
Renomeia pasta 'assests' para 'assets' 2022-10-13 12:07:07 +00:00			`<img src="./assets/images/facebook-icon.png" alt="Ícone do Facebook">`
Adiciona o footer desktop 2022-10-13 02:51:45 +00:00			`</a>`
			`</li>`

			`<li class="footer-icon">`
			`<a href="#" target="_blank">`
Renomeia pasta 'assests' para 'assets' 2022-10-13 12:07:07 +00:00			`<img src="./assets/images/youtube-icon.png" alt="Ícone do Youtube">`
Adiciona o footer desktop 2022-10-13 02:51:45 +00:00			`</a>`
			`</li>`
			`</ul>`

			`<p class="footer-text">Copyright © 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-00`
			`</p>`
			`</footer>`
Adiciona arquivos iniciais 2022-10-12 21:03:13 +00:00			`</body>`
			`</html>`