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;
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.top-infocard{
|
.top-infocard{
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@ -146,8 +148,52 @@ body{
|
|||||||
margin-bottom: 12px;
|
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){
|
@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{
|
.top-card{
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
@ -262,7 +308,21 @@ body{
|
|||||||
.second-card {
|
.second-card {
|
||||||
|
|
||||||
padding: 573px 0;
|
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>
|
</div>
|
||||||
</section>
|
</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>
|
</body>
|
||||||
</html>
|
</html>
|
Loading…
Reference in New Issue
Block a user