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

fix: corrige o alinhamento de banner e textos acima do footer

Browse Source
This commit is contained in:
unknown 2022-10-13 19:56:54 -03:00
parent 51f1cc50e8
commit 402571abd4
2 changed files with 60 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
index.html
View File

@ -4,8 +4,7 @@
<head> <head>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
rel="stylesheet">
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
@ -24,12 +23,10 @@
<!-- AREA DO BANNER PRINCIPAL --> <!-- AREA DO BANNER PRINCIPAL -->
<div class="container-banner-main"> <div class="container-banner-main">
<figure class="container-banner-desktop"> <figure class="container-banner-desktop">
<img class="banner-img banner-img-desktop" src="assets/banner/banner-header.png" <img class="banner-img banner-img-desktop" src="assets/banner/banner-header.png" alt="Notebook aberto com codigos HTML e CSS. Ao lado contem um celular, uma xicara branca, um fone e uma planta dentro de uma vaso. ">
alt="Notebook aberto com codigos HTML e CSS. Ao lado contem um celular, uma xicara branca, um fone e uma planta dentro de uma vaso. ">
</figure> </figure>
<figure class="container-banner-mobile"> <figure class="container-banner-mobile">
<img class="banner-img banner-img-mobile" src="assets/banner/banner-header-mobile.png" <img class="banner-img banner-img-mobile" src="assets/banner/banner-header-mobile.png" alt="Notebook aberto com codigos HTML e CSS.">
alt="Notebook aberto com codigos HTML e CSS.">
</figure> </figure>
</div> </div>
<!-- REGIAO ABAIXO DO BANNER PRINCIPAL--> <!-- REGIAO ABAIXO DO BANNER PRINCIPAL-->
@ -37,37 +34,28 @@
<section class="container-midle-flex"> <section class="container-midle-flex">
<h2 class="container-midle-subtitle">Lorem ipsum</h2> <h2 class="container-midle-subtitle">Lorem ipsum</h2>
<h1 class="container-midle-title">Dolor sit amet</h1> <h1 class="container-midle-title">Dolor sit amet</h1>
<p class="container-midle-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras <p class="container-midle-paragraph">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>
euismod enim non dui fringilla interdum. Curabitur ut tortor sed lacus egestas vulputate vel sit
amet velit. Nulla suscipit magna dui. </p>
<img src="assets/img/midle-computer.png" <img src="assets/img/midle-computer.png" alt="Computadores alinhados. Um em cuma e dois embaixo, ligados por setas." class="container-midle-img" />
alt="Computadores alinhados. Um em cuma e dois embaixo, ligados por setas."
class="container-midle-img" />
<!-- CONTAINER CARD TRIPLO--> <!-- CONTAINER CARD TRIPLO-->
<div class="container-cards"> <div class="container-cards">
<div class="card-1"> <div class="card-1">
<figure> <figure>
<img class="icon-card" src="assets/svg/shop-icon.svg" alt="icone de shopping"> <img class="icon-card" src="assets/svg/shop-icon.svg" alt="icone de shopping">
<figcaption class="subtitle-card">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <figcaption class="subtitle-card">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </figcaption>
Cras euismod enim non dui fringilla interdum. </figcaption>
</figure> </figure>
</div> </div>
<div class="card-2"> <div class="card-2">
<figure> <figure>
<img class="icon-card" src="assets/svg/shopping-bag-icon.svg" <img class="icon-card" src="assets/svg/shopping-bag-icon.svg" alt="icone de shopping bag (sacola de shoppin) com um escudo azul na frente. Simboliza compra segura">
alt="icone de shopping bag (sacola de shoppin) com um escudo azul na frente. Simboliza compra segura"> <figcaption class="subtitle-card">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </figcaption>
<figcaption class="subtitle-card">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Cras euismod enim non dui fringilla interdum. </figcaption>
</figure> </figure>
</div> </div>
<div class="card-3"> <div class="card-3">
<figure> <figure>
<img class="icon-card" src="assets/svg/coin-icon.svg" <img class="icon-card" src="assets/svg/coin-icon.svg" alt="icone de mão segurando uma moeda">
alt="icone de mão segurando uma moeda"> <figcaption class="subtitle-card">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </figcaption>
<figcaption class="subtitle-card">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Cras euismod enim non dui fringilla interdum. </figcaption>
</div> </div>
</figure> </figure>
</div> </div>
@ -78,20 +66,17 @@
<div class="banner-mosaic"> <div class="banner-mosaic">
<div class="mosaic-img1"> <div class="mosaic-img1">
<figure> <figure>
<img class="mosaic-wrapper-img img1" src="assets/img/computer-img-1.png" <img class="mosaic-wrapper-img img1" src="assets/img/computer-img-1.png" alt="Notebook, posicionado de frente. Aberto em cerca de 45 graus>">
alt="Notebook, posicionado de frente. Aberto em cerca de 45 graus>">
</figure> </figure>
</div> </div>
<div class="mosaic-img2"> <div class="mosaic-img2">
<figure> <figure>
<img class="mosaic-wrapper-img img2" src="assets/img/computer-img-2.png" <img class="mosaic-wrapper-img img2" src="assets/img/computer-img-2.png" alt="Notebook, posicionado de frente, imagem feita de cima para baixo. Aberto em cerca de 60 graus">
alt="Notebook, posicionado de frente, imagem feita de cima para baixo. Aberto em cerca de 60 graus">
</figure> </figure>
</div> </div>
<div class="mosaic-img3"> <div class="mosaic-img3">
<figure> <figure>
<img class="mosaic-wrapper-img img3" src="assets/img/computer-img-3.png" <img class="mosaic-wrapper-img img3" src="assets/img/computer-img-3.png" alt="Notebook, posicionado de angulo lateal. Aberto em 60">
alt="Notebook, posicionado de angulo lateal. Aberto em 60">
</figure> </figure>
</div> </div>
</div> </div>
@ -102,33 +87,25 @@
<div class="card-1"> <div class="card-1">
<figure> <figure>
<img class="icon-card" src="assets/svg/money-icon.svg" alt="Icone de cédulas."> <img class="icon-card" src="assets/svg/money-icon.svg" alt="Icone de cédulas.">
<figcaption class="subtitle-card">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras <figcaption class="subtitle-card">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>
euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Cras euismod enim non dui fringilla interdum. </figcaption>
</figure> </figure>
</div> </div>
<div class="card-2"> <div class="card-2">
<figure> <figure>
<img class="icon-card" src="assets/svg/coin-icon.svg" alt="icone de mão segurando uma moeda"> <img class="icon-card" src="assets/svg/coin-icon.svg" alt="icone de mão segurando uma moeda">
<figcaption class="subtitle-card">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras <figcaption class="subtitle-card">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>
euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Cras euismod enim non dui fringilla interdum. </figcaption>
</figure> </figure>
</div> </div>
<div class="card-3"> <div class="card-3">
<figure> <figure>
<img class="icon-card" src="assets/svg/laptop-icon.svg" alt="icone de laptop aberto."> <img class="icon-card" src="assets/svg/laptop-icon.svg" alt="icone de laptop aberto.">
<figcaption class="subtitle-card">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras <figcaption class="subtitle-card">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>
euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Cras euismod enim non dui fringilla interdum. </figcaption>
</figure> </figure>
</div> </div>
<div class="card-4"> <div class="card-4">
<figure> <figure>
<img class="icon-card" src="assets/svg/phone-icon.svg" alt="icone de um smartphone"> <img class="icon-card" src="assets/svg/phone-icon.svg" alt="icone de um smartphone">
<figcaption class="subtitle-card">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras <figcaption class="subtitle-card">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>
euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Cras euismod enim non dui fringilla interdum. </figcaption>
</figure> </figure>
</div> </div>
</div> </div>
@ -136,20 +113,15 @@
<div class="bottom-flex"> <div class="bottom-flex">
<section class="bottom-text"> <section class="bottom-text">
<h2 class="bottom-subtitle">Lorem ipsum dolor sit amet</h2> <h2 class="bottom-subtitle">Lorem ipsum dolor sit amet</h2>
<p class="bottom-paraphase">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate <p class="bottom-paraphase">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate sapien non libero faucibus interdum. In eget tincidunt ipsum. Quisque a tellus at lectus blandit tempor. Ut tristique auctor mi eget hendrerit. Curabitur venenatis
sapien non libero faucibus interdum. In eget tincidunt ipsum. felis vitae sagittis venenatis. Donec finibus turpis vitae lectus interdum rutrum vitae sed augue.</p>
Quisque a tellus at lectus blandit tempor. Ut tristique auctor mi eget hendrerit. Curabitur
venenatis felis vitae sagittis venenatis.
Donec finibus turpis vitae lectus interdum rutrum vitae sed augue.</p>
</section> </section>
<figure> <figure>
<img src="assets/banner/banner-footer.png" <img src="assets/banner/banner-footer.png" alt="imagem de um oculos. de frente para uma tela de computador." class="botton-img-desktop"></img>
alt="imagem de um oculos. de frente para uma tela de computador." class="botton-img-desktop"></img>
</figure> </figure>
<figure> <figure>
<img src="assets/banner/banne-footer-mobile.png" <img src="assets/banner/banne-footer-mobile.png" alt="imagem de um oculos. de frente para uma tela de computador." class="botton-img-mobile"></img>
alt="imagem de um oculos. de frente para uma tela de computador." class="botton-img-mobile"></img>
</figure> </figure>
</div> </div>
@ -161,7 +133,8 @@
<li class="icon-contact"><img src="assets/svg/facebook-icon.svg" alt="icone do facebook"></li> <li class="icon-contact"><img src="assets/svg/facebook-icon.svg" alt="icone do facebook"></li>
<li class="icon-contact"><img src="assets/svg/youtube-icon.svg" alt="icone do youtube"></li> <li class="icon-contact"><img src="assets/svg/youtube-icon.svg" alt="icone do youtube"></li>
</ul> </ul>
<small class="footer-text">&copy; Copyright 2020, Loja Comércio Eletrônico CNPJ: 000.000.000/0001-00</small> <small class="footer-text"> Copyright &copy; 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-00
</small>
</div> </div>
</footer> </footer>
</body> </body>

