forked from M3-Academy/challenge-landing-page
Merge pull request 'Adiciona ajustes finais de responsividade' (#9) from feature/ajustes-responsividade into develop
Reviewed-on: #9
This commit is contained in:
commit
163d660476
@ -1,24 +1,20 @@
|
||||
/* ---------- INITIAL ---------- */
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Inter' sans-serif;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
img{
|
||||
max-width:100%;
|
||||
height:auto;
|
||||
}
|
||||
|
||||
body {
|
||||
color: #000000;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
/* ---------- HEADER E MAIN BANNER ---------- */
|
||||
/* HEADER E MAIN BANNER */
|
||||
|
||||
.page__header {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background: #000000;
|
||||
@ -39,7 +35,7 @@ body {
|
||||
}
|
||||
|
||||
|
||||
/* ---------- TOP TEXTS ---------- */
|
||||
/* TOP TEXTS */
|
||||
|
||||
.top__text {
|
||||
display: flex;
|
||||
@ -80,13 +76,14 @@ body {
|
||||
}
|
||||
|
||||
|
||||
/* ---------- TOP CARDS ---------- */
|
||||
/* TOP CARDS */
|
||||
|
||||
.top__cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, max-content);
|
||||
gap: 20px;
|
||||
justify-content: center;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.top__card {
|
||||
@ -96,7 +93,6 @@ body {
|
||||
padding: 26px 26px 34px;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.top__card-image {
|
||||
@ -112,7 +108,7 @@ body {
|
||||
}
|
||||
|
||||
|
||||
/* ---------- BOTTOM CARDS ---------- */
|
||||
/* BOTTOM CARDS */
|
||||
|
||||
.bottom__cards {
|
||||
background: #E0E0E0;
|
||||
@ -137,7 +133,6 @@ body {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
|
||||
.bottom__card-image {
|
||||
display: block;
|
||||
}
|
||||
@ -147,13 +142,15 @@ body {
|
||||
}
|
||||
|
||||
|
||||
/* ---------- BOTTOM INFOCARDS ---------- */
|
||||
/* BOTTOM INFOCARDS */
|
||||
|
||||
.bottom__infocards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 16px;
|
||||
padding: 0 76px 108px;
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
|
||||
.bottom__infocard {
|
||||
@ -163,7 +160,6 @@ body {
|
||||
padding: 33px 32px 65px;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
|
||||
min-width: 22%;
|
||||
}
|
||||
|
||||
.bottom__infocard-image {
|
||||
@ -172,13 +168,13 @@ body {
|
||||
}
|
||||
|
||||
.bottom__infocard-description {
|
||||
min-width: 15%;
|
||||
max-width: 300px;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
/* ---------- BOTTOM BANNER CONTAINER ---------- */
|
||||
/* BOTTOM BANNER CONTAINER */
|
||||
|
||||
.bottom__banner-container {
|
||||
display: flex;
|
||||
@ -212,7 +208,8 @@ body {
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
/* ---------- FOOTER ----------- */
|
||||
|
||||
/* FOOTER */
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
@ -226,10 +223,7 @@ body {
|
||||
display: flex;
|
||||
list-style-type: none;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.footer__icon {
|
||||
margin: 0 8px;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.footer__text {
|
||||
@ -244,7 +238,7 @@ body {
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
|
||||
/* ---------- MAIN BANNER ---------- */
|
||||
/* MAIN BANNER */
|
||||
.main__banner-desktop {
|
||||
display: none;
|
||||
}
|
||||
@ -263,7 +257,7 @@ body {
|
||||
}
|
||||
|
||||
|
||||
/* ---------- TOP TEXTS ---------- */
|
||||
/* TOP TEXTS */
|
||||
.top__text {
|
||||
flex-direction: column;
|
||||
padding: 88px 32px 90px;
|
||||
@ -293,24 +287,15 @@ body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ---------- TOP CARDS ---------- */
|
||||
.top__cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, max-content);
|
||||
gap: 20px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.top__card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 26px 26px 34px;
|
||||
/* TOP CARDS */
|
||||
.top__infocards {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.top__card-image {
|
||||
max-width: 34%;
|
||||
align-items: center;
|
||||
width: 34%;
|
||||
}
|
||||
|
||||
/* ---------- BOTTOM CARDS ---------- */
|
||||
@ -344,6 +329,7 @@ body {
|
||||
gap: 20px;
|
||||
justify-content: center;
|
||||
padding: 0 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.bottom__infocard {
|
||||
@ -351,11 +337,11 @@ body {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 26px 26px 34px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.bottom__infocard-image {
|
||||
max-width: 34%;
|
||||
align-items: center;
|
||||
width: 34%;
|
||||
}
|
||||
|
||||
/* ---------- BOTTOM BANNER CONTAINER ---------- */
|
||||
@ -385,6 +371,9 @@ body {
|
||||
/* ---------- FOOTER ---------- */
|
||||
.page__footer {
|
||||
padding-bottom: 26px;
|
||||
display: flex;
|
||||
flex-direction: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.footer__text {
|
||||
@ -394,13 +383,13 @@ body {
|
||||
}
|
||||
|
||||
|
||||
@media screen and (min-width: 769px) and (max-width: 1200px) {
|
||||
@media screen and (min-width: 769px) and (max-width: 1024px) {
|
||||
.top__cards {
|
||||
grid-template-columns: repeat(2, max-content);
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.bottom__infocards {
|
||||
grid-template-columns: repeat(2, max-content);
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@ -418,3 +407,80 @@ body {
|
||||
}
|
||||
|
||||
|
||||
@media screen and (min-width: 2560px) {
|
||||
|
||||
/* TOP TEXTS */
|
||||
|
||||
.top__text {
|
||||
padding: 84px 30px 179px;
|
||||
gap: 72px;
|
||||
}
|
||||
|
||||
.top__infocard-subtitle {
|
||||
font-size: 64px;
|
||||
}
|
||||
|
||||
.top__infocard-title {
|
||||
margin-bottom: 48px;
|
||||
font-size: 96px;
|
||||
}
|
||||
|
||||
.top__infocard-description {
|
||||
line-height: 48px;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
|
||||
/* BOTTOM BANNER CONTAINER */
|
||||
|
||||
.bottom__title {
|
||||
font-size: 64px;
|
||||
}
|
||||
|
||||
.bottom__description {
|
||||
font-size: 32px;
|
||||
line-height: 48px;
|
||||
}
|
||||
|
||||
|
||||
/* FOOTER */
|
||||
|
||||
.footer__text {
|
||||
|
||||
line-height: 24px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
|
||||
/* TOP CARDS */
|
||||
|
||||
.top__cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, max-content);
|
||||
gap: 20px;
|
||||
justify-content: center;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.top__card-image {
|
||||
display: block;
|
||||
margin-bottom: 26px;
|
||||
}
|
||||
|
||||
.top__card-description {
|
||||
font-size: 32px;
|
||||
line-height: 48px;
|
||||
}
|
||||
|
||||
|
||||
/* BOTTOM INFOCARDS */
|
||||
|
||||
.bottom__infocard-description {
|
||||
max-width: 300px;
|
||||
font-size: 32px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
41
index.html
41
index.html
@ -1,13 +1,19 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html lang="pt-br">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=], initial-scale=1.0">
|
||||
|
||||
<title>Desafio 1 - M3 Academy</title>
|
||||
|
||||
<link rel="stylesheet" href="./assets/styles.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
<header class="page__header">
|
||||
<a href="/">
|
||||
@ -16,11 +22,13 @@
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<!-- HEADER PRINCIPAL -->
|
||||
<figure>
|
||||
<img class="main__banner main__banner-desktop" src="./assets/images/main-banner-desktop.png" alt="Banner principal Desktop">
|
||||
<img class="main__banner main__banner-mobile" src="./assets/images/main-banner-mobile.png" alt="Banner principal Mobile">
|
||||
</figure>
|
||||
|
||||
<!-- TEXTOS DO TOPO -->
|
||||
<section class="top__text">
|
||||
<div class="top__infocard-text">
|
||||
<h2 class="top__infocard-subtitle">Lorem ipsum</h2>
|
||||
@ -28,11 +36,13 @@
|
||||
<p class="top__infocard-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Curabitur ut tortor sed lacus egestas vulputate vel sit amet velit. Nulla suscipit magna dui. </p>
|
||||
</div>
|
||||
|
||||
<!-- IMAGEM DO TOPO -->
|
||||
<figure>
|
||||
<img class="top__infocard-image" src="./assets/images/top-image.png" alt="Imagem de 3 monitores">
|
||||
</figure>
|
||||
</section>
|
||||
|
||||
<!-- 3 CARDS DO TOPO COM DESCRIÇÕES -->
|
||||
<section class="top__cards">
|
||||
<figure class="top__card">
|
||||
<img class="top__card-image" src="./assets/images/shop-icon.png" alt="Imagem de um shop icon do primeiro card do topo">
|
||||
@ -48,6 +58,7 @@
|
||||
</figure>
|
||||
</section>
|
||||
|
||||
<!-- 3 IMAGENS DE BAIXO -->
|
||||
<section class="bottom__cards">
|
||||
<div class="bottom__cards-container">
|
||||
<figure class="bottom__card bottom__card-1">
|
||||
@ -64,26 +75,27 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 4 CARDS DE BAIXO COM DESCRIÇÕES -->
|
||||
<section class="bottom__infocards">
|
||||
<div class="bottom__infocard">
|
||||
<figure class="bottom__infocard">
|
||||
<img class="bottom__infocard-image" src="./assets/images/money-icon.png" alt="Icon de dinheiro do primeiro card de baixo">
|
||||
<p class="bottom__infocard-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. </p>
|
||||
</div>
|
||||
<div class="bottom__infocard">
|
||||
<figcaption class="bottom__infocard-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. </p>
|
||||
</figure>
|
||||
<figure class="bottom__infocard">
|
||||
<img class="bottom__infocard-image" src="./assets/images/handcoin-icon.png" alt="Icone de uma mão com uma moeda do segundo card de baixo">
|
||||
<p class="bottom__infocard-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. </p>
|
||||
</div>
|
||||
<div class="bottom__infocard">
|
||||
<figcaption class="bottom__infocard-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. </p>
|
||||
</figure>
|
||||
<figure class="bottom__infocard">
|
||||
<img class="bottom__infocard-image" src="./assets/images/laptop-icon.png" alt="Icone de um laptop do terceiro card de baixo">
|
||||
<p class="bottom__infocard-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. </p>
|
||||
</div>
|
||||
<div class="bottom__infocard">
|
||||
<figcaption class="bottom__infocard-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. </p>
|
||||
</figure>
|
||||
<figure class="bottom__infocard">
|
||||
<img class="bottom__infocard-image" src="./assets/images/smartphone-icon.png" alt="Icone de um celulara do quarto card de baixo">
|
||||
<p class="bottom__infocard-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. </p>
|
||||
</div>
|
||||
</div>
|
||||
<figcaption class="bottom__infocard-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. </p>
|
||||
</figure>
|
||||
</section>
|
||||
|
||||
<!-- BANNER DE BAIXO COM TEXTO -->
|
||||
<section class="bottom__banner-container">
|
||||
<div class="bottom__text">
|
||||
<h2 class="bottom__title">Lorem ipsum dolor sit amet</h2>
|
||||
@ -97,6 +109,7 @@
|
||||
</figure>
|
||||
</section>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer class="footer">
|
||||
<ul class="footer__icons">
|
||||
<li class="footer__icon">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user