This is what we are going to create in this step by step tutorial. Click on the image to view the website in new tab.
Elements Used in the Website
In this section we tell about what are the foundation elements used in the website. We list and explain these elements in this section.
- Pricing Table
- Section Tab
We already said about grid and examples. If you need, you will see grid system link.
Properties of Orbit Side:
- animation: It represents the type of animation used for transitioning between slides. It also can be set as 'fade'. Ex: animation: 'slide'.
- timer_speed: It represents the amount of time before transmitting a slide (in milli seconds).
- pause_on_hover: It is used to pauses current slide while hovering.
- animation_speed: It represents the amount of time the transmission between slides will lost.
- navigation_arrows: It displays arrow links at left and right of the image.
- bullets: This property shows bullet for slider.
We explain it by following example.
The foundation framework provides pricing tables for marketing based sites. It is made from simple unordered list.
Classes of pricing Tables:
- li.title: It creates title with style.
- li.price: Here we can add price for product or plan.
- li.description: add description here, when we need to describe product or plan.
- li.bullet-item: Using this class, we can list items.
- li.cta-button: By this class, we add buttons to list items when we need.
The following example explains pricing table.
Accordion element used to expand and collapse content. It is broken in to logical sections, like same as tabs. In zurb foundation 4.3.2, single JS file used for accordion and tabs. But different JS file used in version 5.1.1.
Tabs organize multiple documents in a single section container. It is used for switching between documents in a container.
By using Zurb Foundation, we can create easy and powerful form layout.
Model dialogs or pop-up windows are easy to use for prototyping and production. Reveal make this easy for you. In our example, we add map through reveal.
Steps to create the above website
- Step 1: Creating Home Page
- Step 2: Creating Services Page
- Step 3: Creating About Us Page
- Step 4: Creating FAQ Page
- Step 5: Creating Contact Us Page
- Step 6: Completing the Website