O'Reilly logo

Mastering Sass by Luke Watts

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Featured products

The next section will be the featured products section. This will replace what is currently our Coming soon message in the <main> element.

The featured products section will consist of a row of four products. We'll use the Susy span mixin to achieve the columns, while we use the media mixin to lay out each product correctly.

Let's start with the markup. In index.html replace the current h1 and the coming soon text below that with the following:

<section class="featured-products"> <h2 class="featured-product-title">Featured Products</h2> <article class="featured-product product-centered"> <img src="http://placehold.it/300x400" alt="Image Placeholder" class="product-centered-image featured-product-image"> <h3 class="featured-product-title ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required