Kadence view live demo

Well done Kadence for bringing a memorable look and a lovely choice of colors. For the front end HTML5 and CSS3 was written. The site is responsive down to tablets and the metro style boxes can center content vertically wherever needed.

HTML Code

						
<!DOCTYPE html>
<html>
	<head>
		<!-- =============== Basic Page Needs =============== -->
		<meta charset="utf-8">
		<title>Welcome to Kadence</title>
		<meta name="viewport" content="width=device-width"/>
		
		<!-- =============== Stylesheets =============== -->
		<link rel="stylesheet" href="css/normalize.css"/>
		<link rel="stylesheet" href="css/main.css"/>
		<link rel="stylesheet" href="css/flexslider.css"/>
		
		<!-- =============== Scripts =============== -->
		<script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
	</head>
	
	<body>
		<!-- =============== Page Header =============== -->
		<div class="page-header">
			<header class="inner">
				<!-- Top Bar --> 
				<div class="top-bar">
					<a href="#" class="text-medium invert alignright">User Login</a>
					<ul class="basic">
						<li class="active"><a href="#">UK</a></li>
						<li><a href="#">IN</a></li>
						<li><a href="#">IND</a></li>
						<li><a href="#">USA</a></li>
					</ul>
				</div>
				
				<!-- Logo --> 
				<figure class="logo">
					<a href="index.html">
						<img src="img/logo.png" alt="Kadence International"/>
					</a>
				</figure>
				
				<!-- Page Navigation --> 
				<nav id="main-navigation" class="page-nav-primary">
					<ul>
						<li><a href="story.html">Our Story</a></li>
						<li><a href="experience.html">Experience</a>
							<ul>
								<li><a href="#">Option One</a></li>
								<li><a href="#">Option Two</a></li>
								<li><a href="#">Option Three</a></li>
								<li><a href="#">Option Four</a></li>
								<li><a href="#">Option Five</a></li>
								<li><a href="#">Option Six</a></li>
								<li><a href="#">Option Seven</a></li>
								<li><a href="#">Option Eight</a></li>
							</ul>
						</li>
						<li><a href="working-for-you.html">Working for You</a></li>
					</ul>
					<div class="clear"></div>
				</nav>
				
				<ul class="social">
					<li><a href="#"><img alt="Email" src="img/social/icon-mail.png"></a></li>
					<li><a href="#"><img alt="Youtube" src="img/social/icon-youtube.png"></a></li>
					<li><a href="#"><img alt="Linkedin" src="img/social/icon-linkedin.png"></a></li>
					<li><a href="#"><img alt="Pinterest" src="img/social/icon-pinterest.png"></a></li>
					<li><a href="#"><img alt="Twitter" src="img/social/icon-twitter.png"></a></li>
					<li><a href="#"><img alt="Facebook" src="img/social/icon-facebook.png"></a></li>
				</ul>
				<div class="clear"></div>
			</header>
		</div>
		
		<!-- =============== Page Slider =============== -->
		<div class="page-slider">
			<div class="inner">
				<span class="slider-overlay left"></span>
				<span class="slider-overlay right"></span>
				<section class="pagetop-slider flexslider">
					<ul class="slides">
						<li>
							<img src="img/banner1.jpg" alt="Looking for an insight agency with passion, rigour and a healthy dose of curiosity?"/>
							<aside class="label yellow">
								<div class="label-inner">
									<h2><br/>Looking for an insight agency with passion, rigour and a healthy dose of curiosity?</h2>
									<p>You've come to the right place.<br/> <strong>READ MORE</strong> about Our Story</p>
								</div>
							</aside>
						</li>
						
						<!-- More code following the same markup as the previous <LI> element -->
					</ul>
				</section>
			</div>
		</div>
		
		<!-- =============== Page Main Content =============== -->
		<div class="page-content">
			<div class="inner">
				<div class="left_column">
					<ul>
						<!-- Latest News Mod -->
						<li>
							<div class="content-mod small-type-1">
								<a class="clickable" href="#">
									<span class="overlay"></span>
									<div class="content-mod-desc">
										<div class="content-mod-desc-inner">
											<h2>Fieldwork</h2>
											<p class="no-padding">We�ve got global data collection and field management down to a fine art...</p>
										</div>
									</div>
									<figure><img src="img/news.jpg" alt="Latest News"/></figure>
								</a>
							</div>
						</li>
						
						<!-- International Story Mod -->
						<li>
							<div class="content-mod medium-type-1 fullwidth bgcolor-white">
								<a class="clickable" href="#">
									<span class="overlay"></span>
									<div class="content-mod-desc">
										<div class="content-mod-desc-inner">
											<ul class="social green style1">
												<li><img src="img/social/icon-youtube-green.png" alt="YouTube"/></li>
												<li><img src="img/social/icon-pinterest-green.png" alt="Pinterest"/></li>
												<li><img src="img/social/icon-twitter-green.png" alt="Twitter"/></li>
												<li><img src="img/social/icon-facebook-green.png" alt="Facebook"/></li>
											</ul>
											<h2 class="text-burgundy">International story</h2>
										</div>
									</div>
									<figure><img src="img/locations.jpg" alt="Latest News"/></figure>
								</a>
							</div>
						</li>
						
						<!-- Data Mod -->
						<li>
							<div class="content-mod medium-type-1 bgcolor-russet">
								<a class="clickable" href="#">
									<span class="overlay"></span>
									<div class="content-mod-desc">
										<div class="content-mod-desc-inner">
											<h2>Data</h2>
											<p class="no-padding">Lorem ipsum dolor sit amet, consectetur adipisi elit, sed do eiusmod 
												tempor inc</p>
										</div>
									</div>
									<figure><img src="img/data.jpg" alt="Data"/></figure>
								</a>
							</div>
						</li>
					</ul>
				</div>
				
				<div class="right_column">
					<ul>
						<!-- Stories Mod -->
						<li>
							<div class="content-mod medium-type-1 overlay-black">
								<!-- Slideshow -->
								<div class="mod-slider flexslider">
									<ul class="slides">
										<li>
											<div class="content-mod-desc">
												<div class="content-mod-desc-inner">
													<h2 class="text-grey">Help yourself</h2>
													<p>Determining the market <br/>potential for a self-service <br/>mobile offer<br/>
														READ MORE</p>
												</div>
											</div> 
											<img alt="Help yourself" src="img/slide1.jpg"/>
										</li>
										
										<!-- More code following the same markup as the previous <LI> element -->
									</ul>
								</div>
							</div>
						</li>
						
						<!-- Latest Poll -->
						<li>
							<div class="content-mod medium-type-1 bgcolor-green">
								<a class="clickable" href="#">
									<span class="overlay"></span>
									<div class="content-mod-desc">
										<div class="content-mod-desc-inner">
											<h2>Latest Poll</h2>
											<p class="no-padding">Lorem ipsum dolor sit amet, <br/>consectetur adipisicing elit, sed do 
												<br/>eiusmod tempor	incididunt ut labore <br/>et dolore magna aliqua.</p>
										</div>
									</div>
									<figure><img src="img/poll.jpg" alt="Poll"/></figure>
									
									<ul class="social green style2">
										<li><img src="img/social/icon-youtube-green.png" alt="YouTube"/></li>
										<li><img src="img/social/icon-pinterest-green.png" alt="Pinterest"/></li>
										<li><img src="img/social/icon-twitter-green.png" alt="Twitter"/></li>
										<li><img src="img/social/icon-facebook-green.png" alt="Facebook"/></li>
									</ul>
									<p class="poll-results">
										72% SAID
										<strong>YES</strong>
									</p>
								</a>
							</div>
						</li>
						
						<!-- Contact Us Mod -->
						<li>
							<div class="content-mod small-type-1 bgcolor-lightpurple">
								<a class="clickable" href="#">
									<span class="overlay"></span>
									<div class="content-mod-desc">
										<div class="content-mod-desc-inner">
											<h2>Contact</h2>
											<p class="no-padding">Our Insight teams in USA, UK, India, Singapore, Indonesia, Vietnam and China</p>
										</div>
									</div>
									<figure><img src="img/contact.jpg" alt="Contact"/></figure>
								</a>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
		
		<!-- =============== Page Footer =============== -->
		<div class="page-footer">
			<div class="inner">
				<!-- === Footer Block #1 ==== -->
				<div class="footer-block first">
					<div class="block-group">
						<h4>Connect with us</h4>
						<ul class="social">
							<li><a href="#"><img alt="Email" src="img/social/icon-mail.png" class="icon-mail"></a></li>
							<li><a href="#"><img alt="Youtube" src="img/social/icon-youtube.png" class="icon-youtube"></a></li>
							<li><a href="#"><img alt="Linkedin" src="img/social/icon-linkedin.png" class="icon-linkedin"></a></li>
							<li><a href="#"><img alt="Pinterest" src="img/social/icon-pinterest.png" class="icon-pinterest"></a></li>
							<li><a href="#"><img alt="Twitter" src="img/social/icon-twitter.png" class="icon-twitter"></a></li>
							<li><a href="#"><img alt="Facebook" src="img/social/icon-facebook.png" class="icon-facebook"></a></li>
						</ul>
					</div>
					<div class="block-group">
						<h4 class="no-padding">Information</h4>
						<ul class="big-links">
							<li><a href="#">User admin</a></li>
							<li><a href="#">Data policy</a></li>
						</ul>
					</div>
				</div>
				
				<!-- === Footer Block #2 ==== -->
				<div class="footer-block">
					<h4>Locations</h4>
					<address>
						<strong>USA</strong><br/>
						Kadence International Inc.<br/>
						One Clarks Hill,<br/>
						Framingham, MA 01702<br/>
						Tel: +1 508 620 1222<br/>
						Fax: +1 508 620 1223<br/>
						Email: usa@kadence.com<br/>
						India<br/>
						Kadence International PVT Ltd<br/>
						B-304, CITIPOINT Andheri-Kurla Road<br/>
						J.B.Nagar, Mumbai<br/>
						Tel: + 91 (0)22 4232 8600
					</address>
					
					<!-- More code following the same markup as the previous <ADDRESS> element -->
				</div>
				
				<!-- === Footer Block #3 ==== -->
				<div class="footer-block no-title">
					<address>
						<strong>Singapore</strong><br/>
						Kadence International Pte Ltd.<br/>
						#11-01 Royal Brothers Building,<br/>
						22 Malacca Street,<br/>
						Singapore, 048980<br/>
						Tel: +65 6372 8710<br/>
						Fax: +65 6538 4300<br/>
						Email: singapore@kadence.com
					</address>
					
					<!-- More code following the same markup as the previous <ADDRESS> element -->
				</div>
				
				<!-- === Footer Block #4 ==== -->
				<div class="footer-block no-title">
					<address>
						<strong>Hong Kong</strong><br/>
						Kadence International Ltd.<br/>
						6/F Shun Pont Commercial Building,<br/>
						5-11 Thomson Road,<br/>
						Wanchai, Hong Kong<br/>
						Tel: +852 2834 8970<br/>
						Fax: +852 2834 8975<br/>
						Email: china@kadence.com
					</address>
					
					<!-- More code following the same markup as the previous <ADDRESS> element -->
				</div>
			</div>
		</div>

		<script src="js/vendor/jquery-1.9.0.min.js"></script>
		<script src="js/vendor/jqueryslidemenu.js"></script>
		<script src="js/vendor/jquery.flexslider-min.js"></script>
		<script src="js/main.js"></script>
		<script>
			setUpPageSlider();
			setUpModSlider();
		</script>
	</body>
