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%;
}
.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) {
.main-banner-desktop {
display: none;
@ -183,4 +213,4 @@ body {
grid-template-columns: 1fr;
padding: 30px 28px;
}
}
}

16
index.html
View File

@ -101,33 +101,33 @@
<section class="bottom-card">
<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.
</p>
</div>
<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.
</p>
</div>
<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.
</p>
</div>
<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.
</p>
</div>