Henrique-Martins-Silva/challenge-landing-page-Henrique-Martins
1
0
Fork 0
forked from M3-Academy/challenge-landing-page
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ajuste nos cards

Browse Source
This commit is contained in:
Henrique Martins Silva 2022-10-12 00:11:19 -03:00
parent acd86bd4b8
commit f067822803
2 changed files with 12 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
index.html
View File

@ -39,15 +39,15 @@
<section class="cards-conteiner">
<div class="card">
<img class="image-card" src="assets/image/shopping.png" alt="">
<img class="card-image" src="assets/image/shopping.png" alt="">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
</div>
<div class="card">
<img class="image-card" src="assets/image/bag.png" alt="">
<img class="card-image" src="assets/image/bag.png" alt="">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
</div>
<div class="card">
<img class="image-card" src="assets/image/coin.png" alt="">
<img class="card-image" src="assets/image/coin.png" alt="">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
</div>
</section>

23
style/style.css
View File

@ -102,34 +102,29 @@
.cards-conteiner{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-columns: repeat(3, max-content);
justify-content: center;
gap: 20px;
padding: 178px 0 0;
width: 100%;
padding: 180px 0 80px;
}
.card{
display: flex;
flex-direction: column;
align-items: center;
max-width: 350px;
width: 100%;
margin: 0 40px;
padding: 26px 26px 34px;
background: #FFFFFF;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
}
.image-card{
.card-image{
display: block;
margin-bottom: 26px;
margin-top: 36px;
}
.card-text{
display: flex;
text-align: center;
justify-content: center;
padding: 0 26px 26px;
max-width: 300px;
}
font-size: 16px;
line-height: 24px;
text-align: center;
}