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

feat: paragrafo e cards do bottom desktop

Browse Source
This commit is contained in:
Yan Pecanha Garriga 2022-10-11 00:54:59 -03:00
parent 73ffbb9a61
commit 444e0bf981
2 changed files with 39 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
assets/styles.css/main.css
View File

@ -123,6 +123,36 @@ body {
max-width: 100%; max-width: 100%;
} }
.bottom-card {
background: #FFFFFF;
grid-template-columns: repeat(4, max-content);
display: grid;
gap: 0.83vw;
justify-content: center;
padding: 6.71vw 3.75vw 5.625vw;
}
.bottom-card-group {
flex-direction: column;
align-items: center;
display: flex;
background: #FFFFFF;
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.23);
width: 22vw;
}
.bottom-card-image {
padding: 1.82vw ;
}
.bottom-card-text {
font-size: 16px;
line-height: 24px;
/* or 150% */
width: 15.572vw;
padding: 0 0 3.38vw;
}
@media screen and (max-width: 414px) { @media screen and (max-width: 414px) {
.main-banner-desktop { .main-banner-desktop {
display: none; display: none;
@ -183,4 +213,4 @@ body {
grid-template-columns: 1fr; grid-template-columns: 1fr;
padding: 30px 28px; padding: 30px 28px;
} }
} }

16
index.html
View File

@ -101,33 +101,33 @@
<section class="bottom-card"> <section class="bottom-card">
<div class="bottom-card-group"> <div class="bottom-card-group">
<img class=" bottom-card-image01" src="./assets/images/bottom-card-01.png" alt="image01-bottomcard" /> <img class=" bottom-card-image" src="./assets/images/bottom-card-01.png" alt="image01-bottomcard" />
<p class="bottom-card-description"> <p class="bottom-card-text">
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. 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.
</p> </p>
</div> </div>
<div class="bottom-card-group"> <div class="bottom-card-group">
<img class="bottom-card-image02" src="./assets/images/bottom-card-02.png" alt="image02-bottomcard" /> <img class="bottom-card-image" src="./assets/images/bottom-card-02.png" alt="image02-bottomcard" />
<p class="bottom-card-description"> <p class="bottom-card-text">
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. 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.
</p> </p>
</div> </div>
<div class="bottom-card-group"> <div class="bottom-card-group">
<img class="bottom-card-image03" src="./assets/images/bottom-card-03.png" alt="image03-bottomcard"> <img class="bottom-card-image" src="./assets/images/bottom-card-03.png" alt="image03-bottomcard">
<p class="bottom-card-description"> <p class="bottom-card-text">
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. 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.
</p> </p>
</div> </div>
<div class="bottom-card-group"> <div class="bottom-card-group">
<img class="bottom-card-image04" src="./assets/images/bottom-card-04.png" alt="image04-bottomcard"> <img class="bottom-card-image" src="./assets/images/bottom-card-04.png" alt="image04-bottomcard">
<p class="bottom-card-description"> <p class="bottom-card-text">
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. 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.
</p> </p>
</div> </div>