challenge-landing-page/landing-page.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="./assets/styles/landing-page.css"/>
    <title>Desafio 1</title>
</head>
<body>
    <header>
        <a class="logo" href="https://lp.digitalm3.com.br/m3-academy-universidade-corporativa">
            <img src="./assets/images/logo.png" alt="logo da empresa">
        </a>
    </header>
    <main>
        <figure>
            <img class="banner-top-mob" src="./assets/images/banner-mob.png" alt="notebook com codigos na tela"/>
            <img class="banner-top" src="./assets/images/banner.png" alt="notebook com codigos na tela"/>
        </figure>
        <section class="information-network">
            <h2 class="sub-title">Lorem ipsum</h2>
            <h1 class="title">dolor sit amet</h1>
            <p class="descriptiom">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>
            <figure class="network">
                <img src="./assets/images/networkcomputters.png" alt="figura de varios computadores conectados"/>
            </figure>
        </section>

        <section class="card-section">
            <div class="card">
                <figure class="img-card">
                    <img src="./assets/images/shop 1.png" alt="figura de uma loja">
                </figure>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. 
                </p>
            </div>
            <div class="card">
                <figure class="img-card">
                    <img src="./assets/images/shopping-bag.png" alt="figura de uma sacola">
                </figure>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. 
                </p>
            </div>
            <div class="card">
                <figure class="img-card">
                    <img src="./assets/images/coin 1.png" alt="figura de dinheiro em moeda">
                </figure>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. 
                </p>
            </div>
        </section>
        <section class="computers-area">
            <figure class="computers-img" id="item1">
                <img src="./assets/images/computer 1.png" alt="notebook parcialmente fechado"/>
            </figure>
            <figure class="computers-img" id="item2">
                <img src="./assets/images/computer 2.png" alt="notebook visto de cima"/>
            </figure>
            <figure class="computers-img" id="item3">
                <img src="./assets/images/computer 3.png" alt="notebook de lado"/>
            </figure>
        </section>
        <section class="card-section-small">
            <div class="card-small">
                <figure class="img-card-small">
                    <img src="./assets/images/money.png" alt="figura de dinheiro em papel">
                </figure>
                <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>
            </div>
            <div class="card-small">
                <figure class="img-card-small">
                    <img src="./assets/images/coin 1.png" alt="figura de dinheiro em moeda">
                </figure>
                <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>
            </div>
            <div class="card-small">
                <figure class="img-card-small">
                    <img src="./assets/images/laptop.png" alt="figura de um laptop">
                </figure>
                <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>
            </div>
            <div class="card-small">
                <figure class="img-card-small">
                    <img src="./assets/images/cel.png" alt="figura de um celular">
                </figure>
                <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>
            </div>
        </section>
        <div class="information-code">
            <h1>Lorem ipsum dolor sit amet</h1>
            <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>
                <figure class="computer-code">
                    <img class="banner-bottom-mob" src="./assets/images/banner 2-mob.png" alt="comptador ofuscado e oculos no cenario"/>
                    <img class="banner-bottom" src="./assets/images/banner 2.png" alt="comptador ofuscado"/>
                </figure>
        </div>
    </main>
    <footer>
        <div class="social">        
        <a class="social-networks" href="https://www.instagram.com/m3.ecommerce/">
            <img src="./assets/images/instagram.png" alt="icone instagram"/>
        </a>
        <a class="social-networks" href="https://www.facebook.com/digitalm3/">
            <img src="./assets/images/facebook-logo.png" alt="icone facebook"/>
        </a>
        <a class="social-networks" href="https://www.youtube.com/channel/UCW4o86gZG_ceA8CmHltXeXA">
            <img src="./assets/images/youtube 2.png" alt="icone youtube"/>
        </a>
    </div>

        <p>
            Copyright © 2020 - Loja  Comércio Eletrônico CNPJ: 000.000.000/0001-00
        </p>
    </footer>
</body>
</html>
feat: conteudo html adicionado 2022-10-11 17:29:41 +00:00			`<!DOCTYPE html>`
			`<html lang="pt-BR">`
			`<head>`
