add services section
This commit is contained in:
parent
85fc26db7a
commit
4ccb4daf7e
|
@ -1,114 +1,15 @@
|
|||
<article id="services" class="l-relative l-screen-min-full services-bg">
|
||||
<div class="l-section-pad l-wrapper l-wrapper--wide">
|
||||
<h2 class="l-section-header">Services</h2>
|
||||
<ul class="l-flex-list-row service-list">
|
||||
<li class="service">
|
||||
<ul class="l-list-bare">
|
||||
<li class="service__header">
|
||||
<img class="service__img" src="https://via.placeholder.com/200" alt="SERVICE IMAGE">
|
||||
</li>
|
||||
<li>
|
||||
<h3 class="service__heading h4">Service Heading One</h3>
|
||||
<p class="h5">Service Sub-Heading</p>
|
||||
</li>
|
||||
<li class="service__body">
|
||||
<p>
|
||||
Dolor ad velit illum adipisicing laborum! Unde assumenda corporis dolore iure earum Sit ipsum exercitationem nisi dolore a repellendus! Nostrum accusamus laborum in sapiente velit Recusandae facere esse et natus.
|
||||
</p>
|
||||
<p>
|
||||
Deleniti debitis reprehenderit est magni modi Veniam cumque officia quas ex veniam Voluptates molestias eaque dolorem ratione.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<ul class="l-flex-list-row service__social-list">
|
||||
<li><span class="social-icon"></span></li>
|
||||
<li><span class="social-icon"></span></li>
|
||||
<li><span class="social-icon"></span></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="service">
|
||||
<ul class="l-list-bare">
|
||||
<li class="service__header">
|
||||
<img class="service__img" src="https://via.placeholder.com/200" alt="SERVICE IMAGE">
|
||||
</li>
|
||||
<li>
|
||||
<h3 class="service__heading h4">Service Heading Two</h3>
|
||||
<p class="h5">Service Sub-Heading</p>
|
||||
</li>
|
||||
<li class="service__body">
|
||||
<p>
|
||||
Dolor ad velit illum adipisicing laborum! Unde assumenda corporis dolore iure earum Sit ipsum exercitationem nisi dolore a repellendus! Nostrum accusamus laborum in sapiente velit Recusandae facere esse et natus.
|
||||
</p>
|
||||
<p>
|
||||
Dolor ad velit illum adipisicing laborum! Unde assumenda corporis dolore iure earum Sit ipsum exercitationem nisi dolore a repellendus! Nostrum accusamus laborum in sapiente velit Recusandae facere esse et natus.
|
||||
</p>
|
||||
<p>
|
||||
Deleniti debitis reprehenderit est magni modi Veniam cumque officia quas ex veniam Voluptates molestias eaque dolorem ratione.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<ul class="l-flex-list-row service__social-list">
|
||||
<li><span class="social-icon"></span></li>
|
||||
<li><span class="social-icon"></span></li>
|
||||
<li><span class="social-icon"></span></li>
|
||||
<li><span class="social-icon"></span></li>
|
||||
<li><span class="social-icon"></span></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="service">
|
||||
<ul class="l-list-bare">
|
||||
<li class="service__header">
|
||||
<img class="service__img" src="https://via.placeholder.com/200" alt="SERVICE IMAGE">
|
||||
</li>
|
||||
<li>
|
||||
<h3 class="service__heading h4">Service Heading Three</h3>
|
||||
<p class="h5">Service Sub-Heading</p>
|
||||
</li>
|
||||
<li>
|
||||
<p class="service__body">
|
||||
Deleniti debitis reprehenderit est magni modi Veniam cumque officia quas ex veniam Voluptates molestias eaque dolorem ratione.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<ul class="l-flex-list-row service__social-list">
|
||||
<li><span class="social-icon"></span></li>
|
||||
<li><span class="social-icon"></span></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="service">
|
||||
<ul class="l-list-bare">
|
||||
<li class="service__header">
|
||||
<img class="service__img" src="https://via.placeholder.com/200" alt="SERVICE IMAGE">
|
||||
</li>
|
||||
<li>
|
||||
<h3 class="service__heading h4">Service Heading Four</h3>
|
||||
<p class="h5">Service Sub-Heading</p>
|
||||
</li>
|
||||
<li>
|
||||
<p class="service__body">
|
||||
Dolor ad velit illum adipisicing laborum! Unde assumenda corporis dolore iure earum Sit ipsum exercitationem nisi dolore a repellendus! Nostrum accusamus laborum in sapiente velit Recusandae facere esse et natus.
|
||||
</p>
|
||||
<p>
|
||||
Deleniti debitis reprehenderit est magni modi Veniam cumque officia quas ex veniam Voluptates molestias eaque dolorem ratione.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<ul class="l-flex-list-row service__social-list">
|
||||
<li><span class="social-icon"></span></li>
|
||||
<li><span class="social-icon"></span></li>
|
||||
<li><span class="social-icon"></span></li>
|
||||
<li><span class="social-icon"></span></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="l-underlay services-bg"></div>
|
||||
|
||||
<h2 class="l-section-header">services</h2>
|
||||
|
||||
<div class="l-section-pad l-wrapper services-section">
|
||||
A Services Section.
|
||||
</div>
|
||||
|
||||
<div class="l-section-pad l-wrapper services-section">
|
||||
Another services Section.
|
||||
</div>
|
||||
</article>
|
||||
|
||||
|
|
|
@ -0,0 +1,7 @@
|
|||
.services-bg {
|
||||
background-color: rgba(green, 0.5);
|
||||
}
|
||||
|
||||
.services-section {
|
||||
background-color: rgba(green, 0.5);
|
||||
}
|
|
@ -14,6 +14,7 @@
|
|||
@import "imports/header.scss";
|
||||
@import "imports/hero.scss";
|
||||
@import "imports/about.scss";
|
||||
@import "imports/services.scss";
|
||||
|
||||
@import "mapbox-gl/dist/mapbox-gl.css";
|
||||
|
||||
|
@ -142,63 +143,6 @@ html.is-animating .transition-fade {
|
|||
}
|
||||
}
|
||||
|
||||
// services
|
||||
|
||||
.services-bg {
|
||||
color: var(--neutral-300);
|
||||
background-color: var(--primary-700);
|
||||
}
|
||||
|
||||
.service-list {
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.service {
|
||||
flex: 0 0 100%;
|
||||
text-align: center;
|
||||
margin-bottom: 2.5rem;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@media (min-width: $bp-m) {
|
||||
flex: 0 0 calc(50% - 2.5rem);
|
||||
}
|
||||
|
||||
@media (min-width: $bp-l) {
|
||||
flex: 0 0 calc(25% - 2.5rem);
|
||||
}
|
||||
}
|
||||
|
||||
.service__header {
|
||||
display: inline-block;
|
||||
width: 7em;
|
||||
height: 7em;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.service__img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.service__heading {
|
||||
margin-bottom: 0.125em;
|
||||
}
|
||||
|
||||
.service__body {
|
||||
@media (min-width: $bp-s) {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
}
|
||||
|
||||
.service__social-list {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
// contact
|
||||
|
||||
.contact-bg {
|
||||
|
|
Reference in New Issue