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

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <!-- FONT FAMILY -->
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet" />

    <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>Challenge Landing Page</title>

    <link rel="stylesheet" href="./css/style.css" />
</head>
<body>
    <!-- HEADER -->
    <header class="page-header">
        <img src="./assets/logoM3.svg" alt="" />
    </header>

    <!-- MAIN BANNER -->
    <!-- MAIN BANNER DESKTOP-->
    <figure>
        <img src="./assets/main-banner-desktop.png" alt="Banner principal, imagem de um notebook" class="main-banner-desktop" />
    </figure>
    
    <!-- MAIN BANNER MOBILE-->
    <figure>
        <img src="./assets/main-banner-mobile.png" alt="" class="main-banner-mobile" />
    </figure>
    
    <!-- TOP INFOCARD -->
    <section class="top-infocard">
        <!-- SUBTITLE -->
        <p class="top-infocard-subtitle">
            Lorem ipsum
        </p>
        
        <!-- TITLE -->
        <p class="top-infocard-title">
            dolor sit amet
        </p>
        
        <!-- DESCRITION -->
        <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>
        
        <!-- IMAGE -->
        <figure>
            <img src="./assets/top-infocard-image.png" alt="Conexão entre computadores" class="top-infocard-image" />
        </figure>

    </section>

    <!-- TOP CARDS -->
    <div class="top-cards">
        <!-- CARD 01 -->
        <div class="card">
            <figure>
                <img src="./assets/top-card01.svg" alt="Ícone de uma loja" class="card-image" />
            </figure>
            <figcaption  class="card-description">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. 
            </figcaption>
        </div>
        
        <!-- CARD 02 -->
        <div class="card">
            <figure>
                <img src="./assets/top-card02.svg" alt="Ícone de uma sacola de compras" class="card-image" />
            </figure>
            <figcaption class="card-description">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. 
            </figcaption>
        </div>
        
        <!-- CARD 03 -->
        <div class="card">
            <figure>
                <img src="./assets/top-card03.svg" alt="Ícone de uma mão fazendo pagamentos" class="card-image" />
            </figure>
            <figcaption class="card-description">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. 
            </figcaption>
        </div>
    </div>

    <!-- MID BANNERS -->
    <div class="mid-banners">
        
        <!-- WRAPPER -->
        <div class="mid-banner-wrapper">
            <!-- MID BANNER 01 -->
            <figure class="mid-banner-image">
                <img src="./assets/mid-banner-01.png" alt="Banner do meio - imagem de um notebook" class="mid-banner-image" />
            </figure>
    
            <!-- MID BANNER 02 -->
            <figure class="mid-banner-image">
                <img src="./assets/mid-banner-02.png" alt="Banner do meio - imagem de um notebook" class="mid-banner-image" />
            </figure>
    
            <!-- MID BANNER 03 -->
            <figure class="mid-banner-image mid-banner-3">
                <img src="./assets/mid-banner-03.png" alt="Banner do meio - imagem de um notebook" class="mid-banner-image" />
            </figure>
        </div>
    </div>

    <!-- BOTTOM CARDS -->
    <div class="bottom-cards">
        <!-- CARD 01 -->
        <div class="card">
            <figure>
                <img src="./assets/bottom-card1.svg" alt="Ícone de cedulas de dinheiro" class="card-image">
            </figure>
            <figcaption  class="card-description 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. 
            </figcaption>
        </div>
        
        <!-- CARD 02 -->
        <div class="card">
            <figure>
                <img src="./assets/top-card03.svg" alt="Ícone de uma mão fazendo pagamentos" class="card-image">
            </figure>
            <figcaption class="card-description 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. 
            </figcaption>
        </div>
        
        <!-- CARD 03 -->
        <div class="card">
            <figure>
                <img src="./assets/bottom-card3.svg" alt="Ícone de um notebook" class="card-image">
            </figure>
            <figcaption class="card-description 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. 
            </figcaption>
        </div>

        <!-- CARD 04 -->
        <div class="card">
            <figure>
                <img src="./assets/bottom-card4.svg" alt="Ícone de um celular" class="card-image">
            </figure>
            <figcaption class="card-description 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. 
            </figcaption>
        </div>
    </div>

    <!-- BOTTOM INFOCARD -->
    <section class="bottom-infocard">

        <!-- TITLE -->
        <p class="bottom-infocard-title">
            Lorem ipsum dolor sit amet
        </p>

        <!-- DESCRIPTION -->
        <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>

        <!-- IMAGE DESKTOP -->
        <figure>
            <img class="bottom-infocard-image-desktop" src="./assets/bottom-infocard-image-desktop.png" alt="Imagem de monitores desfocados" />
        </figure>

        <!-- IMAGE IMAGE MOBILE -->
        <figure>
            <img class="bottom-infocard-image-mobile" src="./assets/bottom-infocard-image-mobile.png" alt="Imagem de telas de um óculos com monitores ao fundo" />
        </figure>
    </section>
    
    <!-- FOOTER -->
    <footer class="page-footer">
        <div class="footer-icons">
            <!-- INSTAGRAM -->
            <a href="https://www.instagram.com/m3.ecommerce/" target="_blank" rel="noopener">
                <img src="./assets/instagram-icon.svg" alt ="Ícone do Instagram" />
            </a>
            
            <!-- FACEBOOK -->
            <a href="https://www.facebook.com/digitalm3/" target="_blank" rel="noopener">
                <img src="./assets/facebook-icon.svg" alt ="Ícone do Instagram" />
            </a>
    
            <!-- YOUTUBE -->
            <a href="https://www.youtube.com/channel/UCW4o86gZG_ceA8CmHltXeXA" target="_blank" rel="noopener">
                <img src="./assets/youtube-icon.svg" alt ="Ícone do Instagram" />
            </a>
        </div>

        <p class="copyright">
            Copyright © 2020 - Loja  Comércio Eletrônico CNPJ: 000.000.000/0001-00
        </p>
    </footer>
