feat(home): finalização do projeto #13

Merged
Thiago.bronisio merged 1 commits from feature/responsividade-final into main 2022-10-13 03:06:13 +00:00
2 changed files with 314 additions and 49 deletions

View File

@ -167,16 +167,16 @@
<figure> <figure>
<img class="img-oculos" src="./assets/img/img-mobile/img-oculos.png" alt="Imagem de um óculos"> <img class="img-oculos" src="./assets/img/img-mobile/img-oculos.png" alt="Imagem de um óculos">
</figure> </figure>
<div class="information-text">
<h1>Lorem ipsum dolor sit amet</h1> <h1>Lorem ipsum dolor sit amet</h1>
<p> <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate sapien non libero Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate sapien non libero
faucibus interdum. In eget tincidunt ipsum. faucibus interdum. In eget tincidunt ipsum.
Quisque a tellus at lectus blandit tempor. Ut tristique auctor mi eget hendrerit. Curabitur Quisque a tellus at lectus blandit tempor. Ut tristique auctor mi eget hendrerit. Curabitur
venenatis felis vitae sagittis venenatis. venenatis felis vitae sagittis venenatis.
Donec finibus turpis vitae lectus interdum rutrum vitae sed augue. Donec finibus turpis vitae lectus interdum rutrum vitae sed augue.
</p> </p>
</div>
<figure> <figure>
<img class="img-information" src="./assets/img/img-embacada.png" <img class="img-information" src="./assets/img/img-embacada.png"
alt="Imagem de programação embaçada"> alt="Imagem de programação embaçada">
@ -193,19 +193,19 @@
<div class="img-footer"> <div class="img-footer">
<a> <a>
<figure> <figure>
<img src="./assets/img/img-instagram.png" alt="Instagram"> <img class="font-instagram" src="./assets/img/img-instagram.png" alt="Instagram">
</figure> </figure>
</a> </a>
<a class="img-facebook"> <a class="img-facebook">
<figure> <figure>
<img src="./assets/img/img-facebook.png" alt="Facebook"> <img class="font-facebook" src="./assets/img/img-facebook.png" alt="Facebook">
</figure> </figure>
</a> </a>
<a> <a>
<figure> <figure>
<img src="./assets/img/img-youtube.png" alt="Youtube"> <img class="font-youtube" src="./assets/img/img-youtube.png" alt="Youtube">
</figure> </figure>
</a> </a>
</div> </div>

337
style.css
View File

@ -35,7 +35,7 @@
.info-title { .info-title {
font-size: 32px; font-size: 32px;
line-height: 39px; line-height: 39px;
font-weight: 400px; font-weight: 400;
text-transform: uppercase; text-transform: uppercase;
text-align: center; text-align: center;
} }
@ -52,6 +52,7 @@
.info-content { .info-content {
margin: 28px 0px 84px 0px; margin: 28px 0px 84px 0px;
text-align: start; text-align: start;
line-height: 24px;
} }
/* Imagem três monitores */ /* Imagem três monitores */
@ -81,7 +82,9 @@
margin-bottom: 27px; margin-bottom: 27px;
margin-top: 35px; margin-top: 35px;
}.info-shop figcaption { }.info-shop figcaption {
font-size: 16px;
line-height: 24px; line-height: 24px;
font-weight: 400;
max-width: 299px; max-width: 299px;
margin-bottom: 27px; margin-bottom: 27px;
} }
@ -97,7 +100,9 @@
margin-bottom: 27px; margin-bottom: 27px;
margin-top: 35px; margin-top: 35px;
}.info-bag figcaption { }.info-bag figcaption {
font-size: 16px;
line-height: 24px; line-height: 24px;
font-weight: 400;
max-width: 299px; max-width: 299px;
margin-bottom: 27px; margin-bottom: 27px;
} }
@ -112,7 +117,9 @@
margin-bottom: 27px; margin-bottom: 27px;
margin-top: 35px; margin-top: 35px;
}.info-coin figcaption { }.info-coin figcaption {
font-size: 16px;
line-height: 24px; line-height: 24px;
font-weight: 400;
max-width: 299px; max-width: 299px;
margin-bottom: 27px; margin-bottom: 27px;
} }
@ -165,6 +172,7 @@
}.card-dollar figcaption { }.card-dollar figcaption {
font-size: 16px; font-size: 16px;
line-height: 24px; line-height: 24px;
font-weight: 400;
margin: 0px 32px 65px 33px; margin: 0px 32px 65px 33px;
} }
@ -177,6 +185,7 @@
}.card-moeda figcaption { }.card-moeda figcaption {
font-size: 16px; font-size: 16px;
line-height: 24px; line-height: 24px;
font-weight: 400;
margin: 0px 32px 65px 33px; margin: 0px 32px 65px 33px;
} }
@ -189,6 +198,7 @@
}.card-laptop figcaption { }.card-laptop figcaption {
font-size: 16px; font-size: 16px;
line-height: 24px; line-height: 24px;
font-weight: 400;
margin: 0px 32px 65px 33px; margin: 0px 32px 65px 33px;
} }
@ -200,6 +210,7 @@
}.card-smartphone figcaption { }.card-smartphone figcaption {
font-size: 16px; font-size: 16px;
line-height: 24px; line-height: 24px;
font-weight: 400;
margin: 0px 32px 65px 33px; margin: 0px 32px 65px 33px;
} }
@ -218,10 +229,10 @@
text-align: center; text-align: center;
}.information p { }.information p {
margin: 0 auto; margin: 0 auto;
text-align: center;
font-size: 16px; font-size: 16px;
line-height: 24px; line-height: 24px;
font-weight: 400; font-weight: 400;
text-align: center;
width: 40.80%; width: 40.80%;
}.img-information { }.img-information {
width: 100%; width: 100%;
@ -264,6 +275,7 @@
}.info-footer p { }.info-footer p {
text-align: center; text-align: center;
color: #BDBDBD; color: #BDBDBD;
font-weight: 400;
} }
.img-facebook { .img-facebook {
@ -376,13 +388,32 @@
margin: 0 auto; margin: 0 auto;
padding: 0px 25.35px 27.50px 26px; 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{ .container-card{
padding: 0px 23px 0px 23px; padding: 0px 23px 0px 23px;
@ -473,7 +504,6 @@
width: 84.54%; width: 84.54%;
margin: 0px 32px 87px; margin: 0px 32px 87px;
margin: 0 auto; margin: 0 auto;
text-align: center;
font-size: 16px; font-size: 16px;
line-height: 24px; line-height: 24px;
text-align: center; text-align: center;
@ -484,39 +514,14 @@
width: 100%; width: 100%;
margin-bottom: 50px; 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{ .info-footer{
padding: 32px 77px 32px; padding: 32px 77px 32px;
} }
} }
@media screen and (min-width: 2501px) { @media screen and (min-width: 2501px) {
/* Header */
.container-header { .container-header {
background-color: #000000; background-color: #000000;
} }
@ -525,15 +530,275 @@
display: flex; display: flex;
padding: 29px 0px; padding: 29px 0px;
justify-content: center; justify-content: center;
}.logo-m3 img{
width: 452px;
} }
/* Banner */
.banner-mobile{display: none;}
.banner { .banner {
display: flex; display: flex;
width: 100%; 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; 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%; 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;
}
} }