HenriqueSantosSantana/challenge-landing-page-henrique-santos-santana
0
0
Fork 0
forked from M3-Academy/challenge-landing-page
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: added features section and responsive

Browse Source
This commit is contained in:
Henrique Santos Santana 2022-10-09 15:38:51 -03:00
parent 87ef5ab086
commit 1cb7f20db0
2 changed files with 84 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
assets/css/main.css
View File

@ -130,12 +130,16 @@
@media screen and (min-width:1025px) { @media screen and (min-width:1025px) {
.services { .services {
width: 55%; width: 57%;
margin: 0 auto; margin: 0 auto;
} }
.card { .services-container {
max-width: 350px; 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*/ /*CUBE CSS styles*/
/*-------------*\ /*-------------*\

36
index.html
View File

@ -111,6 +111,42 @@
</div> </div>
<!--=============== Features ===============--> <!--=============== 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 ===============--> <!--=============== Blog ===============-->