103
style/style.css
View File

@ -5,6 +5,7 @@
font-family: 'Inter', sans-serif; font-family: 'Inter', sans-serif;
} }
/* variaveis de cores */ /* variaveis de cores */
:root { :root {
@ -15,6 +16,7 @@
--grey-footer: #BDBDBD; --grey-footer: #BDBDBD;
} }
/* HEADER DA PAGINA */ /* HEADER DA PAGINA */
header { header {
@ -28,6 +30,7 @@ header {
img { img {
display: block; display: block;
width: 100%;
} }
.header-logo { .header-logo {
@ -45,6 +48,7 @@ img {
display: none; display: none;
} }
/* AREA ABAIXO DO BANNER */ /* AREA ABAIXO DO BANNER */
.container-midle-flex { .container-midle-flex {
@ -56,7 +60,6 @@ img {
} }
.container-midle-title { .container-midle-title {
font-weight: 500; font-weight: 500;
font-size: 48px; font-size: 48px;
line-height: 58px; line-height: 58px;
@ -68,7 +71,6 @@ img {
font-size: 32px; font-size: 32px;
line-height: 40px; line-height: 40px;
text-transform: uppercase; text-transform: uppercase;
} }
.container-midle-paragraph { .container-midle-paragraph {
@ -78,7 +80,6 @@ img {
font-size: 16px; font-size: 16px;
line-height: 24px; line-height: 24px;
margin: 28px 28px 74px; margin: 28px 28px 74px;
} }
.container-midle-img { .container-midle-img {
@ -88,6 +89,7 @@ img {
display: block; display: block;
} }
/* GRID INFO CARD TRIPLE */ /* GRID INFO CARD TRIPLE */
.container-cards { .container-cards {
@ -96,8 +98,7 @@ img {
grid-template-rows: 1fr; grid-template-rows: 1fr;
gap: 0px 22px; gap: 0px 22px;
grid-auto-flow: row; grid-auto-flow: row;
grid-template-areas: grid-template-areas: "card-1 card-2 card-3 card-4";
"card-1 card-2 card-3 card-4";
justify-content: center; justify-content: center;
width: 100%; width: 100%;
padding: 10% 22% 4%; padding: 10% 22% 4%;
@ -105,8 +106,7 @@ img {
.container-infocard { .container-infocard {
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
grid-template-areas: grid-template-areas: "card-1 card-2 card-3 card-4";
"card-1 card-2 card-3 card-4";
padding: 130px 72px; padding: 130px 72px;
} }
@ -154,10 +154,11 @@ img {
font-size: 16px; font-size: 16px;
line-height: 24px; line-height: 24px;
text-align: center; text-align: center;
} }
/* Banner Mosaico */ /* Banner Mosaico */
.wrapper-banner { .wrapper-banner {
width: 100%; width: 100%;
background-color: var(--grey); background-color: var(--grey);
@ -175,7 +176,6 @@ img {
padding: 0 72px; padding: 0 72px;
transform: translateY(60px); transform: translateY(60px);
z-index: 999; z-index: 999;
} }
.mosaic-img1 { .mosaic-img1 {
@ -197,31 +197,36 @@ img {
/* AREA BOTTON, ANTES DO FOOTER */ /* AREA BOTTON, ANTES DO FOOTER */
.bottom-flex,
.bottom-text { .bottom-flex {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 70%;
margin: 0 auto;
} }
.bottom-text {}
.bottom-subtitle { .bottom-subtitle {
width: 100%; width: 100%;
max-width: 22%; min-width: 30%;
font-weight: 600; font-weight: 600;
font-size: 32px; font-size: 32px;
margin: 0 40% 5px; line-height: 24px;
text-align: center;
} }
.bottom-paraphase { .bottom-paraphase {
width: 100%; width: 100%;
max-width: 28%; max-width: 40%;
margin-bottom: 50px;
text-align: center; text-align: center;
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
line-height: 24px; line-height: 24px;
margin: 0 auto;
margin-bottom: 50px;
} }
.botton-img-mobile { .botton-img-mobile {
@ -234,15 +239,15 @@ footer {
margin-top: 116px; margin-top: 116px;
background: var(--black); background: var(--black);
} }
li{
li {
list-style: none; list-style: none;
} }
.container-contact { .container-contact {
display: flex; display: flex;
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
} }
.contact { .contact {
@ -252,47 +257,42 @@ flex-direction: column;
width: 30%; width: 30%;
margin: 0 auto; margin: 0 auto;
} }
.icon-contact{
.icon-contact {
padding: 0 10px; padding: 0 10px;
width: 26px; width: 26px;
height: 26px; height: 26px;
} }
.footer-text { .footer-text {
color: var(--grey-footer); color: var(--grey-footer);
font-size: 10px; font-size: 10px;
margin: 0 auto; margin: 0 auto;
margin-top: 18px; margin-top: 18px;
text-transform: uppercase; text-transform: uppercase;
} }
/* Medias Queries*/ /* Medias Queries*/
@media screen and (min-width:2500px) { @media screen and (min-width:2500px) {
.container-cards { .container-cards {
padding: 6% 30% 4%; padding: 6% 30% 4%;
} }
} }
@media screen and (max-width:1024px) { @media screen and (max-width:1024px) {
/* BANNER MOBILE */ /* BANNER MOBILE */
.banner-img-desktop { .banner-img-desktop {
display: none; display: none;
} }
.banner-img-mobile { .banner-img-mobile {
display: block; display: block;
} }
/* AREA ABAIXO DO BANNER */ /* AREA ABAIXO DO BANNER */
.container-midle { .container-midle {
width: 100%; width: 100%;
} }
/* AREA ABAIXO DO BANNER */ /* AREA ABAIXO DO BANNER */
.container-midle-flex { .container-midle-flex {
display: flex; display: flex;
@ -300,32 +300,26 @@ flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.container-midle-title { .container-midle-title {
font-size: 28px; font-size: 28px;
line-height: 34px; line-height: 34px;
} }
.container-midle-subtitle { .container-midle-subtitle {
font-size: 20px; font-size: 20px;
line-height: 24px; line-height: 24px;
} }
.container-midle-paragraph { .container-midle-paragraph {
max-width: 86%; max-width: 86%;
font-size: 16px; font-size: 16px;
line-height: 24px; line-height: 24px;
text-align: center; text-align: center;
} }
.container-midle-img { .container-midle-img {
width: 58%; width: 58%;
height: 58%; height: 58%;
max-width: 240px; max-width: 240px;
display: block; display: block;
} }
/* Area dos tres cards */ /* Area dos tres cards */
.container-cards { .container-cards {
display: grid; display: grid;
@ -333,44 +327,29 @@ flex-direction: column;
grid-template-rows: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
gap: 24px; gap: 24px;
grid-auto-flow: row; grid-auto-flow: row;
grid-template-areas: grid-template-areas: "card-1" "card-2" "card-3";
"card-1"
"card-2"
"card-3";
justify-content: center; justify-content: center;
padding: 90px 32px 80px; padding: 90px 32px 80px;
} }
.container-infocard { .container-infocard {
grid-template-rows: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr);
grid-template-areas: grid-template-areas: "card-1" "card-2" "card-3" "card-4";
"card-1"
"card-2"
"card-3"
"card-4";
} }
.subtitle-card { .subtitle-card {
max-width: 72%; max-width: 72%;
margin: 0 auto; margin: 0 auto;
text-align: center; text-align: center;
} }
/*REGIAO DO BANNER MOSAICO */ /*REGIAO DO BANNER MOSAICO */
.banner-mosaic { .banner-mosaic {
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
grid-template-rows: 2fr; grid-template-rows: 2fr;
grid-template-areas: grid-template-areas: "mosaic-img2 mosaic-img1" "mosaic-img3 mosaic-img3";
"mosaic-img2 mosaic-img1"
"mosaic-img3 mosaic-img3";
gap: 24px 14px; gap: 24px 14px;
padding: 0 24px; padding: 0 24px;
transform: translateY(32px); transform: translateY(32px);
} }
.img1, .img1,
.img2 { .img2 {
width: 100%; width: 100%;
@ -378,26 +357,21 @@ flex-direction: column;
min-width: 50%; min-width: 50%;
min-height: 50%; min-height: 50%;
} }
.img3 { .img3 {
min-width: 90%; min-width: 90%;
min-height: 90%; min-height: 90%;
} }
/* AREA BOTTON, ANTES DO FOOTER */ /* AREA BOTTON, ANTES DO FOOTER */
.botton-img-desktop { .botton-img-desktop {
display: none; display: none;
} }
.botton-img-mobile { .botton-img-mobile {
display: block; display: block;
width: 100%; width: 100%;
} }
.bottom-paraphase { .bottom-paraphase {
max-width: 84%; max-width: 84%;
} }
.bottom-subtitle { .bottom-subtitle {
max-width: 76%; max-width: 76%;
margin: 50px 50px 10px; margin: 50px 50px 10px;
@ -405,30 +379,25 @@ flex-direction: column;
line-height: 30px; line-height: 30px;
text-align: center; text-align: center;
} }
.bottom-flex { .bottom-flex {
flex-direction: column-reverse; flex-direction: column-reverse;
} }
/* FOOTER */ /* FOOTER */
footer {
footer{ padding: 32px 76px;
padding: 32px 76px; }
} .footer-text {
.footer-text{
color: var(--grey-footer); color: var(--grey-footer);
font-size: 10px; font-size: 10px;
min-width: 64%; min-width: 64%;
margin-top: 10px; margin-top: 10px;
text-align: center; text-align: center;
} }
.contact{ .contact {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
width: 35%; width: 35%;
margin: 0 auto; margin: 0 auto;
justify-content: space-around; justify-content: space-around;
}
} }
}