forked from M3-Academy/practice-time-landing-page
feat(section) foi adicionado section card descktop
This commit is contained in:
parent
f0b57b23f3
commit
c615d1a752
@ -52,6 +52,34 @@ html, body{
|
||||
|
||||
/*-------------------------------------------------------------------*/
|
||||
|
||||
.section-background{
|
||||
display: flex;
|
||||
background:#F0F0F0;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
padding: 74px 0;
|
||||
}
|
||||
.section-cards{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
|
||||
max-width: 350px;
|
||||
padding: 26px 26px 34px;
|
||||
}
|
||||
.section-img-cards{
|
||||
display: block;
|
||||
margin-bottom: 26px;
|
||||
}
|
||||
.section-p-card{
|
||||
max-width: 300px;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.main-banner-desktop{
|
||||
@ -84,6 +112,7 @@ html, body{
|
||||
margin: 0 86px 0 86px;
|
||||
max-width: 240px;
|
||||
}
|
||||
/*------------------------------------------------------------------*/
|
||||
}
|
||||
|
||||
|
||||
|
19
index.html
19
index.html
@ -45,18 +45,21 @@
|
||||
|
||||
</main>
|
||||
|
||||
<div>
|
||||
<section>
|
||||
<img src="./assets/images/Icons/loja.png" alt="Imagem pequena de uma loja">
|
||||
<p></p>
|
||||
<div class="section-background">
|
||||
|
||||
<section class="section-cards">
|
||||
<img class="section-img-cards" src="./assets/images/Icons/loja.png" alt="Imagem pequena de uma loja">
|
||||
<p class="section-p-card">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<img src="./assets/images/Icons/sacola.png" alt="Imagem pequena de uma sacolinha">
|
||||
<section class="section-cards">
|
||||
<img class="section-img-cards" src="./assets/images/Icons/sacola.png" alt="Imagem pequena de uma sacolinha">
|
||||
<p class="section-p-card">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<img src="./assets/images/Icons/mao.png" alt="Imagem pequena de uma mão com uma cedula">
|
||||
<section class="section-cards">
|
||||
<img class="section-img-cards" src="./assets/images/Icons/mao.png" alt="Imagem pequena de uma mão com uma cedula">
|
||||
<p class="section-p-card">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.</p>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
Loading…
Reference in New Issue
Block a user