forked from M3-Academy/challenge-landing-page
feat: created and responsive services section
This commit is contained in:
parent
f12f366dd6
commit
07e8ba6314
@ -89,15 +89,90 @@
|
||||
}
|
||||
}
|
||||
|
||||
/*----------*\
|
||||
= SERVICES =
|
||||
\*----------*/
|
||||
.services {
|
||||
padding-bottom: 90px;
|
||||
}
|
||||
|
||||
.services-container {
|
||||
--hs-flex-space: 20px;
|
||||
--hs-flow-space: 28px;
|
||||
|
||||
padding: 0 26px;
|
||||
}
|
||||
|
||||
.services-container,
|
||||
.card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
min-height: 288px;
|
||||
padding: 36px 26px 28px;
|
||||
}
|
||||
|
||||
.card-image {
|
||||
width: 29%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.services-container {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width:1025px) {
|
||||
.services {
|
||||
width: 55%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.card {
|
||||
max-width: 350px;
|
||||
}
|
||||
}
|
||||
|
||||
/*CUBE CSS styles*/
|
||||
|
||||
/*-------------*\
|
||||
= COMPOSITION =
|
||||
\*-------------*/
|
||||
.flow *+* {
|
||||
margin-top: var(--hs-flow-space);
|
||||
}
|
||||
|
||||
.flex-box {
|
||||
display: flex;
|
||||
gap: var(--hs-flex-space);
|
||||
}
|
||||
|
||||
/*-------*\
|
||||
= UTILS =
|
||||
\*-------*/
|
||||
.center {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.text-upper {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box-shadow {
|
||||
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
|
||||
}
|
||||
|
||||
.bg-clr-black {
|
||||
background-color: var(--bg-clr-black);
|
||||
}
|
||||
|
27
index.html
27
index.html
@ -73,6 +73,33 @@
|
||||
</section>
|
||||
|
||||
<!--=============== Services ===============-->
|
||||
<section class="services">
|
||||
<div class="services-container flex-box">
|
||||
<figure class="card flow box-shadow">
|
||||
<img src="./assets/images/shop.svg" alt="" class="card-image" />
|
||||
<figcaption class="card-description text-center">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui
|
||||
fringilla interdum.
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
<figure class="card flow box-shadow">
|
||||
<img src="./assets/images/shopping-bag.svg" alt="" class="card-image" />
|
||||
<figcaption class="card-description text-center">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui
|
||||
fringilla interdum.
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
<figure class="card flow box-shadow">
|
||||
<img src="./assets/images/handle-coin.svg" alt="" class="card-image" />
|
||||
<figcaption class="card-description text-center">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui
|
||||
fringilla interdum.
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!--=============== Gallery ===============-->
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user