</body>
</html>
feat(index): Adiciona header desktop e mobile 2022-10-10 16:50:29 +00:00			`<!DOCTYPE html>`
			`<html lang="pt-br">`
			`<head>`
feat(index): Adicionado o Infocard do topo desktop e mobile 2022-10-10 18:02:12 +00:00			`<!-- FONT FAMILY -->`
feat(index) Adiciona o footer da pagina 2022-10-12 14:54:42 +00:00			`<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />`
			`<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet" />`
feat(index): Adicionado o Infocard do topo desktop e mobile 2022-10-10 18:02:12 +00:00
feat(index): Adiciona header desktop e mobile 2022-10-10 16:50:29 +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>Challenge Landing Page</title>`

			`<link rel="stylesheet" href="./css/style.css" />`
			`</head>`
			`<body>`
feat(index): Adicionado o Infocard do topo desktop e mobile 2022-10-10 18:02:12 +00:00			`<!-- HEADER -->`
feat(index): Adiciona header desktop e mobile 2022-10-10 16:50:29 +00:00			`<header class="page-header">`
			`<img src="./assets/logoM3.svg" alt="" />`
			`</header>`

feat(index): Adicionado o Infocard do topo desktop e mobile 2022-10-10 18:02:12 +00:00			`<!-- MAIN BANNER -->`
			`<!-- MAIN BANNER DESKTOP-->`
			`<figure>`
feat(index) Adiciona o footer da pagina 2022-10-12 14:54:42 +00:00			`<img src="./assets/main-banner-desktop.png" alt="Banner principal, imagem de um notebook" class="main-banner-desktop" />`
feat(index): Adicionado o Infocard do topo desktop e mobile 2022-10-10 18:02:12 +00:00			`</figure>`

			`<!-- MAIN BANNER MOBILE-->`
			`<figure>`
feat(index) Adiciona o footer da pagina 2022-10-12 14:54:42 +00:00			`<img src="./assets/main-banner-mobile.png" alt="" class="main-banner-mobile" />`
feat(index): Adicionado o Infocard do topo desktop e mobile 2022-10-10 18:02:12 +00:00			`</figure>`

			`<!-- TOP INFOCARD -->`
			`<section class="top-infocard">`
			`<!-- SUBTITLE -->`
			`<p class="top-infocard-subtitle">`
			`Lorem ipsum`
			`</p>`

			`<!-- TITLE -->`
			`<p class="top-infocard-title">`
			`dolor sit amet`
			`</p>`

			`<!-- DESCRITION -->`
			`<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>`

			`<!-- IMAGE -->`
			`<figure>`
feat(index) Adiciona o footer da pagina 2022-10-12 14:54:42 +00:00			`<img src="./assets/top-infocard-image.png" alt="Conexão entre computadores" class="top-infocard-image" />`
feat(index): Adicionado o Infocard do topo desktop e mobile 2022-10-10 18:02:12 +00:00			`</figure>`
feat(index): Adiciona header desktop e mobile 2022-10-10 16:50:29 +00:00
feat(index): Adicionado o Infocard do topo desktop e mobile 2022-10-10 18:02:12 +00:00			`</section>`
feat(index): Adicionado os 3 primeiros cards de cima desktop e mobile 2022-10-10 20:44:35 +00:00
			`<!-- TOP CARDS -->`
			`<div class="top-cards">`
			`<!-- CARD 01 -->`
			`<div class="card">`
			`<figure>`
feat(index) Adiciona o footer da pagina 2022-10-12 14:54:42 +00:00			`<img src="./assets/top-card01.svg" alt="Ícone de uma loja" class="card-image" />`
feat(index): Adicionado os 3 primeiros cards de cima desktop e mobile 2022-10-10 20:44:35 +00:00			`</figure>`
			`<figcaption class="card-description">`
			`Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.`
			`</figcaption>`
			`</div>`

			`<!-- CARD 02 -->`
			`<div class="card">`
			`<figure>`
feat(index) Adiciona o footer da pagina 2022-10-12 14:54:42 +00:00			`<img src="./assets/top-card02.svg" alt="Ícone de uma sacola de compras" class="card-image" />`
feat(index): Adicionado os 3 primeiros cards de cima desktop e mobile 2022-10-10 20:44:35 +00:00			`</figure>`
			`<figcaption class="card-description">`
			`Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.`
			`</figcaption>`
			`</div>`

			`<!-- CARD 03 -->`
			`<div class="card">`
			`<figure>`
feat(index) Adiciona o footer da pagina 2022-10-12 14:54:42 +00:00			`<img src="./assets/top-card03.svg" alt="Ícone de uma mão fazendo pagamentos" class="card-image" />`
feat(index): Adicionado os 3 primeiros cards de cima desktop e mobile 2022-10-10 20:44:35 +00:00			`</figure>`
			`<figcaption class="card-description">`
			`Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.`
			`</figcaption>`
			`</div>`
			`</div>`
feat(index): Adicionado os 3 banners do meio desktop e mobile 2022-10-11 17:58:31 +00:00
			`<!-- MID BANNERS -->`
			`<div class="mid-banners">`

			`<!-- WRAPPER -->`
			`<div class="mid-banner-wrapper">`
			`<!-- MID BANNER 01 -->`
			`<figure class="mid-banner-image">`
feat(index) Adiciona o footer da pagina 2022-10-12 14:54:42 +00:00			`<img src="./assets/mid-banner-01.png" alt="Banner do meio - imagem de um notebook" class="mid-banner-image" />`
feat(index): Adicionado os 3 banners do meio desktop e mobile 2022-10-11 17:58:31 +00:00			`</figure>`

			`<!-- MID BANNER 02 -->`
			`<figure class="mid-banner-image">`
feat(index) Adiciona o footer da pagina 2022-10-12 14:54:42 +00:00			`<img src="./assets/mid-banner-02.png" alt="Banner do meio - imagem de um notebook" class="mid-banner-image" />`
feat(index): Adicionado os 3 banners do meio desktop e mobile 2022-10-11 17:58:31 +00:00			`</figure>`

			`<!-- MID BANNER 03 -->`
			`<figure class="mid-banner-image mid-banner-3">`
feat(index) Adiciona o footer da pagina 2022-10-12 14:54:42 +00:00			`<img src="./assets/mid-banner-03.png" alt="Banner do meio - imagem de um notebook" class="mid-banner-image" />`
feat(index): Adicionado os 3 banners do meio desktop e mobile 2022-10-11 17:58:31 +00:00			`</figure>`
			`</div>`
			`</div>`
feat(index): Adicionado os 4 cards de baixo 2022-10-11 18:39:37 +00:00
			`<!-- BOTTOM CARDS -->`
			`<div class="bottom-cards">`
			`<!-- CARD 01 -->`
			`<div class="card">`
			`<figure>`
feat(index): Adicionado o infocard de baixo 2022-10-12 14:16:56 +00:00			`<img src="./assets/bottom-card1.svg" alt="Ícone de cedulas de dinheiro" class="card-image">`
feat(index): Adicionado os 4 cards de baixo 2022-10-11 18:39:37 +00:00			`</figure>`
			`<figcaption class="card-description 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.`
			`</figcaption>`
			`</div>`

			`<!-- CARD 02 -->`
			`<div class="card">`
			`<figure>`
