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

Merge pull request 'Hotfix' (#6) from Hotfix into main

Browse Source 
Reviewed-on: #6
This commit is contained in:
Gustavo Rallenson Gonçalves Da Silva 2022-10-13 06:45:03 +00:00
commit 8589097f85
2 changed files with 112 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

123
assets/Css/Styles.css
View File

@ -3,6 +3,10 @@
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
} }
body{
font-family: 'Inter', sans-serif;
color: #000000;
}
.Page-Header{ .Page-Header{
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -13,7 +17,7 @@ background: #000000;
display: block; display: block;
width: 100%; width: 100%;
} }
.Header-Logo{ .oHeader-Log{
display: block; display: block;
} }
.TopInfocard{ .TopInfocard{
@ -79,7 +83,6 @@ background: #000000;
background: #FFFFFF; background: #FFFFFF;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
max-width: 300px; max-width: 300px;
font-size: 16px;
height: 288px; height: 288px;
line-height: 24px; line-height: 24px;
font-weight: 400; font-weight: 400;
@ -121,6 +124,7 @@ background: #000000;
gap: 16px; gap: 16px;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
justify-items: center
} }
.bottomcard{ .bottomcard{
display: flex; display: flex;
@ -130,48 +134,46 @@ background: #000000;
background: #FFFFFF; background: #FFFFFF;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
padding: 32px 0 0; padding: 32px 0 0;
max-width: 432px;
height: 332px;
} }
.BottomImage{ .BottomImage{
margin-bottom: 14px; align-items: center;
} }
.imgdescripton{ .imgdescripton{
padding: 0px 32px 65px; font-weight: 400;
text-align: center; text-align: center;
font-size: 16px; font-size: 16px;
line-height: 24px; line-height: 24px;
} }
.BotomDescription{ .BottomInfoCard{
display: flex; display: flex;
align-items: center;
justify-content: center; justify-content: center;
padding: 108px 0 50px; align-items: center;
padding: 0 0 87px;
} }
.BlockText{ .BoxText{
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
height: 158px; height: 182px;
width: 550px; max-width: 766px;
} }
.BotdescriptionTitlte{ .BotdescriptionTitlte{
width: 420px; width: 55%;
height: 39px;
font-weight: 600; font-weight: 600;
font-size: 32px; font-size: 32px;
line-height: 40px; line-height: 38px;
text-align: center;
} }
.Botdescription{ .Botdescription{
width: 550px;
height: 120px;
font-weight: 400; font-weight: 400;
text-align: center;
padding: 0 52px;
font-size: 16px; font-size: 16px;
line-height: 24px; line-height: 24px;
text-align: center;
} }
.downBannerBox{ .downBannerBox{
display: flex; display: flex;
@ -231,20 +233,15 @@ background: #000000;
max-width: 358px; max-width: 358px;
max-height: 116px; max-height: 116px;
} }
.BotomDescription{ .Botdescription{
padding: 50px 32px 87px; padding: 0 32px 0;
} }
.BotdescriptionTitlte{ .BotdescriptionTitlte{
width: 90%;
font-size: 24px; font-size: 24px;
line-height: 30px; line-height: 30px;
} text-align: center;
.Botdescription{
font-size: 16px;
line-height: 24px;
padding: 0 28px;
max-width: 358px;
max-height: 116px;
} }
.Cards{ .Cards{
grid-template-columns: 1fr; grid-template-columns: 1fr;
@ -274,15 +271,26 @@ background: #000000;
.img3{ .img3{
grid-area:img3; grid-area:img3;
} }
.BotomDescription{ .lastBanner{
justify-items: center; width: 100%;
justify-content: center; }
align-items: center; .BottomDescription{
padding: 50px 0 87px;
} }
.footerText{ .footerText{
max-width: 280px; max-width: 280px;
text-align: center; text-align: center;
} }
.bottomwarp{
display: flex;
flex-direction: column-reverse;
}
.downBannerBox{
display: flex;
justify-content: center;
padding: 0 0 50px;
}
} }
@media screen and (min-width: 1024px) { @media screen and (min-width: 1024px) {
.MainBannerMobile,.footermob{ .MainBannerMobile,.footermob{
@ -291,18 +299,21 @@ background: #000000;
} }
/* Concertar medidas futuramente */ /* Concertar medidas futuramente */
@media screen and (min-width: 2500px) { @media screen and (min-width: 2500px) {
.Header-Logo{
width: 500px;
}
.TopInfocardText{ .TopInfocardText{
max-width: 1532px; max-width: 1532px;
height: 364px; height: 364px;
} }
.TopInfocardSubtitle{ .TopInfocardSubtitle{
font-size: 40px; font-size: 36px;
} }
.TopInfocardTitle{ .TopInfocardTitle{
font-size: 60px; font-size: 60px;
} }
.TopInfocardDescription{ .TopInfocardDescription{
line-height: 30px; line-height: 40px;
font-size: 38px; font-size: 38px;
} }
.ImageTop{ .ImageTop{
@ -322,6 +333,48 @@ background: #000000;
} }
.CardDescription{ .CardDescription{
font-size: 38px; font-size: 38px;
line-height: 28px; line-height: 36px;
}
.BoxText{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 400px;
max-width: 800px;
}
.BotdescriptionTitlte{
width: 90%;
font-size: 50px;
line-height: 50px;
text-align: center;
}
.Botdescription{
font-size: 34px;
line-height: 50px;
padding: 0 28px;
max-width: 746px;
max-height: 242px;
}
.imgdescripton{
font-size: 32px;
line-height: 30px;
}
.bottomcard{
max-width: 900px;
height: 700px;
}
.BottomImage{
width: 180px;
}
.fotimg{
width: 50px;
}
.footerText{
font-weight: 400;
font-size: 20px;
line-height: 12px;
text-transform: uppercase;
color: #BDBDBD;
} }
} }

26
index.html
View File

@ -1,10 +1,13 @@
<!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.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">
<link rel="stylesheet" href="/assets/Css/Styles.css"> <link rel="stylesheet" href="/assets/Css/Styles.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
<title>Desafio Landing page</title> <title>Desafio Landing page</title>
</head> </head>
<body> <body>
@ -112,12 +115,16 @@
</figcaption> </figcaption>
</figure> </figure>
</div> </div>
<section class="BotomDescription"> <div class="bottomwarp">
<div class="BlockText"> <section class="BottomInfoCard">
<h2 class="BotdescriptionTitlte">Lorem ipsum dolor sit amet</h2> <div class="BoxText">
<p class="Botdescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate sapien non libero faucibus interdum. In eget tincidunt ipsum. <h1 class="BotdescriptionTitlte">Lorem ipsum dolor sit amet</h1>
Quisque a tellus at lectus blandit tempor. Ut tristique auctor mi eget hendrerit. Curabitur venenatis felis vitae sagittis venenatis. <p class="Botdescription">
Donec finibus turpis vitae lectus interdum rutrum vitae sed augue. 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> </p>
</div> </div>
</section> </section>
@ -125,23 +132,24 @@
<img class="footerDesk lastBanner" src="/assets/Image/óculos-desktop.png" alt="Imagem oculos desktop"> <img class="footerDesk lastBanner" src="/assets/Image/óculos-desktop.png" alt="Imagem oculos desktop">
<img class="footermob lastBanner" src="/assets/Image/óculos moible.png" alt="Imagem oculos mobile"> <img class="footermob lastBanner" src="/assets/Image/óculos moible.png" alt="Imagem oculos mobile">
</figure> </figure>
</div>
</main> </main>
<footer> <footer>
<div class="footer"> <div class="footer">
<ul class="icons"> <ul class="icons">
<li class="icon" > <li class="icon" >
<a href="#" target="_blank"> <a href="#" target="_blank">
<img src="/assets/Image/instagram.png" alt="icone do instragram"> <img class="fotimg" src="/assets/Image/instagram.png" alt="icone do instragram">
</a> </a>
</li> </li>
<li class="icon"> <li class="icon">
<a href="#" target="_blank"> <a href="#" target="_blank">
<img src="/assets/Image/facebook.png" alt="icone do facebook"> <img class="fotimg" src="/assets/Image/facebook.png" alt="icone do facebook">
</a> </a>
</li> </li>
<li class="icon"> <li class="icon">
<a href="#" target="_blank"> <a href="#" target="_blank">
<img src="/assets/Image/youtube 2.png" alt="icone do youtube"> <img class="fotimg" src="/assets/Image/youtube 2.png" alt="icone do youtube">
</a> </a>
</li> </li>
</ul> </ul>