forked from M3-Academy/challenge-landing-page
Otimização e organização do CSS
This commit is contained in:
parent
178a7d7b07
commit
31fe0c97d9
@ -1,3 +1,5 @@
|
||||
/* DEFINIÇÕES GERAIS */
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@ -10,6 +12,8 @@ body{
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
/* CABEÇALHO */
|
||||
|
||||
.page-header{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@ -17,15 +21,13 @@ body{
|
||||
padding: 28px 0;
|
||||
}
|
||||
|
||||
.header-logo {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.main-banner, .footer-banner {
|
||||
.header-page, .main-banner, .footer-banner {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* INFOCARDS DO TOPO */
|
||||
|
||||
.top-infocard {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@ -88,13 +90,19 @@ body{
|
||||
margin-bottom: 26px;
|
||||
}
|
||||
|
||||
.top-card-description {
|
||||
max-width: 300px;
|
||||
.card-description {
|
||||
text-align: center;
|
||||
line-height: 24px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.top-card-description {
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
|
||||
/* BANNER DO MEIO */
|
||||
|
||||
.middle-banner {
|
||||
background: #E0E0E0;
|
||||
|
||||
@ -114,6 +122,8 @@ body{
|
||||
margin-top: 62px;
|
||||
}
|
||||
|
||||
/* CARDS DO RODAPÉ */
|
||||
|
||||
.footer-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, max-content);
|
||||
@ -141,11 +151,10 @@ body{
|
||||
|
||||
.footer-card-description {
|
||||
max-width: 367px;
|
||||
text-align: center;
|
||||
line-height: 24px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* SESSÃO DO RODAPÉ */
|
||||
|
||||
.section-footer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@ -179,6 +188,8 @@ body{
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
/* RODAPÉ */
|
||||
|
||||
.page-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -203,87 +214,13 @@ body{
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
.social-links img {
|
||||
padding-right: 16px;
|
||||
.link-social:not(:last-child) {
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
|
||||
/* RESPONSIVIDADE */
|
||||
|
||||
@media screen and (max-width: 414px) {
|
||||
.main-banner-desktop, .section-footer-image-desktop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.footer-text {
|
||||
text-align: center;
|
||||
width: 261px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 415px) {
|
||||
.main-banner-mobile, .middle-banner-mobile, .section-footer-image-mobile {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px){
|
||||
.top-infocard {
|
||||
padding-bottom: 90px;
|
||||
}
|
||||
|
||||
.top-cards {
|
||||
grid-template-columns: 1fr;
|
||||
padding: 36px 32px 80px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.top-infocard-text {
|
||||
width: 100%;
|
||||
padding: 0 28px;
|
||||
}
|
||||
|
||||
.top-infocard-subtitle {
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.top-infocard-title {
|
||||
font-size: 28px;
|
||||
line-height: 34px;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
.top-infocard-image {
|
||||
width: 100%;
|
||||
max-width: 240px;
|
||||
}
|
||||
|
||||
.section-footer {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
.footer-banner {
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
.section-footer-text{
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
||||
padding: 0 32px;
|
||||
}
|
||||
|
||||
.section-footer-title {
|
||||
font-size: 24px;
|
||||
line-height: 29px;
|
||||
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1919px) {
|
||||
.middle-banner {
|
||||
max-height: 398px;
|
||||
@ -300,19 +237,6 @@ body{
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 968px){
|
||||
.footer-cards {
|
||||
grid-template-columns: 1fr;
|
||||
padding: 80px 24px 98px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.footer-card-description {
|
||||
max-width: 302px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1530px) {
|
||||
.middle-banner {
|
||||
max-height: 318px;
|
||||
@ -362,4 +286,95 @@ body{
|
||||
grid-template-columns: repeat(2, max-content);
|
||||
padding: 36px 26px 80px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.top-infocard-text {
|
||||
width: 100%;
|
||||
padding: 0 28px;
|
||||
}
|
||||
|
||||
.top-infocard-subtitle {
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.top-infocard-title {
|
||||
font-size: 28px;
|
||||
line-height: 34px;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
.top-infocard-image {
|
||||
width: 100%;
|
||||
max-width: 240px;
|
||||
}
|
||||
|
||||
.section-footer {
|
||||
flex-direction: column-reverse;
|
||||
padding-bottom: 86px;
|
||||
}
|
||||
|
||||
.footer-banner {
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
.section-footer-text{
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
||||
padding: 0 32px;
|
||||
}
|
||||
|
||||
.section-footer-title {
|
||||
font-size: 24px;
|
||||
line-height: 29px;
|
||||
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.section-footer-description {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 968px){
|
||||
.footer-cards {
|
||||
grid-template-columns: 1fr;
|
||||
padding: 80px 24px 98px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.footer-card-description {
|
||||
max-width: 302px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px){
|
||||
.top-infocard {
|
||||
padding-bottom: 90px;
|
||||
}
|
||||
|
||||
.top-cards {
|
||||
grid-template-columns: 1fr;
|
||||
padding: 36px 32px 80px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 414px) {
|
||||
.main-banner-desktop, .section-footer-image-desktop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.footer-text {
|
||||
text-align: center;
|
||||
width: 261px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 415px) {
|
||||
.main-banner-mobile, .middle-banner-mobile, .section-footer-image-mobile {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
20
index.html
20
index.html
@ -40,21 +40,21 @@
|
||||
<section class="top-cards">
|
||||
<div class="top-card">
|
||||
<figure><img class="top-card-image" src="./assets/images/info-card-middle-image-01.png" alt="Imagem do Primeiro Card do Topo"></figure>
|
||||
<p class="top-card-description">
|
||||
<p class="top-card-description card-description">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="top-card">
|
||||
<figure><img class="top-card-image" src="./assets/images/info-card-middle-image-02.png" alt="Imagem do Segundo Card do Topo"></figure>
|
||||
<p class="top-card-description">
|
||||
<p class="top-card-description card-description">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="top-card">
|
||||
<figure><img class="top-card-image" src="./assets/images/info-card-middle-image-03.png" alt="Imagem do Terceiro Card do Topo"></figure>
|
||||
<p class="top-card-description">
|
||||
<p class="top-card-description card-description">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
|
||||
</p>
|
||||
</div>
|
||||
@ -69,28 +69,28 @@
|
||||
<section class="footer-cards">
|
||||
<div class="footer-card">
|
||||
<figure><img class="footer-card-image" src="./assets/images/infocard-footer-image-01.png" alt="Imagem do Primeiro Card do Rodapé"></figure>
|
||||
<p class="footer-card-description">
|
||||
<p class="footer-card-description 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.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="footer-card">
|
||||
<figure><img class="footer-card-image" src="./assets/images/infocard-footer-image-02.png" alt="Imagem do Segundo Card do Rodapé"></figure>
|
||||
<p class="footer-card-description">
|
||||
<p class="footer-card-description 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.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="footer-card">
|
||||
<figure><img class="footer-card-image" src="./assets/images/infocard-footer-image-03.png" alt="Imagem do Terceiro Card do Rodapé"></figure>
|
||||
<p class="footer-card-description">
|
||||
<p class="footer-card-description 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.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="footer-card">
|
||||
<figure><img class="footer-card-image" src="./assets/images/infocard-footer-image-04.png" alt="Imagem do Quarto Card do Rodapé"></figure>
|
||||
<p class="footer-card-description">
|
||||
<p class="footer-card-description 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.
|
||||
</p>
|
||||
</div>
|
||||
@ -112,9 +112,9 @@
|
||||
|
||||
<footer class="page-footer">
|
||||
<div class="social-links">
|
||||
<a href="/"><img src="./assets/images/instagram.svg" alt="Siga no Instagram" /></a>
|
||||
<a href="/"><img src="./assets/images/facebook.svg" alt="Siga no Facebook" /></a>
|
||||
<a href="/"><img src="./assets/images/youtube.svg" alt="Siga no YouTube" /></a>
|
||||
<a class="link-social" href="/"><img src="./assets/images/instagram.svg" alt="Siga no Instagram" /></a>
|
||||
<a class="link-social" href="/"><img src="./assets/images/facebook.svg" alt="Siga no Facebook" /></a>
|
||||
<a class="link-social" href="/"><img src="./assets/images/youtube.svg" alt="Siga no YouTube" /></a>
|
||||
</div>
|
||||
|
||||
<p class="footer-text">Copyright © 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-00</p>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user