feat(index): Adicionado o infocard de baixo 2022-10-12 14:16:56 +00:00			`<img src="./assets/top-card03.svg" alt="Ícone de uma mão fazendo pagamentos" class="card-image">`
feat(index): Adicionado os 4 cards de baixo 2022-10-11 18:39:37 +00:00			`</figure>`
			`<figcaption class="card-description 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.`
			`</figcaption>`
			`</div>`

			`<!-- CARD 03 -->`
			`<div class="card">`
			`<figure>`
feat(index): Adicionado o infocard de baixo 2022-10-12 14:16:56 +00:00			`<img src="./assets/bottom-card3.svg" alt="Ícone de um notebook" class="card-image">`
feat(index): Adicionado os 4 cards de baixo 2022-10-11 18:39:37 +00:00			`</figure>`
			`<figcaption class="card-description 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.`
			`</figcaption>`
			`</div>`

			`<!-- CARD 04 -->`
			`<div class="card">`
			`<figure>`
feat(index): Adicionado o infocard de baixo 2022-10-12 14:16:56 +00:00			`<img src="./assets/bottom-card4.svg" alt="Ícone de um celular" class="card-image">`
feat(index): Adicionado os 4 cards de baixo 2022-10-11 18:39:37 +00:00			`</figure>`
			`<figcaption class="card-description 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.`
			`</figcaption>`
			`</div>`
			`</div>`

