Case Study

Client

Kadence

Tools
  • ★ Photoshop
  • ★ Illustrator
  • ★ Custom grid

Categories
  • ★ Front end build
  • ★ SEO
Interactive

Live Demo

Kadence

Kadence is a full service research agency blending together quant and qual methodologies. They aim to provide clients with inspiring insight, actionable recommendations and demonstrable ROI.

This website was commissioned several years ago, but I decided to keep it in my portfolio because of it's gorgeous design - which, I'm sorry to say - is not my own work. It has been readily provided for me by the client and their fabulous designer.

At the time they were only targeting visitors on desktops and tablets, so no mobile version was needed. The website is built on a custom grid, no front-end framework was used to create the layout.


Design outline

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>
								
							

Partial CSS Code

								
		/* 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;
		    }
		}
											
										

Krisztina is the Ultimate Professional. She educates you if you are ignorant on website building and has plenty of examples to show you. She also has some fantastic ideas which is very rare with a lot of people. She is creative and very efficient. I would definitely choose her again.

Theo P.

I got so much more than I paid for when working with Krisztina! I thought I had a very simple need, and it probably was simple for her, but I had so many questions, and we went back and forth a lot, but she always maintained a cheerful attitude, even when I asked her to try a few different designs. It was a pleasure to work with her, and I would do it again.

Bryna Kranzler

The quality of work I have received from Krisztina is fantastic! I have worked with over 20 coders in these past years, and have now found the perfect one. Krisztina has perfect code, is on time, keeps you updated, and is willing to go over and above. I have had her do 3 projects for me so far, and many more to come. Thank you so much for all of your hard work, I look forward to working with you in the future.

Grant McNaughton

Read more reviews

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