Thiago.bronisio/challenge-landing-page-thiago-bronisio
0
0
Fork 0
forked from M3-Academy/challenge-landing-page
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(home): finalizei a tela mobile

Browse Source
This commit is contained in:
Thiago Bronisio 2022-10-12 19:00:28 -03:00
parent d7a9c217cc
commit 5dda1bad1e
4 changed files with 152 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/img/img-mobile/3monitores-mobile.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.7 KiB

BIN
assets/img/img-mobile/img-oculos.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 246 KiB

73
index.html
View File

@ -43,8 +43,6 @@
<figure> <figure>
<img class="info-monitor" src="./assets/img/img-3monitores.png" alt="Imagem de monitor" /> <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> </figure>
</div> </div>
@ -88,23 +86,20 @@
<div class="info-container"> <div class="info-container">
<div class="div-laptop1"> <figure class="grid-laptop1">
<figure> <img class="img-laptop" src="assets/img/img-notebook1.png" alt="Imagem de notebook" />
<img class="img-laptop1" src="assets/img/img-notebook1.png" alt="Imagem de notebook" /> </figure>
</figure>
</div>
<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 class="grid-laptop2">
<figure> <img class="img-laptop" src="assets/img/img-notebook2.png" alt="Imagem de notebook" />
<img class="img-laptop3" src="assets/img/img-notebook3.png" alt="Imagem de notebook" /> </figure>
</figure>
</div>
<figure class="grid-laptop3">
<img class="img-laptop" src="assets/img/img-notebook3.png" alt="Imagem de notebook" />
</figure>
</div> </div>
@ -161,27 +156,33 @@
</div> </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> </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> </main>
<footer class="container-footer"> <footer class="container-footer">

196
style.css
View File

