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.

1. Grid
2. Orbit
3. Pricing Table
4. Accordian
5. Section Tab
6. Form
7. Reveal

Grid

We already said about grid and examples. If you need, you will see grid system link.

Orbit Slider

Orbit slider is used for creating responsive image or content slider with easy and efficient manner. By using orbit, the user can swipe on touch enabled devices.It use foundation.orbit javascript file. If you need to use orbit element to your wesite, you will add following codes only.

Properties of Orbit Side:

1. animation: It represents the type of animation used for transitioning between slides. It also can be set as 'fade'. Ex: animation: 'slide'.
2. timer_speed: It represents the amount of time before transmitting a slide (in milli seconds).
3. pause_on_hover: It is used to pauses current slide while hovering.
4. animation_speed: It represents the amount of time the transmission between slides will lost.
5. navigation_arrows: It displays arrow links at left and right of the image.
6. bullets: This property shows bullet for slider.

We explain it by following example.

Pricing Table

The foundation framework provides pricing tables for marketing based sites. It is made from simple unordered list.

Classes of pricing Tables:

1. li.title: It creates title with style.
2. li.price: Here we can add price for product or plan.
3. li.description: add description here, when we need to describe product or plan.
4. li.bullet-item: Using this class, we can list items.
5. li.cta-button: By this class, we add buttons to list items when we need.

The following example explains pricing table.

Accordion

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.

Section Tab

Tabs organize multiple documents in a single section container. It is used for switching between documents in a container.

Form

By using Zurb Foundation, we can create easy and powerful form layout.

Reveal

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

1. Step 1: Creating Home Page
2. Step 2: Creating Services Page
3. Step 3: Creating About Us Page
4. Step 4: Creating FAQ Page
5. Step 5: Creating Contact Us Page
6. Step 6: Completing the Website

Next Lesson > Tourist Spots - Creating the Home Page