2022-10-10 16:50:29 +00:00
<!DOCTYPE html>
< html lang = "pt-br" >
< head >
2022-10-10 18:02:12 +00:00
<!-- FONT FAMILY -->
< link rel = "preconnect" href = "https://fonts.gstatic.com" crossorigin >
< link href = "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel = "stylesheet" >
2022-10-10 16:50:29 +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 > Challenge Landing Page< / title >
< link rel = "stylesheet" href = "./css/style.css" / >
< / head >
< body >
2022-10-10 18:02:12 +00:00
<!-- HEADER -->
2022-10-10 16:50:29 +00:00
< header class = "page-header" >
< img src = "./assets/logoM3.svg" alt = "" / >
< / header >
2022-10-10 18:02:12 +00:00
<!-- MAIN BANNER -->
<!-- MAIN BANNER DESKTOP -->
< figure >
< img src = "./assets/main-banner-desktop.png" alt = "Banner principal, imagem de um notebook" class = "main-banner-desktop" >
< / figure >
<!-- MAIN BANNER MOBILE -->
< figure >
2022-10-10 17:07:11 +00:00
< img src = "./assets/main-banner-mobile.png" alt = "" class = "main-banner-mobile" >
2022-10-10 18:02:12 +00:00
< / figure >
<!-- TOP INFOCARD -->
< section class = "top-infocard" >
<!-- SUBTITLE -->
< p class = "top-infocard-subtitle" >
Lorem ipsum
< / p >
<!-- TITLE -->
< p class = "top-infocard-title" >
dolor sit amet
< / p >
<!-- DESCRITION -->
< 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 >
<!-- IMAGE -->
< figure >
< img src = "./assets/top-infocard-image.png" alt = "Conexão entre computadores" class = "top-infocard-image" >
< / figure >
2022-10-10 16:50:29 +00:00
2022-10-10 18:02:12 +00:00
< / section >
2022-10-10 20:44:35 +00:00
<!-- TOP CARDS -->
< div class = "top-cards" >
<!-- CARD 01 -->
< div class = "card" >
< figure >
< img src = "./assets/top-card01.svg" alt = "Ícone de uma loja" class = "card-image" >
< / figure >
< figcaption class = "card-description" >
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
< / figcaption >
< / div >
<!-- CARD 02 -->
< div class = "card" >
< figure >
< img src = "./assets/top-card02.svg" alt = "Ícone de uma sacola de compras" class = "card-image" >
< / figure >
< figcaption class = "card-description" >
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
< / figcaption >
< / div >
<!-- CARD 03 -->
< div class = "card" >
< figure >
< img src = "./assets/top-card03.svg" alt = "Ícone de uma mão fazendo pagamentos" class = "card-image" >
< / figure >
< figcaption class = "card-description" >
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
< / figcaption >
< / div >
< / div >
2022-10-11 17:58:31 +00:00
<!-- MID BANNERS -->
< div class = "mid-banners" >
<!-- WRAPPER -->
< div class = "mid-banner-wrapper" >
<!-- MID BANNER 01 -->
< figure class = "mid-banner-image" >
< img src = "./assets/mid-banner-01.png" alt = "Banner do meio - imagem de um notebook" class = "mid-banner-image" >
< / figure >
<!-- MID BANNER 02 -->
< figure class = "mid-banner-image" >
< img src = "./assets/mid-banner-02.png" alt = "Banner do meio - imagem de um notebook" class = "mid-banner-image" >
< / figure >
<!-- MID BANNER 03 -->
< figure class = "mid-banner-image mid-banner-3" >
< img src = "./assets/mid-banner-03.png" alt = "Banner do meio - imagem de um notebook" class = "mid-banner-image" >
< / figure >
< / div >
< / div >
2022-10-11 18:39:37 +00:00
<!-- BOTTOM CARDS -->
< div class = "bottom-cards" >
<!-- CARD 01 -->
< div class = "card" >
< figure >
2022-10-12 14:16:56 +00:00
< img src = "./assets/bottom-card1.svg" alt = "Ícone de cedulas de dinheiro" class = "card-image" >
2022-10-11 18:39:37 +00:00
< / figure >
< figcaption class = "card-description bottom-card-description" >
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 >
< / div >
<!-- CARD 02 -->
< div class = "card" >
< figure >
2022-10-12 14:16:56 +00:00
< img src = "./assets/top-card03.svg" alt = "Ícone de uma mão fazendo pagamentos" class = "card-image" >
2022-10-11 18:39:37 +00:00
< / figure >
< figcaption class = "card-description bottom-card-description" >
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 >
< / div >
<!-- CARD 03 -->
< div class = "card" >
< figure >
2022-10-12 14:16:56 +00:00
< img src = "./assets/bottom-card3.svg" alt = "Ícone de um notebook" class = "card-image" >
2022-10-11 18:39:37 +00:00
< / figure >
< figcaption class = "card-description bottom-card-description" >
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 >
< / div >
<!-- CARD 04 -->
< div class = "card" >
< figure >
2022-10-12 14:16:56 +00:00
< img src = "./assets/bottom-card4.svg" alt = "Ícone de um celular" class = "card-image" >
2022-10-11 18:39:37 +00:00
< / figure >
< figcaption class = "card-description bottom-card-description" >
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 >
< / div >
< / div >
2022-10-12 14:16:56 +00:00
<!-- BOTTOM INFOCARD -->
< section class = "bottom-infocard" >
<!-- TITLE -->
< p class = "bottom-infocard-title" >
Lorem ipsum dolor sit amet
< / p >
<!-- DESCRIPTION -->
< 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 >
<!-- IMAGE DESKTOP -->
< figure >
< img class = "bottom-infocard-image-desktop" src = "./assets/bottom-infocard-image-desktop.png" alt = "Imagem de monitores desfocados" >
< / figure >
<!-- IMAGE IMAGE MOBILE -->
< figure >
< img class = "bottom-infocard-image-mobile" src = "./assets/bottom-infocard-image-mobile.png" alt = "Imagem de telas de um óculos com monitores ao fundo" >
< / figure >
< / section >
2022-10-11 18:39:37 +00:00
2022-10-10 18:02:12 +00:00
2022-10-10 16:50:29 +00:00
< / body >
< / html >
