Douglas-Vinicius-Nobrega/practice-time-landing-page
1
0
Fork 0
forked from M3-Academy/practice-time-landing-page
Code Issues Pull Requests Packages Projects Releases Wiki Activity

douglasnobrega #1

Merged
Douglas-Vinicius-Nobrega merged 5 commits from douglasnobrega into main 2022-10-08 17:59:12 +00:00
Conversation 0 Commits 5 Files Changed 16 +165 -96
3 changed files with 165 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit dd1211978e - Show all commits

BIN
assets/images/bottom-inforcard-image.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 447 KiB

54
assets/styles/style.css
View File

@ -119,6 +119,33 @@ body {
font-size: 16px; font-size: 16px;
} }
.bottom-infocard {
display: flex;
align-items: center;
justify-content: center;
padding: 142px 0 180px;
}
.bottom-infocard-image {
display: block;
margin-right: 40px;
}
.bottom-infocard-text {
max-width: 550px;
}
.bottom-infocard-title {
margin-bottom: 18px;
font-weight: 600;
line-height: 1;
font-size: 32px;
}
.bottom-infocard-description {
line-height: 24px;
font-size: 16px;
}
@media screen and (max-width: 414px) { @media screen and (max-width: 414px) {
@ -158,6 +185,25 @@ body {
width: 100%; width: 100%;
max-width: 240px; max-width: 240px;
} }
.bottom-infocard {
flex-direction: column;
padding: 80px 0 136px;
}
.bottom-infocard-image {
width: 100%;
max-width: 596px;
margin: 0 0 50px;
}
.bottom-infocard-text {
padding: 0 26px;
}
.bottom-infocard-title {
font-size: 24px;
}
} }
@media screen and (max-width: 768px){ @media screen and (max-width: 768px){
@ -202,5 +248,13 @@ body {
max-width: 520px; max-width: 520px;
margin-right: 70px; margin-right: 70px;
} }
.bottom-infocard-image {
max-width: 480px;
}
.bottom-infocard-text {
max-width: 200px;
}
} }

207
index.html
View File

@ -1,121 +1,136 @@
<!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 Academy Atividade</title> <title>M3 Academy Atividade</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet"/>
<link rel="stylesheet" href="assets/styles/style.css"/> <link rel="stylesheet" href="assets/styles/style.css"/>
</head> </head>
<body> <body>
<header class="page-header"> <header class="page-header">
<a href="/"> <a href="/">
<img class="header-logo" src="assets/images/m3-logo.png" alt="Logo M3"> <img class="header-logo" src="assets/images/m3-logo.png" alt="Logo M3">
</a> </a>
</header> </header>
<main> <main>
<section> <section>
<img class="main-banner main-banner-desktop" src="assets/images/main-banner-desktop.png" alt="Banner Desktop"/> <img class="main-banner main-banner-desktop" src="assets/images/main-banner-desktop.png" alt="Banner Desktop"/>
<img class="main-banner main-banner-mobile" src="assets/images/main-banner-mobile.png" alt="Banner Mobile"/> <img class="main-banner main-banner-mobile" src="assets/images/main-banner-mobile.png" alt="Banner 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 adipisicing elit. Lorem, ipsum dolor sit amet consectetur adipisicing elit.
debitis perferendis illo corrupti enim magni natus ipsa debitis perferendis illo corrupti enim magni natus ipsa
pariatur accusamus voluptatum dolores rerum dolor beatae? pariatur accusamus voluptatum dolores rerum dolor beatae?
</p>
</div>
<img class="top-infocard-image" src="assets/images/top-infocard-image.png" alt="Banner do infocard do topo"/>
</section>
<section class="top-cards">
<div class="top-card">
<img class="top-card-image" src="assets/images/top-card-image-01.png" alt="Imagem do Primeiro Card do Topo"/>
<p class="top-card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</p> </p>
</div> </div>
<div class="top-card"> <img class="top-infocard-image" src="assets/images/top-infocard-image.png" alt="Banner do infocard do topo"/>
<img class="top-card-image" src="assets/images/top-card-image-02.png" alt="Imagem do Primeiro Card do Topo"/>
<p class="top-card-description"> </section>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
<section class="top-cards">
<div class="top-card">
<img class="top-card-image" src="assets/images/top-card-image-01.png" alt="Imagem do Primeiro 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-card-image-02.png" alt="Imagem do Primeiro 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-card-image-03.png" alt="Imagem do Primeiro 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>
<img class="middle-banner middle-banner-desktop" src="assets/images/middle-banner-desktop.png" alt="Banner do Meio Desktop"/>
<img class="middle-banner middle-banner-mobile" src="assets/images/middle-banner-mobile.png" alt="Banner Principal Mobile"/>
</section>
<section class="bottom-cards">
<div class="bottom-cards-wrapper">
<div class="bottom-card">
<img class="bottom-card-image" src="assets/images/bottom-card-image-01.png" alt="Imagem do Primeiro Card de baixo"/>
<p class="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.
</p> </p>
</div> </div>
<div class="top-card"> <div class="bottom-card">
<img class="top-card-image" src="assets/images/top-card-image-03.png" alt="Imagem do Primeiro Card do Topo"/> <img class="bottom-card-image" src="assets/images/bottom-card-image-02.png" alt="Imagem do Segundo Card de baixo"/>
<p class="top-card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. <p class="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.
</p> </p>
</div> </div>
</section>
<section>
<img class="middle-banner middle-banner-desktop" src="assets/images/middle-banner-desktop.png" alt="Banner do Meio Desktop"/>
<img class="middle-banner middle-banner-mobile" src="assets/images/middle-banner-mobile.png" alt="Banner Principal Mobile"/>
</section>
<section class="bottom-cards"> <div class="bottom-card">
<div class="bottom-cards-wrapper"> <img class="bottom-card-image" src="assets/images/bottom-card-image-03.png" alt="Imagem do Terceiro Card de baixo"/>
<div class="bottom-card">
<img class="bottom-card-image" src="assets/images/bottom-card-image-01.png" alt="Imagem do Primeiro Card de baixo"/>
<p class="bottom-card-description"> <p class="bottom-card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim
non dui fringilla interdum. Lorem ipsum dolor sit amet, non dui fringilla interdum. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</p> </p>
</div>
<div class="bottom-card">
<img class="bottom-card-image" src="assets/images/bottom-card-image-04.png" alt="Imagem do Quarto Card de baixo"/>
<p class="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.
</p>
</div>
</div> </div>
</section>
<div class="bottom-card"> <section class="bottom-infocard">
<img class="bottom-card-image" src="assets/images/bottom-card-image-02.png" alt="Imagem do Segundo Card de baixo"/> <img class="bottom-infocard-image" src="assets/images/bottom-inforcard-image.png" alt="Banner do Infocards de Baixo"/>
<p class="bottom-card-description"> <div class="bottom-infocard-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim <h2 class="bottom-infocard-title">
non dui fringilla interdum. Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet
consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </h2>
</p>
</div>
<div class="bottom-card"> <p class="bottom-infocard-description">
<img class="bottom-card-image" src="assets/images/bottom-card-image-03.png" alt="Imagem do Terceiro Card de baixo"/> 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>
<p class="bottom-card-description"> </main>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim </body>
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">
<img class="bottom-card-image" src="assets/images/bottom-card-image-04.png" alt="Imagem do Quarto Card de baixo"/>
<p class="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.
</p>
</div>
</div>
</section>
</main>
</body>
</html> </html>