</html>
						
					

CSS Code

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

@font-face {
    font-family: 'BryantLG-Medium';
    src: url('fonts/bryantlg/bryantlg-medium.eot');
    src: url('fonts/bryantlg/bryantlg-medium.eot?#iefix') format('embedded-opentype'),
        url('fonts/bryantlg/bryantlg-medium.woff') format('woff'),
        url('fonts/bryantlg/bryantlg-medium.ttf') format('truetype'),
        url('fonts/bryantlg/bryantlg-medium.svg#BryantLG-Medium') format('svg');
    font-weight: normal;
    font-style: normal;
}



/* General Rules
   ========================================================================== */
body {
    background: #1e1e1e;
    min-width: 768px;
}

.inner {
    margin: 0 auto;
    max-width: 1200px;
    width: 85%;
}



/* Page Header
   ========================================================================== */
.page-header {
    font-size: 1.2em;
    border-bottom: 2px solid #6ea144;
}

.page-header .inner {
    padding-top: 1.2%;
}

.page-header a {
    color: #a9a9a9;
    text-decoration: none;
    outline: none;
}

.page-header a:hover,
.page-header li.active a,
.page-header li.current_page_item>a,
.page-header li.current_page_parent > a
{
    color: #6ea144;
}

.top-bar {
    overflow: hidden;
    padding: 0 0 0.9% 18.09%;
}