@ -121,34 +121,31 @@
.info-laptop { .info-laptop {
background-color: #E0E0E0; background-color: #E0E0E0;
max-height: 530px; margin-bottom: 130px;
width: 100%;
display: flex;
justify-content: center;
} }
.info-container { .info-container {
display: flex; display: grid;
justify-content: center; grid-template-columns: auto auto auto;
margin: 0px 72px; gap: 39px;
bottom: -62px;
position: relative; position: relative;
bottom: -32px;
width: 92.5%;
} }
.div-laptop2 { .grid-laptop1,
margin-left: 39px; .grid-laptop2,
margin-right: 39px; .grid-laptop3{
display: flex;
flex-direction: column;
align-items: center;
} }
.img-laptop1 { .img-laptop{
max-width: 100%; width: 100%;
}
.img-laptop2 {
max-width: 100%;
}
.img-laptop3 {
max-width: 100%;
} }
/* Último card */ /* Último card */
@ -230,6 +227,11 @@
width: 100%; width: 100%;
margin-top: 50px; margin-top: 50px;
} }
@media screen and (min-width: 1025px) {
.img-oculos{
display: none;
}
}
/* Footer */ /* Footer */
@ -322,22 +324,25 @@
margin: 46px 0px 65px; margin: 46px 0px 65px;
} }
.info-monitor{display: none;} .info-monitor{
.info-monitor-mobile{ max-width: 57.70%;
margin: 0px 88px;
margin: 0 auto; margin: 0 auto;
display: flex;
margin-bottom: 90.62px;
} }
.info-card { .info-card {
flex-wrap: wrap; flex-wrap: wrap;
margin-top: 90.62px;
} }
.info-shop{ .info-shop{
width: 100%; width: 100%;
margin: 0 auto;
margin-bottom: 24px; margin-bottom: 24px;
}.info-shop img{ }.info-shop img{
margin: 0 auto; margin: 0 auto;
margin: 36px 124px 27.05px ; width: 25.10%;
margin: 36px 0px 27.05px;
}.info-shop figcaption { }.info-shop figcaption {
text-align: center; text-align: center;
line-height: 24px; line-height: 24px;
@ -347,10 +352,11 @@
.info-bag{ .info-bag{
width: 100%; width: 100%;
margin: 0 auto;
margin-bottom: 24.05px; margin-bottom: 24.05px;
}.info-bag img{ }.info-bag img{
margin: 0 auto; width: 25.10%;
margin: 36px 124px 27.05px ; margin: 36px 0px 27.05px;
}.info-bag figcaption { }.info-bag figcaption {
text-align: center; text-align: center;
line-height: 24px; line-height: 24px;
@ -360,9 +366,10 @@
.info-coin{ .info-coin{
width: 100%; width: 100%;
}.info-coin img{
margin: 0 auto; margin: 0 auto;
margin: 36px 124px 27.05px ; }.info-coin img{
width: 25.10%;
margin: 36px 0px 27.05px ;
}.info-coin figcaption { }.info-coin figcaption {
text-align: center; text-align: center;
line-height: 24px; line-height: 24px;
@ -378,108 +385,135 @@
.container-card{ .container-card{
padding: 0px 23px 0px 23px padding: 0px 23px 0px 23px;
} }
.card-information{ .card-information{
flex-wrap: wrap; flex-wrap: wrap;
margin: 0 auto; margin: 0 auto;
margin-top: 80px; margin-top: 80px;
width:100%; max-width: 88.85%;
max-width: 100%;
display: block;
} }
.card-dollar{ .card-dollar{
width: 100%; width: 100%;
max-height: 34.05%;
margin-bottom: 16px; margin-bottom: 16px;
}.card-dollar img{ }.card-dollar img{
margin: 35px 0px 15px
}.card-dollar figcaption{
margin: 0 auto; margin: 0 auto;
text-align: center; margin: 35px 0px 15px;
width: 25.10%;
}
.card-dollar figcaption{
font-size: 14px; font-size: 14px;
line-height: 24px; line-height: 24px;
font-weight: 400; text-align: center;
padding: 0px 33px 54px; 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{ .card-moeda{
width: 100%; width: 100%;
max-height: 34.05%;
margin-bottom: 16px; margin-bottom: 16px;
}.card-moeda img{ }.card-moeda img{
margin: 35px 0px 15px
}.card-moeda figcaption{
margin: 0 auto; margin: 0 auto;
text-align: center; margin: 35px 0px 15px;
width: 25.10%;
}.card-moeda figcaption{
font-size: 14px; font-size: 14px;
line-height: 24px; line-height: 24px;
font-weight: 400; text-align: center;
padding: 0px 33px 54px; margin: 0 auto;
padding: 0px 33px 65px 33px;
} }
.card-laptop{ .card-laptop{
width: 100%; width: 100%;
max-height: 34.05%;
margin-bottom: 16px; margin-bottom: 16px;
}.card-laptop img{ }.card-laptop img{
margin: 35px 0px 15px
}.card-laptop figcaption{
margin: 0 auto; margin: 0 auto;
text-align: center; margin: 35px 0px 15px;
width: 25.10%;
}.card-laptop figcaption{
font-size: 14px; font-size: 14px;
line-height: 24px; line-height: 24px;
font-weight: 400; text-align: center;
padding: 0px 33px 54px; margin: 0 auto;
padding: 0px 33px 65px 33px;
} }
.card-smartphone{ .card-smartphone{
width: 100%; width: 100%;
max-height: 34.05%;
margin-bottom: 98px; margin-bottom: 98px;
}.card-smartphone img{ }.card-smartphone img{
margin: 35px 0px 15px
}.card-smartphone figcaption{
margin: 0 auto; margin: 0 auto;
text-align: center; margin: 35px 0px 15px;
width: 20.70%;
}.card-smartphone figcaption{
font-size: 14px; font-size: 14px;
line-height: 24px; line-height: 24px;
font-weight: 400; text-align: center;
padding: 0px 33px 54px; 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{ .info-laptop{
display: none; width: 100%;
}
.grid-laptop1{
grid-area: laptop1;
}
.grid-laptop2{
grid-area: laptop2;
}
.grid-laptop3{
grid-area: laptop3;
} }
.card-information{ .info-container{
max-width: 100%; display: grid;
display: block; grid-template-areas:
} "laptop2 laptop1"
.img-information{ "laptop3 laptop3"
max-width: 100%; ;
display: flex; column-gap: 14px;
row-gap: 24px;
grid-template-columns: unset;
} }
.info-footer{
padding: 32px 77px 32px;
}
} }
@media screen and (min-width: 2501px) { @media screen and (min-width: 2501px) {