feat: paragrafo e cards do bottom desktop
This commit is contained in:
parent
73ffbb9a61
commit
444e0bf981
@ -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;
|
||||||
|
16
index.html
16
index.html
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user