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

Testimonial

Next, let's add a fullwidth section which will be for a message or a testimonial. We'll use our media-centered mixin again, this time with a round. The section will have a full width background image with an overlay to darken or lighten it, the same as our image banner. In fact, they are very similar.

Here's our HTML. Place this after the featured products section:

<section class="testimonials" style="background-image: url('http://placehold.it/1280x300');"> <div class="testimonials-overlay"> <article class="testimonial"> <img src="http://placehold.it/75x75" alt="Image of Testimonial Author" class="testimonial-image" /> <h2 class="testimonial-title"> Amazing!!! </h2> <blockquote class="testimonial-body"> Amazing products! Amazing prices! ...

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