Step 3: Creating About US Page

<< Index

In the end of this tutorial, your About US Page will look like,

Step 3.1: Open Game Site Layout page and renamed as about.html.

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

Step 3.2: Create title and add two section for image and its description using grid.

<div class="row text-center">
<div class="col-md-12"><h2  style="margin:0;"><b>About</b></h2></div>
</div>
<hr />
<div class="row text-center">
 <div class="col-md-6">
 </div>		
 <div class="col-md-6">
 </div>
</div>

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

Step 3.3: Add image location in first section and add description in section section like below.

<div class="col-md-6">
  <img alt="about-page-page" src="aboutus.jpg" />	            
</div>
<div class="col-md-6 columns">
  <p>Butler's Wharf is an English historic building on the south bank of the River Thames, just east of London's Tower Bridge, now housing luxury flats and restaurants. Lying between the picturesque street Shad Thames and the Thames Path, it overlooks both the bridge and St Katharine Docks on the other side of the river. Butler's Wharf is also used as a term for the surrounding area.</p>
  <p>Butler's Wharf is also used as a name for the surrounding area, otherwise called Shad Thames after the main local street.</p>
  <p>Source: Wikipedia.org</p>
  <p>This is a sample website, don't pay any attention to the contents.</p>
</div>
<hr />

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

---

Step 3.4: Add image gallery using thumbnail.

<h2 class="text-center"><b>IMAGE GALLERY</b></h2>
	<hr />
	<div class="row">
	  <div class="col-md-2"></div>
	  <div class="col-md-2">
	  	 <a href="#" class="thumbnail">	 
		 <img src="img/game-site-1.jpg" />  </a>  
	  </div>
	  <div class="col-md-2">  
	  	 <a href="#" class="thumbnail">
		 <img src="img/game-site-2.jpg" />  </a>  
	  </div>
	  <div class="col-md-2">
	  	 <a href="#" class="thumbnail">	 
		 <img src="img/game-site-3.jpg" />  </a>  
	  </div>
	  <div class="col-md-2">
	  	 <a href="#" class="thumbnail">	 
		 <img src="img/game-site-4.jpg" />  </a>  
	  </div>
	  <div class="col-md-2"></div>
	</div>

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

---

<< Step 2 Step 4 >>