Yan_Garriga/challenge-landing-page-Yan_Garriga
1
0
Fork 0
forked from M3-Academy/challenge-landing-page
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: adiciona banner desktop

Browse Source
This commit is contained in:
Yan Pecanha Garriga 2022-10-11 18:50:54 -03:00
parent c2957e055f
commit 25fc89dc22
2 changed files with 154 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
assets/styles.css/main.css
View File

@ -24,7 +24,7 @@ body {
.top-infocard { .top-infocard {
display: flex; display: flex;
justify-content: center; justify-content: center;
padding: 73px 0 0; padding: 3.80vw 0 0;
} }
.top-infocard-text { .top-infocard-text {
@ -63,20 +63,20 @@ body {
} }
.top-infocard-image { .top-infocard-image {
padding: 73px 0 89px 0; padding: 3.80vw 0 4.63vw 0;
} }
.top-card-image { .top-card-image {
display: block; display: block;
margin-bottom: 26px; margin-bottom: 1.40vw;
} }
.top-cards { .top-cards {
background: #FFFFFF; background: #FFFFFF;
grid-template-columns: repeat(3, max-content); grid-template-columns: repeat(3, max-content);
padding: 90px 0 80px; padding: 3.125vw 0 4.166vw;
display: grid; display: grid;
gap: 20px; gap: 1.09vw;
justify-content: center; justify-content: center;
} }
@ -180,6 +180,11 @@ body {
line-height: 24px; line-height: 24px;
} }
.bottom-banner-image {
width: 100%;
padding: 2.6vw 14.583vw 6.04vw;
}
@media screen and (max-width: 414px) { @media screen and (max-width: 414px) {
.main-banner-desktop { .main-banner-desktop {
display: none; display: none;

278
index.html
View File

@ -1,160 +1,168 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="pt-BR"> <html lang="pt-BR">
<head> <head>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>M3 Desafio 1</title> <title>M3 Desafio 1</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./assets/styles.css/main.css" /> <link rel="stylesheet" href="./assets/styles.css/main.css" />
</head> </head>
<body> <body>
<header class="page-header"> <header class="page-header">
<a href="/"> <a href="/">
<img class="header-logo" src="./assets/images/Logo-M3Academy 1.png" alt="Logo M3-Academy" /> <img class="header-logo" src="./assets/images/Logo-M3Academy 1.png" alt="Logo M3-Academy" />
</a> </a>
</header> </header>
<main> <main>
<section class="main-banner-row"> <section class="main-banner-row">
<img class="main-banner main-banner-desktop" src="./assets/images/Main-banner-desktop.png" <img class="main-banner main-banner-desktop" src="./assets/images/Main-banner-desktop.png"
alt="Banner principal desktop"> alt="Banner principal desktop">
<img class="main-banner main-banner-mobile" src="./assets/images/main-banner-mobile.png" <img class="main-banner main-banner-mobile" src="./assets/images/main-banner-mobile.png"
alt="Banner principal mobile"> alt="Banner principal mobile">
</section> </section>
<section class="top-infocard"> <section class="top-infocard">
<div class="top-infocard-text"> <div class="top-infocard-text">
<h2 class="top-infocard-subtitle">Lorem ipsum</h2> <h2 class="top-infocard-subtitle">Lorem ipsum</h2>
<h1 class="top-infocard-title">Dolor sit amet</h1> <h1 class="top-infocard-title">Dolor sit amet</h1>
<p class="top-infocard-description"> <p class="top-infocard-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla
interdum. interdum.
Curabitur ut tortor sed lacus egestas vulputate vel sit amet velit. Nulla suscipit magna dui. Curabitur ut tortor sed lacus egestas vulputate vel sit amet velit. Nulla suscipit magna dui.
</p> </p>
<div> <div>
<img class="top-infocard-image" src="./assets/images/top-infocard-image.png" <img class="top-infocard-image" src="./assets/images/top-infocard-image.png"
alt="Primeira infocard do topo" /> alt="Primeira infocard do topo" />
</div> </div>
</section> </section>
<section class="top-cards"> <section class="top-cards">
<div class="top-card"> <div class="top-card">
<img class="top-card-image" src="./assets/images/top-card01.png" <img class="top-card-image" src="./assets/images/top-card01.png"
alt="Imagem do Primeiro card do Topo" /> alt="Imagem do Primeiro card do Topo" />
<p class="top-card-description"> <p class="top-card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla
interdum. interdum.
</p> </p>
</div>
<div class="top-card">
<img class="top-card-image" src="./assets/images/top-card-02.png"
alt="Imagem do Segundo card do Topo" />
<p class="top-card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla
interdum.
</p>
</div>
<div class="top-card">
<img class="top-card-image" src="./assets/images/top-card03.png"
alt="Imagem do Terceiro card do Topo" />
<p class="top-card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla
interdum.
</p>
</div>
</section>
<section class="middle-banner">
<div class="middle-banner-group">
<div class="middle-banner-item">
<img class="middle-banner-image" src="./assets/images/middle-banner-01.png"
alt="Primeiro banner do Meio" />
</div> </div>
<div class="middle-banner-item"> <div class="top-card">
<img class="middle-banner-image" src="./assets/images/middle-banner-02.png" <img class="top-card-image" src="./assets/images/top-card-02.png"
alt="Segundo banner do meio" /> alt="Imagem do Segundo card do Topo" />
<p class="top-card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla
interdum.
</p>
</div> </div>
<div class="middle-banner-item"> <div class="top-card">
<img class="middle-banner-image" src="./assets/images/middle-banner-03.png" <img class="top-card-image" src="./assets/images/top-card03.png"
alt="Terceiro banner do meio" /> alt="Imagem do Terceiro card do Topo" />
<p class="top-card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla
interdum.
</p>
</div> </div>
</div> </section>
</section>
<section class="bottom-card"> <section class="middle-banner">
<div class="bottom-card-group"> <div class="middle-banner-group">
<img class=" bottom-card-image" src="./assets/images/bottom-card-01.png" alt="image01-bottomcard" /> <div class="middle-banner-item">
<img class="middle-banner-image" src="./assets/images/middle-banner-01.png"
alt="Primeiro banner do Meio" />
</div>
<p class="bottom-card-text"> <div class="middle-banner-item">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla <img class="middle-banner-image" src="./assets/images/middle-banner-02.png"
interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui alt="Segundo banner do meio" />
fringilla interdum. </div>
</p>
<div class="middle-banner-item">
<img class="middle-banner-image" src="./assets/images/middle-banner-03.png"
alt="Terceiro banner do meio" />
</div>
</div>
</section>
<section class="bottom-card">
<div class="bottom-card-group">
<img class=" bottom-card-image" src="./assets/images/bottom-card-01.png" alt="image01-bottomcard" />
<p class="bottom-card-text">
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-group">
<img class="bottom-card-image" src="./assets/images/bottom-card-02.png" alt="image02-bottomcard" />
<p class="bottom-card-text">
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-group">
<img class="bottom-card-image" src="./assets/images/bottom-card-03.png" alt="image03-bottomcard" />
<p class="bottom-card-text">
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-group">
<img class="bottom-card-image" src="./assets/images/bottom-card-04.png" alt="image04-bottomcard" />
<p class="bottom-card-text">
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>
<section class="bottom-infocard">
<div class="bottom-infocard-group">
<h3 class="bottom-infocard-tittle">Lorem ipsum dolor sit amet</h3>
<p class="bottom-infocard-paragraph">
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>
<div class="bottom-banner">
<img class="bottom-banner-image" src="./assets/images/bottom-banner-desktop.png" alt="banner de baixo" />
</div> </div>
<div class="bottom-card-group"> <footer>
<img class="bottom-card-image" src="./assets/images/bottom-card-02.png" alt="image02-bottomcard" />
<p class="bottom-card-text"> </footer>
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-group">
<img class="bottom-card-image" src="./assets/images/bottom-card-03.png" alt="image03-bottomcard" />
<p class="bottom-card-text">
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-group">
<img class="bottom-card-image" src="./assets/images/bottom-card-04.png" alt="image04-bottomcard" />
<p class="bottom-card-text">
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>
<section class="bottom-infocard">
<div class="bottom-infocard-group">
<h3 class="bottom-infocard-tittle">Lorem ipsum dolor sit amet</h3>
<p class="bottom-infocard-paragraph">
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>
</main>
</body>
</main>
</body>
</html> </html>