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

Merge pull request 'feat(main): adicionei estilos nas sections para responsividade desktop' (#7) from feature/main-sections into main

Browse Source 
Reviewed-on: #7
This commit is contained in:
Thiago Bronisio Damascena 2022-10-09 22:18:00 +00:00
commit d03f1e7ad3
2 changed files with 188 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
index.html
View File

@ -35,7 +35,8 @@
<p class="info-title">Lorem IPSUM</p> <p class="info-title">Lorem IPSUM</p>
<h1>Dolor Sit Amet</h1> <h1>Dolor Sit Amet</h1>
<p class="info-content"> <p class="info-content">
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.
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>
@ -80,28 +81,38 @@
</section> </section>
<section> <section class="info-laptop">
<figure> <div class="info-container">
<img class="img-laptop" src="assets/img/img-notebook1.png" alt="Imagem de notebook" />
</figure>
<figure> <div class="div-laptop1">
<img class="img-laptop" src="assets/img/img-notebook2.png" alt="Imagem de notebook" /> <figure>
</figure> <img class="img-laptop1" src="assets/img/img-notebook1.png" alt="Imagem de notebook" />
</figure>
</div>
<figure> <div class="div-laptop2">
<img class="img-laptop" src="assets/img/img-notebook3.png" alt="Imagem de notebook" /> <figure>
</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>
</div>
</section> </section>
<section> <section>
<div> <div class="card-information">
<div> <div class="card-dollar">
<figure> <figure>
<img src="./assets/img/img-dollar.png" alt="Imagem de dinheiro em nota" /> <img src="./assets/img/img-dollar.png" alt="Imagem de dinheiro em nota" />
<figcaption> <figcaption>
@ -112,9 +123,9 @@
</figure> </figure>
</div> </div>
<div> <div class="card-moeda">
<figure> <figure>
<img" src="./assets/img/img-moeda.png" alt="Imagem de dinheiro em moeda" /> <img src="./assets/img/img-moeda.png" alt="Imagem de dinheiro em moeda" />
<figcaption> <figcaption>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla
interdum. Lorem ipsum dolor sit amet, interdum. Lorem ipsum dolor sit amet,
@ -123,7 +134,7 @@
</figure> </figure>
</div> </div>
<div> <div class="card-laptop">
<figure> <figure>
<img src="./assets/img/img-laptop.png" alt="Imagem de laptop" /> <img src="./assets/img/img-laptop.png" alt="Imagem de laptop" />
<figcaption> <figcaption>
@ -134,7 +145,7 @@
</figure> </figure>
</div> </div>
<div> <div class="card-smartphone">
<figure> <figure>
<img src="./assets/img/img-smarthphone.png" alt="Imagem de celular" /> <img src="./assets/img/img-smarthphone.png" alt="Imagem de celular" />
<figcaption> <figcaption>
@ -147,10 +158,14 @@
</div> </div>
<div>
<h2>Lorem ipsum dolor sit amet</h2>
<div class="information">
<h1>Lorem ipsum dolor sit amet</h1>
<p> <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate sapien non libero faucibus Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate sapien non libero
faucibus
interdum. interdum.
In eget tincidunt ipsum. Quisque a tellus at lectus blandit tempor. Ut tristique auctor mi eget In eget tincidunt ipsum. Quisque a tellus at lectus blandit tempor. Ut tristique auctor mi eget
hendrerit. hendrerit.
@ -159,9 +174,9 @@
</p> </p>
</div> </div>
<article> <article class="img-information">
<figure> <figure>
<img class="img-embacada" src="./assets/img/img-embacada.png" alt="Imagem de programação embaçada"> <img src="./assets/img/img-embacada.png" alt="Imagem de programação embaçada">
</figure> </figure>
</article> </article>
@ -171,28 +186,23 @@
<footer> <footer>
<div> <a>
<figure> <figure>
<img src="./assets/img/img-instagram.png" alt="Instagram">
<a>
<figure>
<img src="./assets/img/img-instagram.png" alt="Instagram">
</figure>
</a>
<a>
<figure>
<img src="./assets/img/img-facebook.png" alt="Facebook">
</figure>
</a>
<a>
<figure>
<img src="./assets/img/img-youtube.png" alt="Youtube">
</figure>
</a>
</figure> </figure>
</div> </a>
<a>
<figure>
<img src="./assets/img/img-facebook.png" alt="Facebook">
</figure>
</a>
<a>
<figure>
<img src="./assets/img/img-youtube.png" alt="Youtube">
</figure>
</a>
<div> <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>

147
style.css
View File

@ -29,28 +29,34 @@
.info-dolor { .info-dolor {
max-width: 40.26%; max-width: 40.26%;
margin: 0 auto; margin: 0 auto;
}.info-title { }
.info-title {
font-size: 32px; font-size: 32px;
line-height: 39px; line-height: 39px;
font-weight: 400px; font-weight: 400px;
text-transform: uppercase; text-transform: uppercase;
text-align: center; text-align: center;
}.info-dolor h1 { }
.info-dolor h1 {
font-size: 48px; font-size: 48px;
line-height: 58px; line-height: 58px;
font-weight: 500; font-weight: 500;
text-transform: uppercase; text-transform: uppercase;
text-align: center; text-align: center;
}.info-content { }
.info-content {
margin: 28px 0px 84px 0px; margin: 28px 0px 84px 0px;
text-align: start; text-align: start;
} }
/* Imagem três monitores */ /* Imagem três monitores */
.info-monitor{ .info-monitor {
display: flex; display: flex;
max-width: 16,35%; max-width: 16, 35%;
justify-content: center; justify-content: center;
margin-bottom: 179px; margin-bottom: 179px;
} }
@ -58,15 +64,18 @@
/* Card da primeira section */ /* Card da primeira section */
.info-card { .info-card {
max-width:56,90%;
display: flex; display: flex;
justify-content: center; justify-content: center;
margin-bottom: 80px;
} }
.info-shop{
/* Card shopping */
.info-shop {
max-width: 350px; max-width: 350px;
text-align: center; text-align: center;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
}.info-shop img{ }.info-shop img {
margin-bottom: 27px; margin-bottom: 27px;
margin-top: 35px; margin-top: 35px;
}.info-shop figcaption { }.info-shop figcaption {
@ -75,7 +84,9 @@
margin-bottom: 27px; margin-bottom: 27px;
} }
.info-bag{ /* Card bag */
.info-bag {
max-width: 350px; max-width: 350px;
text-align: center; text-align: center;
margin: 0px 21px; margin: 0px 21px;
@ -89,7 +100,9 @@
margin-bottom: 27px; margin-bottom: 27px;
} }
.info-coin{ /* Card coin */
.info-coin {
max-width: 350px; max-width: 350px;
text-align: center; text-align: center;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
@ -102,12 +115,120 @@
margin-bottom: 27px; margin-bottom: 27px;
} }
.img-embacada { /* Imagens laptops */
width: 100%;
.info-laptop {
background-color: #E0E0E0;
max-height: 530px;
}
.info-container {
display: flex;
justify-content: center;
margin: 0px 72px;
padding-top: 62px;
}
.div-laptop2 {
margin-left: 39px;
margin-right: 39px;
}
.img-laptop1 {
max-width: 100%;
}
.img-laptop2 {
max-width: 100%;
}
.img-laptop3 {
max-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: 16px; font-size: 16px;
line-height: 24px; line-height: 24px;
margin: 0 auto; 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: 16px;
line-height: 24px;
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: 16px;
line-height: 24px;
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: 16px;
line-height: 24px;
margin: 0px 32px 65px 33px;
}
/* Informação Final */
.information {
max-width: 28.60%;
margin: 0 auto;
margin-bottom: 50px;
}.information h1 {
text-align: center;
font-weight: 600;
font-size: 32px;
line-height: 39px;
}.information p {
font-size: 16px;
line-height: 24px;
text-align: center;
}
.img-information {
max-width: 70.85%;
margin: 0 auto;
}.img-information img {
width: 100%;
}
} }
@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px) {