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

add service styles

This commit is contained in:
Ray Elliott 2020-03-31 17:34:15 +00:00
parent 965296bea6
commit c55794e29f
2 changed files with 168 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,46 +1,112 @@
<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"> <div class="l-section-pad l-wrapper l-wrapper--wide">
<h2>Services</h2> <h2 class="l-section-header">Services</h2>
<ul> <ul class="l-flex-list-row service-list">
<li> <li class="service">
<img src="https://via.placeholder.com/200" alt="SERVICE IMAGE"> <ul class="l-list-bare">
<h3>Service Heading</h3> <li class="service__header">
<p> <img class="service__img" src="https://via.placeholder.com/200" alt="SERVICE IMAGE">
<span>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.</span> </li>
</p> <li>
<p> <h3 class="service__heading h4">Service Heading One</h3>
<span>Sit minima sapiente quidem ipsam animi? Nesciunt officiis amet facilis repellat nulla maiores? Deleniti debitis reprehenderit est magni modi Veniam cumque officia quas ex veniam Voluptates molestias eaque dolorem ratione</span> <p class="h5">Service Sub-Heading</p>
</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>
<li> <li class="service">
<img src="https://via.placeholder.com/200" alt="SERVICE IMAGE"> <ul class="l-list-bare">
<h3>Service Heading</h3> <li class="service__header">
<p> <img class="service__img" src="https://via.placeholder.com/200" alt="SERVICE IMAGE">
<span>Elit rem consequatur magnam magnam et voluptatem laborum? Maxime recusandae assumenda ratione ratione nisi laudantium! Recusandae accusantium eaque dolorum corporis quod. Excepturi provident commodi adipisci distinctio voluptatibus. Nulla ullam vitae.</span> </li>
</p> <li>
<p> <h3 class="service__heading h4">Service Heading Two</h3>
<span>Consectetur provident modi corporis reprehenderit incidunt? Vel illo dolor minima excepturi accusamus nostrum? Illo dignissimos aliquid perspiciatis corrupti possimus fuga. Reiciendis excepturi commodi voluptatum molestias magnam Accusantium totam illo harum</span> <p class="h5">Service Sub-Heading</p>
</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>
<li> <li class="service">
<img src="https://via.placeholder.com/200" alt="SERVICE IMAGE"> <ul class="l-list-bare">
<h3>Service Heading</h3> <li class="service__header">
<p> <img class="service__img" src="https://via.placeholder.com/200" alt="SERVICE IMAGE">
<span>Amet illo expedita facere nihil vero, ab Deserunt doloremque commodi error aperiam laborum. Placeat omnis possimus est ipsam voluptas. Incidunt officia atque nisi dicta voluptates laborum Iusto exercitationem tempora dicta.</span> </li>
</p> <li>
<p> <h3 class="service__heading h4">Service Heading Three</h3>
<span>Amet architecto praesentium cumque delectus exercitationem Repudiandae facere quia sed id inventore? Vel tempore fugit iusto ab magnam. Consequatur iure ex temporibus odio ab eligendi dolore? Dignissimos ipsum non sit</span> <p class="h5">Service Sub-Heading</p>
</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>
<li> <li class="service">
<img src="https://via.placeholder.com/200" alt="SERVICE IMAGE"> <ul class="l-list-bare">
<h3>Service Heading</h3> <li class="service__header">
<p> <img class="service__img" src="https://via.placeholder.com/200" alt="SERVICE IMAGE">
<span>Ipsum perferendis perspiciatis velit ut commodi accusantium Dignissimos quisquam quam voluptatum perspiciatis optio? Beatae molestiae quisquam esse ut cum? Ab praesentium ad eius recusandae nisi. Laudantium eos minima ex quod?</span> </li>
</p> <li>
<p> <h3 class="service__heading h4">Service Heading Four</h3>
<span>Lorem nisi facilis corrupti sunt nihil! Ipsum soluta possimus expedita commodi expedita. Reprehenderit sed fugit hic amet maxime velit? Repellat saepe quasi iure laborum quasi. Pariatur dolorem reprehenderit laboriosam dolorum</span> <p class="h5">Service Sub-Heading</p>
</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> </li>
</ul> </ul>
</div> </div>

74
src/css/main.css
View File

@ -158,6 +158,7 @@ html.is-animating .transition-fade {
} }
.footer__social-list { .footer__social-list {
font-size: 3em;
justify-content: center; justify-content: center;
} }
@ -172,16 +173,6 @@ html.is-animating .transition-fade {
} }
} }
.social-icon {
display: block;
width: 3em;
height: 3em;
background-color: var(--accent-secondary-700);
opacity: 0.9;
margin: 0 0.25em;
border-radius: 50%;
}
// hero // hero
.hero-bg { .hero-bg {
@ -191,7 +182,58 @@ html.is-animating .transition-fade {
// services // services
.services-bg { .services-bg {
background-color: var(--accent-primary-100); 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
@ -210,4 +252,14 @@ html.is-animating .transition-fade {
background-color: var(--color-bg); background-color: var(--color-bg);
} }
.social-icon {
display: block;
width: 1em;
height: 1em;
background-color: var(--accent-secondary-700);
opacity: 0.9;
margin: 0 0.25em;
border-radius: 50%;
}
// vim:set filetype=scss: // vim:set filetype=scss: