Portfolio

						
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>IWYS</title>
	<link rel="stylesheet" type="text/css" href="css/styles.css" media="all" />
	<!--[if lt IE 9]><link rel="stylesheet" type="text/css" href="css/ie.css" /><![endif]-->
</head>
<body>
	<div id="header">
		<div class="center">
			<div class="container">
				<h1 class="logo"><a href="#">IWEARYOURSHIRT.COM</a></h1><!--logo-->
				<div class="holder">
					<div class="container">
						<ul class="social-list">
							<li><a href="#">TWITTER</a></li>
							<li><a href="#">FACEBOOK</a></li>
							<li><a href="#">YOUTUBE</a></li>
							<li><a href="#">FLICKR</a></li>
							<li><a href="#">CONTACT</a></li>
							<li><a href="#" class="cart"><img src="images/ico-cart.gif" alt="" width="8" height="13" />YOUR CART</a></li>
						</ul><!--social-box-->
					</div>
					<div class="container">
						<ul id="nav">
							<li><a href="#">TODAY’S SHIRT</a></li>
							<li><a href="#">CALENDAR</a></li>
							<li><a href="#">LIVE</a></li>
							<li><a href="#">HOW IT WORKS</a></li>
							<li><a href="#">BUY A DAY</a></li>
							<li><a href="#">SHOP</a></li>
						</ul>
					</div><!--nav-->
				</div>
			</div>
			<div class="container">
				<h2 class="slogan"><a href="#">GET A YouTube VIDEO MADE FOR YOUR COMPANY!</a></h2><!--slogan-->
				<ul class="user-offers">
					<li>
						<span class="popup">1 video</span>
						<span class="price">$249</span>
						<a href="#">BUY NOW</a>
						<span>(140 Available)</span>
					</li>
					<li>
						<span class="popup">4 videos</span>
						<span class="price">$899</span>
						<a href="#">BUY NOW</a>
						<span>(30 Available)</span>
					</li>
				</ul><!--user-offers-->
			</div>
		</div>
	</div><!--header-->
	<div class="three-columns">
		<div class="holder">
			<div class="frame">
				<div class="col">
					<div class="title"><strong>STEP 1</strong></div><!--title-->
					<div class="text">
						<a class="img" href="#"><img src="images/ico01.gif" alt="" width="64" height="64" /></a>
						<p>Lorem ipsum dolor sit amet, vel elementum varius aliquet, tortor donec massa risus molestie ma uris, vitae nulla ridiculus nulla in nonummy aliquam. Et nec a suscipit vel vo lutpat ligula. Justo semper mau ris inceptos aliquam non praesent. Ut elemen tum tristique <a href="#"> Lectus Vulputate</a> wollicitu.</p>
					</div><!--text-->
				</div><!--col-->
				<div class="col mid">
					<div class="title"><strong>STEP 2</strong></div><!--title-->
					<div class="text">
						<a class="img" href="#"><img src="images/ico02.gif" alt="" width="64" height="64" /></a>
						<p>Lorem ipsum dolor sit amet, vel elementum varius aliquet, tortor donec massa risus molestie ma uris, vitae nulla ridiculus nulla in nonummy aliquam. Et nec a suscipit vel vo lutpat ligula. Justo semper mau ris inceptos aliquam non praesent. Ut elemen tum tristique <a href="#"> Lectus Vulputate</a> wollicitu.</p>
					</div><!--text-->
				</div><!--mid-->
				<div class="col">
					<div class="title"><strong>STEP 3</strong></div><!--title-->
					<div class="text">
						<a class="img" href="#"><img src="images/ico03.gif" alt="" width="64" height="64" /></a>
						<p>Lorem ipsum dolor sit amet, vel elementum varius aliquet, tortor donec massa risus molestie ma uris, vitae nulla ridiculus nulla in nonummy aliquam. Et nec a suscipit vel vo lutpat ligula. Justo semper mau ris inceptos aliquam non praesent. Ut elemen tum tristique <a href="#"> Lectus Vulputate</a> wollicitu.</p>
					</div><!--text-->
				</div><!--col-->
			</div>
		</div>
	</div><!--three-columns-->
	<div class="box">
		<div class="holder">
			<div class="frame">
				<h3 class="title">DID YOU KNOW?</h3>
				<div class="two-cols">
					<div class="holder">
						<div class="col">
							<div class="img">
								<img src="images/graph.png" alt="" width="171" height="165" />
							</div>
							<div class="container">
								<strong>60% OF PEOPLE</strong>
								<p class="color01">will click a video and watch before reading a post.</p>
							</div>
						</div>
						<div class="col">
							<div class="img">
								<img src="images/ico-google.png" alt="" width="158" height="165" />
							</div>
							<div class="container">
								<strong class="ttl">Having a YouTube video</strong>
								<strong class="small">INCREASES GOOGLE</strong>
								<p>Front Page Results by <span>53X</span></p>
							</div>
						</div>
					</div>
				</div><!--two-cols-->
			</div>
		</div>
	</div><!--box-->
	<div class="videos-box">
		<div class="img">
			<img src="images/img01.jpg" alt="" width="375" height="336" />
		</div>
		<div class="holder">
			<strong>OUR VIDEO CREATORS HAVE CREATED</strong>
			<span class="views">1,000<span>+</span>VIDEOS</span>
			<p>AMASSING <span>6,500,000+</span> VIEWS!</p>
		</div>
	</div><!--videos-box-->
	<div class="video-list">
		<ul>
			<li><img src="images/video01.jpg" alt="" width="136" height="103" /></li>
			<li><img src="images/video02.jpg" alt="" width="136" height="103" /></li>
			<li><img src="images/video03.jpg" alt="" width="136" height="103" /></li>
			<li><img src="images/video04.jpg" alt="" width="136" height="103" /></li>
		</ul>
		<span class="title">SAMPLE VIDEOS</span>
	</div><!--videos-list-->
	<div class="box">
		<div class="holder">
			<div class="frame">
				<div class="bottom-box">
					<div class="user-info">
						<div class="col">
							<span class="popup">1 video</span>
							<strong>$249</strong>
							<a href="#">BUY NOW</a>
						</div>
						<div class="col ar">
							<span class="popup">4 videos</span>
							<strong>$899</strong>
							<a href="#">BUY NOW</a>
						</div>
					</div>
					<div class="user-box">
						<div class="holder">
							<div class="frame">
								<div class="title01">
									<h3>WHAT DO YOU GET?</h3>
								</div>
								<div class="container">
									<div class="col">
										<h4>HD VIDEO</h4>
										<p>Lorem ipsum dolor sit amet, proin wisi sollicitudin dolorum, rutrum ac pedeaugue. Ultrices odio donec ac molestie, tems Dolor eget montes ut non, pa esent convallm ad arcu. tuyi <a href="#">mcorpersus pellentesque moduis leo lacus sit.</a></p>
									</div>
									<div class="col">
										<h4>SEO HELP</h4>
										<p>Pellentesque ultrices nunc, suspendisse mi id molestiae eget. <a href="#">Sollicitudin posuere</a> libero mi sociis quisque, nisl iaculis massa gravida sit auctor mo erat aut commodo. Quis nulla fames parturient, arcu vestibulum sed</p>
									</div>
									<div class="col">
										<h4>PROMOTION</h4>
										<p>Lorem ipsum dolor sit amet, proin wisi sollicitudin dolorum, rutrum ac pedeaugue. Ultrices odio donec ac molestie, tems Dolor eget montes ut non.</p>
										<ul>
											<li><a href="#"><img src="images/ico-facebook.gif" alt="" width="41" height="40" /></a></li>
											<li><a href="#"><img src="images/ico-twitter.gif" alt="" width="41" height="40" /></a></li>
											<li><a href="#"><img src="images/ico04.gif" alt="" width="55" height="43" /></a></li>
										</ul>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div><!--box-->
	<div class="sponsors">
		<div class="block">
			<div class="headihg">
				<h4>OUR WORK HAS BEEN TALKED ABOUT BY THESE GUYS</h4>
			</div>
			<ul class="list">
				<li><a href="#"><img src="images/ico-1.gif" width="109" height="22" alt="image" /></a></li>
				<li><a href="#"><img src="images/ico-2.gif" width="161" height="22" alt="image" /></a></li>
				<li><a href="#"><img src="images/ico-3.gif" width="128" height="22" alt="image" /></a></li>
				<li><a href="#"><img src="images/ico-4.gif" width="169" height="22" alt="image" /></a></li>
				<li><a href="#"><img src="images/ico-5.gif" width="73" height="22" alt="image" /></a></li>
				<li><a href="#"><img src="images/ico-6.gif" width="62" height="22" alt="image" /></a></li>
				<li><a href="#"><img src="images/ico-7.gif" width="109" height="22" alt="image" /></a></li>
			</ul>
		</div>
		<div class="about">
			<h4>ABOUT IWEARYOURSHIRT.COM</h4>
			<div class="text">
				<img src="images/img-013.gif" width="50" height="40" alt="image" />
				<p>Lorem ipsum dolor sit amet, sed minim, ac n ec, dignissim vestibulum et pede pellentes que leo, laoreet condimentum eget ut facil isis quis. Dictum at. Sapien nec quisque rutrum, felis exercitation ipsum ante, placerat male suada phasellus vel et, proin t ut facilisis.</p>
			</div>
		</div>
	</div>
	<div id="footer">
		<div class="holder">
			<div class="copy-box">
				<p>Copyright 2012 . iwearyourshirt.com . All Rights Reserved</p>
				<ul>
					<li><a href="#">Buy A Day</a></li>
					<li><a href="#">How It Works</a></li>
					<li><a href="#">Contact Us</a></li>
					<li><a href="#">Terms & Conditions</a></li>
					<li><a href="#">idesignyourlogo.com</a></li>
				</ul>
			</div>
		</div>
	</div><!-- footer end -->
