challenge-landing-page-samu.../index.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">
    <title>M3 Landing Page</title>
    <link rel="stylesheet" href="styles/style.css">
</head>
<body>
    <header class="page-header">
        <a href="/"><img src="assets/images/Logo-M3Academy 1.svg" alt="Logo M3" class="header-logo"></a>
    </header>
    <main>
        <picture>
            <source media="(max-width: 500px)" srcset="assets/mobile-images/top-card-image.png">
            <source media="(min-width: 501px)" srcset="assets/images/desktop-banner.png">
            <img src="assets/images/desktop-banner.png" alt="laptop image banner" class="main-banner">
        </picture>
        <section class="first-content">
            <div class="first-content-text">
                <h1 class="first-content-h2">Lorem Ipsum</h1>
                <h2 class="first-content-h1">Dolor Sit Amet</h2>
                <p class="first-content-p">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>
        </section>
        <section>
            <picture>
                <img src="assets/images/computers.svg" alt="computers image" class="block">
            </picture>
        </section>
        <section>
            <div class="first-card">
                <div class="first-card-cards"><img src="assets/images/shop 1.svg" alt="shop image" class="first-card-image"><p class="first-card-p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p></div>
                <div class="first-card-cards"><img src="assets/images/shopping-bag (1) 1.png" alt="bag shop image" class="first-card-image"><p class="first-card-p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p></div>
                <div class="first-card-cards"><img src="assets/images/coin 1.png" alt="coin image" class="first-card-image"><p class="first-card-p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p></div>
            </div>
        </section>
        <section class="image-row-background">
            <div class="image-row-wrapper">
                <div class="image-row-desktop">
                    <div class="row-image"><img src="assets/images/Rectangle 13.png" alt="laptop image" class="row-image-desktop"></div>
                    <div class="row-image"><img src="assets/images/Rectangle 16.png" alt="laptop image" class="row-image-desktop"></div>
                    <div class="row-image"><img src="assets/images/Rectangle 17.png" alt="laptop image" class="row-image-desktop"></div>
                </div>
                <div class="image-row-mobile1">
                    <img src="assets/mobile-images/middle-card-image01.png" alt="laptop image" class="row-image-mobile">
                    <img src="assets/mobile-images/middle-card-image02.png" alt="laptop image" class="row-image-mobile">
                </div>
                <div class="image-row-mobile2"><img src="assets/mobile-images/middle-card-image03.png" alt="laptop image" class="row-image-mobile2"></div>
            </div>
        </section>
            
        <section>
            <div class="second-card">
                <div class="second-card-cards"><img src="assets/images/money (1) 2.svg" alt="shop image" class="second-card-image"><p class="second-card-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="second-card-cards"><img src="assets/images/coin 2.svg" alt="bag shop image" class="second-card-image"><p class="second-card-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="second-card-cards"><img src="assets/images/laptop 1.svg" alt="coin image" class="second-card-image"><p class="second-card-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="second-card-cards"><img src="assets/images/Group.svg" alt="coin image" class="second-card-image"><p class="second-card-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>
        </section>
        <section class="bottom-banner2">
            <div class="bottom-banner-desktop">
                <img src="assets/images/Rectangle 15.png" alt="computer image" class="bottom-banner-img">
            </div>
            <div class="bottom-banner-mobile">
            <img src="assets/mobile-images/bottom-card-image.png" alt="" class="bottom-banner-img">
            </div>
        </section>
        <section class="second-content">
            <div class="second-content-text">
                <h2 class="second-content-h2">Lorem ipsum dolor sit amet</h2>
                <p class="second-content-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>
            </div>
        </section>
        <section class="bottom-banner">
            <div class="bottom-banner-desktop">
                <img src="assets/images/Rectangle 15.png" alt="computer image" class="bottom-banner-img">
            </div>
            <div class="bottom-banner-mobile">
            <img src="assets/mobile-images/bottom-card-image.png" alt="" class="bottom-banner-img">
            </div>
        </section>
        <section class="second-content2">
            <div class="second-content-text">
                <h2 class="second-content-h2">Lorem ipsum dolor sit amet</h2>
                <p class="second-content-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>
            </div>
        </section>
        <footer>
            <section class="end-footer">
                <div class="footer-images">
                    <div><img src="assets/images/instagram-logo.svg" alt="instagram logo" class="footer-img"></div>
                    <div><img src="assets/images/facebook-logo.svg" alt="facebook logo"class="footer-img"></div >
                    <div><img src="assets/images/youtube 2.svg" alt="youtube logo" class="footer-img"></div >
                </div>
                <p class="footer-p">Copyright © 2020 - Loja  Comércio Eletrônico CNPJ: 000.000.000/0001-00
                </p>
            </section>
        </footer>
    </main>
