desafio-landing-page-josegm.../landingpage.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 rel="stylesheet" href="./assets/styles/main.css" />  

        <title>M3 Academy - José G Mata R</title>
        
        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap" rel="stylesheet" />

    </head>

    <body>

        <header class="page-header">
            <a href="#">
                <img class="header-logo" src="./assets/images/logo-m3.png" alt="Logo M3" />
            </a>
        </header> <!-----------------Fim do header--------------------->

        <main>

            <section>
                <img class="main-banner main-banner-desktop" src="./assets/images/banner-desktop.png" alt="Banner Principal Desktop" />
                <img class="main-banner main-banner-mobile" src="./assets/images/banner-mobile.png" alt="Banner Principal Mobile" />
            </section>

            <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-desc">
                        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/banner-top.png" alt="Banner Top" />
                
            </section>

            <section class="top-cards">
                <div class="top-card cards">
                    <img class="top-card-image" src="./assets/images/top-card-image01.png" alt="Image do primeiro card do topo" />
                    <p class="top-card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.  </p>
                </div>

                <div class="top-card cards">
                    <img class="top-card-image" src="./assets/images/top-card-image02.png" alt="Image do segundo card do topo" />
                    <p class="top-card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.  </p>
                </div>

                <div class="top-card cards">
                    <img class="top-card-image" src="./assets/images/top-card-image03.png" alt="Image do terceiro card do topo" />
                    <p class="top-card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.  </p>
                </div>

            </section>

         <!--   <section class="middle-banners">
                <div class="banner">
                    <img src="./assets/images/mid-banner01.png" alt="Banner Middle 1" />
                </div>
                <div class="banner">
                    <img src="./assets/images/mid-banner02.png" alt="Banner Middle 2" />
                </div>
                <div class="banner">
                    <img src="./assets/images/mid-banner03.png" alt="Banner Middle 3" />
                </div>

            </section>-->

            <section class="bottom-cards">
                <div class="bottom-card cards">
                    <img class="bottom-card-image" src="./assets/images/bottom-card01.png" alt="Image do primeiro card de baixo" />
                    <p class="bottom-card-desc">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="bottom-card cards">
                    <img class="bottom-card-image" src="./assets/images/bottom-card02.png" alt="Image do segundo card de baixo" />
                    <p class="bottom-card-desc">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="bottom-card cards">
                    <img class="bottom-card-image" src="./assets/images/bottom-card03.png" alt="Image do terceiro card de baixo" />
                    <p class="bottom-card-desc">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="bottom-card cards">
                    <img class="bottom-card-image" src="./assets/images/bottom-card04.png" alt="Image do terceiro card de baixo" />
                    <p class="bottom-card-desc">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>

            
        </main>    <!-----------------Fim do main------------->

      <!--  <footer class="page-header">
            <a href="#">
                <img class="h-logo" src="./assets/images/logo-m3.png" alt="Logo M3" />
            </a>


        </footer> --> <!-----------------Fim do footer------------->

    </body>

</html>
Cria o header desktop e mobile 2022-10-11 02:50:43 +00:00			`<!DOCTYPE html>`
			`<html lang="pt-br">`

			`<head>`
Adiciona banner principal - desktop 2022-10-11 04:53:02 +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-11 02:50:43 +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/main.css" />`

			`<title>M3 Academy - José G Mata R</title>`
Adiciona banner principal - desktop 2022-10-11 04:53:02 +00:00
			`<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap" rel="stylesheet" />`
Cria o header desktop e mobile 2022-10-11 02:50:43 +00:00
			`</head>`

			`<body>`

			`<header class="page-header">`
			`<a href="#">`
			`<img class="header-logo" src="./assets/images/logo-m3.png" alt="Logo M3" />`
			`</a>`
Adiciona banner principal - desktop 2022-10-11 04:53:02 +00:00			`</header> <!-----------------Fim do header--------------------->`
Cria o header desktop e mobile 2022-10-11 02:50:43 +00:00
			`<main>`

Adiciona banner principal - desktop 2022-10-11 04:53:02 +00:00			`<section>`
			`<img class="main-banner main-banner-desktop" src="./assets/images/banner-desktop.png" alt="Banner Principal Desktop" />`
