MarcelloMartins/challenge-landing-page-marcello-martins
1
0
Fork 0
forked from M3-Academy/challenge-landing-page
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: created image cards and made responsive

Browse Source
This commit is contained in:
Marcello Rodrigues Martins 2022-10-11 15:16:48 -03:00
parent 567d907dd7
commit 8ea62be065
2 changed files with 80 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
index.html
View File

@ -31,15 +31,27 @@
<section class="image-section"> <section class="image-section">
<img class="image-computer" src="./assets/images/computadores e setas.svg" alt="computadores conectados"> <img class="image-computer" src="./assets/images/computadores e setas.svg" alt="computadores conectados">
</section> </section>
<section> <section class="section-cards">
<div> <div class="image-card">
<img src="./assets/images/shop 1.svg" alt="loja" /> <img class="image-card-image" src="./assets/images/shop 1.svg" alt="loja" />
<p class="image-card-paragraph">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</p>
</div> </div>
<div> <div class="image-card">
<img src="./assets/images/shopping-bag (1) 1.svg" alt="sacola"> <img class="image-card-image" src="./assets/images/shopping-bag (1) 1.svg" alt="sacola" />
<p class="image-card-paragraph">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</p>
</div> </div>
<div> <div class="image-card">
<img src="./assets/images/coin 1.svg" alt="mão com moeda"> <img class="image-card-image" src="./assets/images/coin 1.svg" alt="mão com moeda" />
<p class="image-card-paragraph">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</p>
</div> </div>
</section> </section>

67
styles/styles.css
View File

@ -13,6 +13,10 @@ header {
width: 100%; width: 100%;
} }
body {
font-family: 'Inter', sans-serif;
}
.banner-1-desktop { .banner-1-desktop {
width: 100%; width: 100%;
} }
@ -50,19 +54,74 @@ header {
.first-section { .first-section {
margin-top: 74px; margin-top: 74px;
font-family: 'Inter', sans-serif;
text-align: center; text-align: center;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.image-computer{
width: 18%;
}
.image-section { .image-section {
display: flex; display: flex;
justify-content: center; justify-content: center;
margin-top: 74px; margin-top: 74px;
} }
.section-cards {
justify-content: center;
align-items: center;
gap: 21px;
display: flex;
grid-template-columns: 1fr 1fr 1fr;
}
.image-card {
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
max-width: 18%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 179px;
}
.image-card-image {
display: block;
margin-top: 36px;
}
.image-card-paragraph {
padding-top: 27px;
padding: 26px;
max-width: 300px;
text-align: center;
font-weight: 400;
font-size: 16px;
line-height: 24px;
}
@media screen and (max-width: 1024px) {
.section-cards {
display: flex;
flex-direction: column;
margin-top: 90px;
}
.image-card {
max-width: 84.54%;
margin-top: 0%;
padding-top: 35px;
padding-left: 26px;
padding-right: 26px;
padding-bottom: 27px;
}
.image-computer {
width: 57.73%;
}
}
@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px) {
.banner-1-desktop { .banner-1-desktop {
display: none; display: none;
@ -76,8 +135,4 @@ header {
.first-section p { .first-section p {
text-align: center; text-align: center;
} }
.image-computer { }
width: 57.73%;
}
}