forked from M3-Academy/challenge-landing-page
feat(home): finalização do projeto #13
26
index.html
26
index.html
@ -167,16 +167,16 @@
|
||||
<figure>
|
||||
<img class="img-oculos" src="./assets/img/img-mobile/img-oculos.png" alt="Imagem de um óculos">
|
||||
</figure>
|
||||
|
||||
<h1>Lorem ipsum dolor sit amet</h1>
|
||||
<p>
|
||||
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 felis vitae sagittis venenatis.
|
||||
Donec finibus turpis vitae lectus interdum rutrum vitae sed augue.
|
||||
</p>
|
||||
|
||||
<div class="information-text">
|
||||
<h1>Lorem ipsum dolor sit amet</h1>
|
||||
<p>
|
||||
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 felis vitae sagittis venenatis.
|
||||
Donec finibus turpis vitae lectus interdum rutrum vitae sed augue.
|
||||
</p>
|
||||
</div>
|
||||
<figure>
|
||||
<img class="img-information" src="./assets/img/img-embacada.png"
|
||||
alt="Imagem de programação embaçada">
|
||||
@ -193,19 +193,19 @@
|
||||
<div class="img-footer">
|
||||
<a>
|
||||
<figure>
|
||||
<img src="./assets/img/img-instagram.png" alt="Instagram">
|
||||
<img class="font-instagram" src="./assets/img/img-instagram.png" alt="Instagram">
|
||||
</figure>
|
||||
</a>
|
||||
|
||||
<a class="img-facebook">
|
||||
<figure>
|
||||
<img src="./assets/img/img-facebook.png" alt="Facebook">
|
||||
<img class="font-facebook" src="./assets/img/img-facebook.png" alt="Facebook">
|
||||
</figure>
|
||||
</a>
|
||||
|
||||
<a>
|
||||
<figure>
|
||||
<img src="./assets/img/img-youtube.png" alt="Youtube">
|
||||
<img class="font-youtube" src="./assets/img/img-youtube.png" alt="Youtube">
|
||||
</figure>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
337
style.css
337
style.css
@ -35,7 +35,7 @@
|
||||
.info-title {
|
||||
font-size: 32px;
|
||||
line-height: 39px;
|
||||
font-weight: 400px;
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
}
|
||||
@ -52,6 +52,7 @@
|
||||
.info-content {
|
||||
margin: 28px 0px 84px 0px;
|
||||
text-align: start;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
/* Imagem três monitores */
|
||||
@ -81,7 +82,9 @@
|
||||
margin-bottom: 27px;
|
||||
margin-top: 35px;
|
||||
}.info-shop figcaption {
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
font-weight: 400;
|
||||
max-width: 299px;
|
||||
margin-bottom: 27px;
|
||||
}
|
||||
@ -97,7 +100,9 @@
|
||||
margin-bottom: 27px;
|
||||
margin-top: 35px;
|
||||
}.info-bag figcaption {
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
font-weight: 400;
|
||||
max-width: 299px;
|
||||
margin-bottom: 27px;
|
||||
}
|
||||
@ -112,7 +117,9 @@
|
||||
margin-bottom: 27px;
|
||||
margin-top: 35px;
|
||||
}.info-coin figcaption {
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
font-weight: 400;
|
||||
max-width: 299px;
|
||||
margin-bottom: 27px;
|
||||
}
|
||||
@ -165,6 +172,7 @@
|
||||
}.card-dollar figcaption {
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
font-weight: 400;
|
||||
margin: 0px 32px 65px 33px;
|
||||
}
|
||||
|
||||
@ -177,6 +185,7 @@
|
||||
}.card-moeda figcaption {
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
font-weight: 400;
|
||||
margin: 0px 32px 65px 33px;
|
||||
}
|
||||
|
||||
@ -189,6 +198,7 @@
|
||||
}.card-laptop figcaption {
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
font-weight: 400;
|
||||
margin: 0px 32px 65px 33px;
|
||||
}
|
||||
|
||||
@ -200,6 +210,7 @@
|
||||
}.card-smartphone figcaption {
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
font-weight: 400;
|
||||
margin: 0px 32px 65px 33px;
|
||||
}
|
||||
|
||||
@ -218,10 +229,10 @@
|
||||
text-align: center;
|
||||
}.information p {
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
width: 40.80%;
|
||||
}.img-information {
|
||||
width: 100%;
|
||||
@ -264,6 +275,7 @@
|
||||
}.info-footer p {
|
||||
text-align: center;
|
||||
color: #BDBDBD;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.img-facebook {
|
||||
@ -376,13 +388,32 @@
|
||||
margin: 0 auto;
|
||||
padding: 0px 25.35px 27.50px 26px;
|
||||
}
|
||||
|
||||
.info-laptop{
|
||||
width: 100%;
|
||||
margin-bottom: 112px;
|
||||
}
|
||||
.grid-laptop1{
|
||||
grid-area: laptop1;
|
||||
}
|
||||
.grid-laptop2{
|
||||
grid-area: laptop2;
|
||||
}
|
||||
.grid-laptop3{
|
||||
grid-area: laptop3;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.info-container{
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"laptop2 laptop1"
|
||||
"laptop3 laptop3"
|
||||
;
|
||||
column-gap: 14px;
|
||||
row-gap: 24px;
|
||||
grid-template-columns: unset;
|
||||
width: 88.90%;
|
||||
}
|
||||
|
||||
.container-card{
|
||||
padding: 0px 23px 0px 23px;
|
||||
@ -473,7 +504,6 @@
|
||||
width: 84.54%;
|
||||
margin: 0px 32px 87px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
@ -484,39 +514,14 @@
|
||||
width: 100%;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
|
||||
.info-laptop{
|
||||
width: 100%;
|
||||
}
|
||||
.grid-laptop1{
|
||||
grid-area: laptop1;
|
||||
}
|
||||
.grid-laptop2{
|
||||
grid-area: laptop2;
|
||||
}
|
||||
.grid-laptop3{
|
||||
grid-area: laptop3;
|
||||
}
|
||||
|
||||
.info-container{
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"laptop2 laptop1"
|
||||
"laptop3 laptop3"
|
||||
;
|
||||
column-gap: 14px;
|
||||
row-gap: 24px;
|
||||
grid-template-columns: unset;
|
||||
}
|
||||
|
||||
|
||||
.info-footer{
|
||||
padding: 32px 77px 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 2501px) {
|
||||
/* Header */
|
||||
.container-header {
|
||||
background-color: #000000;
|
||||
}
|
||||
@ -525,15 +530,275 @@
|
||||
display: flex;
|
||||
padding: 29px 0px;
|
||||
justify-content: center;
|
||||
}.logo-m3 img{
|
||||
width: 452px;
|
||||
}
|
||||
|
||||
/* Banner */
|
||||
.banner-mobile{display: none;}
|
||||
.banner {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
margin-bottom: 76px;
|
||||
}
|
||||
|
||||
.img-embacada {
|
||||
/*Fisrt section */
|
||||
|
||||
.info-dolor {
|
||||
max-width: 40.26%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.info-title {
|
||||
font-size: 62px;
|
||||
line-height: 78px;
|
||||
font-weight: 400px;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.info-dolor h1 {
|
||||
font-size: 96px;
|
||||
line-height: 116px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.info-monitor-mobile{display: none;}
|
||||
.info-content {
|
||||
margin: 28px 0px 84px 0px;
|
||||
text-align: start;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
/* Imagem três monitores */
|
||||
|
||||
.info-monitor {
|
||||
display: flex;
|
||||
margin: 0 auto;
|
||||
justify-content: center;
|
||||
margin-bottom: 179px;
|
||||
}
|
||||
|
||||
/* Card da primeira section */
|
||||
|
||||
.info-card {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
|
||||
/* Card shopping */
|
||||
|
||||
.info-shop {
|
||||
width: 18.25%;
|
||||
text-align: center;
|
||||
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
|
||||
}.info-shop img {
|
||||
margin-bottom: 27px;
|
||||
margin-top: 35px;
|
||||
}.info-shop figcaption {
|
||||
font-size: 32px;
|
||||
line-height: 48px;
|
||||
margin-bottom: 27px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Card bag */
|
||||
|
||||
.info-bag {
|
||||
width: 18.25%;
|
||||
text-align: center;
|
||||
margin: 0px 21px;
|
||||
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
|
||||
}.info-bag img {
|
||||
margin-bottom: 27px;
|
||||
margin-top: 35px;
|
||||
}.info-bag figcaption {
|
||||
font-size: 32px;
|
||||
line-height: 48px;
|
||||
margin-bottom: 27px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Card coin */
|
||||
|
||||
.info-coin {
|
||||
width: 18.25%;
|
||||
text-align: center;
|
||||
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
|
||||
}.info-coin img {
|
||||
margin-bottom: 27px;
|
||||
margin-top: 35px;
|
||||
}.info-coin figcaption {
|
||||
font-size: 32px;
|
||||
line-height: 48px;
|
||||
margin-bottom: 27px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Imagens laptops */
|
||||
|
||||
.info-laptop {
|
||||
background-color: #E0E0E0;
|
||||
margin-bottom: 130px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.info-container {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto auto;
|
||||
gap: 39px;
|
||||
position: relative;
|
||||
bottom: -32px;
|
||||
width: 92.5%;
|
||||
}
|
||||
|
||||
.grid-laptop1,
|
||||
.grid-laptop2,
|
||||
.grid-laptop3{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.img-laptop{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Último card */
|
||||
|
||||
.card-information {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 129px 72px 108px;
|
||||
}
|
||||
|
||||
.card-dollar {
|
||||
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
|
||||
margin-right: 16px;
|
||||
text-align: center;
|
||||
}.card-dollar img {
|
||||
margin: 35px 0px 15px;
|
||||
}.card-dollar figcaption {
|
||||
font-size: 32px;
|
||||
line-height: 48px;
|
||||
margin: 0px 32px 65px 33px;
|
||||
}
|
||||
|
||||
.card-moeda {
|
||||
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
|
||||
margin-right: 16px;
|
||||
text-align: center;
|
||||
}.card-moeda img {
|
||||
margin: 35px 0px 15px;
|
||||
}.card-moeda figcaption {
|
||||
font-size: 32px;
|
||||
line-height: 48px;
|
||||
margin: 0px 32px 65px 33px;
|
||||
}
|
||||
|
||||
.card-laptop {
|
||||
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
|
||||
margin-right: 16px;
|
||||
text-align: center;
|
||||
}.card-laptop img {
|
||||
margin: 35px 0px 15px;
|
||||
}.card-laptop figcaption {
|
||||
font-size: 32px;
|
||||
line-height: 48px;
|
||||
margin: 0px 32px 65px 33px;
|
||||
}
|
||||
|
||||
.card-smartphone {
|
||||
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
|
||||
text-align: center;
|
||||
}.card-smartphone img {
|
||||
margin: 35px 0px 15px;
|
||||
}.card-smartphone figcaption {
|
||||
font-size: 32px;
|
||||
line-height: 48px;
|
||||
margin: 0px 32px 65px 33px;
|
||||
}
|
||||
|
||||
/* Informação Final */
|
||||
.container-information {
|
||||
width: 100%;
|
||||
}
|
||||
.information {
|
||||
width: 70.85%;
|
||||
margin: 0 auto;
|
||||
}.information h1 {
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
font-size: 62px;
|
||||
line-height: 78px;
|
||||
text-align: center;
|
||||
}.information p {
|
||||
margin: 0 auto;
|
||||
font-size: 32px;
|
||||
line-height: 48px;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
width: 40.80%;
|
||||
}.img-information {
|
||||
width: 100%;
|
||||
margin-top: 50px;
|
||||
}
|
||||
@media screen and (min-width: 1025px) {
|
||||
.img-oculos{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
|
||||
.container-footer{
|
||||
background-color: #000000;
|
||||
margin-top: 116px;
|
||||
}.container-footer p {
|
||||
text-align: center;
|
||||
color: #BDBDBD;
|
||||
line-height: 12px;
|
||||
font-size: 20px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.info-footer{
|
||||
padding: 38px 0px;
|
||||
}
|
||||
|
||||
.img-footer {
|
||||
display: flex;
|
||||
margin: 0 auto;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 17px;
|
||||
width: 20.60%;
|
||||
}
|
||||
|
||||
.info-footer a {
|
||||
text-decoration: none;
|
||||
color: #FFFFFF;
|
||||
}.info-footer p {
|
||||
text-align: center;
|
||||
color: #BDBDBD;
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.img-facebook {
|
||||
margin: 0px 42px;
|
||||
}.font-facebook {
|
||||
width: 26px;
|
||||
}.font-youtube{
|
||||
width: 39px;
|
||||
}.font-instagram {
|
||||
width: 39px;
|
||||
}
|
||||
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user