Cria o infocard desktop

This commit is contained in:
Leonardo Pereira Rocha 2022-10-13 00:18:41 -03:00
parent 1a31cd1a96
commit 76ffd5f38b
3 changed files with 56 additions and 0 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.6 KiB

View File

@ -21,3 +21,47 @@ body{
display: block;
height: auto;
}
.top-infocard-subtitle{
margin-top: 73px;
font-weight: 400;
font-size: 32px;
line-height: 39px;
text-transform: uppercase;
}
.top-infocard{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.top-infocard-text{
max-width: 766px;
text-align: center;
}
.top-infocard-title{
margin-bottom: 28px;
font-weight: 500;
font-size: 48px;
line-height: 58px;
text-transform: uppercase;
}
.top-infocard-image{
width: 20%;
display: block;
margin-bottom: 177px;
}
.top-infocard-description{
font-size: 16px;
line-height: 24px;
margin-bottom: 84px;
}

View File

@ -26,4 +26,16 @@
<img class="main-banner-desktop" src="./assets/img/main-banner-desktop.png" alt="Banner Principal"/>
</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>
<img class="top-infocard-image" src="./assets/img/top-infocard-image.png" alt="Imagem do infocard do topo"/>
</section>
</html>