index.html

<!doctype html>
<!--[if IE 8]> 				 <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
	<meta charset="UTF-8">
	<title>CROOP UI | A Flat UI Made with Compass & Sass</title>
	 <script src="js/modernizr.js"></script>
<!-- BLACK MAGIC FOR IE -->
	<!--[if IE]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	<link rel="stylesheet" href="css/styles.css">
<!-- WEBFONTS -->
	<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,900italic' rel='stylesheet' type='text/css'>
	<link href='http://fonts.googleapis.com/css?family=Rokkitt:400,700' rel='stylesheet' type='text/css'>
	<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,400,300,700' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="container">

	<h1 class="title">CROOP UI</h1>

<!-- HORIZONTAL NAVIGATION -->

<h3>Navigation</h3>
	<ul class="nav">
		<li><a href="#">Home</a></li>
		<li><a href="#">About Us</a></li>
		<li><a href="#">Services</a>
			<ul class="submenu">
				<li><a href="#">Web</a></li>
				<li><a href="#">Graphics</a></li>
			</ul>
		</li>
		<li><a href="#">Contact Us</a></li>
	</ul>

<!-- VERTICAL NAVIGATION -->

	<ul class="vnav">
		<li><a href="#">Home</a></li>
		<li><a href="#">About Us</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="#">Contact Us</a></li>
	</ul>


<!-- HORIZONTAL LINK LIST -->

	<ul class="hllist">
		<li><a href="#">Home</a></li>
		<li><a href="#">About Us</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="#">Contact Us</a></li>
	</ul>

<!-- ICON CIRCLE BUTTONS -->

	<ul class="icons">
		<li><a href="#">S</a></li>
		<li><a href="#">A</a></li>
		<li><a href="#">g</a></li>
		<li><a href="#">5</a></li>
	</ul>

<!-- ICON BUTTONS -->

	<ul class="iconsquare">
		<li><a href="#">S<b>Skype</b></a></li>
		<li><a href="#">A <b>Apple</b></a></li>
		<li><a href="#">g<b>GitHub</b></a></li>
		<li><a href="#">5 <b>Html5</b></a></li>
	</ul>

<!-- SOCIAL NETWORKS	 -->
	

	<ul class="snetwork">
		<li><a href="#" class="tw">T<b>Twitter</b></a></li>
		<li><a href="#" class="fb">f<b>Facebook</b></a></li>
		<li><a href="#" class="plus">+<b>Google +</b></a></li>
		<li><a href="#" class="igram">I<b>Instagram</b></a></li>
	</ul>

<!-- IMAGE CAPTION -->

<h3>Image Caption</h3>
<div id="gallery">
	<img src="img/frog.jpg" alt="A nice & Little Frog" >
	<div class="caption">
		s
		<b>A nice & little frog</b>
	</div>
</div>

<!-- FORM ELEMENTS -->
<h3>Forms</h3>
<div class="form">
	<input type="text" placeholder="Type Your Name" class="half"><input type="text" placeholder="Type Your Email" class="half">
	<input type="text" placeholder="Type Your Twitter Username">
	<textarea name="comment" id="" cols="30" rows="10" placeholder="Type Your Message"></textarea>
	<a href="#">Cancel</a><input type="submit" value="Submit" class="button">
</div>
<!-- TEXT ELEMENTS -->
<h3>Text Elements</h3>

<!-- CONTENT SLIDER -->
<div class="contentslider">
	<ul>
		<li>
			<h3>Samuel L. Ipsum</h3>
			<p>
				Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back when... You know why, David? Because of the kids. They called me Mr Glass.
			</p>
		</li>
	</ul>
	<div class="next"> > </div>
	<div class="prev"> < </div>
</div>

<!-- HEADINGS -->

<div class="headings">

	 <h1>Heading 1</h1>
	 <h2>Heading 2</h2>
	 <h3>Heading 3</h3>
	 <h4>Heading 4</h4>
	 <h5>Heading 5</h5>
	 <h6>Heading 6</h6>
	
</div>

<!-- TEXT PANEL -->

	<div class="panel">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio error tempora adipisci aspernatur assumenda dicta quidem! <a href="#">ipsum</a>, modi quia dolorem temporibus maxime quo vitae veritatis perferendis neque delectus. Deleniti, distinctio!
	</div>

<!-- BLOCKQUOTE -->
	<blockquote>
		And the raven, never flitting, still is sitting, still is sitting
On the pallid bust of Pallas just above my chamber door;
And his eyes have all the seeming of a demon's that is dreaming,
And the lamp-light o'er him streaming throws his shadow on the floor;
And my soul from out that shadow that lies floating on the floor
Shall be lifted - nevermore!
	</blockquote>

</div>


	<!-- ANALITYCS -->
	<script type="text/javascript">	var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
	document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
	</script><script type="text/javascript">var pageTracker = _gat._getTracker("UA-5205250-1");pageTracker._trackPageview();</script>
	<!-- /ANALITYCS -->


</body>
</html>