fix: adicionado linkagem do css, mudança nas tags do footer e header 2022-10-11 21:18:59 +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"/>`
			`<link rel="stylesheet" href="./assets/styles/landing-page.css"/>`
feat: conteudo html adicionado 2022-10-11 17:29:41 +00:00			`<title>Desafio 1</title>`
			`</head>`
			`<body>`
			`<header>`
feat: responsividade adicionada 2022-10-13 21:05:27 +00:00			`<a class="logo" href="https://lp.digitalm3.com.br/m3-academy-universidade-corporativa">`
fix: alt em todas as img's, links atualizados 2022-10-13 18:01:13 +00:00			`<img src="./assets/images/logo.png" alt="logo da empresa">`
fix: adicionado linkagem do css, mudança nas tags do footer e header 2022-10-11 21:18:59 +00:00			`</a>`
feat: conteudo html adicionado 2022-10-11 17:29:41 +00:00			`</header>`
			`<main>`
			`<figure>`
feat: responsividade adicionada 2022-10-13 21:05:27 +00:00			`<img class="banner-top-mob" src="./assets/images/banner-mob.png" alt="notebook com codigos na tela"/>`
fix: alt em todas as img's, links atualizados 2022-10-13 18:01:13 +00:00			`<img class="banner-top" src="./assets/images/banner.png" alt="notebook com codigos na tela"/>`
feat: conteudo html adicionado 2022-10-11 17:29:41 +00:00			`</figure>`
feat: estilização criada para o banner superior e o vetor/imagem dos computadores conectados e as informações 2022-10-13 03:06:46 +00:00			`<section class="information-network">`
			`<h2 class="sub-title">Lorem ipsum</h2>`
			`<h1 class="title">dolor sit amet</h1>`
			`<p class="descriptiom">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>`
feat: estilização dos três primeiros cards 2022-10-13 05:02:56 +00:00			`<figure class="network">`
fix: alt em todas as img's, links atualizados 2022-10-13 18:01:13 +00:00			`<img src="./assets/images/networkcomputters.png" alt="figura de varios computadores conectados"/>`
feat: estilização dos três primeiros cards 2022-10-13 05:02:56 +00:00			`</figure>`
feat: estilização criada para o banner superior e o vetor/imagem dos computadores conectados e as informações 2022-10-13 03:06:46 +00:00			`</section>`
feat: estilização dos três primeiros cards 2022-10-13 05:02:56 +00:00
			`<section class="card-section">`
			`<div class="card">`
			`<figure class="img-card">`
fix: alt em todas as img's, links atualizados 2022-10-13 18:01:13 +00:00			`<img src="./assets/images/shop 1.png" alt="figura de uma loja">`
feat: conteudo html adicionado 2022-10-11 17:29:41 +00:00			`</figure>`
fix: alt em todas as img's, links atualizados 2022-10-13 18:01:13 +00:00			`<p>`
feat: conteudo html adicionado 2022-10-11 17:29:41 +00:00			`Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.`
fix: alt em todas as img's, links atualizados 2022-10-13 18:01:13 +00:00			`</p>`
feat: conteudo html adicionado 2022-10-11 17:29:41 +00:00			`</div>`
feat: estilização dos três primeiros cards 2022-10-13 05:02:56 +00:00			`<div class="card">`
			`<figure class="img-card">`
fix: alt em todas as img's, links atualizados 2022-10-13 18:01:13 +00:00			`<img src="./assets/images/shopping-bag.png" alt="figura de uma sacola">`
feat: conteudo html adicionado 2022-10-11 17:29:41 +00:00			`</figure>`
fix: alt em todas as img's, links atualizados 2022-10-13 18:01:13 +00:00			`<p>`
feat: conteudo html adicionado 2022-10-11 17:29:41 +00:00			`Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.`
fix: alt em todas as img's, links atualizados 2022-10-13 18:01:13 +00:00			`</p>`
feat: conteudo html adicionado 2022-10-11 17:29:41 +00:00			`</div>`
feat: estilização dos três primeiros cards 2022-10-13 05:02:56 +00:00			`<div class="card">`
			`<figure class="img-card">`
