We've developed some significant skills with Bootstrap. Now it's time to bring an extra touch of beauty and creativity to help our clients achieve their full online marketing potential. So, let's create a beautiful one-page upscale marketing site.
We'll cover the following things in this chapter:
- A large introductory carousel with a customized responsive welcome message
- A section for customer reviews with images and captions laid out in the masonry format
- A features list with large Font Awesome icons
- A signup section with custom-designed pricing tables
- A ScrollSpy navbar with animated scrolling behavior
We've been approached by a new prospective client. She is stricken by the beauty of one-pagers—websites that scroll vertically, providing a visually stimulating presentation of a product or message with a clear call to action at the end. She wants one of these.
This client is knowledgeable and discerning. She frequents http://onepagelove.com and has a list of her current favorites in hand. Her desired features include:
- A clean, modern aesthetic website.
- An introductory welcome message with a visually intriguing background image.
- An efficient presentation of the main features of her product, accentuated with visually appealing icons.
- Customer testimony presented in a visually stimulating way.
- An easy-to-understand overview of three basic packages that a customer can choose from. These need to be presented clearly in a way that makes it easy to choose the right fit and then sign up!
- Conversions! Everything should draw the user down the page, making it nearly impossible to avoid clicking on the sign up button at the end.
To protect the secrecy of her upcoming product launch, our client has chosen not to reveal the exact nature of her product or service to us. Rather, she has provided mockups of the design she would like us to create by using a dummy copy for placeholders.
The first section will open with an interesting full-width image, a large welcome message, and an invitation to scroll down the page to learn more, as shown in the following screenshot:
The second section will list six key features of the product, which are laid out in a three-column grid, and illustrate appropriate icons as shown in the following screenshot:
The third section will feature client testimonies with photos and quotations laid out in the masonry style:
The fourth and final section will feature three available plans, each with a pricing table, and will have a visual emphasis on the center of the three tables, as shown in the following screenshot:
The savvy client that she is, she further demands that the design adapt beautifully to tablets and phones.
A great plan. No problem. Let's get to work.