.logo {
    float: left;
    width: 18.09%;
}

.logo img {
    width: 90%;
}


/* Page Navigation - Primary
   ========================================================================== */
.page-header .page-nav-primary {
    font: 17px/21px 'BryantLG-Medium',Arial,Helvetica,sans-serif;
    float: left;
    margin-left: -0.5em;
    position: relative;
    z-index: 1000;

}

.page-header .page-nav-primary>div {
	position: relative;
	z-index: 1000;
}

.page-header .page-nav-primary ul {
    list-style: none outside none;
    margin: 0;
}

.page-header .page-nav-primary ul li {
    display: inline;
    float: left;
    position: relative;
}

.page-header .page-nav-primary ul li a {
    display: block;
    padding: 7px 8px 11px;
}

.page-header .page-nav-primary>ul>li.current_page_item>a,
.page-header .page-nav-primary>ul>li.current_page_parent,
.page-header .page-nav-primary>ul>li.active>a,
.page-header .page-nav-primary>ul>li>a:hover {
    background: url('img/page-nav-primary-active-small.png') no-repeat center bottom;
}

.page-header .page-nav-primary ul li ul {
    background: #87b165;
    border-top: 2px solid #6EA144;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    visibility: hidden;
    width: 100%;
    z-index: 1000;
}

