2022-10-10 19:41:07 +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 > Desafio Landing Page< / title >
< link rel = "stylesheet" href = "assets/styles/main.css" >
< / head >
< body >
< header class = "page-header" >
< a href = "/" >
2022-10-10 21:57:03 +00:00
< img class = "header-logo" src = "assets/image/Logo-M3Academy 1.svg" alt = "Logo M3Academy" >
2022-10-10 19:41:07 +00:00
< / a >
< / header >
2022-10-10 21:57:03 +00:00
< main >
2022-10-10 20:04:18 +00:00
< div >
2022-10-12 22:18:04 +00:00
< img class = "main-banner" src = "assets/image/main-banner-desktop.png" alt = "Banner exibindo imagem de um notebook com códigos de programação" >
2022-10-10 20:04:18 +00:00
< / div >
2022-10-10 21:13:01 +00:00
< section class = "top-infocard" >
< div class = "top-infocard-text" >
< h2 class = "top-infocard-subtitle" > Lorem ipsum< / h2 >
2022-10-10 21:57:03 +00:00
2022-10-10 21:13:01 +00:00
< h1 class = "top-infocard-title" > dolor sit amet< / h1 >
2022-10-10 21:57:03 +00:00
2022-10-10 21:13:01 +00:00
< 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 >
2022-10-10 21:57:03 +00:00
< div class = "top-infocard-image" >
2022-10-11 02:18:53 +00:00
< img src = "assets/image/top-inforcard-image.png" alt = "Figura representando conexão entre computadores" >
2022-10-10 21:57:03 +00:00
< / div >
2022-10-11 00:25:45 +00:00
< / section >
2022-10-11 02:18:53 +00:00
< div class = "top-cards" >
2022-10-11 00:25:45 +00:00
< figure class = "top-card" >
2022-10-11 02:18:53 +00:00
< img class = "top-card-image" src = "assets/image/top-cards-image01.svg" alt = "Figura representando uma loja" >
2022-10-11 00:25:45 +00:00
< figcaption class = "top-card-description" >
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
< / figcaption >
< / figure >
< figure class = "top-card" >
2022-10-11 02:18:53 +00:00
< img class = "top-card-image" src = "assets/image/top-cards-image02.svg" alt = "Figura representando uma sacola de compras" >
2022-10-11 00:25:45 +00:00
< figcaption class = "top-card-description" >
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
< / figcaption >
< / figure >
< figure class = "top-card" >
2022-10-11 02:18:53 +00:00
< img class = "top-card-image" src = "assets/image/top-cards-image03.svg" alt = "Figura representando uma mão com uma moeda acima" >
2022-10-11 00:25:45 +00:00
< figcaption class = "top-card-description" >
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
2022-10-11 02:18:53 +00:00
< / figcaption >
2022-10-11 00:25:45 +00:00
< / figure >
2022-10-11 02:18:53 +00:00
< / div >
< div class = "middle-banner" >
< div class = "middle-banner-image-wrapper" >
< div class = "middle-banner-image a" >
< img src = "assets/image/middle-banner1.png" alt = "Imagem de um Laptop" >
< / div >
< div class = "middle-banner-image b" >
< img src = "assets/image/middle-banner2.png" alt = "Imagem de um Laptop" >
< / div >
< div class = "middle-banner-image c" >
< img src = "assets/image/middle-banner3.png" alt = "Imagem de um Laptop" >
< / div >
< / div >
< / div >
2022-10-11 03:15:53 +00:00
< div class = "bottom-cards" >
< figure class = "bottom-card" >
2022-10-11 16:35:06 +00:00
< img class = "bottom-card-image" src = "assets/image/bottom-card-image1.svg" alt = "Figura representando uma nota" >
2022-10-11 03:15:53 +00:00
< figcaption class = "bottom-card-description" >
2022-10-12 22:18:04 +00:00
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.
2022-10-11 03:15:53 +00:00
< / figcaption >
< / figure >
< figure class = "bottom-card" >
2022-10-11 16:35:06 +00:00
< img class = "bottom-card-image" src = "assets/image/bottom-card-image2.svg" alt = "Figura representando uma mão com uma moeda acima" >
2022-10-11 03:15:53 +00:00
< figcaption class = "bottom-card-description" >
2022-10-12 22:18:04 +00:00
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.
2022-10-11 03:15:53 +00:00
< / figcaption >
< / figure >
< figure class = "bottom-card" >
2022-10-11 16:35:06 +00:00
< img class = "bottom-card-image" src = "assets/image/bottom-card-image3.svg" alt = "Figura representando um notebook" >
2022-10-11 03:15:53 +00:00
< figcaption class = "bottom-card-description" >
2022-10-12 22:18:04 +00:00
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.
2022-10-11 03:15:53 +00:00
< / figcaption >
< / figure >
< figure class = "bottom-card" >
2022-10-11 16:35:06 +00:00
< img class = "bottom-card-image" src = "assets/image/bottom-card-image4.svg" alt = "Figura representando um celular" >
2022-10-11 03:15:53 +00:00
< figcaption class = "bottom-card-description" >
2022-10-12 22:18:04 +00:00
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.
2022-10-11 03:15:53 +00:00
< / figcaption >
< / figure >
< / div >
2022-10-11 16:35:06 +00:00
< section class = "bottom-infocard" >
< section class = "bottom-infocard-text" >
< h1 class = "bottom-infocard-title" > Lorem ipsum dolor sit amet< / h1 >
< p class = "bottom-infocard-description" > 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 >
< div class = "bottom-infocard-image" >
< img class = "bottom-image" src = "assets/image/bottom-banner.png" alt = "Imagem com telas com códigos de programação" >
< / div >
< / section >
2022-10-10 19:41:07 +00:00
< / main >
2022-10-11 17:31:37 +00:00
< footer >
< div class = "footer-icon" >
< a href = "https://www.instagram.com/m3.ecommerce/" target = "_blank" > < img src = "assets/image/icon-instagram.svg" alt = "icone do instagram" > < / a >
< a href = "https://www.facebook.com/digitalm3" target = "_blank" > < img src = "assets/image/icon-facebook.svg" alt = "icone do facebook" > < / a >
< a href = "https://www.youtube.com/channel/UCW4o86gZG_ceA8CmHltXeXA" target = "_blank" > < img src = "assets/image/icon-youtube.svg" alt = "icone do youtube" > < / a >
< / div >
< p class = "footer-text" > Copyright © 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-00< / p >
< / footer >
2022-10-10 19:41:07 +00:00
< / body >
< / html >
