We need to enlarge the icons, align the text at the center, and iron out the grid layout. Let's review the markup structure for the features list:
<section id="features"> <div class="container"> <h1>Features</h1> <div class="row"> <div class="features-item col-md-4"> <span class="icon fa fa-cloud"></span> <h2>Feature 1</h2> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo. </p> </div> ...
Each feature with its icon, heading, and paragraph is wrapped in a div
tag with two classes: features-item
and col-md-4
.
With this in mind, let's write the styles we need:
Create
scss/includes/_features.scss
, a new Sass partial, and do not forget to import it in the scss/app.scss file:@import "includes/navbar"; @import...