</body>
</html>
Cria o header desktop e o header mobile 2022-10-10 00:55:36 +00:00			`<!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">`
			`<title>M3 Landing Page</title>`
			`<link rel="stylesheet" href="styles/style.css">`
			`</head>`
			`<body>`
			`<header class="page-header">`
			`<a href="/"><img src="assets/images/Logo-M3Academy 1.svg" alt="Logo M3" class="header-logo"></a>`
			`</header>`
Adiciona o main banner desktop e o main banner mobile 2022-10-11 19:21:24 +00:00			`<main>`
			`<picture>`
adiciona first-card e seus aspectos desktop e mobile 2022-10-11 20:48:25 +00:00			`<source media="(max-width: 500px)" srcset="assets/mobile-images/top-card-image.png">`
			`<source media="(min-width: 501px)" srcset="assets/images/desktop-banner.png">`
Adiciona o main banner desktop e o main banner mobile 2022-10-11 19:21:24 +00:00			`<img src="assets/images/desktop-banner.png" alt="laptop image banner" class="main-banner">`
			`</picture>`
Adiciona first-content e todos os seus aspectos 2022-10-11 19:36:52 +00:00			`<section class="first-content">`
			`<div class="first-content-text">`
			`<h1 class="first-content-h2">Lorem Ipsum</h1>`
			`<h2 class="first-content-h1">Dolor Sit Amet</h2>`
			`<p class="first-content-p">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>`
			`</section>`
Adiciona block e seus aspectos 2022-10-11 19:51:44 +00:00			`<section>`
			`<picture>`
			`<img src="assets/images/computers.svg" alt="computers image" class="block">`
			`</picture>`
			`</section>`
adiciona first-card e seus aspectos desktop e mobile 2022-10-11 20:48:25 +00:00			`<section>`
			`<div class="first-card">`
			`<div class="first-card-cards"><img src="assets/images/shop 1.svg" alt="shop image" class="first-card-image"><p class="first-card-p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p></div>`
			`<div class="first-card-cards"><img src="assets/images/shopping-bag (1) 1.png" alt="bag shop image" class="first-card-image"><p class="first-card-p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p></div>`
			`<div class="first-card-cards"><img src="assets/images/coin 1.png" alt="coin image" class="first-card-image"><p class="first-card-p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p></div>`
			`</div>`
			`</section>`
Adiciona Image row e seus aspectos desktop e mobile 2022-10-11 22:52:29 +00:00			`<section class="image-row-background">`
Adiciona image-row e seus aspectos desktop e mobile 2022-10-12 21:27:34 +00:00			`<div class="image-row-wrapper">`
			`<div class="image-row-desktop">`
			`<div class="row-image"><img src="assets/images/Rectangle 13.png" alt="laptop image" class="row-image-desktop"></div>`
			`<div class="row-image"><img src="assets/images/Rectangle 16.png" alt="laptop image" class="row-image-desktop"></div>`
			`<div class="row-image"><img src="assets/images/Rectangle 17.png" alt="laptop image" class="row-image-desktop"></div>`
			`</div>`
			`<div class="image-row-mobile1">`
			`<img src="assets/mobile-images/middle-card-image01.png" alt="laptop image" class="row-image-mobile">`
			`<img src="assets/mobile-images/middle-card-image02.png" alt="laptop image" class="row-image-mobile">`
			`</div>`
			`<div class="image-row-mobile2"><img src="assets/mobile-images/middle-card-image03.png" alt="laptop image" class="row-image-mobile2"></div>`
