challenge-landing-page/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>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&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">
    <link rel="stylesheet" href="style/style.css">
    <title>Challenge M3Academy</title>
</head>

<body>
    <header class="header-landingpage">
        <figure class="header-logo-father">
            <img class="header-logo" src="assets/svg/Logo-M3Academy 1.svg" alt="logo da M3 Academy">
        </figure>
    </header>
    <main class="main-landingpage">
        <!-- AREA DO BANNER PRINCIPAL -->
        <div class="container-banner-main">
            <figure class="container-banner-desktop">
                <img class="banner-img banner-img-desktop" src="assets/banner/banner-header.png" alt="Notebook aberto com codigos HTML e CSS. Ao lado contem um celular, uma xicara branca, um fone e uma planta dentro de uma vaso. ">
            </figure>
            <figure class="container-banner-mobile">
                <img class="banner-img banner-img-mobile" src="assets/banner/banner-header-mobile.png" alt="Notebook aberto com codigos HTML e CSS.">
            </figure>
        </div>
        <!-- REGIAO ABAIXO DO BANNER PRINCIPAL-->
        <div class="container-midle">
            <section class="container-midle-flex">
                <h2 class="container-midle-subtitle">Lorem ipsum</h2>
                <h1 class="container-midle-title">Dolor sit amet</h1>
                <p class="container-midle-paragraph">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>

                <img src="assets/img/midle-computer.png" alt="Computadores alinhados. Um em cuma e dois embaixo, ligados por setas." class="container-midle-img" />

                <!-- CONTAINER CARD TRIPLO-->
                <div class="container-cards">
                    <div class="card-1">
                        <figure>
                            <img class="icon-card" src="assets/svg/shop-icon.svg" alt="icone de shopping">
                            <figcaption class="subtitle-card">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </figcaption>
                        </figure>
                    </div>
                    <div class="card-2">
                        <figure>
                            <img class="icon-card" src="assets/svg/shopping-bag-icon.svg" alt="icone de shopping bag (sacola de shoppin) com um escudo azul na frente. Simboliza compra segura">
                            <figcaption class="subtitle-card">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </figcaption>
                        </figure>
                    </div>
                    <div class="card-3">
                        <figure>
                            <img class="icon-card" src="assets/svg/coin-icon.svg" alt="icone de mão segurando uma moeda">
                            <figcaption class="subtitle-card">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </figcaption>
                    </div>
                    </figure>
                </div>
            </section>
        </div>
        <!-- REGIAO DO BANNER MOSAICO -->
        <div class="wrapper-banner">
            <div class="banner-mosaic">
                <div class="mosaic-img1">
                    <figure>
                        <img class="mosaic-wrapper-img img1" src="assets/img/computer-img-1.png" alt="Notebook, posicionado de frente. Aberto em cerca de 45 graus>">
                    </figure>
                </div>
                <div class="mosaic-img2">
                    <figure>
                        <img class="mosaic-wrapper-img img2" src="assets/img/computer-img-2.png" alt="Notebook, posicionado de frente, imagem feita de cima para baixo. Aberto em cerca de 60 graus">
                    </figure>
                </div>
                <div class="mosaic-img3">
                    <figure>
                        <img class="mosaic-wrapper-img img3" src="assets/img/computer-img-3.png" alt="Notebook, posicionado de angulo lateal. Aberto em 60">
                    </figure>
                </div>
            </div>
            </section>
        </div>
        <!-- REGIAO ABAIXO DO BANNER MOSAICO(CONTAINER CARD QUADRUPLO) -->
        <div class="container-cards container-infocard">
            <div class="card-1">
                <figure>
                    <img class="icon-card" src="assets/svg/money-icon.svg" alt="Icone de cédulas.">
                    <figcaption class="subtitle-card">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>
                </figure>
            </div>
            <div class="card-2">
                <figure>
                    <img class="icon-card" src="assets/svg/coin-icon.svg" alt="icone de mão segurando uma moeda">
                    <figcaption class="subtitle-card">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>
                </figure>
            </div>
            <div class="card-3">
                <figure>
                    <img class="icon-card" src="assets/svg/laptop-icon.svg" alt="icone de laptop aberto.">
                    <figcaption class="subtitle-card">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>
                </figure>
            </div>
            <div class="card-4">
                <figure>
                    <img class="icon-card" src="assets/svg/phone-icon.svg" alt="icone de um smartphone">
                    <figcaption class="subtitle-card">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>
                </figure>
            </div>
        </div>
        <!-- Regiao antes do footer -->
        <div class="bottom-flex">
            <section class="bottom-text">
                <h2 class="bottom-subtitle">Lorem ipsum dolor sit amet</h2>
                <p class="bottom-paraphase">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>
            </section>
            <figure>
                <img src="assets/banner/banner-footer.png" alt="imagem de um oculos. de frente para uma tela de computador." class="botton-img-desktop"></img>
            </figure>

            <figure>
                <img src="assets/banner/banne-footer-mobile.png" alt="imagem de um oculos. de frente para uma tela de computador." class="botton-img-mobile"></img>
            </figure>

        </div>
    </main>
    <footer>
        <div class="container-contact">
            <ul class="contact">
                <li class="icon-contact"><img src="assets/svg/intagram-icon.svg" alt="icone do intagram"></li>
                <li class="icon-contact"><img src="assets/svg/facebook-icon.svg" alt="icone do facebook"></li>
                <li class="icon-contact"><img src="assets/svg/youtube-icon.svg" alt="icone do youtube"></li>
            </ul>
            <small class="footer-text"> Copyright &copy; 2020 - Loja  Comércio Eletrônico CNPJ: 000.000.000/0001-00
            </small>
        </div>
    </footer>
