rayelliott
/
victor-hugo
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

add services section

This commit is contained in:
Ray Elliott 2020-04-20 17:19:18 +00:00
parent 85fc26db7a
commit 4ccb4daf7e
3 changed files with 20 additions and 168 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

123
site/layouts/partials/services.html
View File

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

7
src/css/imports/services.scss Normal file
View File

@ -0,0 +1,7 @@
.services-bg {
background-color: rgba(green, 0.5);
}
.services-section {
background-color: rgba(green, 0.5);
}

58
src/css/main.css
View File

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