.page-header .page-nav-primary ul li ul li {
    display: list-item;
    float: none;
}

.page-header .page-nav-primary ul li ul li+li {
    border-top: 1px solid #eaf0e6;
}

.page-header .page-nav-primary ul li ul li ul {
    top: 0;
}

.page-header .page-nav-primary ul li ul li a {
    font: 0.666em/1.2em 'BryantLG-Regular',Arial,Helvetica,sans-serif;
    color: #1e1e1e;
    padding: 5px;
    margin: 0;
    text-align: center;
	position: relative;
	z-index: 1000;
}

.page-header .page-nav-primary ul li ul li a:hover { 
    background: #1e1e1e;
    color: #6ea144;
}

.page-header ul.social {
    float: right;
    text-align: right;
    width: 31.2%;
}


/*  Page Main Content
   ========================================================================== */
.content {
    background: #fff;
    margin-bottom: 1.6658%;
    padding: 4.1667%;
}


/* Page Footer
   ========================================================================== */
.page-footer {
    color: #c2c2c2;
    clear: both;
    font-size: 0.8em;
    line-height: 1.2em;
    background: #4e4e4e;
    overflow: hidden;
    width: 100%;
}

.page-footer .inner {
    overflow: hidden;
    padding: 4.3% 0;
}

.page-footer .footer-block {
    float: left;
    width: 20.3%;
}

.page-footer .footer-block + .footer-block {
    margin-left: 2%;
}

.page-footer .footer-block.first {
    width: 33%;
}

.page-footer h4 {
    font: 1.5em/1.5161em 'BryantLG-Medium', Arial, Helvetica, sans-serif;
    color: #fff;
}

.page-footer a {
    color: #c2c2c2;
}

.page-footer a:hover {
    color: #fff;
}

.page-footer address {
    margin-bottom: 1.3em;
}

.page-footer address strong {
    font: 1.5em/1.1666em 'BryantLG-Regular', Arial, Helvetica, sans-serif;
    color: #fff;
}

.page-footer .social {
    width: 93%;
}

.page-footer .big-links {
    margin: 0;
}


/* Layout Modules
   ========================================================================== */
.content-mod {
    font: 0.8em/1.9616em Arial, Helvetica, sans-serif; /* 12px */
    background-color: #71703c;
    color: #fff;
    display: table;
    margin-bottom: 3.39%;
    overflow: hidden;
    position: relative;
    width: 100%;
}

/* Module Title */
.content-mod h2 {
    font: 2.6em/1em 'BryantLG-Regular',Arial,Helvetica,sans-serif;
    color: #ccc;
    padding-bottom: 0;
}

/* Module Image */
.content-mod figure {
	display: table-cell;
	line-height: 0;
	vertical-align: top;
    width: 39%;
}

.content-mod figure img { 
    width: 100%; 
}

/* Module Description */
.content-mod-desc {
	display: table-cell;
    position: relative;
    vertical-align: middle;
    width: 61%;
}

.content-mod-desc-inner {
	padding: 3% 10%;
}

/* Module Overlays */
.content-mod > a.clickable {
	display: table;
}

a.clickable {
    text-decoration: none;
    display: block;
    width: 100%;
}

.clickable,
.clickable:hover,
.clickable:focus,
.clickable:visited {
    color: inherit;
}

.clickable span.overlay {
    background-image: url('img/rollover-arrow-left.png');
    background-color: rgba(58,72,11,0.7);
    background-position: 84.5% center;
    background-repeat: no-repeat;
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
}

.clickable:hover span.overlay {
    display: block;
}


/* Reusable Elements
   ========================================================================== */
/***** Text Styles *****/
.text-medium { font-family: 'BryantLG-Medium', Arial, Helvetica, sans-serif; }