fix: alt em todas as img's, links atualizados 2022-10-13 18:01:13 +00:00			`<img src="./assets/images/coin 1.png" alt="figura de dinheiro em moeda">`
feat: conteudo html adicionado 2022-10-11 17:29:41 +00:00			`</figure>`
fix: alt em todas as img's, links atualizados 2022-10-13 18:01:13 +00:00			`<p>`
feat: conteudo html adicionado 2022-10-11 17:29:41 +00:00			`Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.`
fix: alt em todas as img's, links atualizados 2022-10-13 18:01:13 +00:00			`</p>`
feat: conteudo html adicionado 2022-10-11 17:29:41 +00:00			`</div>`
			`</section>`
feat: estilização das três imagens de computador e o background cinza 2022-10-13 13:36:44 +00:00			`<section class="computers-area">`
feat: responsividade adicionada 2022-10-13 21:05:27 +00:00			`<figure class="computers-img" id="item1">`
fix: alt em todas as img's, links atualizados 2022-10-13 18:01:13 +00:00			`<img src="./assets/images/computer 1.png" alt="notebook parcialmente fechado"/>`
feat: conteudo html adicionado 2022-10-11 17:29:41 +00:00			`</figure>`
feat: responsividade adicionada 2022-10-13 21:05:27 +00:00			`<figure class="computers-img" id="item2">`
fix: alt em todas as img's, links atualizados 2022-10-13 18:01:13 +00:00			`<img src="./assets/images/computer 2.png" alt="notebook visto de cima"/>`
feat: conteudo html adicionado 2022-10-11 17:29:41 +00:00			`</figure>`
feat: responsividade adicionada 2022-10-13 21:05:27 +00:00			`<figure class="computers-img" id="item3">`
fix: alt em todas as img's, links atualizados 2022-10-13 18:01:13 +00:00			`<img src="./assets/images/computer 3.png" alt="notebook de lado"/>`
feat: conteudo html adicionado 2022-10-11 17:29:41 +00:00			`</figure>`
			`</section>`
feat: cards inferiores estilizados 2022-10-13 17:01:14 +00:00			`<section class="card-section-small">`
feat: estilização dos três primeiros cards 2022-10-13 05:02:56 +00:00			`<div class="card-small">`
feat: cards inferiores estilizados 2022-10-13 17:01:14 +00:00			`<figure class="img-card-small">`
fix: alt em todas as img's, links atualizados 2022-10-13 18:01:13 +00:00			`<img src="./assets/images/money.png" alt="figura de dinheiro em papel">`
feat: conteudo html adicionado 2022-10-11 17:29:41 +00:00			`</figure>`
fix: alt em todas as img's, links atualizados 2022-10-13 18:01:13 +00:00			`<p>`
feat: conteudo html adicionado 2022-10-11 17:29:41 +00:00			`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.`
fix: alt em todas as img's, links atualizados 2022-10-13 18:01:13 +00:00			`</p>`
feat: conteudo html adicionado 2022-10-11 17:29:41 +00:00			`</div>`
feat: estilização dos três primeiros cards 2022-10-13 05:02:56 +00:00			`<div class="card-small">`
feat: cards inferiores estilizados 2022-10-13 17:01:14 +00:00			`<figure class="img-card-small">`
fix: alt em todas as img's, links atualizados 2022-10-13 18:01:13 +00:00			`<img src="./assets/images/coin 1.png" alt="figura de dinheiro em moeda">`
feat: conteudo html adicionado 2022-10-11 17:29:41 +00:00			`</figure>`
fix: alt em todas as img's, links atualizados 2022-10-13 18:01:13 +00:00			`<p>`
feat: conteudo html adicionado 2022-10-11 17:29:41 +00:00			`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.`
fix: alt em todas as img's, links atualizados 2022-10-13 18:01:13 +00:00			`</p>`
feat: conteudo html adicionado 2022-10-11 17:29:41 +00:00			`</div>`
feat: estilização dos três primeiros cards 2022-10-13 05:02:56 +00:00			`<div class="card-small">`
feat: cards inferiores estilizados 2022-10-13 17:01:14 +00:00			`<figure class="img-card-small">`
fix: alt em todas as img's, links atualizados 2022-10-13 18:01:13 +00:00			`<img src="./assets/images/laptop.png" alt="figura de um laptop">`
feat: conteudo html adicionado 2022-10-11 17:29:41 +00:00			`</figure>`
fix: alt em todas as img's, links atualizados 2022-10-13 18:01:13 +00:00			`<p>`
feat: conteudo html adicionado 2022-10-11 17:29:41 +00:00			`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.`
fix: alt em todas as img's, links atualizados 2022-10-13 18:01:13 +00:00			`</p>`
feat: conteudo html adicionado 2022-10-11 17:29:41 +00:00			`</div>`
feat: estilização dos três primeiros cards 2022-10-13 05:02:56 +00:00			`<div class="card-small">`
feat: cards inferiores estilizados 2022-10-13 17:01:14 +00:00			`<figure class="img-card-small">`
fix: alt em todas as img's, links atualizados 2022-10-13 18:01:13 +00:00			`<img src="./assets/images/cel.png" alt="figura de um celular">`
feat: conteudo html adicionado 2022-10-11 17:29:41 +00:00			`</figure>`
fix: alt em todas as img's, links atualizados 2022-10-13 18:01:13 +00:00			`<p>`
feat: conteudo html adicionado 2022-10-11 17:29:41 +00:00			`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.`
fix: alt em todas as img's, links atualizados 2022-10-13 18:01:13 +00:00			`</p>`
feat: conteudo html adicionado 2022-10-11 17:29:41 +00:00			`</div>`
			`</section>`
