Section titles

There's only two things left to do and we're finished! Both are to do with our section titles. First, we want to center them to match the content better, and lastly, we'll add an underline using the ::after pseudo element for that extra touch. After all, as the old saying goes God is in the detail.

So the first thing we will need to do is add a common class to our section titles so we can style them all together. We'll call this class section-title. Open index.html and modify the .featured-product-title and the .services-title like so:

<h2 class="featured-product-title section-title">Featured Products</h2> 
 
... 
 
<h2 class="services-title section-title">Swag Services</h2> 

We're actually going to create a mixin to handle both our alignment and generating our underline. Create a file called _underline.scss in the scss/helpers/mixins folder. Inside that add our mixin:

@mixin underline($align: left, $color: black, $height: 3px...