Step 2 : Creating Browse Games Page

<< Index

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

Step 2.1: Open Game Site Layout page and renamed as browse.html.

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

Step 2.2: Create two section first one for latest release panel and second one for browsing game panel.

<div class="row">
  <div class="col-sm-6 col-md-4">
  
  </div>
  <div class="col-sm-6 col-md-8">
  
  </div>
</div>

Step 2.2.1: Add code for latest release panel in first section.

<div class="thumbnail">
      <img src="img/game-site-5.jpg" alt="...">
      <div class="caption">
        <h3>Latest Release</h3>
        <p>This is the latest release from our games site. It features the movie lord of the ring and follows the story as close to the movie as possible.</p>
      <button type="button" class="btn btn-primary text-center" style="width:100%;">Play</button>
      </div>
</div>

Step 2.2.2: Add code for browse game panel in second section.

<div class="panel-footer" style="padding-right:5%;">
   
   <div class="row">
     <div class="col-md-3">
	   <img src="http://placehold.it/130x130&amp;text=Game 1">
	 </div>
	 <div class="col-md-3">
	   <img src="http://placehold.it/130x130&amp;text=Game 2">
	 </div>
	 <div class="col-md-3">
	   <img src="http://placehold.it/130x130&amp;text=Game 3">
	 </div>
	 <div class="col-md-3">
	   <img src="http://placehold.it/130x130&amp;text=Game 4">
	 </div>
	</div>
	
	<div class="row">
	 <div class="col-md-3">
	   <img src="http://placehold.it/130x130&amp;text=Game 5">
	 </div>
	 <div class="col-md-3">
	   <img src="http://placehold.it/130x130&amp;text=Game 6">
	 </div>
	 <div class="col-md-3">
	   <img src="http://placehold.it/130x130&amp;text=Game 7">
	 </div>
	 <div class="col-md-3">
	   <img src="http://placehold.it/130x130&amp;text=Game 8">
	 </div>
    </div>
    
	<div class="row">
     <div class="col-md-3">
	   <img src="http://placehold.it/130x130&amp;text=Game 9">
	 </div>
	 <div class="col-md-3">
	   <img src="http://placehold.it/130x130&amp;text=Game 10">
	 </div>
	 <div class="col-md-3">
	   <img src="http://placehold.it/130x130&amp;text=Game 11">
	 </div>
	 <div class="col-md-3">
	   <img src="http://placehold.it/130x130&amp;text=Game 12">
	 </div>  
    </div>  </div>
	 <br />
   
   <div class="row">
    
	<div class="col-md-6">
    <div class="panel-footer">
      <h4><b>New Game Release</b></h4>
	  <p>Game 14 is one of the most viewed new games released in our website today.</p>
	  <button type="button" class="btn btn-primary text-center">Play</button>
	</div>
	</div>
	
	<div class="col-md-6">	
	<div class="panel-footer">
      <h4><b>New Game Release</b></h4>
	  <p>Game 14 is one of the most viewed new games released in our website today.</p>
	  <button type="button" class="btn btn-primary text-center">Play</button>
	</div>
   </div>

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

---

<< Step 1 Step 3 >>