forked from M3-Academy/challenge-landing-page
Cria o card final para mobile, desktop e telas 4k
This commit is contained in:
parent
199235838d
commit
d111581eb8
BIN
assets/img/final-photo.png
Normal file
BIN
assets/img/final-photo.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 362 KiB |
@ -30,6 +30,8 @@ body{
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.top-infocard{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -146,9 +148,53 @@ body{
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.final-card{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.final-card-info{
|
||||
max-width: 550px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.final-card-title{
|
||||
font-weight: 600;
|
||||
font-size: 32px;
|
||||
line-height: 39px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.final-card-text{
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.final-card-image{
|
||||
width: 70%;
|
||||
margin-bottom: 116px;
|
||||
}
|
||||
|
||||
@media screen and (max-width:768px){
|
||||
|
||||
|
||||
.final-card-info{
|
||||
max-width: 350px;
|
||||
}
|
||||
|
||||
.final-card-text{
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.final-card-title{
|
||||
font-size: 24px;
|
||||
line-height: 29px;
|
||||
}
|
||||
|
||||
.top-card{
|
||||
grid-template-columns: 1fr;
|
||||
padding: 35px 33px 35px 33px;
|
||||
@ -262,7 +308,21 @@ body{
|
||||
.second-card {
|
||||
|
||||
padding: 573px 0;
|
||||
;
|
||||
}
|
||||
|
||||
.final-card-info{
|
||||
max-width: 1050px;
|
||||
}
|
||||
|
||||
.final-card-text{
|
||||
font-size: 48px;
|
||||
line-height: 72px;
|
||||
margin-bottom: 150px;
|
||||
}
|
||||
|
||||
.final-card-title{
|
||||
font-size: 72px;
|
||||
line-height: 87px;
|
||||
}
|
||||
|
||||
}
|
||||
|
15
index.html
15
index.html
@ -109,5 +109,20 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="final-card">
|
||||
<div class="final-card-info">
|
||||
<h1 class="final-card-title" >Lorem ipsum dolor sit amet</h1>
|
||||
<p class="final-card-text">
|
||||
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>
|
||||
|
||||
<img class="final-card-image" src="./assets/img/final-photo.png" alt="Banner final da pagina" />
|
||||
</section>
|
||||
|
||||
</body>
|
||||
</html>
|
Loading…
Reference in New Issue
Block a user