feat(index): Adicionado o infocard de baixo 2022-10-12 14:16:56 +00:00			`<!-- BOTTOM INFOCARD -->`
			`<section class="bottom-infocard">`

			`<!-- TITLE -->`
			`<p class="bottom-infocard-title">`
			`Lorem ipsum dolor sit amet`
			`</p>`

			`<!-- DESCRIPTION -->`
			`<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>`

			`<!-- IMAGE DESKTOP -->`
			`<figure>`
feat(index) Adiciona o footer da pagina 2022-10-12 14:54:42 +00:00			`<img class="bottom-infocard-image-desktop" src="./assets/bottom-infocard-image-desktop.png" alt="Imagem de monitores desfocados" />`
feat(index): Adicionado o infocard de baixo 2022-10-12 14:16:56 +00:00			`</figure>`

			`<!-- IMAGE IMAGE MOBILE -->`
			`<figure>`
feat(index) Adiciona o footer da pagina 2022-10-12 14:54:42 +00:00			`<img class="bottom-infocard-image-mobile" src="./assets/bottom-infocard-image-mobile.png" alt="Imagem de telas de um óculos com monitores ao fundo" />`
feat(index): Adicionado o infocard de baixo 2022-10-12 14:16:56 +00:00			`</figure>`
			`</section>`
feat(index): Adicionado o Infocard do topo desktop e mobile 2022-10-10 18:02:12 +00:00
feat(index) Adiciona o footer da pagina 2022-10-12 14:54:42 +00:00			`<!-- FOOTER -->`
			`<footer class="page-footer">`
			`<div class="footer-icons">`
			`<!-- INSTAGRAM -->`
			`<a href="https://www.instagram.com/m3.ecommerce/" target="_blank" rel="noopener">`
			`<img src="./assets/instagram-icon.svg" alt ="Ícone do Instagram" />`
			`</a>`

			`<!-- FACEBOOK -->`
			`<a href="https://www.facebook.com/digitalm3/" target="_blank" rel="noopener">`
			`<img src="./assets/facebook-icon.svg" alt ="Ícone do Instagram" />`
			`</a>`
feat(index): Adiciona header desktop e mobile 2022-10-10 16:50:29 +00:00
feat(index) Adiciona o footer da pagina 2022-10-12 14:54:42 +00:00			`<!-- YOUTUBE -->`
			`<a href="https://www.youtube.com/channel/UCW4o86gZG_ceA8CmHltXeXA" target="_blank" rel="noopener">`
			`<img src="./assets/youtube-icon.svg" alt ="Ícone do Instagram" />`
			`</a>`
			`</div>`

			`<p class="copyright">`
			`Copyright © 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-00`
			`</p>`
			`</footer>`
feat(index): Adiciona header desktop e mobile 2022-10-10 16:50:29 +00:00			`</body>`
			`</html>`