feat: responsividade de telas menores concluida 2022-10-13 22:17:18 +00:00			`<div class="information-code">`
feat: conteudo html adicionado 2022-10-11 17:29:41 +00:00			`<h1>Lorem ipsum dolor sit amet</h1>`
			`<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>`
feat: estilização do baner inferior com as informações 2022-10-13 17:29:18 +00:00			`<figure class="computer-code">`
feat: responsividade de telas menores concluida 2022-10-13 22:17:18 +00:00			`<img class="banner-bottom-mob" src="./assets/images/banner 2-mob.png" alt="comptador ofuscado e oculos no cenario"/>`
			`<img class="banner-bottom" src="./assets/images/banner 2.png" alt="comptador ofuscado"/>`
feat: conteudo html adicionado 2022-10-11 17:29:41 +00:00			`</figure>`
feat: responsividade de telas menores concluida 2022-10-13 22:17:18 +00:00			`</div>`
feat: conteudo html adicionado 2022-10-11 17:29:41 +00:00			`</main>`
			`<footer>`
feat: responsividade de telas menores concluida 2022-10-13 22:17:18 +00:00			`<div class="social">`
fix: alt em todas as img's, links atualizados 2022-10-13 18:01:13 +00:00			`<a class="social-networks" href="https://www.instagram.com/m3.ecommerce/">`
			`<img src="./assets/images/instagram.png" alt="icone instagram"/>`
fix: adicionado linkagem do css, mudança nas tags do footer e header 2022-10-11 21:18:59 +00:00			`</a>`
fix: alt em todas as img's, links atualizados 2022-10-13 18:01:13 +00:00			`<a class="social-networks" href="https://www.facebook.com/digitalm3/">`
			`<img src="./assets/images/facebook-logo.png" alt="icone facebook"/>`
fix: adicionado linkagem do css, mudança nas tags do footer e header 2022-10-11 21:18:59 +00:00			`</a>`
fix: alt em todas as img's, links atualizados 2022-10-13 18:01:13 +00:00			`<a class="social-networks" href="https://www.youtube.com/channel/UCW4o86gZG_ceA8CmHltXeXA">`
			`<img src="./assets/images/youtube 2.png" alt="icone youtube"/>`
fix: adicionado linkagem do css, mudança nas tags do footer e header 2022-10-11 21:18:59 +00:00			`</a>`
feat: responsividade de telas menores concluida 2022-10-13 22:17:18 +00:00			`</div>`

fix: adicionado linkagem do css, mudança nas tags do footer e header 2022-10-11 21:18:59 +00:00			`<p>`
			`Copyright © 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-00`
feat: conteudo html adicionado 2022-10-11 17:29:41 +00:00			`</p>`
			`</footer>`
			`</body>`
feat: estilização dos três primeiros cards 2022-10-13 05:02:56 +00:00			`</html>`