</body>

</html>
feat: cria estrutura de diretorios e arquivos 2022-10-11 19:48:02 +00:00			`<!DOCTYPE html>`
style: configura banner versao movel e desktop 2022-10-11 20:43:34 +00:00			`<html lang="pt-br">`
feat: cria estrutura de diretorios e arquivos 2022-10-11 19:48:02 +00:00
			`<head>`
			`<link rel="preconnect" href="https://fonts.googleapis.com">`
			`<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>`
fix: corrige o alinhamento de banner e textos acima do footer 2022-10-13 22:56:54 +00:00			`<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">`
feat: cria estrutura de diretorios e arquivos 2022-10-11 19:48:02 +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">`
style: configura banner versao movel e desktop 2022-10-11 20:43:34 +00:00			`<link rel="stylesheet" href="style/style.css">`
feat: cria estrutura de diretorios e arquivos 2022-10-11 19:48:02 +00:00			`<title>Challenge M3Academy</title>`
			`</head>`

			`<body>`
style: configura banner versao movel e desktop 2022-10-11 20:43:34 +00:00			`<header class="header-landingpage">`
			`<figure class="header-logo-father">`
			`<img class="header-logo" src="assets/svg/Logo-M3Academy 1.svg" alt="logo da M3 Academy">`
			`</figure>`
			`</header>`
			`<main class="main-landingpage">`
			`<!-- AREA DO BANNER PRINCIPAL -->`
			`<div class="container-banner-main">`
			`<figure class="container-banner-desktop">`
fix: corrige o alinhamento de banner e textos acima do footer 2022-10-13 22:56:54 +00:00			`<img class="banner-img banner-img-desktop" src="assets/banner/banner-header.png" alt="Notebook aberto com codigos HTML e CSS. Ao lado contem um celular, uma xicara branca, um fone e uma planta dentro de uma vaso. ">`
style: configura banner versao movel e desktop 2022-10-11 20:43:34 +00:00			`</figure>`
			`<figure class="container-banner-mobile">`
fix: corrige o alinhamento de banner e textos acima do footer 2022-10-13 22:56:54 +00:00			`<img class="banner-img banner-img-mobile" src="assets/banner/banner-header-mobile.png" alt="Notebook aberto com codigos HTML e CSS.">`
style: configura banner versao movel e desktop 2022-10-11 20:43:34 +00:00			`</figure>`
			`</div>`
