<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http//www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="Klass is a beautifull theme designed by Smartik" />
<meta name="keywords" content="one, page, skitter, slider, ThemeForest, Smartik" />
<meta name="author" content="Smartik" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<!--====================
STYLESHEETS
=====================-->
<link rel="stylesheet" type="text/css" href="css/reset.css" media="screen" /> <!-- Reset Styles-->
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" /> <!-- Main Styles-->
<link href="css/skitter.styles.css" rel="stylesheet" type="text/css" media="all" /> <!-- Skitter Slider Styles-->
<link href="css/colorbox.css" rel="stylesheet" type="text/css" media="screen" /> <!-- Lightbox Image Zoom Styles -->
<!--====================
JAVASCRIPTS
=====================-->
<script type="text/javascript" src="http//ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <!-- JQuery Library -->
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script> <!-- Easing effects -->
<script src="js/jquery.animate-colors-min.js" type="text/javascript"></script> <!-- Animate Slider dots -->
<script src="js/jquery.skitter.js" type="text/javascript"></script> <!-- Skitter Slider -->
<script src="js/jquery.jigowatt.js" type="text/javascript"></script><!-- AJAX Contact Form Submit -->
<script src="js/jquery.colorbox-min.js" type="text/javascript"></script> <!-- Lightbox Image Zoom -->
<!--====== Cufon ======-->
<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/comfortaa.cufonfonts.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1, h2, h3, h4, h5, h6, .page_title, .page_title_subhead, .menu_item', { fontFamily: 'Comfortaa', hover: true });
$(document).ready(function(){
$(".article_container").hide();
$("div.read_more_link").click(function(){
$(this).toggleClass("active").next().slideToggle("slow");
});
});
$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements
$("a[rel='crbox']").colorbox();
$("a[rel='pf_item']").colorbox();
$(".video-crbox").colorbox({iframe:true, innerWidth:640, innerHeight:510});
$(".iframe-crbox").colorbox({width:"80%", height:"80%", iframe:true});
});
//scroll page to id
function GoToId(IdToGo){
var animSpeed=1500; //animation speed
var easeType="easeInOutExpo"; //easing type
if($.browser.webkit){ //webkit browsers do not support animate-html
$("body").stop().animate({scrollTop: $(IdToGo).offset().top}, animSpeed, easeType);
} else {
$("html").stop().animate({scrollTop: $(IdToGo).offset().top}, animSpeed, easeType);
}
};
$(document).ready(function(){
$('.box_skitter_slider').skitter({dots: true});
$('.box_skitter_slider_post').skitter({dots: true});
});
</script>
<title>Klass </title>
</head>
<body>
<div id="general-content">
<div id="side_menu">
<div class="logo"></div> <!-- LOGO -->
<div class="top_bg_menu"></div>
<div class="menu">
<div class="top_first"></div>
<a href="#" onclick="GoToId('#page-home');return false" class="menu_item">Home</a>
<a href="#" onclick="GoToId('#page-portfolio');return false" class="menu_item">Portfolio</a>
<a href="#" onclick="GoToId('#page-services');return false" class="menu_item">Services</a>
<a href="#" onclick="GoToId('#page-articles');return false" class="menu_item">Articles</a>
<a href="#" onclick="GoToId('#page-contact');return false" class="menu_item">Contact</a>
</div>
<div class="bottom_bg_menu"></div>
</div>
<div class="container">
<!--=========================================================
PAGE 1 \HOME\
==========================================================-->
<div id="page-home">
<div class="header">
<div class="content_wrapper">
<div class="grid_1">
<h1 class="page_title">Welcome to our site !</h1>
<div class="page_title_subhead">Integer molestie sodales libero. Integer consectetur congue facilisis.</div>
</div>
</div>
</div> <!-- End of .header -->
<div class="content">
<div class="content_wrapper">
<div class="slider_frame">
<div class="box_skitter box_skitter_slider">
<ul>
<li>
<img src="images/assets/01.jpg" class="block" alt="" />
</li>
<li>
<img src="images/assets/02.jpg" class="cube" alt="" />
</li>
<li>
<img src="images/assets/06.jpg" class="default" alt="" />
</li>
<li>
<img src="images/assets/04.jpg" class="directionBottom" alt="" />
</li>
<li>
<img src="images/assets/05.jpg" class="fadeFour" alt="" />
</li>
<li>
<img src="images/assets/03.jpg" class="cubeJelly" alt="" />
</li>
</ul>
<div class="shadow"></div>
</div>
</div>
<div class="clear"></div>
<div class="services">
<div class="grid_3 alpha">
<div class="icon_service sv1"></div>
<h2>Cross-browser</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.</p>
</div><!-- end of service 1 -->
<div class="grid_3">
<div class="icon_service sv2"></div>
<h2>User friendly</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.</p>
</div><!-- end of service 3 -->
<div class="grid_3 omega">
<div class="icon_service sv3"></div>
<h2>Support</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.</p>
</div><!-- end of service 4 -->
<div class="clear"></div>
</div>
<h2>About us</h2>
<hr />
<img src="images/assets/001.png" alt="" class="img_border alignleft" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu lorem metus. Sed pharetra arcu ac velit rutrum at tempus est laoreet. Integer condimentum, ipsum in vehicula ultricies, risus elit volutpat magna, nec lacinia libero lacus eu mi. Donec in nisl massa, vitae pharetra magna. Quisque quis lorem ac velit pharetra aliquam. Aliquam nec lectus libero, at sodales urna. Maecenas lectus justo, viverra a luctus sit amet, facilisis a ante. Vivamus sed lorem sed mi ullamcorper bibendum. Vestibulum viverra odio non tellus rutrum a molestie nulla tincidunt. Pellentesque eleifend posuere tellus, vitae elementum dui tincidunt eu. Ut interdum aliquet purus, at pellentesque ipsum euismod vel. Pellentesque malesuada, sapien eget molestie eleifend, ante risus tempus ante, eu volutpat lorem lorem consectetur turpis. Sed gravida urna nec magna ullamcorper quis congue orci aliquet. Curabitur fringilla, sem viverra dignissim bibendum, felis turpis mollis neque, quis lacinia mauris libero non urna.</p>
<div class="clear"></div>
<div class="latest_works">
<h2>Latest Works</h2>
<hr />
<div class="grid_3 bg_plus alpha">
<a href="images/assets/0022.jpg" rel="crbox" class="work_image" title="Project name">
<img src="images/assets/8.jpg" alt="" />
</a>
<h3>Project title</h3>
<p>Curabitur et velit nisl. Donec semper e