add service styles
This commit is contained in:
parent
965296bea6
commit
c55794e29f
|
|
@ -1,47 +1,113 @@
|
||||||
<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 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>
|
<li>
|
||||||
<img src="https://via.placeholder.com/200" alt="SERVICE IMAGE">
|
<h3 class="service__heading h4">Service Heading One</h3>
|
||||||
<h3>Service Heading</h3>
|
<p class="h5">Service Sub-Heading</p>
|
||||||
|
</li>
|
||||||
|
<li class="service__body">
|
||||||
<p>
|
<p>
|
||||||
<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>
|
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>
|
||||||
<p>
|
<p>
|
||||||
<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>
|
Deleniti debitis reprehenderit est magni modi Veniam cumque officia quas ex veniam Voluptates molestias eaque dolorem ratione.
|
||||||
</p>
|
</p>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<img src="https://via.placeholder.com/200" alt="SERVICE IMAGE">
|
<ul class="l-flex-list-row service__social-list">
|
||||||
<h3>Service Heading</h3>
|
<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>
|
<p>
|
||||||
<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>
|
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>
|
||||||
<p>
|
<p>
|
||||||
<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>
|
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>
|
</p>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<img src="https://via.placeholder.com/200" alt="SERVICE IMAGE">
|
<ul class="l-flex-list-row service__social-list">
|
||||||
<h3>Service Heading</h3>
|
<li><span class="social-icon"></span></li>
|
||||||
<p>
|
<li><span class="social-icon"></span></li>
|
||||||
<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><span class="social-icon"></span></li>
|
||||||
</p>
|
<li><span class="social-icon"></span></li>
|
||||||
<p>
|
<li><span class="social-icon"></span></li>
|
||||||
<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>
|
</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>
|
</p>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<img src="https://via.placeholder.com/200" alt="SERVICE IMAGE">
|
<ul class="l-flex-list-row service__social-list">
|
||||||
<h3>Service Heading</h3>
|
<li><span class="social-icon"></span></li>
|
||||||
<p>
|
<li><span class="social-icon"></span></li>
|
||||||
<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>
|
</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>
|
||||||
<p>
|
<p>
|
||||||
<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>
|
Deleniti debitis reprehenderit est magni modi Veniam cumque officia quas ex veniam Voluptates molestias eaque dolorem ratione.
|
||||||
</p>
|
</p>
|
||||||
</li>
|
</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>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
|
|
|
||||||
|
|
@ -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:
|
||||||
|
|
|
||||||
Reference in New Issue