Adiciona Image row e seus aspectos desktop e mobile 2022-10-11 22:52:29 +00:00			`</div>`
			`</section>`
Adiciona image-row e seus aspectos desktop e mobile 2022-10-12 21:27:34 +00:00
Adiciona second-card e seus aspectos desktop e mobile 2022-10-12 13:18:49 +00:00			`<section>`
			`<div class="second-card">`
Adiciona image-row e seus aspectos desktop e mobile 2022-10-12 21:27:34 +00:00			`<div class="second-card-cards"><img src="assets/images/money (1) 2.svg" alt="shop image" class="second-card-image"><p class="second-card-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="second-card-cards"><img src="assets/images/coin 2.svg" alt="bag shop image" class="second-card-image"><p class="second-card-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="second-card-cards"><img src="assets/images/laptop 1.svg" alt="coin image" class="second-card-image"><p class="second-card-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="second-card-cards"><img src="assets/images/Group.svg" alt="coin image" class="second-card-image"><p class="second-card-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>`
			`</section>`
Adiciona bottomm-banner e footer desktop e mobile 2022-10-12 23:22:28 +00:00			`<section class="bottom-banner2">`
			`<div class="bottom-banner-desktop">`
			`<img src="assets/images/Rectangle 15.png" alt="computer image" class="bottom-banner-img">`
			`</div>`
			`<div class="bottom-banner-mobile">`
			`<img src="assets/mobile-images/bottom-card-image.png" alt="" class="bottom-banner-img">`
			`</div>`
			`</section>`
Adiciona second-content e seus aspectos desktop e mobile 2022-10-12 21:57:41 +00:00			`<section class="second-content">`
			`<div class="second-content-text">`
			`<h2 class="second-content-h2">Lorem ipsum dolor sit amet</h2>`
			`<p class="second-content-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>`
Adiciona second-card e seus aspectos desktop e mobile 2022-10-12 13:18:49 +00:00			`</div>`
			`</section>`
Adiciona bottomm-banner e footer desktop e mobile 2022-10-12 23:22:28 +00:00			`<section class="bottom-banner">`
			`<div class="bottom-banner-desktop">`
			`<img src="assets/images/Rectangle 15.png" alt="computer image" class="bottom-banner-img">`
			`</div>`
			`<div class="bottom-banner-mobile">`
			`<img src="assets/mobile-images/bottom-card-image.png" alt="" class="bottom-banner-img">`
			`</div>`
			`</section>`
			`<section class="second-content2">`
			`<div class="second-content-text">`
			`<h2 class="second-content-h2">Lorem ipsum dolor sit amet</h2>`
			`<p class="second-content-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>`
			`</div>`
			`</section>`
			`<footer>`
			`<section class="end-footer">`
			`<div class="footer-images">`
			`<div><img src="assets/images/instagram-logo.svg" alt="instagram logo" class="footer-img"></div>`
Adiciona mais responsividade ao site 2022-10-13 01:54:30 +00:00			`<div><img src="assets/images/facebook-logo.svg" alt="facebook logo"class="footer-img"></div >`
			`<div><img src="assets/images/youtube 2.svg" alt="youtube logo" class="footer-img"></div >`
Adiciona bottomm-banner e footer desktop e mobile 2022-10-12 23:22:28 +00:00			`</div>`
			`<p class="footer-p">Copyright © 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-00`
			`</p>`
			`</section>`
			`</footer>`
Adiciona o main banner desktop e o main banner mobile 2022-10-11 19:21:24 +00:00			`</main>`
Cria o header desktop e o header mobile 2022-10-10 00:55:36 +00:00			`</body>`
			`</html>`