JessicaSilvaOliveiradosSantos/challenge-landing-page-jessica-oliveira
1
0
Fork 0
forked from M3-Academy/challenge-landing-page
Code Issues Pull Requests 2 Packages Projects Releases Wiki Activity

feat: responsividade e sessoes #5

Merged
JessicaSilvaOliveiradosSantos merged 1 commits from feature/conteudo into main 2022-10-13 05:50:16 +00:00
Conversation 0 Commits 1 Files Changed 4 +226 -64
4 changed files with 226 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 246 KiB

0
assets/imagens/Rectangle 15.png → assets/imagens/image-oculos.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 358 KiB

After

Width:  |  Height:  |  Size: 358 KiB

113
index.html
View File

@ -82,17 +82,17 @@
<div class="grids"> <div class="grids">
<div class="grid"> <div class="grid">
<div> <div class="grid-a">
<figure> <figure>
<img class="grid-img" src="assets/imagens/gird1.png" alt="Notebook 1"> <img class="grid-img" src="assets/imagens/gird1.png" alt="Notebook 1">
</figure> </figure>
</div> </div>
<div> <div class="grid-b">
<figure> <figure>
<img class="grid-img" src="assets/imagens/grid2.png" alt="Notebook 2"> <img class="grid-img" src="assets/imagens/grid2.png" alt="Notebook 2">
</figure> </figure>
</div> </div>
<div> <div class="grid-c">
<figure> <figure>
<img class="grid-img" src="assets/imagens/grid3.png" alt="Notebook 3"> <img class="grid-img" src="assets/imagens/grid3.png" alt="Notebook 3">
</figure> </figure>
@ -101,68 +101,57 @@
</div> </div>
<div class="cards"> <div class="cards">
<div class="card">
<figure class="card1"> <figure>
<img src="assets/imagens/mine-foto-1-grupo2.png" alt="Card 1">
<img src="assets/imagens/mine-foto-1-grupo2.png" alt="Card 1"> <figcaption>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
<figcaption> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</figcaption>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </figure>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </div>
</figcaption> <div class="card" >
<figure>
</figure> <img src="assets/imagens/mine-foto-2-grupo2.png" alt="card 2">
<figcaption>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</figcaption>
</figure>
</div>
<div class="card">
<figure>
<img src="assets/imagens/mine-foto-3-grupo2.png" alt="card 3">
<figcaption>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</figcaption>
</figure>
</div>
<div class="card">
<figure >
<img src="assets/imagens/mine-foto-4-grupo2.png" alt="card 4">
<figcaption>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</figcaption>
</figure>
</div>
</div> </div>
<div> <section class="sessao-oculos">
<div class="texto-oculos">
<h2>Lorem ipsum dolor sit amet</h2>
<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>
<picture class="picture-oculos">
<source media="(max-width: 1024px )" srcset="assets/imagens/image-oculos-mobile.png">
<img class="image-oculos" src="assets/imagens/image-oculos.png" alt="imagem de um oculos">
</picture>
<figure class="card2"> </section>
<img src="assets/imagens/mine-foto-2-grupo2.png" alt="card 2">
<figcaption>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</figcaption>
</figure>
</div>
<div>
<figure class="card3">
<img src="assets/imagens/mine-foto-3-grupo2.png" alt="card 3">
<figcaption>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</figcaption>
</figure>
</div>
<div>
<figure class="card4">
<img src="assets/imagens/mine-foto-4-grupo2.png" alt="card 4">
<figcaption>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</figcaption>
</figure>
</div>

177
style.css
View File

@ -125,10 +125,183 @@
.cards { .cards {
display: flex; display: flex;
flex-wrap: wrap;
gap: 16px; gap: 16px;
justify-content: center; justify-content: center;
text-align: center; text-align: center;
padding: 303px; margin-top: 191px;
margin-bottom: 108px;
}
.card{
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
max-width: 432px;
padding: 35px 32px 65px 32px;
}
.card figcaption{
margin-top: 15px;
font-weight: 400;
font-size: 16px;
line-height: 24px;
}
.texto-oculos{
max-width: 550px;
margin-bottom: 50px;
}
.texto-oculos h2{
font-weight: 600;
font-size: 32px;
line-height: 39px;
}
.texto-oculos p{
font-weight: 400;
font-size: 16px;
line-height: 24px;
}
.sessao-oculos{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
margin-bottom: 116px;
}
.image-oculos{
max-width: 1360px;
width: 100%;
}
@media screen and (max-width: 1024px ) {
.one-p{
text-align: center;
font-weight: 400;
font-size: 16px;
line-height: 24px;
}
.BL{
padding: 0 24px;
margin-top: 73px;
}
.sentence{
font-weight: 500;
font-size: 28px;
line-height: 34px;
}
.sentence2{
font-weight: 400;
font-size: 20px;
line-height: 24px;
}
.computadores{
margin-top: 65px;
}
.sessao1{
padding: 0 32px;
}
.icones{
margin-top: 90px;
flex-direction: column;
gap: 24px;
}
.icone1, .icone2, .icone3 {
max-width: unset;
}
.grids{
padding: 0 24px;
}
.grid{
row-gap: 24px;
column-gap: 14px;
bottom: -32px;
display: grid;
grid-template-areas:
"b a"
"c c";
}
.grid-a{
grid-area: a;
}
.grid-b{
grid-area: b;
}
.grid-c{
grid-area: c;
}
.grid-img{
max-width: unset;
}
.img1 img ,.img2 img ,.img3 img{
margin-bottom: 38px;
}
figcaption{
}
.cards{
margin-top: 112px;
flex-direction: column;
padding: 0 24px;
margin-bottom: 68px;
}
.card{
max-width: unset;
}
.image-oculos{
}
.picture-oculos{
width: 100%;
}
.sessao-oculos{
flex-direction: column-reverse;
margin-top: 98px;
}
.texto-oculos{
margin-top: 50px;
}
.texto-oculos h2{
font-weight: 600;
font-size: 24px;
line-height: 29px;
}
.texto-oculos p{
margin-top: 9px;
font-weight: 400;
font-size: 16px;
line-height: 24px;
}
} }