Preview - HTML - CSS

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Dejamor</title>

<link href="normalize.css" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Advent+Pro:600,500|Ruda' rel='stylesheet' type='text/css'>
<link href="style.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.22.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.uniform.min.js"></script>
<script type="text/javascript" src="js/init.js"></script>

</head>

<body>
<!-- #wrapper -->
<div id="wrapper">

	<!-- #header -->
	<div id="header">
	
		<h1><a href="#"><img src="images/header-logo.png" alt="Dejamor"></a></h1>
		<ul id="nav">
			<li><a href="#">About</a></li>
			<li><a href="#">In the box</a></li>
			<li><a href="#">FAQ</a></li>
			<li><a href="#">Ask our expert</a></li>
			<li class="alt"><a href="#">Subscribe</a></li>
		</ul>
		
	</div>
	<!-- /#header -->
	
	
	<!-- #survey -->
	<div id="survey">
	
		<p class="big">Lorem ipsum dolor sit amet, consectetuer adipiscing elit!</p>
		<p class="big alt">Consectetuer adipiscing elit consectetuer.</p>
		
		
		<ul>
			<li class="step1">
			
				<ul>
					<li>
						<span class="left">Lorum Ipsum:</span>
						<span class="right">
							<label><input type="checkbox"> Male</label>
							<label><input type="checkbox"> Female</label>
						</span>					
					</li>
					<li>
						<span class="left">Dolor sit amet:</span>
						<span class="right">
							<label><input type="checkbox"> Male</label>
							<label><input type="checkbox"> Female</label>
						</span>					
					</li>
					
					<li>				
						<ul>
							<li>
								<span class="left">How long have you been in a relationship?</span>
								<span class="right"><select><option>&lt; 1</option><option>1-5</option></select> <span class="black">Years</span></span>
							</li>
							<li>
								<span class="left">How many children do<br>you have?</span>
								<span class="right"><select><option>0</option><option>1-5</option></select></span>
							</li>
						</ul>						
					</li>
					
				</ul>
				
			</li>
			
			
			<li class="step2">
			
				<h2>Sexual Openness:</h2>
				
				<ul class="q1">
					<li class="left">
						<p>I rarely talk about sex with my partner</p>
					</li>
					<li class="middle">
						<div class="slider"></div>
					</li>
					<li class="right">
						<p>I talk to strangers about my sex life</p>
					</li>
				</ul>
			
				<h2>Props / Toys:</h2>
				
				<ul class="q2">
					<li class="left">
						<p>I would never use a sex toy</p>
					</li>
					<li class="middle">
						<div class="slider"></div>
					</li>
					<li class="right">
						<p>I've tried pretty much<br>every at the sex store</p>
					</li>
				</ul>
			
				<h2>Sexual Openness:</h2>
				
				<ul class="q3">
					<li class="left">
						<p>I'm conservatice and don't<br>enjoy pushing boundaries</p>
					</li>
					<li class="middle">
						<div class="slider"></div>
					</li>
					<li class="right">
						<p>I'll try anything at least once</p>
					</li>
				</ul>
			
			
				<!-- .end -->
				<div class="end">
				
					<p><input type="button" value="Submit"></p>
					
					<p>Thank you for your time!</p>
					
				</div>
				<!-- /.end -->
				
			
			</li>
			
		</ul>
		
	
	</div>
	<!-- /#survey -->
	
	
</div>
<!-- /#wrapper -->

<!-- #footer -->
<div id="footer">

	<!-- .rowAbove -->
	<div class="rowAbove">
	
		<!-- .inner -->
		<ul class="inner">
		
			<li class="col1">
			
				<ul>
					<li><a href="#">Home</a></li>
					<li><a href="#">About</a></li>
					<li><a href="#">Q&amp;A</a></li>
					<li><a href="#">In The Box</a></li>
					<li><a href="#">Subscribe</a></li>
					<li><a href="#">Feedback</a></li>
					<li><a href="#">Terms</a></li>
					<li><a href="#">Privacy Policy</a></li>
					<li><a href="#">Contact</a></li>
					<li class="socialMedia">
						<ul>
							<li><a href="#"><img src="images/icon-facebook.png" alt=""></a></li>
							<li><a href="#"><img src="images/icon-twitter.png" alt=""></a></li>
							<li><a href="#"><img src="images/icon-mail.png" alt=""></a></li>
							<li><a href="#"><img src="images/icon-pinterest.png" alt=""></a></li>
							<li><a href="#"><img src="images/icon-tumblr.png" alt=""></a></li>
							<li><a href="#"><img src="images/icon-googleplus.png" alt=""></a></li>
						</ul>
					</li>
				</ul>
			
			</li>
			
			<li class="col2">
			
				<ul>
					<li>
						<p><a href="#">@loremipsum:</a> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat :)</p>
						<p class="date">at 16:05 on July 20, 2012</p>
					</li>
					<li>
						<p><a href="#">@loremipsum:</a> Jowl pig tri-tip hamburger, cow andouille boudin biltong short loin ground round kielbasa shoulder spare ribs beef ball tip. Shankle turkey venison, pork chop shank filet mignon bacon boudin capicola chuck corned beef.</p>
						<p class="date">at 16:05 on July 20, 2012</p>
					</li>
					<li>
						<p><a href="#">@loremipsum:</a>  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat :)</p>
						<p class="date">at 16:05 on July 20, 2012</p>
					</li>
				</ul>
			
			</li>
			
			<li class="col3">
			
			<form>
			
				<h2>Joint our Newsletter</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua!</p>
				<p class="center"><input placeholder="E-mail" type="text" id="userEmail"></p>
				<p class="center"><input type="button" value="Submit"></p> 
				
			</form>
			
			</li>
		
		</ul>
		<!-- /.inner -->
	
	</div>
	<!-- /.rowAbove -->
	
	<!-- .rowBelow -->
	<div class="rowBelow">
	
		<!-- .inner -->
		<div class="inner">
	
			<p>&copy; 2012 RC Labs, Inc. All rights reserved</p>
		
		</div>
		<!-- /.inner -->
	
	</div>
	<!-- /.rowBelow -->

</div>
<!-- /#footer -->

<p style="position: fixed; top: 20px; right: 120px;" >
	<a href="http://validator.w3.org/check?uri=https%3A%2F%2Fwww.psdtohtmlshop.com%2FExamples%2FExample-27%2Findex.html" rel="nofollow" target="_blank" >
		<img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88" />
	</a>
</p>

<p style="position: fixed; top: 20px; right: 10px;">
	<a href="http://jigsaw.w3.org/css-validator/" rel="nofollow" target="_blank" >
   	<img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valide CSS!" />
   </a>
</p>

</body>
</html>