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">
|
<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>
|
<div class="l-underlay services-bg"></div>
|
||||||
<ul class="l-flex-list-row service-list">
|
|
||||||
<li class="service">
|
<h2 class="l-section-header">services</h2>
|
||||||
<ul class="l-list-bare">
|
|
||||||
<li class="service__header">
|
<div class="l-section-pad l-wrapper services-section">
|
||||||
<img class="service__img" src="https://via.placeholder.com/200" alt="SERVICE IMAGE">
|
A Services Section.
|
||||||
</li>
|
</div>
|
||||||
<li>
|
|
||||||
<h3 class="service__heading h4">Service Heading One</h3>
|
<div class="l-section-pad l-wrapper services-section">
|
||||||
<p class="h5">Service Sub-Heading</p>
|
Another services Section.
|
||||||
</li>
|
</div>
|
||||||
<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>
|
|
||||||
</article>
|
</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/header.scss";
|
||||||
@import "imports/hero.scss";
|
@import "imports/hero.scss";
|
||||||
@import "imports/about.scss";
|
@import "imports/about.scss";
|
||||||
|
@import "imports/services.scss";
|
||||||
|
|
||||||
@import "mapbox-gl/dist/mapbox-gl.css";
|
@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
|
||||||
|
|
||||||
.contact-bg {
|
.contact-bg {
|
||||||
|
|
Reference in New Issue