Quobu view live demo

Quobu is a media agency specialized in the design and development of any type of cloud application. They came up with a unique brand and a sweet little mascot to go along with it. For the front end HTML5 and CSS3 was written, and the site looks great in older browsers too.

HTML Code

						
<!DOCTYPE html>
<html lang="en">
	<head>
		<!-- ================ Basic Page Needs ================ -->
		<meta charset="utf-8">
    	<title>Home Page Template - Quobu</title>		
		
		<!-- ================ Stylesheets ================ -->
		<link rel="stylesheet" href="style/screen.css" media="screen"/>
		<link rel="stylesheet" href="style/custom.css" media="screen"/>
		<link rel="stylesheet" href="style/form.css" media="screen"/>
		<!--[if lt IE 10 ]><link rel="stylesheet" href="style/oldie.css"><![endif]-->

		<!-- ================ Scripts ================ -->
		<script src="js/modernizr.js"></script>		
	</head>

	<body>
		<div class="wrapper">
			<!-- Page Top Section -->
			<div class="page-top">
				<div class="container">
					<nav>
						<ul>
							<li class="active"><a href="index.html"><span>Home</span></a></li>
							<li><a href="#"><span>Who</span></a></li>
							<li><a href="what-we-do.html"><span>What</span></a></li>
							<li><a href="#"><span>Showcase</span></a></li>
							<li><a href="pricing.html"><span>Pricing</span></a></li>
							<li><a href="#"><span>Blog</span></a></li>
							<li><a href="contact.html"><span>Contact</span></a></li>
						</ul>
					</nav>
					<div class="utils">
						<ul class="languages">
							<li><a href="#">English</a></li>
							<li><a href="#">Nederlands</a></li>
							<li><a href="#">Français</a> </li>
							<li><a href="#">Deutch</a></li>
							<li><a href="#">Italian</a></li>						
						</ul>				
						<p class="contact">contact us <a href="#">Online</a></p>
						<form action="#" class="search-site">
							<p>
								<input type="text" value="Search"/>
								<input type="submit" value=""/>
							</p>
						</form>
					</div>
				</div>			
			</div>
			
			<!-- Page Header Section -->
			<div class="page-header">
				<header class="container">
					<figure>
						<a href="index.html">
							<img src="images/logo.png" alt="Quobu"/>
						</a>
					</figure>
					<p class="social">
						<a href="#" class="facebook"></a>
						<a href="#" class="twitter"></a>
						<a href="#" class="google"></a>
					</p>
				</header>
			</div>
			
			<!-- Page Featured Section -->
			<div class="page-featured slider-container">
				<section class="container">
					<article class="intro">
						<hgroup>
							<h2>Professional Cloud</h2>
							<h3>Consulting & Development</h3>
						</hgroup>
						<p class="slogan">At vero eos et accusamus et iusto odio dignissimos <br/>ducimus qui blanditiis praesentium</p>
						<p class="free-quote"><a href="#">Request FREE Quote</a></p>
						<blockquote>
							<p class="quote-text">At vero eos et accusamus et iusto odio dignissimos <br/>ducimus qui blanditiis.</p>
							<p class="quote-author">- Thomas Bartke  </p>
						</blockquote>					
					</article>
					
					<article class="slider">
						<div class="slides">
							<!-- Slide #1 -->
							<div class="slide">
								<h3>Showcase: <strong>HouseRental.com</strong></h3>
								<figure>
									<img src="images/img1.jpg" alt="House Rental"/>
									<span class="overlay"></span>
									<a class="visit" href="#">View Website <span>»</span></a>
								</figure>	
								<p>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod 
									maxime placeat facere.</p>					
							</div>
							
							<!-- More code following the same markup as the previous <DIV> element -->
						</div>
						<div class="slidetabs">
							<a href="#"></a>
							<a href="#"></a>
							<a href="#"></a>
							<a href="#"></a>
						</div>			
					</article>
				</section>			
			</div>
			
			<!-- Page Main Content Section -->
			<div class="page-content">
				<div class="container">
					<div class="articles alpha">
						<article>
							<h3>Who We Are?</h3>
							<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque 
								corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in 
								culpa qui officia deserunt mollitia animi.</p>
	
							<p>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio 
								cumque nihil impedit quo minus. For des Voluptatum deleniti atque corrupti quos dolores et quas.  Nam libero 
								tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus. <a href="#">Read More</a></p>
						</article>
						
						<article>
							<h3>Our Pricing</h3>
							<ul class="tag-list">
								<li>
									<h5>Hybrid Salesmodel</h5>
									<p>vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis ether praesentium voluptatum deleniti atque 
										atque corrupti quos dolores et quas molestias excepturi sint.</p>
								</li>
								<li>
									<h5>Profit-sharing Sales Model</h5>
									<p>vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis ether praesentium voluptatum deleniti atque atque corrupti 
										quos dolores et quas molestias excepturi sint.</p>
								</li>
							</ul>
						</article>
					</div>
					<div class="articles omega">
						<article>
							<h3>What We Do?</h3>
							<ul class="what-we-do-list">
								<li class="icon1">
									<h4>Consulting</h4>
									<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos 
										dolores et quas molestias excepturi sint occaecati cupiditate non provident. <a href="#">Read More</a></p>
								</li>
								<li class="icon2">
									<h4>Development</h4>
									<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos 
										dolores et quas molestias excepturi sint occaecati cupiditate non provident. <a href="#">Read More</a></p>
								</li>
								<li class="icon3">
									<h4>Marketing</h4>
									<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos 
										dolores et quas molestias excepturi sint occaecati cupiditate non provident. <a href="#">Read More</a></p>
								</li>
								<li class="icon4">
									<h4>Content Management</h4>
									<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos 
										dolores et quas molestias excepturi sint occaecati cupiditate non provident. <a href="#">Read More</a></p>
								</li>
								<li class="icon5">
									<h4>Localization</h4>
									<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos 
										dolores et quas molestias excepturi sint occaecati cupiditate non provident. <a href="#">Read More</a></p>
								</li>
							</ul>
						</article>
					</div>
				</div>
			</div>
			
			<!-- Clients Section -->
			<div class="page-clients">
				<div class="container">
					<div class="clients">
						<h3>Our Clients</h3>
						<div class="list">
							<a class="prev" href="#"></a>
							<ul>
								<li><a href="#"><img src="images/client1.jpg" alt=""/></a></li>
								<li><a href="#"><img src="images/client2.jpg" alt=""/></a></li>
								<li><a href="#"><img src="images/client3.jpg" alt=""/></a></li>
								<li><a href="#"><img src="images/client4.jpg" alt=""/></a></li>
								<li><a href="#"><img src="images/client5.jpg" alt=""/></a></li>
							</ul>
							<a class="next" href="#"></a>
						</div>
					</div>
				</div>
			</div>
			
			<!-- Page Bottom Section -->
			<div class="page-bottom">
				<div class="page-bottom-inner">
					<div class="container">
						<div class="penguins">
							<!-- Dynamically Generated Mascots -->
							<div class="penguin1" style="top:31px; left: 15px;"></div>
							<div class="penguin5" style="top:0; left: 48px;"></div>
							<div class="penguin1" style="top:22px; left: 106px;"></div>
							<div class="penguin1" style="top:51px; left: 135px;"></div>
							<div class="penguin5" style="top:3px; left: 157px;"></div>
							<div class="penguin3" style="top:17px; left: 214px;"></div>
							
							<div class="penguin4" style="top:20px; left: 316px;"></div>
							<div class="penguin1" style="top:63px; left: 361px;"></div>
							<div class="penguin4" style="top:23px; left: 386px;"></div>
							
							<div class="penguin1" style="top:51px; left: 657px;"></div>
							<div class="penguin4" style="top:23px; left: 693px;"></div>
							
							<div class="penguin1" style="top:29px; left: 826px;"></div>
							<div class="penguin4" style="top:17px; left: 859px;"></div>
							<div class="penguin2" style="top:20px; left: 911px;"></div>
						</div>
						<div class="group">
							<!-- Navigation -->
							<section>
								<h5>Navigation</h5>
								<ul class="arrow-list">
									<li><a href="#">Who we are</a></li>
									<li><a href="#">What we do</a></li>
									<li><a href="#">Showcase</a></li>
									<li><a href="#">Pricing</a></li>
									<li><a href="#">Blog</a></li>
								</ul>
							</section>
							
							<!-- Our Services -->
							<section>
								<h5>Our Services</h5>
								<ul class="arrow-list">
									<li><a href="#">Consulting</a></li>
									<li><a href="#">Development</a></li>
									<li><a href="#">Marketing</a></li>
									<li><a href="#">Content Management</a></li>
									<li><a href="#">Localization</a></li>								
								</ul>
							</section>
							
							<!-- Contact Us -->
							<section>
								<h5>Contact Us</h5>
								<ul class="contact-details">
									<li class="phone">
										0800-8-567890
									</li>
									<li class="mail">
										<a href="#">info@quobu.com</a>
									</li>
									<li class="address">
										Platanendreef 30<br/>
										9090 Gent<br/>
										Belgium
									</li>
								</ul>
							</section>
							
							<!-- Latest Tweets -->
							<section class="last twitter-feed">
								<h5>Latest Tweets and Blogs Stuff</h5>
								<ul>
									<li>
										<a href="#">@designpx</a> We can't say I'm afraid. It's definitely something actively being looked at though,
										but it's tricky! ^DP									
									</li>
									<li>
										<a href="#">@designpx</a> We can't say I'm afraid. It's definitely something actively being looked at though,
										but it's tricky! ^DP									
									</li>
								</ul>
							</section>
						</div>					
					</div>			
				</div>
			</div>
			
			<!-- Page Footer Section -->
			<div class="page-footer">
				<footer class="container">
					<p>Copyright © 2012 - QUOBU.com - all rights reserved.</p>
				</footer>
			</div>
			
			<!-- ================ SCRIPTS ================ -->
			<script src="js/jquery-1.7.1.min.js"></script>
			<script src="js/jquery.tools.min.js"></script>
			<script src="js/script.js"></script>
			
			<script>
				jQuery(document).ready(function($){	setUpMainPageSlider();	});
			</script>
		</div>
	</body>
