Adding the final touches

In this section, we will enhance the details that hold our design together. First, we'll enhance the h1 headings for each of our major sections and add some needed top and bottom padding to each section. Then, we'll enhance the navigation experience by adding ScrollSpy to the navbar and using jQuery to animate the scrolling action when triggered by a click on the navbar item.

Let's begin by enhancing the size and contrast of our major h1 headings for each section and increasing the top and bottom padding. If you pause to look at these h1 headings, you may note that they are rather lackluster. Consider, for example, the heading for the Features section:

Adding the final touches

Enlarging these headings, bringing the contrast down a little, and providing extra padding will make a big difference. We only want these rules to apply to the FEATURES, IMPACT, and SIGN UP sections. We will select these by ID.

  1. Open _page-contents.less in your editor.
  2. At the top of the file, after the rule applying top padding to the body, add the following lines:
    #features, #impact, #signup {
  padding-top: 36px;
  padding-bottom: 48px;
  h1 {
    font-size: 5em;
    color: @gray;
    line-height: 1.3;
    padding-bottom: 24px;
    }
}
  3. Here, we've done the following:
    • Added the top and bottom padding to these sections
    • Significantly increased the size of the h1 heading
    • Reduced the heavy contrast of that heading
    • Ensured that the heading has room to breathe by setting the line height and bottom padding
  4. Save, compile, refresh, and notice the difference.
Adding the final touches

This yields a nice result across almost all viewport sizes. For small viewports, the h1 font size is now a bit large. We also need to add some left and right margins; so, let's adjust these. As we do not want these styles to flow up to larger viewports, we'll wrap them in a query by limiting them to small viewports:

// Adjust section headings for extra-small viewports only
@media (max-width: @screen-xs-max) {
  #features, #impact, #signup {
    margin-left: 30px;
    margin-right: 30px;
    h1 {
      font-size: 3em;
    }
  }
}

The following screenshot shows our result:

Adding the final touches

This is a much improved result!

Now, we'll enhance the navigation experience.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset