feat: Adiciona ajustes de responsividade
This commit is contained in:
parent
5c2a5ea1cf
commit
c612c793ed
Binary file not shown.
|
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 2.9 KiB |
BIN
assets/images/bottom-card-image-04-2.png
Normal file
BIN
assets/images/bottom-card-image-04-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
@ -10,7 +10,7 @@ body {
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
/*Header da landing page M3 Academy*/
|
||||
/*Header*/
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
@ -42,13 +42,13 @@ body {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 73px 0 178px;
|
||||
gap: 73px;
|
||||
}
|
||||
|
||||
.top-infocard-text {
|
||||
width: 40%;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
padding: 0 0 73px;
|
||||
}
|
||||
|
||||
.top-infocard-subtitle {
|
||||
@ -62,7 +62,7 @@ body {
|
||||
font-weight: 500;
|
||||
font-size: 48px;
|
||||
line-height: 58px;
|
||||
padding: 0 0 28px;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.top-infocard-description {
|
||||
@ -106,7 +106,8 @@ body {
|
||||
}
|
||||
|
||||
.top-card-description {
|
||||
max-width: 300px;
|
||||
/* max-width: 300px;*/
|
||||
width: 77%;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
@ -153,20 +154,17 @@ body {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 51px 32px 65px;
|
||||
padding: 48px 32px 65px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.23);
|
||||
min-height: 287px;
|
||||
gap: 25px;
|
||||
height: auto;
|
||||
width: 22%;
|
||||
}
|
||||
|
||||
.bottom-card-image {
|
||||
display: block;
|
||||
/*max-width: 102px;*/
|
||||
width: 29%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.bottom-card-description {
|
||||
max-width: 367px;
|
||||
@ -187,7 +185,6 @@ body {
|
||||
padding: 0 72px;
|
||||
}
|
||||
|
||||
|
||||
.bottom-infocard-text {
|
||||
text-align: center;
|
||||
margin-bottom: 50px;
|
||||
@ -248,17 +245,78 @@ body {
|
||||
color: #BDBDBD;
|
||||
}
|
||||
|
||||
/*Versão mobile*/
|
||||
@media screen and (min-width: 2500px) {
|
||||
|
||||
@media screen and (max-width: 320px) {
|
||||
.header-logo {
|
||||
width: 180px
|
||||
/* Infocard do topo */
|
||||
|
||||
/*Apresentar padding lateral para espaçar melhor as informações*/
|
||||
.top-infocard-text {
|
||||
width: 52%;
|
||||
margin: 95px 0 95px;
|
||||
}
|
||||
|
||||
.top-infocard-subtitle {
|
||||
font-size: 64px;
|
||||
line-height: 76px;
|
||||
}
|
||||
|
||||
.top-infocard-title {
|
||||
font-size: 96px;
|
||||
line-height: 116px;
|
||||
margin: 0 0 28px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.top-infocard-description {
|
||||
font-size: 32px;
|
||||
line-height: 48px;
|
||||
padding: 0 0 36px;
|
||||
}
|
||||
|
||||
.top-infocard-image {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
/* Cards do topo */
|
||||
|
||||
.top-card-description {
|
||||
width: 88%;
|
||||
font-size: 32px;
|
||||
line-height: 48px;
|
||||
}
|
||||
|
||||
.bottom-card-description {
|
||||
font-size: 32px;
|
||||
line-height: 48px;
|
||||
}
|
||||
|
||||
/* Infocard de baixo */
|
||||
|
||||
.bottom-infocard-text {
|
||||
width: 35%;
|
||||
}
|
||||
|
||||
.bottom-infocard-title {
|
||||
font-size: 64px;
|
||||
line-height: 78px;
|
||||
}
|
||||
|
||||
.bottom-infocard-description {
|
||||
font-size: 32px;
|
||||
line-height: 48px;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
|
||||
.footer-text {
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
|
||||
/*Banner principal*/
|
||||
|
||||
.main-banner-desktop {
|
||||
display: none;
|
||||
}
|
||||
@ -268,8 +326,11 @@ body {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/*Infocard do topo*/
|
||||
|
||||
.top-infocard {
|
||||
margin: 73px 28px 91px;
|
||||
gap: 65px;
|
||||
}
|
||||
|
||||
.top-infocard-text {
|
||||
@ -285,11 +346,10 @@ body {
|
||||
.top-infocard-title {
|
||||
font-size: 28px;
|
||||
line-height: 32px;
|
||||
padding: 0 0 18px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.top-infocard-description {
|
||||
padding: 0 0 65px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@ -297,6 +357,8 @@ body {
|
||||
width: 58%;
|
||||
}
|
||||
|
||||
/*Cards do topo*/
|
||||
|
||||
.top-cards {
|
||||
flex-direction: column;
|
||||
}
|
||||
@ -309,6 +371,8 @@ body {
|
||||
max-width: 102px;
|
||||
}
|
||||
|
||||
/*Galeria de Imagens*/
|
||||
|
||||
.gallery-area {
|
||||
padding: 0;
|
||||
}
|
||||
@ -335,13 +399,17 @@ body {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
/*Cards de baixo*/
|
||||
|
||||
.bottom-cards {
|
||||
flex-direction: column;
|
||||
margin-bottom: 98px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.bottom-card {
|
||||
width: 88%;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.bottom-card-image {
|
||||
@ -352,6 +420,8 @@ body {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/*Infocard de baixo*/
|
||||
|
||||
.bottom-infocard {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@ -386,6 +456,8 @@ body {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
/*Footer*/
|
||||
|
||||
.page-footer {
|
||||
gap: 16px;
|
||||
}
|
||||
@ -395,31 +467,52 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
/*Versão telas 4k*/
|
||||
/*rever as fontes, precisam estar no dobro do tamanho do desktop*/
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
.top-infocard-text {
|
||||
width: 52%;
|
||||
margin: 95px 0 95px;
|
||||
@media screen and (max-width: 320px) {
|
||||
.header-logo {
|
||||
width: 180px
|
||||
}
|
||||
|
||||
.top-infocard-subtitle {
|
||||
font-size: 42px;
|
||||
padding: 0 0 10px;
|
||||
/*Infocard do topo */
|
||||
|
||||
.top-infocard {
|
||||
margin: 57px 28px 57px;
|
||||
gap: 45px;
|
||||
}
|
||||
|
||||
.top-infocard-title {
|
||||
font-size: 63px;
|
||||
/*Cards do topo */
|
||||
|
||||
.top-cards {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
.top-card {
|
||||
padding: 26px 23px 23px 25px;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.top-infocard-description {
|
||||
font-size: 21px;
|
||||
line-height: 31px;
|
||||
padding: 0 0 36px;
|
||||
/*Galeria de imagens*/
|
||||
|
||||
.gallery-wrapper{
|
||||
gap: 14px 11px;
|
||||
transform: translateY(23px);
|
||||
margin-bottom: 76px;
|
||||
}
|
||||
|
||||
.top-infocard-image {
|
||||
width: 20%;
|
||||
/*Cards de baixo */
|
||||
|
||||
.bottom-cards {
|
||||
margin-bottom: 67px;
|
||||
}
|
||||
.bottom-card {
|
||||
padding: 38px 29px 38px;
|
||||
gap: 11px;
|
||||
}
|
||||
|
||||
/*Infocard de baixo*/
|
||||
.bottom-infocard-image-mobile {
|
||||
margin-bottom: 34px;
|
||||
}
|
||||
|
||||
.bottom-infocard-text {
|
||||
margin-bottom: 62px;
|
||||
}
|
||||
}
|
||||
26
index.html
26
index.html
@ -1,8 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="pt-br">
|
||||
<head>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
@ -10,21 +10,23 @@
|
||||
|
||||
<title>Challenge Landing Page</title>
|
||||
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet" />
|
||||
|
||||
<link rel="stylesheet" href="./assets/styles/main.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Header da landing page M3 Academy -->
|
||||
|
||||
<!-- Header -->
|
||||
|
||||
<header class="page-header">
|
||||
<a href="/">
|
||||
<img class="header-logo" src="./assets/images/m3-academy-logo.svg" alt="Logo M3 m3-academy-logo" />
|
||||
<img class="header-logo" src="./assets/images/m3-academy-logo.svg" alt="Logo M3" />
|
||||
</a>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
|
||||
<!-- Banner principal -->
|
||||
|
||||
<div>
|
||||
@ -74,7 +76,7 @@
|
||||
</figure>
|
||||
</section>
|
||||
|
||||
<!-- Área da galeria-->
|
||||
<!-- Galeria de Fotos-->
|
||||
|
||||
<div class="gallery-area">
|
||||
<div class="gallery-wrapper">
|
||||
@ -96,7 +98,7 @@
|
||||
|
||||
<section class="bottom-cards">
|
||||
<figure class="bottom-card">
|
||||
<img class="bottom-card-image bottom-card-image-01" src="./assets/images/bottom-card-image-01.png" alt="Imagem do card de baixo: Nota dinheiro" />
|
||||
<img class="bottom-card-image" src="./assets/images/bottom-card-image-01.png" alt="Imagem do card de baixo: Nota dinheiro" />
|
||||
|
||||
<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.
|
||||
@ -104,7 +106,7 @@
|
||||
</figure>
|
||||
|
||||
<figure class="bottom-card">
|
||||
<img class="bottom-card-image bottom-card-image-02" src="./assets/images/bottom-card-image-02.png" alt="Imagem do card de baixo: Moeda" />
|
||||
<img class="bottom-card-image" src="./assets/images/bottom-card-image-02.png" alt="Imagem do card de baixo: Moeda" />
|
||||
|
||||
<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.
|
||||
@ -112,7 +114,7 @@
|
||||
</figure>
|
||||
|
||||
<figure class="bottom-card">
|
||||
<img class="bottom-card-image bottom-card-image-03" src="./assets/images/bottom-card-image-03.png" alt="Imagem do card de baixo: Computador" />
|
||||
<img class="bottom-card-image" src="./assets/images/bottom-card-image-03.png" alt="Imagem do card de baixo: Computador" />
|
||||
|
||||
<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.
|
||||
@ -120,7 +122,7 @@
|
||||
</figure>
|
||||
|
||||
<figure class="bottom-card">
|
||||
<img class="bottom-card-image bottom-card-image-04" src="./assets/images/bottom-card-image-04.png" alt="Imagem do card de baixo: Celular" />
|
||||
<img class="bottom-card-image" src="./assets/images/bottom-card-image-04.png" alt="Imagem do card de baixo: 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.
|
||||
@ -128,7 +130,8 @@
|
||||
</figure>
|
||||
</section>
|
||||
|
||||
<!--Infocard de baixo-->
|
||||
<!-- Infocard de baixo -->
|
||||
|
||||
<div class="bottom-infocard">
|
||||
<article class="bottom-infocard-text">
|
||||
<h2 class="bottom-infocard-title">Lorem ipsum dolor sit amet</h2>
|
||||
@ -147,6 +150,7 @@
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!--Footer-->
|
||||
<footer class="page-footer">
|
||||
<ul class="footer-icons">
|
||||
<li class="footer-icon">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user