Creating Home Page of Games Site in Zurb Foundation

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

Zurb Foundation Framework Example - Game Site
Step 1.1: Creating Layout

In every web page design, the start point is creating the layout. For simplicity we will be using the templates provided here: Foundation Templates

In this Chapter we are going to combine two templates to create our layout. "Workspace" and "Store".

After completing the steps of creating layout the website will look like this:

Zurb Foundation Framework Example Game Site Home Page

Step 1.1.1: Open the downloaded index.html file in your favorite HTML editor.

Step 1.1.2: Delete Everything between <body></body> tags except codes inside <script> tags, they are required to use foundation 4 framework. Now the <body> element will look like this,

Zurb Foundation Framework Plugins

Step 1.1.3: Go to this link: Foundation Templates

Step 1.1.4: In the templates page, click the HTML link of the Workspace template as shown below.

Zurb Foundation Framework Templates

Step 1.1.5: Copy the code and paste it inside the <body> tags in the HTML editor.

Step 1.1.6:Save the file and open it in your preferred browser, now the layout will look like,

Zurb Foundation Framework Workspace Template

Step 1.1.7: Since we are not going to use Slide images for this website, remove it from the layout. In the source code, remove the below code to remove the slide image.

	  
	  <div class="row">
	    <div class="large-12 columns">

	    <!-- Desktop Slider -->

	      <div class="hide-for-small">
	        <div id="featured">
	              <img src="http://placehold.it/1000x400&text=Slide Image" alt="slide image">
	              <!-- <img src="http://placehold.it/1000x400&text=Slide Image" alt="slide image">
	              <img src="http://placehold.it/1000x400&text=Slide Image" alt="slide image"> -->
	          </div>
	        </div>

	    <!-- End Desktop Slider -->


	    <!-- Mobile Header -->


	    <div class="row">
	      <div class="small-12 show-for-small"><br>
	        <img src="http://placehold.it/1000x600&text=For Small Screens" />
	      </div>
	    </div>


	  <!-- End Mobile Header -->

	    </div>
	  </div><br>

Step 1.1.8: Save the file and open it in your preferred browser, now the layout will look like,

Zurb Foundation Framework - Game Site Layout 1

Step 1.1.9: Again, in the templates page, click the HTML link of the Store template as shown below.

Zurb Foundation Framework Templates

Step 1.1.10: Copy the code and paste it inside the <body> tags above the footer code in the HTML editor.

Step 1.1.11: Save the file and open it in your preferred browser, now the layout will look like,

Zurb Foundation Framework - Game Site Layout 2

Step 1.1.12: In the source code, remove the code of "Store" templates header, footer and the About section "Managed By". Save the file and open it in your favorite browser, the layout is now complete.

Zurb Foundation Framework Example Game Site Home Page

Step 1.2: Adding Content

Since we are not adding any new elements for the home page, adding content is the only step left to complete the home page.

Step 1.2.1: Change the src attributes of the img tag to point the images you downloaded.

Step 1.2.2: Change the name of the links to Home, Browse Games, About Us and Contact Us.

Step 1.2.3: Edit all the default contents like copyright, description, etc., provided in the template.

Step 1.2.4: Save the file and open it in your favorite browser, the home page will now look like,

Zurb Foundation Framework Example - Game Site