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>

        <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 href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">

        <link rel="stylesheet" href="./assents/style/estilo.css"/>
    
        <title>Desafio da M3 Academy</title>
    </head>

    <body>
        <header class="page-header">
                <img src="./assents/imagens/Logo-M3Academy 1.svg" alt="logo da M3 Academy" class="logo-m3"/>
        </header>
        <main>
            <section class="banner-principal">
                <img class="banner-big" src="./assents/imagens/big-banner.png" alt="Banner principal"/>
                <img  class="banner-big-mobile" src="./assents/imagens/big-banner-mobile.png" alt="Banner principal">
            </section>

            <section class="text">
                <div class="box-text">
                    <h2 class="text-sub-title text">Lorem ipsum</h2>
                    <h1 class="text-title text">dolor sit amet</h1>
                </div>
                <p class="text-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>

                <img class="theree-computer" src="./assents/imagens/three-computers.png" alt="três computadores">
            </section>

            <section class="cards-top">
                <figure class="card">
                    <img class="card-foto"  src="./assents/imagens/card-top-shop.png" alt="Foto da loja"/>
                    <figcaption class="text-card"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.</figcaption>
                </figure>

                <figure class="card">
                    <img class="card-foto"  src="./assents/imagens/card-top-shopping-bag.png" alt="Foto de bolsa da loja"/>
                    <figcaption class="text-card"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.</figcaption>
                </figure>

                <figure class="card">
                    <img class="card-foto" src="./assents/imagens/card-top-coin.png" alt="Foto de uma moeda"/>
                    <figcaption class="text-card"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.</figcaption>
                </figure>
            </section>

            <div class="gallery-box">
                <div class="gallery">
                    <img src="./assents/imagens/card-middle-1.png" alt="computador quase completamente fechado">
                    <img src="./assents/imagens/card-middle-2.png" alt="computador meio completamente fechado">
                    <img src="./assents/imagens/card-middle-3.png" alt="computador quase completamente fechado de lado">
                </div>
            </div>

            <section class="amiga">
                <div class="card-total-bottom">

                <figure class="card card-bottom">
                    <img class="card-foto-bottom" src="./assents/imagens/card-bottom-money.png" alt="foto de dinheiro">
                    <figcaptionet class="text-card-bottom">
                        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>

                <figure class="card card-bottom">
                    <img class="card-foto-bottom" src="./assents/imagens/card-bottom-coin.png" alt=" foto de moeda">
                    <figcaption class="text-card-bottom">
                        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>

                <figure class="card card-bottom">
                    <img class="card-foto-bottom" src="./assents/imagens/card-bottom-laptop.png" alt="foto de um laptop">
                    <figcaption class="text-card-bottom">
                        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>

                <figure class="card card-bottom">
                    <img class="card-foto-bottom" src="./assents/imagens/card-bottom-group.png" alt="foto de um celular">
                    <figcaption class="text-card-bottom">
                        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>
            </section>

           
        </main>
        
    </body>
</html>
Inicializando o Desafio 2022-10-11 21:38:27 +00:00			`<!DOCTYPE html>`
			`<html lang="pt-br">`
			`<head>`
criação do css do texto e foto três comptadores 2022-10-12 18:12:29 +00:00			`<link rel="preconnect" href="https://fonts.googleapis.com">`
			`<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>`

Inicializando o Desafio 2022-10-11 21:38:27 +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"/>`

criação do css do texto e foto três comptadores 2022-10-12 18:12:29 +00:00			`<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">`
Inicializando o Desafio 2022-10-11 21:38:27 +00:00
criação do css do texto e foto três comptadores 2022-10-12 18:12:29 +00:00			`<link rel="stylesheet" href="./assents/style/estilo.css"/>`

Inicializando o Desafio 2022-10-11 21:38:27 +00:00			`<title>Desafio da M3 Academy</title>`
			`</head>`

			`<body>`
cabeçalho 2022-10-12 00:22:33 +00:00			`<header class="page-header">`
			`<img src="./assents/imagens/Logo-M3Academy 1.svg" alt="logo da M3 Academy" class="logo-m3"/>`
			`</header>`
adicionando banner principal e alterações na logo 2022-10-12 11:07:10 +00:00			`<main>`
criando o banner mobile e editando banner 2022-10-12 15:28:14 +00:00			`<section class="banner-principal">`
			`<img class="banner-big" src="./assents/imagens/big-banner.png" alt="Banner principal"/>`
			`<img class="banner-big-mobile" src="./assents/imagens/big-banner-mobile.png" alt="Banner principal">`
			`</section>`

