Adding the How it Works section

The first section that we'll be starting with is titled How it Works. Many landing pages feature this as a showcase of the main steps a user takes to get the value of a product. In our case, we'll be showcasing three separate features of the SecondPlate app, each feature showing a product mockup and some supportive text. We'll see how to use layout features and how to reuse content.

Figure 5.1 – Adding a new section

Execute the following steps to add the section:

1. As shown in Figure 5.1, select the Body element and add a new Section element. While having this new Section selected, go to the Style pane on the right and select the Selector text box. Inside it, type Section to give the Section element a class name of Section. Next, let's add a second class by typing How it Works. This creates what's called a combo class. We'll dive deeper into what combo classes are later, but for...