Creating Service Page for Tourist Spot website in Gumby Foundation

Step 2: Creating Service Page

<< Index

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

Gumby Tourist Spot Website Service Page

Step 2.1: Open Tourist Spot Layout page and renamed as service.html.

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

Gumby Tourist Spot Website Layout

Step 2.2: Create title and add section for different services using grid.

<div class="row">
 <div class="twelve columns">
   <h4 class="text-center">Services</h4>   <hr />
 </div>
</div>

<div class="row">
 <div class="four columns">
 </div>
 <div class="four columns">
 </div>
 <div class="four columns">
 </div>
</div>

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

Gumby Tourist Spot Website Service Page Layout

Step 2.3: Add Services in each <div class="col-md-4"> using panel as shown in below.

<table>
    <thead><tr><th class="text-center">City</th></tr></thead>
	<tbody>
	  <tr><td class="text-center">$1999.99</td></tr>
  	  <tr><td class="text-center">Everything Covered</td></tr>
  	  <tr><td class="text-center">1 Guide</td></tr>
  	  <tr><td class="text-center">VIP Room</td></tr>
  	  <tr><td class="text-center">50% Discount Food</td></tr>
  	  <tr><td class="text-center"><div class="medium primary btn"><a href="#">Buy Now</a></div></td></tr>
	</tbody>
</table>

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

Gumby Tourist Spot Website Service Page