forked from M3-Academy/challenge-landing-page
Compare commits
No commits in common. "main" and "feature/main-sections" have entirely different histories.
main
...
feature/ma
Binary file not shown.
|
Before Width: | Height: | Size: 492 B After Width: | Height: | Size: 329 B |
Binary file not shown.
|
Before Width: | Height: | Size: 333 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 246 KiB |
86
index.html
86
index.html
@ -26,13 +26,10 @@
|
|||||||
<main>
|
<main>
|
||||||
|
|
||||||
<figure>
|
<figure>
|
||||||
<img class="banner" src="./assets/img/banner1.png" alt="Banner de computador" />
|
<img class="banner" src="./assets/img/banner1.png" alt="banner" />
|
||||||
</figure>
|
|
||||||
<figure>
|
|
||||||
<img class="banner-mobile" src="./assets/img/img-mobile/banner.png" alt="Banner de computador">
|
|
||||||
</figure>
|
</figure>
|
||||||
|
|
||||||
<section class="container-dolor">
|
<section>
|
||||||
|
|
||||||
<div class="info-dolor">
|
<div class="info-dolor">
|
||||||
<p class="info-title">Lorem IPSUM</p>
|
<p class="info-title">Lorem IPSUM</p>
|
||||||
@ -43,8 +40,8 @@
|
|||||||
Curabitur ut tortor sed lacus egestas vulputate vel sit amet velit. Nulla suscipit magna dui.
|
Curabitur ut tortor sed lacus egestas vulputate vel sit amet velit. Nulla suscipit magna dui.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<figure>
|
<figure class="info-monitor">
|
||||||
<img class="info-monitor" src="./assets/img/img-3monitores.png" alt="Imagem de monitor" />
|
<img src="./assets/img/img-3monitores.png" alt="" />
|
||||||
</figure>
|
</figure>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -88,27 +85,30 @@
|
|||||||
|
|
||||||
<div class="info-container">
|
<div class="info-container">
|
||||||
|
|
||||||
<figure class="grid-laptop1">
|
<div class="div-laptop1">
|
||||||
<img class="img-laptop" src="assets/img/img-notebook1.png" alt="Imagem de notebook" />
|
<figure>
|
||||||
|
<img class="img-laptop1" src="assets/img/img-notebook1.png" alt="Imagem de notebook" />
|
||||||
</figure>
|
</figure>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="div-laptop2">
|
||||||
<figure class="grid-laptop2">
|
<figure>
|
||||||
<img class="img-laptop" src="assets/img/img-notebook2.png" alt="Imagem de notebook" />
|
<img class="img-laptop2" src="assets/img/img-notebook2.png" alt="Imagem de notebook" />
|
||||||
</figure>
|
</figure>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="div-laptop3">
|
||||||
<figure class="grid-laptop3">
|
<figure>
|
||||||
<img class="img-laptop" src="assets/img/img-notebook3.png" alt="Imagem de notebook" />
|
<img class="img-laptop3" src="assets/img/img-notebook3.png" alt="Imagem de notebook" />
|
||||||
</figure>
|
</figure>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="container-card">
|
<section>
|
||||||
|
|
||||||
<div class="card-information">
|
<div class="card-information">
|
||||||
|
|
||||||
@ -158,64 +158,52 @@
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<article class="container-information">
|
|
||||||
|
|
||||||
<div class="information">
|
<div class="information">
|
||||||
|
|
||||||
<figure>
|
|
||||||
<img class="img-oculos" src="./assets/img/img-mobile/img-oculos.png" alt="Imagem de um óculos">
|
|
||||||
</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. Quisque a
|
||||||
faucibus interdum. In eget tincidunt ipsum.
|
tellus at lectus blandit tempor. Ut tristique auctor mi eget hendrerit. Curabitur venenatis felis vitae sagittis venenatis. Donec finibus turpis
|
||||||
Quisque a tellus at lectus blandit tempor. Ut tristique auctor mi eget hendrerit. Curabitur
|
vitae lectus interdum rutrum vitae sed augue.
|
||||||
venenatis felis vitae sagittis venenatis.
|
|
||||||
Donec finibus turpis vitae lectus interdum rutrum vitae sed augue.
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<figure>
|
|
||||||
<img class="img-information" src="./assets/img/img-embacada.png"
|
|
||||||
alt="Imagem de programação embaçada">
|
|
||||||
</figure>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
<article class="img-information">
|
||||||
|
<figure>
|
||||||
|
<img src="./assets/img/img-embacada.png" alt="Imagem de programação embaçada">
|
||||||
|
</figure>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<footer class="container-footer">
|
<footer>
|
||||||
|
|
||||||
<div class="info-footer">
|
|
||||||
<div class="img-footer">
|
|
||||||
<a>
|
<a>
|
||||||
<figure>
|
<figure>
|
||||||
<img class="font-instagram" src="./assets/img/img-instagram.png" alt="Instagram">
|
<img src="./assets/img/img-instagram.png" alt="Instagram">
|
||||||
</figure>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a class="img-facebook">
|
|
||||||
<figure>
|
|
||||||
<img class="font-facebook" src="./assets/img/img-facebook.png" alt="Facebook">
|
|
||||||
</figure>
|
</figure>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a>
|
<a>
|
||||||
<figure>
|
<figure>
|
||||||
<img class="font-youtube" src="./assets/img/img-youtube.png" alt="Youtube">
|
<img src="./assets/img/img-facebook.png" alt="Facebook">
|
||||||
</figure>
|
</figure>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
|
||||||
|
|
||||||
|
<a>
|
||||||
|
<figure>
|
||||||
|
<img src="./assets/img/img-youtube.png" alt="Youtube">
|
||||||
|
</figure>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div>
|
||||||
<p>Copyright © 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-00</p>
|
<p>Copyright © 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-00</p>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
563
style.css
563
style.css
@ -18,7 +18,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* Banner */
|
/* Banner */
|
||||||
.banner-mobile{display: none;}
|
|
||||||
.banner {
|
.banner {
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -35,7 +34,7 @@
|
|||||||
.info-title {
|
.info-title {
|
||||||
font-size: 32px;
|
font-size: 32px;
|
||||||
line-height: 39px;
|
line-height: 39px;
|
||||||
font-weight: 400;
|
font-weight: 400px;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
@ -48,18 +47,16 @@
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.info-monitor-mobile{display: none;}
|
|
||||||
.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 */
|
||||||
|
|
||||||
.info-monitor {
|
.info-monitor {
|
||||||
display: flex;
|
display: flex;
|
||||||
margin: 0 auto;
|
max-width: 16, 35%;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
margin-bottom: 179px;
|
margin-bottom: 179px;
|
||||||
}
|
}
|
||||||
@ -82,9 +79,7 @@
|
|||||||
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;
|
||||||
}
|
}
|
||||||
@ -100,9 +95,7 @@
|
|||||||
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;
|
||||||
}
|
}
|
||||||
@ -117,9 +110,7 @@
|
|||||||
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;
|
||||||
}
|
}
|
||||||
@ -128,31 +119,34 @@
|
|||||||
|
|
||||||
.info-laptop {
|
.info-laptop {
|
||||||
background-color: #E0E0E0;
|
background-color: #E0E0E0;
|
||||||
margin-bottom: 130px;
|
max-height: 530px;
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.info-container {
|
.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;
|
display: flex;
|
||||||
flex-direction: column;
|
justify-content: center;
|
||||||
align-items: center;
|
margin: 0px 72px;
|
||||||
|
bottom: -62px;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.img-laptop{
|
.div-laptop2 {
|
||||||
width: 100%;
|
margin-left: 39px;
|
||||||
|
margin-right: 39px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.img-laptop1 {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img-laptop2 {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img-laptop3 {
|
||||||
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Último card */
|
/* Último card */
|
||||||
@ -172,7 +166,6 @@
|
|||||||
}.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;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -185,7 +178,6 @@
|
|||||||
}.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;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -198,7 +190,6 @@
|
|||||||
}.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;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -210,38 +201,32 @@
|
|||||||
}.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;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Informação Final */
|
/* Informação Final */
|
||||||
.container-information {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.information {
|
.information {
|
||||||
width: 70.85%;
|
max-width: 28.60%;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
margin-bottom: 50px;
|
||||||
}.information h1 {
|
}.information h1 {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 32px;
|
font-size: 32px;
|
||||||
line-height: 39px;
|
line-height: 39px;
|
||||||
text-align: center;
|
|
||||||
}.information p {
|
}.information p {
|
||||||
margin: 0 auto;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
font-weight: 400;
|
text-align: center;
|
||||||
width: 40.80%;
|
}
|
||||||
}.img-information {
|
|
||||||
|
|
||||||
|
.img-information {
|
||||||
|
max-width: 70.85%;
|
||||||
|
margin: 0 auto;
|
||||||
|
}.img-information img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-top: 50px;
|
|
||||||
}
|
|
||||||
@media screen and (min-width: 1025px) {
|
|
||||||
.img-oculos{
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Footer */
|
/* Footer */
|
||||||
@ -275,7 +260,6 @@
|
|||||||
}.info-footer p {
|
}.info-footer p {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #BDBDBD;
|
color: #BDBDBD;
|
||||||
font-weight: 400;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.img-facebook {
|
.img-facebook {
|
||||||
@ -290,7 +274,6 @@
|
|||||||
/* HEADER */
|
/* HEADER */
|
||||||
.container-header {
|
.container-header {
|
||||||
background-color: #000000;
|
background-color: #000000;
|
||||||
width: 100%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo-m3 {
|
.logo-m3 {
|
||||||
@ -300,228 +283,38 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* BANNER */
|
/* BANNER */
|
||||||
.banner {display: none;}
|
|
||||||
.banner-mobile{
|
.banner {
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
|
||||||
|
|
||||||
/* Info dolor */
|
|
||||||
|
|
||||||
.container-dolor{
|
|
||||||
padding: 73px 29px 0px 29px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-dolor{
|
|
||||||
margin: 0 auto;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: contents;
|
|
||||||
}.info-dolor h1 {
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 28px;
|
|
||||||
line-height: 34px;
|
|
||||||
text-align: center;
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
}
|
||||||
.info-title{
|
|
||||||
font-weight: 400;
|
.img-embacada {
|
||||||
font-size: 20px;
|
display: flex;
|
||||||
line-height: 24px;
|
width: 100%;
|
||||||
align-items: center;
|
|
||||||
text-align: center;
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
}
|
||||||
.info-content{
|
|
||||||
text-align: center;
|
.img-laptop {
|
||||||
margin: 46px 0px 65px;
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.info-monitor {
|
.info-monitor {
|
||||||
max-width: 57.70%;
|
width: 100%;
|
||||||
margin: 0px 88px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.info-card {
|
.info-card {
|
||||||
flex-wrap: wrap;
|
display: block;
|
||||||
margin-top: 90.62px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-shop{
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 0 auto;
|
|
||||||
margin-bottom: 24px;
|
|
||||||
}.info-shop img{
|
|
||||||
margin: 0 auto;
|
|
||||||
width: 25.10%;
|
|
||||||
margin: 36px 0px 27.05px;
|
|
||||||
}.info-shop figcaption {
|
|
||||||
text-align: center;
|
|
||||||
line-height: 24px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 0px 25.35px 27.50px 26px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.info-bag{
|
|
||||||
width: 100%;
|
|
||||||
margin: 0 auto;
|
|
||||||
margin-bottom: 24.05px;
|
|
||||||
}.info-bag img{
|
|
||||||
width: 25.10%;
|
|
||||||
margin: 36px 0px 27.05px;
|
|
||||||
}.info-bag figcaption {
|
|
||||||
text-align: center;
|
|
||||||
line-height: 24px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 0px 25.35px 27.50px 26px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-coin{
|
|
||||||
width: 100%;
|
|
||||||
margin: 0 auto;
|
|
||||||
}.info-coin img{
|
|
||||||
width: 25.10%;
|
|
||||||
margin: 36px 0px 27.05px ;
|
|
||||||
}.info-coin figcaption {
|
|
||||||
text-align: center;
|
|
||||||
line-height: 24px;
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
.card-information{
|
.card-information{
|
||||||
flex-wrap: wrap;
|
|
||||||
margin: 0 auto;
|
|
||||||
margin-top: 80px;
|
|
||||||
max-width: 88.85%;
|
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-dollar{
|
|
||||||
width: 100%;
|
|
||||||
max-height: 34.05%;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}.card-dollar img{
|
|
||||||
margin: 0 auto;
|
|
||||||
margin: 35px 0px 15px;
|
|
||||||
width: 25.10%;
|
|
||||||
}
|
|
||||||
.card-dollar figcaption{
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 24px;
|
|
||||||
text-align: center;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 0px 33px 65px 33px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.card-moeda{
|
|
||||||
width: 100%;
|
|
||||||
max-height: 34.05%;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}.card-moeda img{
|
|
||||||
margin: 0 auto;
|
|
||||||
margin: 35px 0px 15px;
|
|
||||||
width: 25.10%;
|
|
||||||
}.card-moeda figcaption{
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 24px;
|
|
||||||
text-align: center;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 0px 33px 65px 33px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-laptop{
|
|
||||||
width: 100%;
|
|
||||||
max-height: 34.05%;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}.card-laptop img{
|
|
||||||
margin: 0 auto;
|
|
||||||
margin: 35px 0px 15px;
|
|
||||||
width: 25.10%;
|
|
||||||
}.card-laptop figcaption{
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 24px;
|
|
||||||
text-align: center;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 0px 33px 65px 33px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-smartphone{
|
|
||||||
width: 100%;
|
|
||||||
max-height: 34.05%;
|
|
||||||
margin-bottom: 98px;
|
|
||||||
}.card-smartphone img{
|
|
||||||
margin: 0 auto;
|
|
||||||
margin: 35px 0px 15px;
|
|
||||||
width: 20.70%;
|
|
||||||
}.card-smartphone figcaption{
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 24px;
|
|
||||||
text-align: center;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 0px 33px 65px 33px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.information{
|
|
||||||
width: 100%;
|
|
||||||
}.information h1 {
|
|
||||||
margin: 0px 50px 9px;
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 24px;
|
|
||||||
line-height: 29px;
|
|
||||||
}.information p {
|
|
||||||
width: 84.54%;
|
|
||||||
margin: 0px 32px 87px;
|
|
||||||
margin: 0 auto;
|
|
||||||
font-size: 16px;
|
|
||||||
line-height: 24px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.img-information{display: none;}
|
|
||||||
.img-oculos{
|
|
||||||
width: 100%;
|
|
||||||
margin-bottom: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-footer{
|
|
||||||
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;
|
||||||
}
|
}
|
||||||
@ -530,275 +323,15 @@
|
|||||||
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;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/*Fisrt section */
|
.img-embacada {
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
Loading…
Reference in New Issue
Block a user