Setting up the basics of your design
We start modifying the result of Chapter 5, Bootstrappin' Your Portfolio, and should end up with the basics, similar to that shown in the following screenshot:
Note the following features:
A complex navbar that has seven main
nav
items, each with a drop-down menuThe first of the three columns is equipped with a carousel, followed by a heading, paragraph, and button
The second and third columns, which have headings, paragraphs, and Read more -> buttons
A footer that has the logo and social icons
You'll recognize elements we've already worked with in Chapter 5, Bootstrappin' Your Portfolio. The carousel is now smaller—constrained by its containing column. Otherwise, the markup is the same.
Adding drop-down menus to our navbar
Bootstrap's JavaScript Dropdown Plugin enables you to create drop-down menus with ease. You can also add these drop-down menus to your navbar.
Open the html/includes/header.html
file in your text editor. Notice that the Gulp build process...