</html>
						
					

CSS Code

						
/*** Fonts Used ***/
@font-face {
    font-family: 'CreteRoundRegular';
    src: url('fonts/CreteRound/CreteRound-Regular-webfont.eot');
    src: url('fonts/CreteRound/CreteRound-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/CreteRound/CreteRound-Regular-webfont.woff') format('woff'),
         url('fonts/CreteRound/CreteRound-Regular-webfont.ttf') format('truetype'),
         url('fonts/CreteRound/CreteRound-Regular-webfont.svg#CreteRoundRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'OpenSansCondensedBold';
    src: url('fonts/OpenSansCondensed/OpenSans-CondBold-webfont.eot');
    src: url('fonts/OpenSansCondensed/OpenSans-CondBold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSansCondensed/OpenSans-CondBold-webfont.woff') format('woff'),
         url('fonts/OpenSansCondensed/OpenSans-CondBold-webfont.ttf') format('truetype'),
         url('fonts/OpenSansCondensed/OpenSans-CondBold-webfont.svg#OpenSansCondensedBold') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*** General Styles ***/
body {
	background: url('images/body-bg.jpg') repeat-x left top #ecf7fd;
	font: normal 13px/1.6em 'Arial','Helvetica',sans-serif;
	min-width: 970px; 
	color: #647b88;
	text-shadow: 1px 1px 2px #fff;
}

h1, h2, h3, h4, h5 { padding-bottom: 0.4em; }

h2 {
	font: normal 40px/1.6em 'CreteRoundRegular','Georgia',serif;
	color: #07151f;
	text-shadow: 1px 1px 1px #83aec5;
}

h3 {
	font: normal 27px/1.6em 'CreteRoundRegular','Georgia',serif;
	color: #ae1414;
	padding-bottom: 25px;
}

h4 {
	font: bold 21px/1.5em 'Arial','Helvetica',sans-serif;
	color: #2d6f96;
	padding-bottom: 0.8em;
}

h5 {
	font: bold 15px/1.4em 'Arial','Helvetica',sans-serif;
	color: #2d77a4;
}

a:link, a:visited { text-decoration: none; color: #0677b8; outline: none; }
a:hover { color: #ae1414; }

p, ul, ol { padding-bottom: 1.4em; }

blockquote { 
	background: url('images/quote.png') no-repeat left top;
	font-style: italic; 
	padding: 3px 0 0 35px;
}

blockquote p.quote-text { line-height: 1.31em; padding-bottom: 10px; }
blockquote p.quote-author {
	color: #040404;
	font-size: 12px;
	font-weight: bold;
}


/*** Page Outer Wrap ***/
div.wrapper {
	background: url('images/page-bg.jpg') no-repeat center top;
}


/*** Page Top Section ***/
div.page-top { 
	background: url('images/page-top-sprite.png') repeat-x left -234px; 
	position: relative;
	z-index: 999999;	
}


/* Page Navigation */
div.page-top nav { overflow: hidden; padding-top: 8px; }
div.page-top nav ul { background: url('images/page-top-icons.png') no-repeat -26px -136px; float: left; padding: 0 2px; }
div.page-top nav ul li { background: url('images/page-top-icons.png') no-repeat right -136px; padding-right: 2px; float: left }
div.page-top nav ul li a {	 
	color: #fff; 
	display: block;
	font: normal 15px/1.3em 'Arial','Helvetica', sans-serif;
	text-shadow: 1px 1px 1px #213642;
	padding: 0 12px 0 0; 
	margin: 0 5px 0 3px;
}

div.page-top nav ul li a:hover, div.page-top nav ul li a:hover span, div.page-top nav ul li.active a, div.page-top nav ul li.active a span { background: url('images/page-top-sprite.png') no-repeat 0 0; }
div.page-top nav ul li a:hover { background-position: right -45px; text-shadow: 1px 1px 1px #132733; } 
div.page-top nav ul li a:hover span { background-position: left top; }
div.page-top nav ul li a span { display: block; padding: 11px 0 13px 14px; }

div.page-top nav ul li.active a { background-position: right -157px; text-shadow: 1px 1px 1px #710000; }
div.page-top nav ul li.active a span { background-position: left -94px; padding: 11px 10px 30px 24px; }

/* Utils Section */
div.page-top div.utils {
	background: url('images/page-top-sprite.png') repeat-x left -320px #aec6d7;
	border-width: 0 1px 1px 1px;
	border-color: #e8e9e9;
	border-style: solid;
	padding: 25px 15px 15px;
	min-width: 270px;
	max-width: 310px;
	position: absolute;
	right: 0;
	top: 0;
	text-align: right;
	-moz-border-radius: 0px 0px 5px 5px;
	-webkit-border-radius: 0px 0px 5px 5px;
	border-radius: 0px 0px 5px 5px;
	-webkit-box-shadow: 2px 2px 3px 0 #bfcdd5;
	-moz-box-shadow: 2px 2px 3px 0 #bfcdd5;
	box-shadow: 2px 2px 3px 0 #bfcdd5;
}

div.page-top div.utils a { color: #ae1414; }
div.page-top div.utils a:hover { color: #054f79; }

div.page-top div.utils p, div.page-top div.utils a { text-shadow: 1px 1px 1px #d9edfa; }

div.page-top div.utils ul.languages, div.page-top div.utils p { text-shadow: 1px 1px 1px #d3e8f5; }
div.page-top div.utils ul.languages { 
	background: url('images/page-top-icons.png') no-repeat right 3px;	
	font-size: 11px;
	overflow: hidden;
	padding: 0 22px 5px 0;
}

div.page-top div.utils ul.languages li { float: left; padding: 0 1px 0 5px; }
div.page-top div.utils ul.languages li+li { background: url('images/page-top-icons.png') no-repeat left -107px; }
div.page-top div.utils ul.languages a { padding: 0 3px; }

div.page-top div.utils p.contact { 
	color: #1a4862;
	background: url('images/page-top-icons.png') no-repeat right -29px; 
	padding-right: 25px; 
}

div.page-top div.utils p.contact, div.page-top div.utils p.contact a { line-height: 1.3em;}
div.page-top div.utils p.contact a { font-weight: bold; }


/*** Page Header Section ***/
div.page-header header { margin-bottom: 5px; }
div.page-header header figure {
	margin: 54px auto 6px; 
	width: 237px;
}

div.page-header header p.social { padding:0; }
div.page-header header p.social a {
	background: url('images/social-sprite.png') no-repeat left top;
	display: inline-block;
	width: 25px;
	height: 25px;
	margin-right: 3px;
	-moz-transition: all 450ms ease;
	-webkit-transition: all 450ms ease;
	-o-transition: all 450ms ease;
	-ms-transition: all 450ms ease;
	transition: all 450ms ease;
}

div.page-header header p.social a.facebook { background-position: left top; }
div.page-header header p.social a.twitter { background-position: left -46px; }
div.page-header header p.social a.google { background-position: left -92px; }

div.page-header header p.social a:hover {
	-moz-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	-ms-transform: rotate(360deg);
	transform: rotate(360deg);
}


/*** Page Featured Section ***/
div.page-featured {	
	background: url('images/page-featured-bg.jpg') no-repeat center #5591B5;
	border: 1px solid #fff; 
	margin: 15px auto 0;
	min-height: 300px;
	position: relative; 
	text-shadow: none;
	-webkit-box-shadow: 0 0 7px -2px #666;
	-moz-box-shadow: 0 0 7px -2px #666;
	box-shadow: 0 0 7px -2px #666;
}

div.page-featured p { color: #fff; text-shadow: 1px 1px 1px #436375; }
div.page-featured img.featured-image { float: right; margin: 20px 0 0 60px; }
div.page-featured section { padding-top: 30px; overflow: hidden; }


/*** Page Main Content Styling ***/
div.page-content { 
	padding-top: 35px;
	padding-bottom: 20px; 
}
div.page-content div.container {
	overflow: hidden;
	padding-bottom: 20px;
	min-height: 400px;
}

div.page-content section.main {
	float: left;
	width: 650px;
	margin-right: 50px;
}

div.page-content aside.main {
	font: normal 12px/1.6em 'Arial','Helvetica',sans-serif;
	float: right;
	width: 265px;
} 

div.page-content aside.main article.aside-block { margin-bottom: 30px; }
div.page-content aside.main article.aside-block h4 {
	font: normal 22px/1.2em 'CreteRoundRegular','Georgia',serif;
	color: #ae1414;
}
div.page-content aside.main article.aside-block h4.blue { color: #2a6285; }

div.page-content div.container.layout1 section.main { width: 705px; margin-right: 0;}
div.page-content div.container.layout1 aside.main { width: 230px; } 


/*** Page Bottom Section Styling ***/
div.page-bottom {
	background: url('images/mountains.png') repeat-x center top #EBF6FB;
	padding-top: 131px;
}

div.page-bottom div.page-bottom-inner {	background: #fff; padding-bottom: 25px; }
div.page-bottom div.page-bottom-inner div.container { padding-top: 110px; position: relative; }

div.page-bottom div.penguins {
	background: url('images/penguin-red.png') no-repeat 480px 35px;
	width: 970px;
	height: 202px;
	position: absolute;
	top: 0;
	left: 0;
}

div.page-bottom div.penguins div.penguin1, div.page-bottom div.penguins div.penguin2, div.page-bottom div.penguins div.penguin3,
div.page-bottom div.penguins div.penguin4, div.page-bottom div.penguins div.penguin5 {
	background: url('images/penguins.png') no-repeat left top;
	position: absolute;
}

div.page-bottom div.penguins div.penguin1 {	background-position: 0 0; width: 32px; height: 35px; }
div.page-bottom div.penguins div.penguin2 {	background-position: 0 -54px;  width: 44px; height: 48px; }
div.page-bottom div.penguins div.penguin3 {	background-position: 0 -121px; width: 45px; height: 53px; }
div.page-bottom div.penguins div.penguin4 {	background-position: 0 -193px; width: 55px; height: 64px; }
div.page-bottom div.penguins div.penguin5 {	background-position: 0 -276px; width: 63px; height: 73px; }

div.page-bottom div.group {	position: relative; width: 100%; }
div.page-bottom section { 
	float: left; 
	margin-right: 15px; 
	width: 145px; 
}

div.page-bottom section.last { float: right; margin-right: 0; width: 280px; }
div.page-bottom section h5 { 
	font: 700 20px/1em 'OpenSansCondensedBold','Arial','Helvetica',sans-serif;
	color: #165172; 
	padding-bottom: 13px;
}

div.page-bottom section, div.page-bottom section a { color: #455c69; }
div.page-bottom section a:hover { color: #ae1414; }

div.page-bottom ul.contact-details li {
	line-height: 1.3em;
	padding: 4px 0 4px 25px;
}

div.page-bottom ul.contact-details li.phone { background:url('images/page-bottom-sprite.png') no-repeat left 5px; }
div.page-bottom ul.contact-details li.mail { background:url('images/page-bottom-sprite.png') no-repeat left -28px; }
div.page-bottom ul.contact-details li.address { background:url('images/page-bottom-sprite.png') no-repeat left -62px; }

div.page-bottom section.twitter-feed h5 { 
	background: url('images/icon10.png') no-repeat right top; 
	color: #399fdc; 
	padding: 8px 45px 13px 0;
	margin: -8px 0 0 0;
}

div.page-bottom section.twitter-feed ul li {
	font: normal 12px/1.3em 'Arial','Helvetica',sans-serif;
	padding-bottom: 10px;
}

div.page-bottom section.twitter-feed ul li a { color: #399fdc; }
div.page-bottom section.twitter-feed ul li a:hover { color: #ae1414; }


/*** Page Footer Styling ***/
div.page-footer { background: #0c5076; }
div.page-footer footer { padding: 10px 0; }
div.page-footer footer p {
	color: #fff; 
	font-size: 12px;
	padding: 0; 
	text-align: center;
	text-shadow: none; 
}

/*** Other Styles Used For The Template ***/
.container { margin: 0 auto; position: relative; width: 970px; }
						
					

Recent Feedback see all

Krisztina is really friendly, professional and goes beyond what is necessary to ensure the job is done perfectly. I would recommend her to anyone and hope to work with her again in future.

Daniel Keel

Amazing work completed before the dealine. The email looked stunning and was EXACTLY the type of design I imaged in my head. Communication was second to none and will absolutely use again.

Phil Wannell

I cannot speak highly enough of Krisztina. If you’re ever going to use anyone for CSS, HTML or Jquery (or all three) then this is the person. Perfect work, perfect communication a complete pleasure to deal with!

Neale