</body>
</html>
						
                

@font-face {
	font-family:'Gotham';
	src:url('../font/gotham-medium-webfont.eot');
	src:url('../font/gotham-medium-webfont.eot?#iefix') format('embedded-opentype'),
		url('../font/gotham-medium-webfont.woff') format('woff'),
		url('../font/gotham-medium-webfont.ttf')  format('truetype'),
		url('../font/gotham-medium-webfont.svg#svgGotham') format('svg');
}
body{
	margin:0;
	color:#4d4d4d;
	font:13px/19px Arial, Helvetica, sans-serif;
	min-width:1060px;
	background: url(../images/bg-body.gif);
}
img{
	border-style:none;
}
input,textarea,select{
	color:#4a4949;
	vertical-align:middle;
	font:100% Arial, Helvetica, sans-serif;
}
form,fieldset{
	margin:0;
	padding:0;
	border-style:none;
}
a{
	color:#379a48;
	text-decoration:none;
}
a:hover{
	text-decoration:underline;
}
a:focus,
input:focus,
textarea:focus,
select:focus{
	outline:none;
}
#header{
	background: url(../images/bg-header.jpg) repeat-x;
	min-height:173px;
	padding: 29px 0 20px;
}
#header .holder{
	overflow:hidden;
	padding-bottom:24px;
}
.center{
	width:1050px;
	margin:0 auto;
	overflow:hidden;
}
.logo{
	margin:0;
	overflow:hidden;
	text-indent:-9999px;
	background:url(../images/logo.gif) no-repeat;
	width:247px;
	height:60px;
	float:left;
}
.logo a{
	display:block;
	height:100%;
}
.container{
	overflow:hidden;
}
#header .container{
	padding-top:2px;
}
.social-list{
	float:right;
	margin:0 -8px 0 0;
	padding:0;
	list-style:none;
}
.social-list li{
	background: url(../images/sep04.gif) no-repeat 0 50%;
	float:left;
	padding:0 8px;
	font:10px/16px "Gotham", Arial, Helvetica, sans-serif;
}
.social-list li:first-child{
	background:none;
}
.social-list li a{
	color:#787878;
}
.social-list li a:hover{
	text-decoration:none;
	color:#379a48;
}
.social-list li img{
	float:left;
	margin:1px 6px 0 0;
}
#nav{
	float:right;
	margin:0;
	padding:10px 0 0;
	list-style:none;
}
#nav li{
	float:left;
	padding:0 0 0 23px;
	font:21px/25px "akzidenzgrotesk", Arial, sans-serif;
}
#nav a{
	color:#646464;
}
#nav a:hover{
	text-decoration:none;
	color:#379a48;
}