ABC Plumbing - Webflow / Bootstrap Examples

HTML5 | CSS3 | Bootstrap3 | JavaScript
Responsive Design | WebFlow
ABC Plumbing - Front Pages

Outline

ABC Plumbing is a web page I have created as an example of my skills in WebFlow, and my skills in creating the same page manually using HTML, CSS, JavaScript.

The page is also responsive, and I used Bootstrap3 as the basis to build it around.

Website

The website is just a single landing page with 4 sections to it:

Header Section - with a background image, company logo, links to other areas on the page and a main title and sub title.
Services Section - using columns, a separate one for each service.
Reviews section - Uses Bootstraps carousel to scroll through customer reviews. Adjusted the CSS settings of the carousel so that text fades in and out rather then slides across the screen.
Contact Section - Again using 2 columns, one column for the contact form, and the second for contact information and a map, which is added using the Google map JavaScript API.
Menu - The menu bar appears after the Header Section has scrolled up.

JavaScript was used in the following instances :

The map was added using Googles Map JavaScript API.
The section links in the header section and the menu bar, plus the header section button use JavaScript to scroll smoothly to the section rather then jump straight there.

HTML5
CSS
Bootstrap
Responsive Design
HTML
CSS
Bootstrap
Responsive Design
HTML
CSS
Bootstrap
Responsive Design

Carousel CSS

Menu

JavaScript