feat: cria conteiner de banner mosaico para versao desktop e mobile Banner mosaico composto por tres imagens, onde na versão desktop fica alinhado em 3 colunas e uma linha e na versão mobile é composto por duas linhas e duas colunas, onde a imagem abaixo é o dobro do tamanho das outras. Feito em grid, se adapta aos tamanhos de tela. 2022-10-13 09:25:24 +00:00			`<!-- REGIAO ABAIXO DO BANNER PRINCIPAL-->`
feat: Cria regiao da pagina com paragrafo e imagem de tres computadores 2022-10-11 23:48:52 +00:00			`<div class="container-midle">`
			`<section class="container-midle-flex">`
			`<h2 class="container-midle-subtitle">Lorem ipsum</h2>`
			`<h1 class="container-midle-title">Dolor sit amet</h1>`
fix: corrige o alinhamento de banner e textos acima do footer 2022-10-13 22:56:54 +00:00			`<p class="container-midle-paragraph">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: Cria regiao da pagina com paragrafo e imagem de tres computadores 2022-10-11 23:48:52 +00:00
fix: corrige o alinhamento de banner e textos acima do footer 2022-10-13 22:56:54 +00:00			`<img src="assets/img/midle-computer.png" alt="Computadores alinhados. Um em cuma e dois embaixo, ligados por setas." class="container-midle-img" />`
feat: cria grid do card na versao desktop e mobile 2022-10-13 05:22:23 +00:00
feat: cria container compospoto por quatro infocard 2022-10-13 10:11:50 +00:00			`<!-- CONTAINER CARD TRIPLO-->`
feat: cria grid do card na versao desktop e mobile 2022-10-13 05:22:23 +00:00			`<div class="container-cards">`
			`<div class="card-1">`
			`<figure>`
			`<img class="icon-card" src="assets/svg/shop-icon.svg" alt="icone de shopping">`
fix: corrige o alinhamento de banner e textos acima do footer 2022-10-13 22:56:54 +00:00			`<figcaption class="subtitle-card">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </figcaption>`
feat: cria grid do card na versao desktop e mobile 2022-10-13 05:22:23 +00:00			`</figure>`
			`</div>`
			`<div class="card-2">`
			`<figure>`
fix: corrige o alinhamento de banner e textos acima do footer 2022-10-13 22:56:54 +00:00			`<img class="icon-card" src="assets/svg/shopping-bag-icon.svg" alt="icone de shopping bag (sacola de shoppin) com um escudo azul na frente. Simboliza compra segura">`
			`<figcaption class="subtitle-card">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </figcaption>`
feat: cria grid do card na versao desktop e mobile 2022-10-13 05:22:23 +00:00			`</figure>`
			`</div>`
			`<div class="card-3">`
			`<figure>`
fix: corrige o alinhamento de banner e textos acima do footer 2022-10-13 22:56:54 +00:00			`<img class="icon-card" src="assets/svg/coin-icon.svg" alt="icone de mão segurando uma moeda">`
			`<figcaption class="subtitle-card">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </figcaption>`
feat: cria grid do card na versao desktop e mobile 2022-10-13 05:22:23 +00:00			`</div>`
			`</figure>`
			`</div>`
feat: Cria regiao da pagina com paragrafo e imagem de tres computadores 2022-10-11 23:48:52 +00:00			`</section>`
			`</div>`
feat: cria conteiner de banner mosaico para versao desktop e mobile Banner mosaico composto por tres imagens, onde na versão desktop fica alinhado em 3 colunas e uma linha e na versão mobile é composto por duas linhas e duas colunas, onde a imagem abaixo é o dobro do tamanho das outras. Feito em grid, se adapta aos tamanhos de tela. 2022-10-13 09:25:24 +00:00			`<!-- REGIAO DO BANNER MOSAICO -->`
			`<div class="wrapper-banner">`
			`<div class="banner-mosaic">`
			`<div class="mosaic-img1">`
			`<figure>`
fix: corrige o alinhamento de banner e textos acima do footer 2022-10-13 22:56:54 +00:00			`<img class="mosaic-wrapper-img img1" src="assets/img/computer-img-1.png" alt="Notebook, posicionado de frente. Aberto em cerca de 45 graus>">`
feat: cria conteiner de banner mosaico para versao desktop e mobile Banner mosaico composto por tres imagens, onde na versão desktop fica alinhado em 3 colunas e uma linha e na versão mobile é composto por duas linhas e duas colunas, onde a imagem abaixo é o dobro do tamanho das outras. Feito em grid, se adapta aos tamanhos de tela. 2022-10-13 09:25:24 +00:00			`</figure>`
			`</div>`
			`<div class="mosaic-img2">`
			`<figure>`
fix: corrige o alinhamento de banner e textos acima do footer 2022-10-13 22:56:54 +00:00			`<img class="mosaic-wrapper-img img2" src="assets/img/computer-img-2.png" alt="Notebook, posicionado de frente, imagem feita de cima para baixo. Aberto em cerca de 60 graus">`
feat: cria container compospoto por quatro infocard 2022-10-13 10:11:50 +00:00			`</figure>`
feat: cria conteiner de banner mosaico para versao desktop e mobile Banner mosaico composto por tres imagens, onde na versão desktop fica alinhado em 3 colunas e uma linha e na versão mobile é composto por duas linhas e duas colunas, onde a imagem abaixo é o dobro do tamanho das outras. Feito em grid, se adapta aos tamanhos de tela. 2022-10-13 09:25:24 +00:00			`</div>`
			`<div class="mosaic-img3">`
			`<figure>`
fix: corrige o alinhamento de banner e textos acima do footer 2022-10-13 22:56:54 +00:00			`<img class="mosaic-wrapper-img img3" src="assets/img/computer-img-3.png" alt="Notebook, posicionado de angulo lateal. Aberto em 60">`
feat: cria container compospoto por quatro infocard 2022-10-13 10:11:50 +00:00			`</figure>`
feat: cria conteiner de banner mosaico para versao desktop e mobile Banner mosaico composto por tres imagens, onde na versão desktop fica alinhado em 3 colunas e uma linha e na versão mobile é composto por duas linhas e duas colunas, onde a imagem abaixo é o dobro do tamanho das outras. Feito em grid, se adapta aos tamanhos de tela. 2022-10-13 09:25:24 +00:00			`</div>`
			`</div>`
			`</section>`
			`</div>`
feat: cria a regiao do botton da pagina, responsiva para mobile e desktop, antes do footer. criação seguindo o layout, qu eno mobile o texto com a imagem troca de posição e a imagem troca de estilo 2022-10-13 12:25:33 +00:00			`<!-- REGIAO ABAIXO DO BANNER MOSAICO(CONTAINER CARD QUADRUPLO) -->`
feat: cria container compospoto por quatro infocard 2022-10-13 10:11:50 +00:00			`<div class="container-cards container-infocard">`
			`<div class="card-1">`
			`<figure>`
			`<img class="icon-card" src="assets/svg/money-icon.svg" alt="Icone de cédulas.">`
fix: corrige o alinhamento de banner e textos acima do footer 2022-10-13 22:56:54 +00:00			`<figcaption class="subtitle-card">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>`
feat: cria container compospoto por quatro infocard 2022-10-13 10:11:50 +00:00			`</figure>`
			`</div>`
			`<div class="card-2">`
			`<figure>`
			`<img class="icon-card" src="assets/svg/coin-icon.svg" alt="icone de mão segurando uma moeda">`
fix: corrige o alinhamento de banner e textos acima do footer 2022-10-13 22:56:54 +00:00			`<figcaption class="subtitle-card">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>`
feat: cria container compospoto por quatro infocard 2022-10-13 10:11:50 +00:00			`</figure>`
			`</div>`
			`<div class="card-3">`
			`<figure>`
			`<img class="icon-card" src="assets/svg/laptop-icon.svg" alt="icone de laptop aberto.">`
fix: corrige o alinhamento de banner e textos acima do footer 2022-10-13 22:56:54 +00:00			`<figcaption class="subtitle-card">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>`
feat: cria container compospoto por quatro infocard 2022-10-13 10:11:50 +00:00			`</figure>`
			`</div>`
			`<div class="card-4">`
			`<figure>`
			`<img class="icon-card" src="assets/svg/phone-icon.svg" alt="icone de um smartphone">`
fix: corrige o alinhamento de banner e textos acima do footer 2022-10-13 22:56:54 +00:00			`<figcaption class="subtitle-card">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>`
feat: cria container compospoto por quatro infocard 2022-10-13 10:11:50 +00:00			`</figure>`
			`</div>`
feat: cria conteiner de banner mosaico para versao desktop e mobile Banner mosaico composto por tres imagens, onde na versão desktop fica alinhado em 3 colunas e uma linha e na versão mobile é composto por duas linhas e duas colunas, onde a imagem abaixo é o dobro do tamanho das outras. Feito em grid, se adapta aos tamanhos de tela. 2022-10-13 09:25:24 +00:00			`</div>`
feat: cria footer da pagina, responsivo em desktop e mobile 2022-10-13 13:52:23 +00:00			`<!-- Regiao antes do footer -->`
feat: cria a regiao do botton da pagina, responsiva para mobile e desktop, antes do footer. criação seguindo o layout, qu eno mobile o texto com a imagem troca de posição e a imagem troca de estilo 2022-10-13 12:25:33 +00:00			`<div class="bottom-flex">`
			`<section class="bottom-text">`
			`<h2 class="bottom-subtitle">Lorem ipsum dolor sit amet</h2>`
fix: corrige o alinhamento de banner e textos acima do footer 2022-10-13 22:56:54 +00:00			`<p class="bottom-paraphase">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: cria footer da pagina, responsivo em desktop e mobile 2022-10-13 13:52:23 +00:00			`</section>`
			`<figure>`
