2022-10-11 19:48:02 +00:00
<!DOCTYPE html>
2022-10-11 20:43:34 +00:00
< html lang = "pt-br" >
2022-10-11 19:48:02 +00:00
< head >
< link rel = "preconnect" href = "https://fonts.googleapis.com" >
< link rel = "preconnect" href = "https://fonts.gstatic.com" crossorigin >
2022-10-13 05:22:23 +00:00
< link href = "https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
rel="stylesheet">
2022-10-11 19:48:02 +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" >
2022-10-11 20:43:34 +00:00
< link rel = "stylesheet" href = "style/style.css" >
2022-10-11 19:48:02 +00:00
< title > Challenge M3Academy< / title >
< / head >
< body >
2022-10-11 20:43:34 +00:00
< header class = "header-landingpage" >
< figure class = "header-logo-father" >
< img class = "header-logo" src = "assets/svg/Logo-M3Academy 1.svg" alt = "logo da M3 Academy" >
< / figure >
< / header >
< main class = "main-landingpage" >
<!-- AREA DO BANNER PRINCIPAL -->
< div class = "container-banner-main" >
< figure class = "container-banner-desktop" >
2022-10-13 05:22:23 +00:00
< img class = "banner-img banner-img-desktop" src = "assets/banner/banner-header.png"
alt="Notebook aberto com codigos HTML e CSS. Ao lado contem um celular, uma xicara branca, um fone e uma planta dentro de uma vaso. ">
2022-10-11 20:43:34 +00:00
< / figure >
< figure class = "container-banner-mobile" >
2022-10-13 05:22:23 +00:00
< img class = "banner-img banner-img-mobile" src = "assets/banner/banner-header-mobile.png"
alt="Notebook aberto com codigos HTML e CSS.">
2022-10-11 20:43:34 +00:00
< / figure >
< / div >
2022-10-13 09:25:24 +00:00
<!-- REGIAO ABAIXO DO BANNER PRINCIPAL -->
2022-10-11 23:48:52 +00:00
< div class = "container-midle" >
< section class = "container-midle-flex" >
< h2 class = "container-midle-subtitle" > Lorem ipsum< / h2 >
< h1 class = "container-midle-title" > Dolor sit amet< / h1 >
2022-10-13 05:22:23 +00:00
< p class = "container-midle-paragraph" > 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 >
2022-10-11 23:48:52 +00:00
2022-10-13 05:22:23 +00:00
< img src = "assets/img/midle-computer.png"
alt="Computadores alinhados. Um em cuma e dois embaixo, ligados por setas."
class="container-midle-img" />
2022-10-13 10:11:50 +00:00
<!-- CONTAINER CARD TRIPLO -->
2022-10-13 05:22:23 +00:00
< div class = "container-cards" >
< div class = "card-1" >
< figure >
< img class = "icon-card" src = "assets/svg/shop-icon.svg" alt = "icone de shopping" >
< figcaption class = "subtitle-card" > Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Cras euismod enim non dui fringilla interdum. < / figcaption >
< / figure >
< / div >
< div class = "card-2" >
< figure >
< img class = "icon-card" src = "assets/svg/shopping-bag-icon.svg"
alt="icone de shopping bag (sacola de shoppin) com um escudo azul na frente. Simboliza compra segura">
< figcaption class = "subtitle-card" > Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Cras euismod enim non dui fringilla interdum. < / figcaption >
< / figure >
< / div >
< div class = "card-3" >
< figure >
< img class = "icon-card" src = "assets/svg/coin-icon.svg"
alt="icone de mão segurando uma moeda">
< figcaption class = "subtitle-card" > Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Cras euismod enim non dui fringilla interdum. < / figcaption >
< / div >
< / figure >
< / div >
2022-10-11 23:48:52 +00:00
< / section >
< / div >
2022-10-13 09:25:24 +00:00
<!-- REGIAO DO BANNER MOSAICO -->
< div class = "wrapper-banner" >
< div class = "banner-mosaic" >
< div class = "mosaic-img1" >
< figure >
< img class = "mosaic-wrapper-img img1" src = "assets/img/computer-img-1.png"
alt="Notebook, posicionado de frente. Aberto em cerca de 45 graus>">
< / figure >
< / div >
< div class = "mosaic-img2" >
< figure >
< img class = "mosaic-wrapper-img img2" src = "assets/img/computer-img-2.png"
2022-10-13 10:11:50 +00:00
alt="Notebook, posicionado de frente, imagem feita de cima para baixo. Aberto em cerca de 60 graus">
< / figure >
2022-10-13 09:25:24 +00:00
< / div >
< div class = "mosaic-img3" >
< figure >
< img class = "mosaic-wrapper-img img3" src = "assets/img/computer-img-3.png"
alt="Notebook, posicionado de angulo lateal. Aberto em 60">
2022-10-13 10:11:50 +00:00
< / figure >
2022-10-13 09:25:24 +00:00
< / div >
< / div >
< / section >
< / div >
2022-10-13 12:25:33 +00:00
<!-- REGIAO ABAIXO DO BANNER MOSAICO(CONTAINER CARD QUADRUPLO) -->
2022-10-13 10:11:50 +00:00
< div class = "container-cards container-infocard" >
< div class = "card-1" >
< figure >
< img class = "icon-card" src = "assets/svg/money-icon.svg" alt = "Icone de cédulas." >
< figcaption class = "subtitle-card" > 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 >
< div class = "card-2" >
< figure >
< img class = "icon-card" src = "assets/svg/coin-icon.svg" alt = "icone de mão segurando uma moeda" >
< figcaption class = "subtitle-card" > 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 >
< div class = "card-3" >
< figure >
< img class = "icon-card" src = "assets/svg/laptop-icon.svg" alt = "icone de laptop aberto." >
< figcaption class = "subtitle-card" > 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 >
< div class = "card-4" >
< figure >
< img class = "icon-card" src = "assets/svg/phone-icon.svg" alt = "icone de um smartphone" >
< figcaption class = "subtitle-card" > 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 >
2022-10-13 09:25:24 +00:00
< / div >
2022-10-11 19:48:02 +00:00
2022-10-13 12:25:33 +00:00
< div class = "bottom-flex" >
< section class = "bottom-text" >
< h2 class = "bottom-subtitle" > Lorem ipsum dolor sit amet< / h2 >
< p class = "bottom-paraphase" > 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 >
< figure >
< img src = "assets/banner/banner-footer.png"
alt="imagem de um oculos. de frente para uma tela de computador."
class="botton-img-desktop">< / img >
< / figure >
< figure >
< img src = "assets/banner/banne-footer-mobile.png"
alt="imagem de um oculos. de frente para uma tela de computador."
class="botton-img-mobile">< / img >
< / figure >
< / div >
< / main >
< / body >
< / html >