criação do css do texto e foto três comptadores 2022-10-12 18:12:29 +00:00			`<section class="text">`
			`<div class="box-text">`
			`<h2 class="text-sub-title text">Lorem ipsum</h2>`
			`<h1 class="text-title text">dolor sit amet</h1>`
			`</div>`
			`<p class="text-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>`
Inicializando o Desafio 2022-10-11 21:38:27 +00:00
criação do css do texto e foto três comptadores 2022-10-12 18:12:29 +00:00			`<img class="theree-computer" src="./assents/imagens/three-computers.png" alt="três computadores">`
			`</section>`
adicionando banner principal e alterações na logo 2022-10-12 11:07:10 +00:00
criação dos top card e adição das fotos dp meio 2022-10-12 22:46:18 +00:00			`<section class="cards-top">`
			`<figure class="card">`
			`<img class="card-foto" src="./assents/imagens/card-top-shop.png" alt="Foto da loja"/>`
			`<figcaption class="text-card"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.</figcaption>`
			`</figure>`

			`<figure class="card">`
			`<img class="card-foto" src="./assents/imagens/card-top-shopping-bag.png" alt="Foto de bolsa da loja"/>`
			`<figcaption class="text-card"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.</figcaption>`
			`</figure>`

			`<figure class="card">`
			`<img class="card-foto" src="./assents/imagens/card-top-coin.png" alt="Foto de uma moeda"/>`
			`<figcaption class="text-card"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.</figcaption>`
			`</figure>`
			`</section>`
Inicializando o Desafio 2022-10-11 21:38:27 +00:00
criação do card bottom e ajustes 2022-10-13 03:08:41 +00:00			`<div class="gallery-box">`
			`<div class="gallery">`
			`<img src="./assents/imagens/card-middle-1.png" alt="computador quase completamente fechado">`
			`<img src="./assents/imagens/card-middle-2.png" alt="computador meio completamente fechado">`
			`<img src="./assents/imagens/card-middle-3.png" alt="computador quase completamente fechado de lado">`
			`</div>`
criação dos top card e adição das fotos dp meio 2022-10-12 22:46:18 +00:00			`</div>`
Inicializando o Desafio 2022-10-11 21:38:27 +00:00
criação do card bottom e ajustes 2022-10-13 03:08:41 +00:00			`<section class="amiga">`
			`<div class="card-total-bottom">`
Inicializando o Desafio 2022-10-11 21:38:27 +00:00
criação do card bottom e ajustes 2022-10-13 03:08:41 +00:00			`<figure class="card card-bottom">`
			`<img class="card-foto-bottom" src="./assents/imagens/card-bottom-money.png" alt="foto de dinheiro">`
			`<figcaptionet class="text-card-bottom">`
			`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>`
Inicializando o Desafio 2022-10-11 21:38:27 +00:00
criação do card bottom e ajustes 2022-10-13 03:08:41 +00:00			`<figure class="card card-bottom">`
			`<img class="card-foto-bottom" src="./assents/imagens/card-bottom-coin.png" alt=" foto de moeda">`
			`<figcaption class="text-card-bottom">`
			`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>`
Inicializando o Desafio 2022-10-11 21:38:27 +00:00
criação do card bottom e ajustes 2022-10-13 03:08:41 +00:00			`<figure class="card card-bottom">`
			`<img class="card-foto-bottom" src="./assents/imagens/card-bottom-laptop.png" alt="foto de um laptop">`
			`<figcaption class="text-card-bottom">`
			`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>`
Inicializando o Desafio 2022-10-11 21:38:27 +00:00
criação do card bottom e ajustes 2022-10-13 03:08:41 +00:00			`<figure class="card card-bottom">`
			`<img class="card-foto-bottom" src="./assents/imagens/card-bottom-group.png" alt="foto de um celular">`
			`<figcaption class="text-card-bottom">`
			`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>`
			`</section>`
Inicializando o Desafio 2022-10-11 21:38:27 +00:00
criação do card bottom e ajustes 2022-10-13 03:08:41 +00:00
adicionando banner principal e alterações na logo 2022-10-12 11:07:10 +00:00			`</main>`

Inicializando o Desafio 2022-10-11 21:38:27 +00:00			`</body>`
			`</html>`