forked from M3-Academy/challenge-landing-page
feat: adicionando adaptação para telas 4k
This commit is contained in:
parent
6c5a3752c0
commit
b63c391e71
@ -129,15 +129,15 @@
|
||||
Donec finibus turpis vitae lectus interdum rutrum vitae sed augue.
|
||||
</figcaption>
|
||||
</div>
|
||||
<img src="./assets/imgs/banner-final.png" alt="">
|
||||
<img src="./assets/imgs/banner-final.png" alt="banner com uma imagem de um óculos em frente a um notebook">
|
||||
</figure>
|
||||
</section>
|
||||
</main>
|
||||
<footer>
|
||||
<div class="social-media">
|
||||
<a href="#"><img src="./assets/svg/instagram.svg"></a>
|
||||
<a href="#"><img src="./assets/svg/facebook.svg"></a>
|
||||
<a href="#"><img src="./assets/svg/youtube.svg"></a>
|
||||
<a href="#"><img src="./assets/svg/instagram.svg" alt="ícone instagram"></a>
|
||||
<a href="#"><img src="./assets/svg/facebook.svg" alt="ícone facebook"></a>
|
||||
<a href="#"><img src="./assets/svg/youtube.svg" alt="ícone youtube"></a>
|
||||
</div>
|
||||
<span>Copyright © 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-00
|
||||
</span>
|
||||
|
||||
@ -31,4 +31,24 @@ footer span {
|
||||
width: 261px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
footer {
|
||||
height: 256px;
|
||||
}
|
||||
|
||||
footer .social-media {
|
||||
margin-bottom: 32px;
|
||||
width: 208px;
|
||||
}
|
||||
|
||||
footer .social-media a img {
|
||||
width: 48px;
|
||||
}
|
||||
|
||||
footer span {
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
@ -14,3 +14,14 @@ header {
|
||||
header a img {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
header {
|
||||
height: 202px;
|
||||
}
|
||||
|
||||
header a img {
|
||||
width: 452px;
|
||||
}
|
||||
}
|
||||
175
styles/main.css
175
styles/main.css
@ -4,7 +4,6 @@
|
||||
height: 700px;
|
||||
top: 0;
|
||||
max-height: 700px;
|
||||
|
||||
object-fit: cover;
|
||||
|
||||
}
|
||||
@ -91,6 +90,11 @@
|
||||
width: 100%;
|
||||
height: auto;
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
/* cards com imagem de macbook */
|
||||
@ -328,7 +332,10 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
justify-content: space-around;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
padding: 0 23px;
|
||||
gap: 16px;
|
||||
}
|
||||
@ -408,11 +415,167 @@
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
.background-main figure img {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
max-height: 700px;
|
||||
}
|
||||
|
||||
.first-section h2 {
|
||||
font-size: 64px;
|
||||
line-height: 78px;
|
||||
}
|
||||
|
||||
.first-section h1 {
|
||||
font-size: 96px;
|
||||
line-height: 116px;
|
||||
}
|
||||
|
||||
.first-section figcaption {
|
||||
font-size: 32px;
|
||||
line-height: 48px;
|
||||
max-width: 55%;
|
||||
}
|
||||
|
||||
.first-section figure img {
|
||||
width: 16%;
|
||||
}
|
||||
|
||||
.first-content-card {
|
||||
margin-top: 358px;
|
||||
margin-bottom: 124px;
|
||||
}
|
||||
|
||||
.content-card-container {
|
||||
width: 100%;
|
||||
max-width: 60%;
|
||||
height: 574px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 42px;
|
||||
}
|
||||
|
||||
.first-card figure, .second-card figure, .three-card figure {
|
||||
width: 650px;
|
||||
height: 574px;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.first-card figure img, .second-card figure img, .three-card figure img {
|
||||
width: 100%;
|
||||
max-width: 25%;
|
||||
}
|
||||
|
||||
.first-card figcaption, .second-card figcaption, .three-card figcaption {
|
||||
max-width: 90%;
|
||||
font-size: 32px;
|
||||
line-height: 48px;
|
||||
}
|
||||
|
||||
.cards-macbook {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
object-fit: cover;
|
||||
position: relative;
|
||||
|
||||
}
|
||||
|
||||
.cards-macbook-container {
|
||||
max-width: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 124px;
|
||||
padding: 0 72px;
|
||||
}
|
||||
|
||||
.first-card-macbook figure img, .second-card-macbook figure img, .third-card-macbook figure img {
|
||||
max-width: 754px;
|
||||
height: 706px;
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
|
||||
.bottom-cards {
|
||||
margin-top: 382px;
|
||||
margin-bottom: 216px;
|
||||
max-width: none;
|
||||
width: 100%;
|
||||
height: 664px;
|
||||
padding: 0 72px;
|
||||
}
|
||||
|
||||
.bottom-cards-container {
|
||||
max-width: none;
|
||||
width: 100%;
|
||||
height: 664px;
|
||||
gap: 32px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.first-bottom-card , .second-bottom-card , .three-bottom-card , .four-bottom-card {
|
||||
width: 100%;
|
||||
max-width: 840px;
|
||||
height: 664px;
|
||||
|
||||
}
|
||||
|
||||
.first-bottom-card figure, .second-bottom-card figure, .three-bottom-card figure, .four-bottom-card figure {
|
||||
width: 100%;
|
||||
max-width: 840px;
|
||||
height: 664px;
|
||||
padding: 27px;
|
||||
}
|
||||
|
||||
.first-bottom-card figure img, .second-bottom-card figure img, .three-bottom-card figure img, .four-bottom-card figure img{
|
||||
width: 100%;
|
||||
max-width: 25%;
|
||||
}
|
||||
|
||||
.first-bottom-card figcaption, .second-bottom-card figcaption, .three-bottom-card figcaption, .four-bottom-card figcaption {
|
||||
max-width: 734px;
|
||||
width: 100%;
|
||||
font-size: 32px;
|
||||
line-height: 48px;
|
||||
}
|
||||
|
||||
.banner-final {
|
||||
padding: 144px 14% 464px 14%;
|
||||
}
|
||||
|
||||
.banner-final figure {
|
||||
max-width: 2720px;
|
||||
height: 484px;
|
||||
}
|
||||
|
||||
.banner-final figure img {
|
||||
width: 100%;
|
||||
height: 484px;
|
||||
}
|
||||
|
||||
.banner-final figure .banner-final-text h3 {
|
||||
font-size: 64px;
|
||||
line-height: 78px;
|
||||
}
|
||||
|
||||
.banner-final .banner-final-text figcaption {
|
||||
font-size: 32px;
|
||||
line-height: 48px;
|
||||
margin-bottom: 100px;
|
||||
max-width: 1100px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 3500px) {
|
||||
.background-main figure img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-height: 1400px;
|
||||
}
|
||||
|
||||
.first-card-macbook figure img, .second-card-macbook figure img, .third-card-macbook figure img {
|
||||
max-width: 1132px;
|
||||
height: 1060px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user