Creating Service Page for Tourist Spot website in Zurb Foundation

In the end of this tutorial, your services page will look like,

Zurb Foundation Framework Example - Tourist Spot Service Page
Step 2.1: Creating Layout

Step 2.1.1: Create a duplicate of the index.html file and name it as services.html.

Step 2.1.2: Open the services.html file in a HTML editor and delete everything inside the body tags except header, footer and the attached scripts.

Step 2.1.3: Save the file and open it in your favorite browser, the web page will look like,

Zurb Foundation Framework Example - Tourist Spot Service Page Layout
Step 2.2: Adding Design Elements

Step 2.2.1: Now we need to create a section to add Services. For this, add the below code,

	<div class="row">
	  <div class="large-12 columns text-center">
	    <h2>SERVICES</h2>
	    <hr>
	  </div>
	</div>

	<div class="row">

	          <div class="large-4 columns">
	            	            
	          </div>
	          <div class="large-4 columns">
                        
	          </div>
	          <div class="large-4 columns">
            
	          </div>
          
      </div>
		

In the above code, I used Foundation 4 Grids. Take a look at this Link to learn more about Foundation 4 grid system. You don't have to read the entire article, just take a look to have a general idea about grids.

Step 2.2.2: Save the file and open it in your favorite browser, the web page will look like,

Zurb Foundation Framework Example - Tourist Spot Service Page Layout2

Step 2.2.3: For services we are going to use the element: "Pricing Tables" from Foundation 4 elements. The basic syntax of Pricing Tables element is,

	<ul class="pricing-table">
	  <li class="title">Standard</l>
	  <li class="price">$99.99</li>
	  <li class="description">An awesome description</li>
	  <li class="bullet-item">1 Database</li>
	  <li class="bullet-item">5GB Storage</li>
	  <li class="bullet-item">20 Users</li>
	  <li class="cta-button"><a class="button" href="#">Buy Now</a></li>
	</ul>    
		

Step 2.2.4: Add the Pricing Tables inside each <div class="large-4 columns "> as shown below and edit it as required.

 	    <div class="large-4 columns ">
            <ul class="pricing-table">
              <li class="title">City</li>
              <li class="price">$1999.99</li>
              <li class="description">Everything Covered</li>
              &;li class="bullet-item">1 Guide</li>
              <li class="bullet-item">VIP Room</li>
              <li class="bullet-item">50% Discount Food</li>
              <li class="cta-button"><a href="#" class="button">Buy Now</a></li>
            </ul>
          </div>
		

Step 2.3: Editing Contents

Step 2.3.1: Edit the data of pricing table such as title, price, description, bullet-item and cta-button.

Step 2.3.2: Save the file and open it in your favorite browser, the web page will look like,

Zurb Foundation Framework Example - Tourist Spot Service Page