Adiciona banner principal - mobile 2022-10-11 05:23:41 +00:00			`<img class="main-banner main-banner-mobile" src="./assets/images/banner-mobile.png" alt="Banner Principal Mobile" />`
Adiciona banner principal - desktop 2022-10-11 04:53:02 +00:00			`</section>`
Cria o header desktop e mobile 2022-10-11 02:50:43 +00:00
Adiciona imagens, Adiciona Baner no top-infocard, desktop e mobile 2022-10-12 06:23:24 +00:00			`<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-desc">`
			`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/banner-top.png" alt="Banner Top" />`

			`</section>`

Adiciona top Cards, desktop e mobile 2022-10-12 13:56:11 +00:00			`<section class="top-cards">`
Adiciona bottom Cards, desktop e mobile 2022-10-13 00:52:39 +00:00			`<div class="top-card cards">`
Adiciona top Cards, desktop e mobile 2022-10-12 13:56:11 +00:00			`<img class="top-card-image" src="./assets/images/top-card-image01.png" alt="Image do primeiro card do topo" />`
			`<p class="top-card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>`
			`</div>`

Adiciona bottom Cards, desktop e mobile 2022-10-13 00:52:39 +00:00			`<div class="top-card cards">`
Adiciona top Cards, desktop e mobile 2022-10-12 13:56:11 +00:00			`<img class="top-card-image" src="./assets/images/top-card-image02.png" alt="Image do segundo card do topo" />`
			`<p class="top-card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>`
			`</div>`

Adiciona bottom Cards, desktop e mobile 2022-10-13 00:52:39 +00:00			`<div class="top-card cards">`
Adiciona top Cards, desktop e mobile 2022-10-12 13:56:11 +00:00			`<img class="top-card-image" src="./assets/images/top-card-image03.png" alt="Image do terceiro card do topo" />`
			`<p class="top-card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>`
			`</div>`

			`</section>`
Adiciona banner principal - desktop 2022-10-11 04:53:02 +00:00
Adiciona bottom Cards, desktop e mobile 2022-10-13 00:52:39 +00:00			`<!-- <section class="middle-banners">`
			`<div class="banner">`
			`<img src="./assets/images/mid-banner01.png" alt="Banner Middle 1" />`
			`</div>`
			`<div class="banner">`
			`<img src="./assets/images/mid-banner02.png" alt="Banner Middle 2" />`
			`</div>`
			`<div class="banner">`
			`<img src="./assets/images/mid-banner03.png" alt="Banner Middle 3" />`
			`</div>`

			`</section>-->`

			`<section class="bottom-cards">`
			`<div class="bottom-card cards">`
			`<img class="bottom-card-image" src="./assets/images/bottom-card01.png" alt="Image do primeiro card de baixo" />`
			`<p class="bottom-card-desc">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="bottom-card cards">`
			`<img class="bottom-card-image" src="./assets/images/bottom-card02.png" alt="Image do segundo card de baixo" />`
			`<p class="bottom-card-desc">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="bottom-card cards">`
			`<img class="bottom-card-image" src="./assets/images/bottom-card03.png" alt="Image do terceiro card de baixo" />`
			`<p class="bottom-card-desc">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="bottom-card cards">`
			`<img class="bottom-card-image" src="./assets/images/bottom-card04.png" alt="Image do terceiro card de baixo" />`
			`<p class="bottom-card-desc">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>`





Adiciona banner principal - desktop 2022-10-11 04:53:02 +00:00			`</main> <!-----------------Fim do main------------->`
Cria o header desktop e mobile 2022-10-11 02:50:43 +00:00
Adiciona bottom Cards, desktop e mobile 2022-10-13 00:52:39 +00:00			`<!-- <footer class="page-header">`
			`<a href="#">`
			`<img class="h-logo" src="./assets/images/logo-m3.png" alt="Logo M3" />`
			`</a>`
Cria o header desktop e mobile 2022-10-11 02:50:43 +00:00

Adiciona bottom Cards, desktop e mobile 2022-10-13 00:52:39 +00:00			`</footer> --> <!-----------------Fim do footer------------->`
Cria o header desktop e mobile 2022-10-11 02:50:43 +00:00
			`</body>`

			`</html>`