Creating Service Page for Tourist Spot website in Zurb Foundation
In the end of this tutorial, your services page will look like,
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,
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,
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,