forked from M3-Academy/challenge-landing-page
feat(home): finalizei a tela mobile
This commit is contained in:
Thiago Bronisio
parent
d7a9c217cc
commit
5dda1bad1e
Binary file not shown.
|
Before Width: | Height: | Size: 3.7 KiB |
BIN
assets/img/img-mobile/img-oculos.png
Normal file
BIN
assets/img/img-mobile/img-oculos.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 246 KiB |
73
index.html
73
index.html
@ -43,8 +43,6 @@
|
||||
|
||||
<figure>
|
||||
<img class="info-monitor" src="./assets/img/img-3monitores.png" alt="Imagem de monitor" />
|
||||
<img class="info-monitor-mobile" src="./assets/img/img-mobile/3monitores-mobile.png"
|
||||
alt="Imagem de monitor">
|
||||
</figure>
|
||||
|
||||
</div>
|
||||
@ -88,23 +86,20 @@
|
||||
|
||||
<div class="info-container">
|
||||
|
||||
<div class="div-laptop1">
|
||||
<figure>
|
||||
<img class="img-laptop1" src="assets/img/img-notebook1.png" alt="Imagem de notebook" />
|
||||
</figure>
|
||||
</div>
|
||||
<figure class="grid-laptop1">
|
||||
<img class="img-laptop" src="assets/img/img-notebook1.png" alt="Imagem de notebook" />
|
||||
</figure>
|
||||
|
||||
<div class="div-laptop2">
|
||||
<figure>
|
||||
<img class="img-laptop2" src="assets/img/img-notebook2.png" alt="Imagem de notebook" />
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<div class="div-laptop3">
|
||||
<figure>
|
||||
<img class="img-laptop3" src="assets/img/img-notebook3.png" alt="Imagem de notebook" />
|
||||
</figure>
|
||||
</div>
|
||||
<figure class="grid-laptop2">
|
||||
<img class="img-laptop" src="assets/img/img-notebook2.png" alt="Imagem de notebook" />
|
||||
</figure>
|
||||
|
||||
|
||||
<figure class="grid-laptop3">
|
||||
<img class="img-laptop" src="assets/img/img-notebook3.png" alt="Imagem de notebook" />
|
||||
</figure>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
@ -161,27 +156,33 @@
|
||||
|
||||
</div>
|
||||
|
||||
<article class="container-information">
|
||||
|
||||
<div class="information">
|
||||
<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>
|
||||
|
||||
<figure>
|
||||
<img class="img-information" src="./assets/img/img-embacada.png" alt="Imagem de programação embaçada">
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
</article>
|
||||
|
||||
</section>
|
||||
|
||||
<article class="container-information">
|
||||
|
||||
<div class="information">
|
||||
|
||||
<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>
|
||||
|
||||
<figure>
|
||||
<img class="img-information" src="./assets/img/img-embacada.png"
|
||||
alt="Imagem de programação embaçada">
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
</article>
|
||||
|
||||
</main>
|
||||
|
||||
<footer class="container-footer">
|
||||
|
||||
196
style.css
196
style.css
@ -121,34 +121,31 @@
|
||||
|
||||
.info-laptop {
|
||||
background-color: #E0E0E0;
|
||||
max-height: 530px;
|
||||
|
||||
margin-bottom: 130px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.info-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 0px 72px;
|
||||
bottom: -62px;
|
||||
display: grid;
|
||||
grid-template-columns: auto auto auto;
|
||||
gap: 39px;
|
||||
position: relative;
|
||||
bottom: -32px;
|
||||
width: 92.5%;
|
||||
}
|
||||
|
||||
.div-laptop2 {
|
||||
margin-left: 39px;
|
||||
margin-right: 39px;
|
||||
|
||||
.grid-laptop1,
|
||||
.grid-laptop2,
|
||||
.grid-laptop3{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.img-laptop1 {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.img-laptop2 {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.img-laptop3 {
|
||||
max-width: 100%;
|
||||
.img-laptop{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Último card */
|
||||
@ -230,6 +227,11 @@
|
||||
width: 100%;
|
||||
margin-top: 50px;
|
||||
}
|
||||
@media screen and (min-width: 1025px) {
|
||||
.img-oculos{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
|
||||
@ -322,22 +324,25 @@
|
||||
margin: 46px 0px 65px;
|
||||
}
|
||||
|
||||
.info-monitor{display: none;}
|
||||
.info-monitor-mobile{
|
||||
.info-monitor{
|
||||
max-width: 57.70%;
|
||||
margin: 0px 88px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
margin-bottom: 90.62px;
|
||||
}
|
||||
|
||||
.info-card {
|
||||
flex-wrap: wrap;
|
||||
margin-top: 90.62px;
|
||||
}
|
||||
|
||||
.info-shop{
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 24px;
|
||||
}.info-shop img{
|
||||
margin: 0 auto;
|
||||
margin: 36px 124px 27.05px ;
|
||||
width: 25.10%;
|
||||
margin: 36px 0px 27.05px;
|
||||
}.info-shop figcaption {
|
||||
text-align: center;
|
||||
line-height: 24px;
|
||||
@ -347,10 +352,11 @@
|
||||
|
||||
.info-bag{
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 24.05px;
|
||||
}.info-bag img{
|
||||
margin: 0 auto;
|
||||
margin: 36px 124px 27.05px ;
|
||||
width: 25.10%;
|
||||
margin: 36px 0px 27.05px;
|
||||
}.info-bag figcaption {
|
||||
text-align: center;
|
||||
line-height: 24px;
|
||||
@ -360,9 +366,10 @@
|
||||
|
||||
.info-coin{
|
||||
width: 100%;
|
||||
}.info-coin img{
|
||||
margin: 0 auto;
|
||||
margin: 36px 124px 27.05px ;
|
||||
}.info-coin img{
|
||||
width: 25.10%;
|
||||
margin: 36px 0px 27.05px ;
|
||||
}.info-coin figcaption {
|
||||
text-align: center;
|
||||
line-height: 24px;
|
||||
@ -378,108 +385,135 @@
|
||||
|
||||
|
||||
.container-card{
|
||||
padding: 0px 23px 0px 23px
|
||||
padding: 0px 23px 0px 23px;
|
||||
}
|
||||
.card-information{
|
||||
flex-wrap: wrap;
|
||||
margin: 0 auto;
|
||||
margin-top: 80px;
|
||||
width:100%;
|
||||
max-width: 88.85%;
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.card-dollar{
|
||||
width: 100%;
|
||||
max-height: 34.05%;
|
||||
margin-bottom: 16px;
|
||||
}.card-dollar img{
|
||||
margin: 35px 0px 15px
|
||||
}.card-dollar figcaption{
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
margin: 35px 0px 15px;
|
||||
width: 25.10%;
|
||||
}
|
||||
.card-dollar figcaption{
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
font-weight: 400;
|
||||
padding: 0px 33px 54px;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
padding: 0px 33px 65px 33px;
|
||||
}
|
||||
|
||||
.card-dollar{
|
||||
width: 100%;
|
||||
margin-bottom: 16px;
|
||||
}.card-dollar img{
|
||||
margin: 35px 0px 15px
|
||||
}.card-dollar figcaption{
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
font-weight: 400;
|
||||
padding: 0px 33px 54px;
|
||||
}
|
||||
|
||||
.card-moeda{
|
||||
width: 100%;
|
||||
max-height: 34.05%;
|
||||
margin-bottom: 16px;
|
||||
}.card-moeda img{
|
||||
margin: 35px 0px 15px
|
||||
}.card-moeda figcaption{
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
margin: 35px 0px 15px;
|
||||
width: 25.10%;
|
||||
}.card-moeda figcaption{
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
font-weight: 400;
|
||||
padding: 0px 33px 54px;
|
||||
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: 35px 0px 15px
|
||||
}.card-laptop figcaption{
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
margin: 35px 0px 15px;
|
||||
width: 25.10%;
|
||||
}.card-laptop figcaption{
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
font-weight: 400;
|
||||
padding: 0px 33px 54px;
|
||||
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: 35px 0px 15px
|
||||
}.card-smartphone figcaption{
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
margin: 35px 0px 15px;
|
||||
width: 20.70%;
|
||||
}.card-smartphone figcaption{
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
font-weight: 400;
|
||||
padding: 0px 33px 54px;
|
||||
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;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.img-information{display: none;}
|
||||
.img-oculos{
|
||||
width: 100%;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.img-embacada {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.img-laptop {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.info-laptop{
|
||||
display: none;
|
||||
width: 100%;
|
||||
}
|
||||
.grid-laptop1{
|
||||
grid-area: laptop1;
|
||||
}
|
||||
.grid-laptop2{
|
||||
grid-area: laptop2;
|
||||
}
|
||||
.grid-laptop3{
|
||||
grid-area: laptop3;
|
||||
}
|
||||
|
||||
.card-information{
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
}
|
||||
.img-information{
|
||||
max-width: 100%;
|
||||
display: flex;
|
||||
.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) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user