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

feat: Cria infocard superior desktop

Browse Source
This commit is contained in:
Saulo Klein Nery 2022-10-11 13:40:02 -03:00
parent de9d6e85fb
commit ac696cc2be
2 changed files with 96 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
index.html
View File

@ -2,6 +2,8 @@
<html lang="pt-BR"> <html lang="pt-BR">
<head> <head>
<link rel="preconnect" href="https://fonts.googleapis.com"/>
<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"/>
@ -10,7 +12,8 @@
<title>Desafio 1 Landing Page</title> <title>Desafio 1 Landing Page</title>
<link rel="stylesheet" href="./styles/main.css"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet"/>
<link rel="stylesheet" href="./styles/main.css"/>
</head> </head>
<body> <body>
@ -22,14 +25,34 @@
<div> <div>
<figure> <figure>
<img class="main-banner" id="main-banner-desktop" src="./assets/imgs/main-banner-desktop.png" alt="Banner Principal Desktop"> <img class="main-banner main-banner-desktop" src="./assets/imgs/main-banner-desktop.png" alt="Banner Principal Desktop">
</figure> </figure>
<figure> <figure>
<img class="main-banner" id="main-banner-mobile" src="./assets/imgs/main-banner-mobile.png" alt="Banner Principal Mobile"> <img class="main-banner main-banner-mobile" src="./assets/imgs/main-banner-mobile.png" alt="Banner Principal Mobile">
</figure> </figure>
</div> </div>
<section class="top-infocard">
<div class="top-infocard-text">
<h2 class="top-infocard-subtitle">
Lorem ipsum
</h2>
<h1 class="top-infocard-title">
dolor sit amet
</h1>
<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>
<figure class="top-infocard-figure">
<img class="top-infocard-image" src="./assets/svgs/top-infocard-image.svg" alt="Imagem do Infocard Superior">
</figure>
</section>
</body> </body>

70
styles/main.css
View File

@ -8,6 +8,12 @@ img{
display: block; display: block;
} }
body{
color: #000;
font-family: 'Inter', sans-serif;
text-align: center;
}
.page-header{ .page-header{
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -19,14 +25,74 @@ img{
width: 100%; width: 100%;
} }
.top-infocard{
margin-top: 73px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 65px;
}
.top-infocard-text{
max-width: 40%;
}
.top-infocard-subtitle{
font-weight: 400;
font-size: 32px;
line-height: 39px;
text-transform: uppercase;
}
.top-infocard-title{
font-weight: 500;
font-size: 48px;
line-height: 58px;
text-transform: uppercase;
margin-bottom: 28px;
}
.top-infocard-description{
font-weight: 400;
font-size: 16px;
line-height: 24px;
text-align: left;
}
.top-infocard-figure{
min-width: 16%;
}
.top-infocard-image{
width: 100%;
}
@media screen and (max-width: 1024px){ @media screen and (max-width: 1024px){
#main-banner-desktop{ .main-banner-desktop{
display: none; display: none;
} }
} }
@media screen and (min-width: 1025px){ @media screen and (min-width: 1025px){
#main-banner-mobile{ .main-banner-mobile{
display: none; display: none;
} }
} }
@media screen and (min-width: 2500px){
.top-infocard-subtitle{
font-size: 64px;
line-height: 78px;
}
.top-infocard-title{
font-size: 98px;
line-height: 116px;
}
.top-infocard-description{
font-size: 32px;
line-height: 48px;
}
}