feature/top-infocard #3

Merged
ednabarboza merged 3 commits from feature/top-infocard into development 2022-10-11 16:51:43 +00:00
2 changed files with 84 additions and 5 deletions
Showing only changes of commit 4fc1299dc2 - Show all commits

View File

@ -22,6 +22,7 @@ body{
.main-banner{ .main-banner{
width: 100%; width: 100%;
display: block;
} }
.top-infocard{ .top-infocard{
@ -33,6 +34,7 @@ body{
.top-infocard-text{ .top-infocard-text{
width: 100%;
max-width: 766px; max-width: 766px;
} }
@ -67,7 +69,7 @@ body{
.top-infocard-image{ .top-infocard-image{
display: flex; display: flex;
justify-content: center; justify-content: center;
margin: 84px 0 178px; margin: 73px 0 178px;
} }
/*MEDIAS*/ /*MEDIAS*/
@ -90,12 +92,89 @@ body{
.top-infocard-description{ .top-infocard-description{
font-size: 16px; font-size: 16px;
line-height: 24px; line-height: 24px;
margin: 0 28px;
text-align: center;
}
.top-infocard-image{
margin: 65px 0 90px;
}
.top-infocard-img{
width: 239px;
height: 239px;
}
}
@media screen and (min-width: 415px) and (max-width: 899px) {
.top-infocard-subtitle{
font-size: 20px;
line-height: 24px;
}
.top-infocard-title{
font-size: 28px;
line-height: 34px;
}
.top-infocard-description{
font-size: 16px;
line-height: 24px;
margin: 0 28px;
text-align: center;
}
.top-infocard-image{
margin: 73px 0 90px;
}
}
@media screen and (min-width: 3000px) and (max-width: 4000px) {
.header-logo{
width: 470px;
height: 88px;
}
.main-banner{
display: block;
}
.top-infocard-text{
width: 1915px;
height: 418px;
max-width: 100%;
margin-top: 152px;
}
.top-infocard-subtitle{
font-size: 66px;
line-height: 70px;
}
.top-infocard-title{
font-size: 100px;
line-height: 120px;
}
.top-infocard-description{
font-size: 40px;
line-height: 44px;
margin: 28px; margin: 28px;
text-align: center; text-align: center;
} }
.top-infocard-image{ .top-infocard-image{
margin: 74px 0 90px; margin: 73px 0 90px;
}
.top-infocard-img{
width: 656px;
height: 656px;
margin-top: 152px;
} }
} }

View File

@ -47,7 +47,7 @@
</section> </section>
<figure class="top-infocard-image"> <figure class="top-infocard-image">
<img src="./assets/images/top-infocard-image.png" alt="Imagem de um esquema de três computadores"/> <img class="top-infocard-img" src="./assets/images/top-infocard-image.png" alt="Imagem de um esquema de três computadores"/>
</figure> </figure>
</main> </main>