Single page designs can be an excellent technique for tackling smaller websites, even those that you might not think could ever be done without multiple pages. There are tons of great reasons for using a single page site, from ease of maintenance to reduced bandwidth needs.

The benefits of single page design
Obviously, single page designs are not ideal for every project. But there are a host of reasons to use them if they’re a possible fit.

THEY’RE INTUITIVE TO USE
By default, all a user needs to know to navigate a single page site is how to scroll. You might include arrows or other navigational clues, but with rare exception, simply scrolling will bring your visitors from one section to the next.

In this tutorial we’ll create a single page website using Bootstrap 4. The page will have a navbar / top menu with a logo, a top section with description and call to action buttons, services and portfolio sections, a latest blog posts section, testimonials section and a simple footer with social icons.

Some of these sections will have fullscreen backgrounds. In the images above you can see the top part of the final result and below you can see a live preview.

We are almost finished, now let’s add a container for the contact form. In this case the rectangle should be green #67A802 and the Stroke lighter green #B8D942. The title of the section should be “Contact Us” and I’m using a White foreground to increase the contrast with the background. Fade the box a little bit and duplicate to create de double line effect from the previous content boxes.

Finally using White foreground and a smaller Size of “Bonveno” typeface write the contact form labels. Apply the Drop Shadow we are using for the titles to these labels as well.