fix: corrige o alinhamento de banner e textos acima do footer 2022-10-13 22:56:54 +00:00			`<img src="assets/banner/banner-footer.png" alt="imagem de um oculos. de frente para uma tela de computador." class="botton-img-desktop"></img>`
feat: cria footer da pagina, responsivo em desktop e mobile 2022-10-13 13:52:23 +00:00			`</figure>`
feat: cria a regiao do botton da pagina, responsiva para mobile e desktop, antes do footer. criação seguindo o layout, qu eno mobile o texto com a imagem troca de posição e a imagem troca de estilo 2022-10-13 12:25:33 +00:00
feat: cria footer da pagina, responsivo em desktop e mobile 2022-10-13 13:52:23 +00:00			`<figure>`
fix: corrige o alinhamento de banner e textos acima do footer 2022-10-13 22:56:54 +00:00			`<img src="assets/banner/banne-footer-mobile.png" alt="imagem de um oculos. de frente para uma tela de computador." class="botton-img-mobile"></img>`
feat: cria footer da pagina, responsivo em desktop e mobile 2022-10-13 13:52:23 +00:00			`</figure>`
feat: cria a regiao do botton da pagina, responsiva para mobile e desktop, antes do footer. criação seguindo o layout, qu eno mobile o texto com a imagem troca de posição e a imagem troca de estilo 2022-10-13 12:25:33 +00:00
feat: cria footer da pagina, responsivo em desktop e mobile 2022-10-13 13:52:23 +00:00			`</div>`
			`</main>`
			`<footer>`
			`<div class="container-contact">`
			`<ul class="contact">`
			`<li class="icon-contact"><img src="assets/svg/intagram-icon.svg" alt="icone do intagram"></li>`
			`<li class="icon-contact"><img src="assets/svg/facebook-icon.svg" alt="icone do facebook"></li>`
			`<li class="icon-contact"><img src="assets/svg/youtube-icon.svg" alt="icone do youtube"></li>`
			`</ul>`
fix: corrige o alinhamento de banner e textos acima do footer 2022-10-13 22:56:54 +00:00			`<small class="footer-text"> Copyright © 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-00`
			`</small>`
feat: cria footer da pagina, responsivo em desktop e mobile 2022-10-13 13:52:23 +00:00			`</div>`
			`</footer>`
			`</body>`

			`</html>`