naianfelix/challenge-landing-page-naian-felix
1
0
Fork 0
forked from M3-Academy/challenge-landing-page
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: adiciona responsividade 4k

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
assets/styles/main.css
View File

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

10
index.html
View File

@ -22,7 +22,7 @@
<main> <main>
<div> <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> </div>
<section class="top-infocard"> <section class="top-infocard">
@ -83,27 +83,27 @@
<figure class="bottom-card"> <figure class="bottom-card">
<img class="bottom-card-image" src="assets/image/bottom-card-image1.svg" alt="Figura representando uma nota"> <img class="bottom-card-image" src="assets/image/bottom-card-image1.svg" alt="Figura representando uma nota">
<figcaption class="bottom-card-description"> <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> </figcaption>
</figure> </figure>
<figure class="bottom-card"> <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"> <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"> <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> </figcaption>
</figure> </figure>
<figure class="bottom-card"> <figure class="bottom-card">
<img class="bottom-card-image" src="assets/image/bottom-card-image3.svg" alt="Figura representando um notebook"> <img class="bottom-card-image" src="assets/image/bottom-card-image3.svg" alt="Figura representando um notebook">
<figcaption class="bottom-card-description"> <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> </figcaption>
</figure> </figure>
<figure class="bottom-card"> <figure class="bottom-card">
<img class="bottom-card-image" src="assets/image/bottom-card-image4.svg" alt="Figura representando um celular"> <img class="bottom-card-image" src="assets/image/bottom-card-image4.svg" alt="Figura representando um celular">
<figcaption class="bottom-card-description"> <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> </figcaption>
</figure> </figure>
</div> </div>