forked from M3-Academy/challenge-landing-page
Merge pull request 'feat: added features section and responsive' (#8) from feature/features into develop
Reviewed-on: #8
This commit is contained in:
commit
c9a9e417a7
@ -130,12 +130,16 @@
|
||||
|
||||
@media screen and (min-width:1025px) {
|
||||
.services {
|
||||
width: 55%;
|
||||
width: 57%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.card {
|
||||
max-width: 350px;
|
||||
.services-container {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.services .card {
|
||||
min-width: 350px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -182,6 +186,47 @@
|
||||
}
|
||||
}
|
||||
|
||||
/*----------*\
|
||||
= FEATURES =
|
||||
\*----------*/
|
||||
.features {
|
||||
padding: 0px 24px;
|
||||
}
|
||||
|
||||
.features-container {
|
||||
--hs-flex-space: 1rem;
|
||||
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
padding-bottom: 98px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.features .card {
|
||||
width: 100%;
|
||||
min-height: 332px;
|
||||
|
||||
}
|
||||
|
||||
@media screen and (min-width:1025px) {
|
||||
.features-container {
|
||||
flex-direction: row;
|
||||
width: 92%;
|
||||
padding-bottom: 108px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.features .card {
|
||||
width: 22.5%;
|
||||
}
|
||||
|
||||
.card-image {
|
||||
width: 29%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*CUBE CSS styles*/
|
||||
|
||||
/*-------------*\
|
||||
|
36
index.html
36
index.html
@ -111,6 +111,42 @@
|
||||
</div>
|
||||
|
||||
<!--=============== Features ===============-->
|
||||
<section class="features">
|
||||
<div class="features-container flex-box center">
|
||||
<figure class="card flow box-shadow">
|
||||
<img class="card-image" src="./assets/images/money.svg" alt="Dinheiro" />
|
||||
<figcaption class="card-description text-center">
|
||||
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.
|
||||
</figcaption>
|
||||
</figure>
|
||||
<figure class="card flow box-shadow">
|
||||
<img class="card-image" src="./assets/images/handle-coin.svg" alt="Mão estendida com uma moeda" />
|
||||
<figcaption class="card-description text-center">
|
||||
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.
|
||||
</figcaption>
|
||||
</figure>
|
||||
<figure class="card flow box-shadow">
|
||||
<img class="card-image" src="./assets/images/laptop.svg" alt="Um laptop aberto em umas de suas páginas do seu ecommerce" />
|
||||
<figcaption class="card-description text-center">
|
||||
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.
|
||||
</figcaption>
|
||||
</figure>
|
||||
<figure class="card flow box-shadow">
|
||||
<img class="card-image" src="./assets/images/phone-notificated.svg" alt="Um celular que contém suas notificações" />
|
||||
<figcaption class="card-description text-center">
|
||||
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.
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!--=============== Blog ===============-->
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user