feat: adiciona responsividade 4k

This commit is contained in:
Naian Felix dos Santos 2022-10-12 19:18:04 -03:00
parent 8cffa96a9b
commit 39b350d073
2 changed files with 24 additions and 7 deletions

View File

@ -20,7 +20,7 @@ body {
}
.header-logo {
display: block;
padding: 30px 0;
padding: 28px 0;
max-width: 226px;
width: 100%;
}
@ -182,6 +182,7 @@ body {
.bottom-infocard-image img {
max-width: 1360px;
width: 100%;
margin: 0 280px;
}
footer {
@ -208,8 +209,24 @@ footer {
column-gap: 16px;
}
@media screen and (min-width:2499px) {
.top-infocard-description {
font-size: 18px;
}
.top-card-description {
font-size: 18px;
}
.bottom-card-description {
font-size: 18px;
}
.bottom-infocard-description{
font-size: 18px;
}
}
@media screen and (min-width: 769px) and (max-width: 1270px) {
.top-cards,.bottom-cards {

View File

@ -22,7 +22,7 @@
<main>
<div>
<img class="main-banner" src="assets/image/main-banner-desktop.png" alt="Banner exibindo imagem com códigos de programação">
<img class="main-banner" src="assets/image/main-banner-desktop.png" alt="Banner exibindo imagem de um notebook com códigos de programação">
</div>
<section class="top-infocard">
@ -83,27 +83,27 @@
<figure class="bottom-card">
<img class="bottom-card-image" src="assets/image/bottom-card-image1.svg" alt="Figura representando uma nota">
<figcaption class="bottom-card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</figcaption>
</figure>
<figure class="bottom-card">
<img class="bottom-card-image" src="assets/image/bottom-card-image2.svg" alt="Figura representando uma mão com uma moeda acima">
<figcaption class="bottom-card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</figcaption>
</figure>
<figure class="bottom-card">
<img class="bottom-card-image" src="assets/image/bottom-card-image3.svg" alt="Figura representando um notebook">
<figcaption class="bottom-card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</figcaption>
</figure>
<figure class="bottom-card">
<img class="bottom-card-image" src="assets/image/bottom-card-image4.svg" alt="Figura representando um celular">
<figcaption class="bottom-card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</figcaption>
</figure>
</div>