/***** Link Styles *****/
a.invert { color: #6fa244; }
a.invert:hover { color: #a9a9a9; }

a.next {
    background: url('img/arrow-black-right.png') no-repeat right center;
    color: #000;
    display: inline-block;
    height: 31px;
    text-decoration: none;
    padding: 5px 53px 5px 0;
}

/***** List Styles *****/
.basic {
    list-style: none outside none;
    margin: 0;
}

.basic li {
    display: inline;
}

.basic li+li {
    margin-left: 0.6em;
}

.big-links a {
    font: 1.5em/1.8494em 'BryantLG-Medium', Arial, Helvetica, sans-serif;
    text-decoration: none;
}

/***** Article Styles *****/
.article-stats {
    font: 1.6em/32px 'BryantLG-Regular', Arial, Helvetica, sans-serif;
    float: right;
    margin-left: 1.6682%;
    width: 67%;
}

.article-stats ul li {
    display: block;
    float: left;
}

.article-stats ul {
    list-style: none outside none;
    margin: 0;
}

.article-stats ul a {
    display: inline-block;
    height: 32px;
    padding: 5px 20% 5px 37px;
    text-decoration: none;
}

.article-stats ul a.tweets { background: url('img/icon-twitter-green.png') no-repeat left center; }
.article-stats ul a.shares { background: url('img/icon-facebook-paleblue.png') no-repeat left center; color: #8b92ac; }
.article-stats ul a.likes { background: url('img/icon-like-thistle.png') no-repeat left center; color: #9f9291; }
.article-stats ul a.pins { background: url('img/icon-pinterest-brown.png') no-repeat left center; padding-right: 0; }

.article-stats ul a:hover {
    color: #000;
}

.article-stats a.next {
    float: right;
}

/***** Page Title Styles *****/
.page-title {
    margin-bottom: 1.5em;
}

.page-title * {
    padding: 0;
}

.page-title h2 {
    font: 2.4em/1.1em 'BryantLG-Regular', Arial, Helvetica, sans-serif;
    color: #1e1e1e;
} 

.page-title h4 {
    font: 1.5em/1.1em 'BryantLG-Regular', Arial, Helvetica, sans-serif;
    color: #663000;
}

/***** Other Styles *****/
.no-padding { padding: 0; }
.no-title { padding-top: 3em; }
.margin-top-120 { margin-top: 120px; }




/* Media Queries
   ========================================================================== */
/*** Secreens wider than 1024px ***/
@media only screen and (min-width: 1024px) {
    .top-bar {
        padding: 0 0 0.9% 22.09%;
    }

    .page-header .page-nav-primary {
        font: 24px/32px 'BryantLG-Medium',Arial,Helvetica,sans-serif;
    }

    .page-header .page-nav-primary ul li a {
        padding: 13px 10px 21px;
    }

    .page-header .page-nav-primary>ul>li.current_page_item>a,
	.page-header .page-nav-primary>ul>li.current_page_parent,
	.page-header .page-nav-primary>ul>li.active>a,
	.page-header .page-nav-primary>ul>li>a:hover {
        background: url('img/page-nav-primary-active.png') no-repeat center bottom;
    }

    .logo {
        float: left;
        width: 22.09%;
    }

    .logo img {
        width: 70%;
    }

    .inner {
        width: 95%;
    }

    .content-mod h2 {
        font: 3em/1em 'BryantLG-Regular', Arial, Helvetica, sans-serif;
    }

    .social.style2 {
        left: 9.8%;
    }

    .content-mod.big-type-1 .content-mod-desc {
        padding: 4.8177% 4.1674%;
        width: 41.6652%;
    }

    .twitter-feed .content-mod-desc {
        padding-top: 4.8%;
        padding-bottom: 4.8%;
    }

    .tweet-info span {
        font: normal 1.7em/1em 'BryantLG-Regular', Arial, Helvetica, sans-serif;
    }

    .tweet-list > li {
        padding: 1.4% 8.4763%;
    }

    .article-stats ul {
        float: left;
        width: 62%;
    }

    .poll-results {
        font: 3.3em/1em 'BryantLG-Medium', Arial, Helvetica, sans-serif;
    }
    
    .pagetop-slider .label {
		top: 10%;
		height: 80%;
		width: 30%;
		left: 55%;
	}
	
	.label .label-inner {
	    font-size: 1em;
	    padding: 14%;
	}
}


/* Secreens wider than 1200px
   ========================================================================== */
@media only screen and (min-width: 1200px) {
    body {
        font-size: 0.9375em;
    }

    .page-header .page-nav-primary {
        font: 27px/32px 'BryantLG-Medium',Arial,Helvetica,sans-serif;
    }

    .page-header .page-nav-primary ul li a {
        padding: 13px 15px 21px;
    }
	
	.page-footer .social {
		width: 95%;
	}
	
	.label .label-inner {
	    font-size: 0.9em;
	}
}


/* Print styles
   ========================================================================== */
@media print {
    * {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}
						
					

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