“CSS3_split2” Template Documentation

Template version: 2.0
Created: January 15th 2014

Thank you for downloading this template.

This template is released under a Creative Commons Attribution 3.0 Licence. This means you are free to download and use it for personal and commercial projects. However, you must leave the 'design from css3templates.co.uk' link in the footer of the template.

If you have any questions that are beyond the scope of this help file, please feel free to contact me via my website. Thank you!


Table of Contents

  1. HTML Structure
  2. CSS Files and Structure
  3. Fonts
  4. JavaScript
  5. Sources and Credits
  6. Image Fader

A) HTML Structure - top

Here is the HTML structure for this template.

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Header Metatags -->
  <!-- Main Stylesheet -->
  <!-- Modernizr JS Enables HTML5 Elements -->
</head>
<body>
  <div id="main">
    <!-- begin header -->
    <header>
      <div id="logo"</div>
      <nav>
        <!-- menu -->
      </nav>
    </header>
    <!-- end header -->
    <!-- begin content -->
    <div id="site_content">
      <ul class="slideshow">
        <li class="show"><img src="images/1.jpg" width="950" height="300" alt="photo_one" /></li>
        <li><img src="images/2.jpg" width="950" height="300" alt="photo_two" /></li>
        <li><img src="images/3.jpg" width="950" height="300" alt="photo_three" /></li>
      </ul>
      <div id="sidebar_container">
        <div class="sidebar"></div>
      </div>
      <div id="content"></div>
    </div>
    <!-- end content -->
    <!-- begin footer -->
    <footer></footer>
    <!-- end footer -->
  </div>
  <p>&nbsp;</p>
  <!-- jQuery with plugins -->
  <script type="text/javascript">
    $(function() {
      $("#lava_menu").lavaLamp({
        fx: "backout",
        speed: 700
      });
    });
  </script>
</html>
</body>
    

B) CSS Files and Structure - top

There is one stylesheet used in this theme:

  1. css/style.css
  1. style.css is the main stylesheet and is included in all pages. It contains all the structural stylings for the template.

C) Fonts - top

There are 2 fonts used in this theme. The fonts are Jenna Sue and News Cycle. The font files are

  1. fonts/JennaSue-webfont.ttf
  2. fonts/JennaSue-webfont.eot (IE Specific)
  3. fonts/NewsCycle-Regular.ttf
  4. fonts/NewsCycle-Regular.eot (IE Specific)

D) JavaScript - top

This theme imports several Javascript files.

  1. js/modernizr-1.5.min.js
  2. js/jquery.min.js
  3. js/jquery.easing.min.js
  4. js/jquery.lavalamp.min.js
  5. js/image_fade.js
  1. modernizr is a Javascript library that enables HTML5 elements and feature detects.
  2. jQuery is a Javascript library containing lots of commonly used Javascript functions.
  3. Easing is a jQuery plugin for easing transitions.
  4. Lavalamp is a jQuery plugin for the lavalamp menu.
  5. Image fade contains the functions for the gallery image fader on the home page (index.html).

E) Sources and Credits - top

I've used the following images, icons or other files as listed.


Once again, thank you for downloading this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist.

Go To Table of Contents