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

✨ Challenge completed ✨ #16

Merged
HenriqueSantosSantana merged 31 commits from develop into main 2022-10-12 00:23:11 +00:00
Conversation 0 Commits 31 Files Changed 27 +84 -3
2 changed files with 84 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit c9a9e417a7 - Show all commits

51
assets/css/main.css
View File

@ -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
View File

@ -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 ===============-->