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(main): adicionei estilos nas sections para responsividade desktop

Browse Source
This commit is contained in:
Thiago Bronisio 2022-10-09 19:17:30 -03:00
parent ad7ea46e66
commit 5cfbb00fc7
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>
<h1>Dolor Sit Amet</h1>
<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.
</p>
@ -80,28 +81,38 @@
</section>
<section>
<section class="info-laptop">
<figure>
<img class="img-laptop" src="assets/img/img-notebook1.png" alt="Imagem de notebook" />
</figure>
<div class="info-container">
<figure>
<img class="img-laptop" src="assets/img/img-notebook2.png" alt="Imagem de notebook" />
</figure>
<div class="div-laptop1">
<figure>
<img class="img-laptop1" src="assets/img/img-notebook1.png" alt="Imagem de notebook" />
</figure>
</div>
<figure>
<img class="img-laptop" src="assets/img/img-notebook3.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>
</div>
</section>
<section>
<div>
<div class="card-information">
<div>
<div class="card-dollar">
<figure>
<img src="./assets/img/img-dollar.png" alt="Imagem de dinheiro em nota" />
<figcaption>
@ -112,9 +123,9 @@
</figure>
</div>
<div>
<div class="card-moeda">
<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>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla
interdum. Lorem ipsum dolor sit amet,
@ -123,7 +134,7 @@
</figure>
</div>
<div>
<div class="card-laptop">
<figure>
<img src="./assets/img/img-laptop.png" alt="Imagem de laptop" />
<figcaption>
@ -134,7 +145,7 @@
</figure>
</div>
<div>
<div class="card-smartphone">
<figure>
<img src="./assets/img/img-smarthphone.png" alt="Imagem de celular" />
<figcaption>
@ -147,10 +158,14 @@
</div>
<div>
<h2>Lorem ipsum dolor sit amet</h2>
<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
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.
@ -159,9 +174,9 @@
</p>
</div>
<article>
<article class="img-information">
<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>
</article>
@ -171,28 +186,23 @@
<footer>
<div>
<a>
<figure>
<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>
<img src="./assets/img/img-instagram.png" alt="Instagram">
</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>
<p>Copyright © 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-00</p>

151
style.css
View File

@ -29,28 +29,34 @@
.info-dolor {
max-width: 40.26%;
margin: 0 auto;
}.info-title {
}
.info-title {
font-size: 32px;
line-height: 39px;
font-weight: 400px;
text-transform: uppercase;
text-align: center;
}.info-dolor h1 {
}
.info-dolor h1 {
font-size: 48px;
line-height: 58px;
font-weight: 500;
text-transform: uppercase;
text-align: center;
}.info-content {
}
.info-content {
margin: 28px 0px 84px 0px;
text-align: start;
}
/* Imagem três monitores */
.info-monitor{
.info-monitor {
display: flex;
max-width: 16,35%;
max-width: 16, 35%;
justify-content: center;
margin-bottom: 179px;
}
@ -58,15 +64,18 @@
/* Card da primeira section */
.info-card {
max-width:56,90%;
display: flex;
justify-content: center;
margin-bottom: 80px;
}
.info-shop{
/* Card shopping */
.info-shop {
max-width: 350px;
text-align: center;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
}.info-shop img{
}.info-shop img {
margin-bottom: 27px;
margin-top: 35px;
}.info-shop figcaption {
@ -74,8 +83,10 @@
max-width: 299px;
margin-bottom: 27px;
}
.info-bag{
/* Card bag */
.info-bag {
max-width: 350px;
text-align: center;
margin: 0px 21px;
@ -88,8 +99,10 @@
max-width: 299px;
margin-bottom: 27px;
}
.info-coin{
/* Card coin */
.info-coin {
max-width: 350px;
text-align: center;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
@ -102,12 +115,120 @@
margin-bottom: 27px;
}
.img-embacada {
width: 100%;
/* Imagens laptops */
.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;
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) {