practice-time-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" />

            <title>M3 Landing Page</title>
            
            <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;900&display=swap" rel="stylesheet">
           
            <link rel="stylesheet" href="./_assets/css/main.css">
        </head>

    <body>

        <!-- Header | Image and background -->
        <header class="page-header">
            <a href="/"> 
                <img class="header-logo" src="./_assets/images/logo_m3.svg" alt="Logo M3" />
            </a>            
        </header>

        <main>

            <!-- Main Banner | desktop and Mobile -->
            <section>
                <img class="main-banner main-banner-desktop" src="./_assets/images/main-banner-desktop.jpg" alt="Banner principal Desktop" />
                <img class="main-banner main-banner-mobile" src="./_assets/images/main-banner-mobile.jpg" alt="Banner principal Mobile" />
            </section>

            <!-- First Infocard -->
            <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="Banner 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.svg" alt="Imagem do Primeiro 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.svg" alt="Imagem do Segundo 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.svg" alt="Imagem do Terceiro 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>

        </main>
    </body>
</html>
Cria o header desktop e mobile 2022-10-07 13:29:45 +00:00			`<!DOCTYPE html>`

			`<html lang="pt-BR">`
			`<head>`
Adiciona o top infocard desktop e mobile 2022-10-07 17:58:20 +00:00			`<link rel="preconnect" href="https://fonts.googleapis.com">`
			`<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>`

Cria o header desktop e mobile 2022-10-07 13:29:45 +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 Landing Page</title>`
Adiciona o top infocard desktop e mobile 2022-10-07 17:58:20 +00:00
			`<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;900&display=swap" rel="stylesheet">`

Cria o header desktop e mobile 2022-10-07 13:29:45 +00:00			`<link rel="stylesheet" href="./_assets/css/main.css">`
			`</head>`

			`<body>`
Adiciona o top infocard desktop e mobile 2022-10-07 17:58:20 +00:00
			`<!-- Header \| Image and background -->`
Cria o header desktop e mobile 2022-10-07 13:29:45 +00:00			`<header class="page-header">`
			`<a href="/">`
Adiciona o top infocard desktop e mobile 2022-10-07 17:58:20 +00:00			`<img class="header-logo" src="./_assets/images/logo_m3.svg" alt="Logo M3" />`
Cria o header desktop e mobile 2022-10-07 13:29:45 +00:00			`</a>`
			`</header>`
Adiciona os banner principais desktop e mobile 2022-10-07 16:44:00 +00:00
			`<main>`
Adiciona o top infocard desktop e mobile 2022-10-07 17:58:20 +00:00
			`<!-- Main Banner \| desktop and Mobile -->`
Adiciona os banner principais desktop e mobile 2022-10-07 16:44:00 +00:00			`<section>`
Adiciona o top infocard desktop e mobile 2022-10-07 17:58:20 +00:00			`<img class="main-banner main-banner-desktop" src="./_assets/images/main-banner-desktop.jpg" alt="Banner principal Desktop" />`
			`<img class="main-banner main-banner-mobile" src="./_assets/images/main-banner-mobile.jpg" alt="Banner principal Mobile" />`
			`</section>`

			`<!-- First Infocard -->`
			`<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="Banner do Infocard do Topo" />`

Adiciona os banner principais desktop e mobile 2022-10-07 16:44:00 +00:00			`</section>`
Adicona os cards do topo desktop e mobile 2022-10-07 20:14:00 +00:00
			`<section class="top-cards">`
			`<div class="top-card">`
			`<img class="top-card-image" src="./_assets/images/top-card-image-01.svg" alt="Imagem do Primeiro 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.svg" alt="Imagem do Segundo 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>`
Adiciona o top infocard desktop e mobile 2022-10-07 17:58:20 +00:00
Adicona os cards do topo desktop e mobile 2022-10-07 20:14:00 +00:00			`<div class="top-card">`
			`<img class="top-card-image" src="./_assets/images/top-card-image-03.svg" alt="Imagem do Terceiro 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>`
Adiciona o top infocard desktop e mobile 2022-10-07 17:58:20 +00:00
Adiciona os banner principais desktop e mobile 2022-10-07 16:44:00 +00:00			`</main>`
Cria o header desktop e mobile 2022-10-07 13:29:45 +00:00			`</body>`
			`</html>`