<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>Elements - Moderna</title>
<meta name="description" content="Moderna premium creative responsive site template" />
<meta name="author" content="pixel-industry" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1" />
<meta name="viewport" content="width=device-width" />
<!-- favicon -->
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<!-- Stylesheets -->
<link rel="stylesheet" href="css/960_12_col.css" media="screen" />
<link rel="stylesheet" href="css/reset.css" media="screen" />
<link rel="stylesheet" href="css/style.css" media="screen" />
<link rel="stylesheet" href="css/jquery-ui-1.8.22.custom.css" media="screen" />
<link rel="stylesheet" href="css/accordion.css" media="screen" />
<link rel="stylesheet" title="activestyle" href="css/default-blue.css" media="screen" /> <!--default blue color style-->
<link rel="stylesheet" href="style-switcher/styleSwitcher.css" media="screen" />
<!--[if IE 7]>
<link rel="stylesheet" href="css/ie7.css" media="screen" />
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" href="css/ie8.css" media="screen" />
<![endif]-->
<!--[if IE 9]>
<link rel="stylesheet" href="css/ie9.css" media="screen" />
<![endif]-->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
<!-- google web fonts -->
<link href='http//fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css' />
<link href='http//fonts.googleapis.com/css?family=Droid+Serif:400,400italic,700,700italic' rel='stylesheet' type='text/css' />
<link href='http//fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css' />
<!-- js files -->
<script src="js/jquery-1.7.2.js"></script> <!-- jQuery 1.7.2 -->
<script src="js/jquery.tweetscroll.js"></script> <!-- jQuery tweetscroll plugin -->
<script src="js/socialstream.jquery.js"></script> <!-- Social Networks Feeds -->
<script src="js/jquery.toggle.js"></script> <!-- jQuery Toggle plugin -->
<script src="js/include.js"></script> <!-- jQuery custom options -->
<script src="style-switcher/styleSwitcher.js"></script><!-- Style Switcher plugin -->
<!-- end js files -->
</head>
<body>
<!-- style switcher start -->
<section id="style-switcher">
<section id="styles-container">
<section>
<h6>Color Style</h6>
<ul class="styles-list">
<li class="default-blue">1</li>
<li class="chocolate">2</li>
<li class="dark-blue">3</li>
<li class="dark-green">4</li>
<li class="green">5</li>
<li class="orange">6</li>
<li class="pink">7</li>
<li class="purple">8</li>
<li class="red">9</li>
<li class="yellow">10</li>
</ul>
</section>
<section>
<h6>Skin</h6>
<ul class="skin-list">
<li class="streched active"><a href="#">Stretched</a></li>
<li class="boxed"><a href="../Boxed/elements.html">Boxed</a></li>
</ul>
</section>
<section>
<h6>Pattern</h6>
<select id="pattern-list">
<option value="pattern1" />Dark Sketch
<option value="pattern2" />Dark Wood
<option value="pattern3" />Light Sketch
<option value="pattern4" />Light Dust
<option value="pattern5" />Light Wood
<option value="pattern6" />Subtle Dots
<option value="pattern7" />Concrete Wall
<option value="pattern8" />Cross Scratch
<option value="pattern9" />Dark Denim
<option value="pattern10" />Grid Noise
<option value="pattern11" />Light Mesh
<option value="pattern12" />Geometric
<option value="pattern13" />Subtle Net
<option value="pattern14" />Light brick
<option value="pattern15" />Always Grey
</select>
</section>
</section>
<a href="#" id="styles-button"><div id="switcher-logo"></div></a>
</section><!-- style switcher end -->
<!-- header wrapper start -->
<section id="header-wrapper">
<!-- header start -->
<header id="header" class="clearfix">
<!-- logo start -->
<section id="logo">
<a href="index.html">
logo
</a>
</section><!-- logo end -->
<!-- social icons start -->
<ul class="social">
<li class="dribble">
<a href="#">dribble</a>
</li>
<li class="facebook">
<a href="#">facebook</a>
</li>
<li class="pinterest">
<a href="#">pinterest</a>
</li>
<li class="twitter">
<a href="#">twitter</a>
</li>
</ul><!-- social icons end -->
<!-- main navigation container start -->
<section id="nav-container">
<!-- main navigation start -->
<nav id="nav">
<ul>
<li><a href="index.html">Home</a></li>
<li>
<a href="#">About</a>
<ul>
<li> <a href="about.html">About us</a></li>
<li><a href="services.html">Our services</a></li>
</ul>
</li>
<li>
<a href="#">Portfolio</a>
<ul>
<li><a href="portfolio2.html">Portfolio 2 col</a></li>
<li><a href="portfolio3.html">Portfolio 3 col</a></li>
<li><a href="portfolio4.html">Portfolio 4 col</a></li>
<li><a href="portfoliosingleshowcase.html">Portfolio with showcase</a></li>
<li><a href="portfoliosingle2.html">Portfolio single</a></li>
<li><a href="portfoliosingle.html">Portfolio single simple</a></li>
</ul>
</li>
<li>
<a href="#">Blog</a>
<ul>
<li><a href="blog.html">Blog</a></li>
<li><a href="blogsingle.html">Blog single</a></li>
</ul>
</li>
<li class="active">
<a href="#">Features</a>
<ul>
<li><a href="columns.html">Columns</a></li>
<li><a href="elements.html">Elements</a></li>
<li><a href="media.html">Media</a></li>
<li><a href="">Example Of</a>
<ul>
<li><a href="#">Third Level</a></li>
</ul>
</li>
</ul>