feat(main-section): Ajustei as sections e cards

This commit is contained in:
Thiago Bronisio 2022-10-12 02:49:08 -03:00
parent 87fadb313f
commit d7a9c217cc
3 changed files with 206 additions and 38 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.7 KiB

View File

@ -26,10 +26,11 @@
<main>
<figure>
<img class="banner" src="./assets/img/banner1.png" alt="banner" />
<img class="banner" src="./assets/img/banner1.png" alt="Banner de computador" />
<img class="banner-mobile" src="./assets/img/img-mobile/banner.png" alt="Banner de computador">
</figure>
<section>
<section class="container-dolor">
<div class="info-dolor">
<p class="info-title">Lorem IPSUM</p>
@ -42,6 +43,8 @@
<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>
@ -108,7 +111,7 @@
</section>
<section>
<section class="container-card">
<div class="card-information">
@ -158,26 +161,23 @@
</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.
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 class="img-information">
<figure>
<img src="./assets/img/img-embacada.png" alt="Imagem de programação embaçada">
</figure>
</article>
</section>

206
style.css
View File

@ -18,6 +18,7 @@
}
/* Banner */
.banner-mobile{display: none;}
.banner {
display: flex;
width: 100%;
@ -47,6 +48,7 @@
text-align: center;
}
.info-monitor-mobile{display: none;}
.info-content {
margin: 28px 0px 84px 0px;
text-align: start;
@ -205,28 +207,28 @@
}
/* Informação Final */
.container-information {
width: 100%;
}
.information {
max-width: 28.60%;
width: 70.85%;
margin: 0 auto;
margin-bottom: 50px;
}.information h1 {
text-align: center;
font-weight: 600;
font-size: 32px;
line-height: 39px;
text-align: center;
}.information p {
margin: 0 auto;
font-size: 16px;
line-height: 24px;
font-weight: 400;
text-align: center;
}
.img-information {
max-width: 70.85%;
margin: 0 auto;
}.img-information img {
width: 40.80%;
}.img-information {
width: 100%;
margin-top: 50px;
}
/* Footer */
@ -274,6 +276,7 @@
/* HEADER */
.container-header {
background-color: #000000;
width: 100%;
}
.logo-m3 {
@ -283,10 +286,175 @@
}
/* BANNER */
.banner {
display: flex;
.banner {display: none;}
.banner-mobile{
width: 100%;
display: flex;
}
/* Info dolor */
.container-dolor{
padding: 73px 29px 0px 29px;
}
.info-dolor{
margin: 0 auto;
width: 100%;
display: contents;
}.info-dolor h1 {
font-weight: 500;
font-size: 28px;
line-height: 34px;
text-align: center;
text-transform: uppercase;
}
.info-title{
font-weight: 400;
font-size: 20px;
line-height: 24px;
align-items: center;
text-align: center;
text-transform: uppercase;
}
.info-content{
text-align: center;
margin: 46px 0px 65px;
}
.info-monitor{display: none;}
.info-monitor-mobile{
margin: 0 auto;
display: flex;
margin-bottom: 90.62px;
}
.info-card {
flex-wrap: wrap;
}
.info-shop{
width: 100%;
margin-bottom: 24px;
}.info-shop img{
margin: 0 auto;
margin: 36px 124px 27.05px ;
}.info-shop figcaption {
text-align: center;
line-height: 24px;
margin: 0 auto;
padding: 0px 25.35px 27.50px 26px;
}
.info-bag{
width: 100%;
margin-bottom: 24.05px;
}.info-bag img{
margin: 0 auto;
margin: 36px 124px 27.05px ;
}.info-bag figcaption {
text-align: center;
line-height: 24px;
margin: 0 auto;
padding: 0px 25.35px 27.50px 26px;
}
.info-coin{
width: 100%;
}.info-coin img{
margin: 0 auto;
margin: 36px 124px 27.05px ;
}.info-coin figcaption {
text-align: center;
line-height: 24px;
margin: 0 auto;
padding: 0px 25.35px 27.50px 26px;
}
.container-card{
padding: 0px 23px 0px 23px
}
.card-information{
flex-wrap: wrap;
margin: 0 auto;
margin-top: 80px;
width:100%;
}
.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-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%;
margin-bottom: 16px;
}.card-moeda img{
margin: 35px 0px 15px
}.card-moeda figcaption{
margin: 0 auto;
text-align: center;
font-size: 14px;
line-height: 24px;
font-weight: 400;
padding: 0px 33px 54px;
}
.card-laptop{
width: 100%;
margin-bottom: 16px;
}.card-laptop img{
margin: 35px 0px 15px
}.card-laptop figcaption{
margin: 0 auto;
text-align: center;
font-size: 14px;
line-height: 24px;
font-weight: 400;
padding: 0px 33px 54px;
}
.card-smartphone{
width: 100%;
margin-bottom: 98px;
}.card-smartphone img{
margin: 35px 0px 15px
}.card-smartphone figcaption{
margin: 0 auto;
text-align: center;
font-size: 14px;
line-height: 24px;
font-weight: 400;
padding: 0px 33px 54px;
}
.img-embacada {
@ -299,18 +467,18 @@
width: 100%;
}
.info-monitor {
width: 100%;
}
.info-card {
display: block;
width: 100%;
.info-laptop{
display: none;
}
.card-information{
max-width: 100%;
display: block;
}
.img-information{
max-width: 100%;
display: flex;
}
}