Single Page Website template[ ]

About this template.


  • Free template!!
  • Single page website - All that you see is in one HTML page
    • Deployment is literally pushing one index.html file to the hosting site.
  • content is rendered using JQuery's fadeIn() or slideDown() effect - time the effect will last can be customized
  • easily Customizable with some knowledge of HTML, CSS, Java Script
  • Uses JQuery
    • version: 1.9.1
    • JQuery code is in the script block of this page
    • by default JQuery is accessed from - this is to keep all the code in one page
    • You can change this behaviour by downloading and adding the script from
  • CSS code is on the same page
  • Additional files needed are
    • jquery-1.9.1.min.js (at 91kb) "if" you want to host javascript on your site.
    • Any additional image files that might be used

Developed by

Shivaram Challa (

Other projects/tools created by Shiva

All the following tools are coded in C#. They are all licensed under GNU GPL 3. Which means you can download, use and redistribute at will. Download any text file off of a website. Simply a Notepad with a built-in file explorer. Converts Excel(.xls and .xlsx) file to CSV files. Each individual tab will be converted to a seperate CSV file (Webpage under is construction). Rename several file's extension in a folder in a jiff.


Get source code

  1. Go to Download page to get the source code
  2. open the html file in a text editor like notepad or notepad2
    • All the development for this template was done using notepad2
  3. Change all the text according to your needs
  4. See below guide to understand the purpose of each html element/tag
  5. Getting Fade-In or Slide-down effect:
    • Find <script type="text/javascript"> $(document).ready(function(){ in the index.html file.

    • For Fade-in effect: replace $("#page1").slideDown(); with $("#page1").fadeIn();

    • For Slide-Down effect: replace $("#page1").fadeIn(); with $("#page1").slideDown();

  6. For extending or reducing the time the effect lasts (default is one second (value=1000)):
  7. $("#page1").fadeIn(xx); for the effect to last 3 seconds, replace xx with 3000, at all instance on the index.html file.

HTML element/tag and their purpose (with in this template)

Site titlesh1
sub titleh1 small
anchor taga
page titleh2
page sub titleh3
article titleh4


usage instructions

FREE Download!!

Download this file, by right-click and save as

  • index.html Don't click on this link; instead right-click and save-as.
  • OR
  • View source of this page and save the source file as index.html
  • ...Emply template coming soon...

All these files are optional

  • jquery-1.9.1.min.js
  • If you want to use this file you will have to add this line of script in your page:
    <script type="text/javascript" src="jquery-1.9.1.min.js"> </script>

Copyright © 2013 Shivaram Challa


GNU GPL3 This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. You should have received a copy of the GNU General Public License along with this program. If not, see .

Contact Shivaram Challa


This template is developed by Shivaram Challa (


For suggestions or comments, send an email to shiva @ challa . net


For Feedback form: click here