Case Study

Client

David Safanda

Tools
  • ★ Photoshop
  • ★ Custom grid

Categories
  • ★ Front end build
  • ★ SEO
Interactive

Live Demo

Langtech

Langtech combines the benefits of the latest enterprise-class tools, a knowledgeable core staff, and the services of a tightly integrated network of engineers to bring organizations a solution that ensures maximum uptime for their critical IT infrastructure.

The clean, flat design was provided for me by the client, and I built a responsive, SEO optimized website out of their design creatives. There was no need for a CMS in this case, so the pages load lightning fast and the images and code are fully optimized.


Design outline

HTML Code

											
		<!DOCTYPE html>
		<html lang="en">
		<head>
			<!-- =============== Basic Page Needs =============== -->
			<meta charset="utf-8"/>
			<title>Welcome to Langtech</title>
			<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
			
			<!-- ================== Stylesheets ================= -->
			<link rel="stylesheet" href="style/base.css"/>
			<link rel="stylesheet" href="style/plugins.css"/>
			<link rel="stylesheet" href="style/screen.css"/>
			
			<!-- ==================== Scripts =================== -->
			<script src="js/modernizr.js"></script>
		</head>
		
		<body>
			<!-- ========== Page Header ========== -->
			<div class="page-header">
				<div class="row">
					<div class="small-12 columns">
						<div class="page-header-inner">
							<!-- Logo -->
							<div class="logo">
								<h1><a href="index.html"><img src="images/logo.png" alt="We get IT"></a></h1>
							</div>
		
							<div class="actions">
								<!-- Contact bar -->
								<div class="contact">
									<div class="row">
										<div class="small-12 columns">
											<a href="#" class="phone">800-480-8488</a>
											<a href="#" class="button">contact us</a>
											<a href="#" class="button secondary">chat with us</a>
										</div>
									</div>
								</div>
								<!-- Logo and navigation -->
								<div class="navigation">
									<div class="row">
										<div class="small-12 large-4 column">
											<figure class="logo-small"><a href="index.html"><img src="images/logo.png" alt="We get IT"></a></figure>
											<a href="#" id="menu-button" class="collapsed">Menu</a>
										</div>
										<div class="small-12 column">
											<nav>
												<ul id="main-menu" class="sm sm-simple collapsed">
													<li><a href="#">Home</a></li>
													<li>
														<a href="services.html">Services</a>
														<ul>
															<li><a href="#">Item 2-1</a></li>
															<li><a href="#">Item 2-2</a></li>
															<li><a href="#">Item 2-3</a></li>
														</ul>
													</li>
													<li>
														<a href="#">Solutions</a>
														<ul>
															<li><a href="#">Item 3-1</a></li>
															<li><a href="#">Item 3-2</a></li>
															<li><a href="#">Item 3-3</a></li>
														</ul>
													</li>
													<li>
														<a href="#">Software</a>
														<ul>
															<li><a href="#">Item 3-1</a></li>
															<li><a href="#">Item 3-2</a></li>
															<li><a href="#">Item 3-3</a></li>
														</ul>
													</li>
													<li>
														<a href="#">Consulting</a>
														<ul>
															<li><a href="#">Item 4-1</a></li>
															<li><a href="#">Item 4-2</a></li>
															<li><a href="#">Item 4-3</a></li>
														</ul>
													</li>
													<li>
														<a href="#">Why Langtech</a>
														<ul>
															<li><a href="#">Item 5-1</a></li>
															<li><a href="#">Item 5-2</a></li>
															<li><a href="#">Item 5-3</a></li>
														</ul>
													</li>
												</ul>
											</nav>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div><!-- End Page Header -->
		
		
			<!-- ========== Page Slider ========== -->
			<div class="page-slider flexslider">
				<ul class="slides">
					<!-- Slide #1 -->
					<li>
						<div class="slide-content featimg1">
							<div class="slide-content-inner">
								<div class="row">
									<div class="large-8 columns no-padding">
										<div class="slide-caption">
											<h2 class="slide-caption-title">Keeping watch over your Changing IT needs</h2>
											<a class="play popup-vimeo" href="https://vimeo.com/31817370">Watch a welcome video</a>
										</div>
									</div>
								</div>
							</div>
						</div>
					</li>
				</ul>
			</div><!-- End Page Slider -->
		
		
			<!-- ========== Bulletin & Mission ========== -->
			<div class="page-ribbon">
				<!-- Bulletin -->
				<div class="bulletin">
					<div class="row">
						<div class="small-12 columns">
							<p class="bulletin-link">Security bulletin Aug 2015 > <a href="#">Read now</a></p>
						</div>
					</div>
				</div>
		
				<!-- Mission -->
				<div class="mission">
					<div class="row">
						<div class="medium-9 columns">
							<h4 class="text-medium">Our Misson:</h4>
							<p>To be the most trusted IT services provider to the SMB market</p>
						</div>
						<div class="medium-3 columns small-text-center medium-text-right">
							<img src="images/logo-cloud.png" alt="Cloud"/>
						</div>
					</div>
				</div>
			</div><!-- End Bulletin & Mission -->
		
		
			<!-- ========== Page Body ========== -->
			<div class="page-body">
				<!-- Page Section #1 -->
				<div class="page-section">
					<div class="row">
						<div class="small-12 medium-6 columns">
							<h2>Cloud and mobile services</h2>
							<p class="lead">There are many compelling reasons to consider the cloud. However, choosing whether and how to 
								approach the cloud can be daunting. We have experience with clients with different cloud 
								environments and can help you find the best cloud strategy for your company.
								<a href="#">Learn more</a>
							</p>
						</div>
						<div class="small-12 medium-6 columns small-text-center medium-text-right">
							<img src="images/img-cloud-services.png" alt="Cloud Services"/>
						</div>
					</div>
				</div>
		
				<!-- Page Section #2 -->
				<div class="page-section bgcolor-1">
					<div class="row">
						<div class="small-12 medium-6 columns medium-push-6">
							<h2>Software Development</h2>
							<p class="lead">For over 22 years, Langtech has been helping our clients, ranging in size from start-up to 
								Fortune 100, to evaluate and implement strategic and efficient traditional, web and mobile-based software so 
								that they could maintain a competitive advantage.
								<a href="#">Learn more</a>
							</p>
						</div>
						<div class="small-12 medium-6 columns medium-pull-6 small-text-center medium-text-left">
							<img src="images/img-software.png" alt="Software Development"/>
						</div>
					</div>
				</div>
		
				<!-- Page Section #3 -->
				<div class="page-section">
					<div class="row">
						<div class="small-12 medium-6 columns">
							<h2>Managed Services</h2>
							<p class="lead">Take the uncertainty and stress out of your IT Support by preventing problems before they 
								occur for a fixed price, allowing you to focus on what matters most: your business.
								<a href="#">Learn more</a>
							</p>
						</div>
						<div class="small-12 medium-6 columns small-text-center medium-text-right">
							<img src="images/img-managed-services.png" alt="Managed Services"/>
						</div>
					</div>
				</div>
		
				<!-- Page Section #4 -->
				<div class="page-section pb-0 bgcolor-2">
					<div class="row">
						<div class="small-12 medium-6 columns medium-push-6">
							<h2>Consulting Services</h2>
							<p class="lead">Our consultants, engineers and project managers are available for short or long term 
								consulting assignments, and are able to help improve performance, reliability and scalability of your 
								data assets and IT infrastructure. 
								<a href="#">Learn more</a>
							</p>
						</div>
						<div class="small-12 medium-6 columns medium-pull-6 small-text-center medium-text-left">
							<img src="images/img-consulting.png" alt="Consulting Services"/>
						</div>
					</div>
				</div>
			</div><!-- End Page Body -->
		
		
			<!-- ========== Our Clients ========== -->
			<div class="page-section">
				<div class="row">
					<div class="small-12 columns">
						<h3 class="text-center">Companies on the grow that choose to go with Langtech</h3>
						<div class="row">
							<div class="medium-2 columns small-text-center medium-text-left">
								<img src="images/partner-logo-wellsfargo.jpg" alt="Wells Fargo"/>
							</div>
							<div class="medium-5 columns small-text-center">
								<img src="images/partner-logo-uca.jpg" alt="University of California"/>
							</div>
							<div class="medium-3 columns small-text-center">
								<img src="images/partner-logo-superbowl.jpg" alt="Superbowl"/>
							</div>
							<div class="medium-2 columns small-text-center medium-text-right">
								<img src="images/partner-logo-w.jpg" alt=""/>
							</div>
						</div>
					</div>
				</div>
			</div><!-- End Our Clients -->
		
		
			<!-- ========== Testimonials ========== -->
			<div class="page-section page-quotes page-quotes-bordered">
				<div class="row">
					<div class="small-12 columns">
						<div class="testimonial-slider flexslider">
							<ul class="slides">
								<li>
									<div class="blockquote-featured">
										<blockquote>
											<p>Langtech has demonstrated that they truly get our business at all levels.</p>
											<cite>Partner, Panorama Capital</cite>
										</blockquote>
									</div>
								</li>
								<li>
									<div class="blockquote-featured">
										<blockquote>
											<p>Langtech has demonstrated that they truly get our business at all levels.</p>
											<cite>Partner, Panorama Capital</cite>
										</blockquote>
									</div>
								</li>
								<li>
									<div class="blockquote-featured">
										<blockquote>
											<p>Langtech has demonstrated that they truly get our business at all levels.</p>
											<cite>Partner, Panorama Capital</cite>
										</blockquote>
									</div>
								</li>
								<li>
									<div class="blockquote-featured">
										<blockquote>
											<p>Langtech has demonstrated that they truly get our business at all levels.</p>
											<cite>Partner, Panorama Capital</cite>
										</blockquote>
									</div>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div><!-- End Testimonials -->
		
		
			<!-- ========== News ========== -->
			<section class="page-section page-news connected">
				<div class="row">
					<div class="small-12 columns">
						<h2 class="text-center">News</h2>
					</div>
				</div>
		
				<div class="row">
					<!-- News Item #1 -->
					<div class="medium-4 columns">
						<article class="news-item">
							<div class="date">
								<strong>Oct</strong> 24
							</div>
							<div class="content">
								<h6 class="news-item-title">Langtech makes the SMB 500.</h6>
								<a href="#">more</a>
							</div>
						</article>
					</div>
		
					<!-- News Item #2 -->
					<div class="medium-4 columns">
						<article class="news-item">
							<div class="date">
								<strong>Oct</strong> 03
							</div>
							<div class="content">
								<h6 class="news-item-title">Langtech presents webinar- "My Law Firm in the Cloud"</h6>
								<a href="#">more</a>
							</div>
						</article>
					</div>
		
					<!-- News Item #3 -->
					<div class="medium-4 columns">
						<article class="news-item">
							<div class="date">
								<strong>Nov</strong> 17
							</div>
							<div class="content">
								<h6 class="news-item-title">Langtech announces partnership with the SF Bar Association.</h6>
								<a href="#">more</a>
							</div>
						</article>
					</div>
				</div>
			</section><!-- End News -->
		
		
			<!-- ========== Contact ========== -->
			<div class="page-section bgcolor-2">
				<div class="row">
					<div class="small-12 columns text-center">
						<h6 class="text-strong">Contact Us</h6>
						<a href="#"><img src="images/ico-contact.png" alt=""></a>
					</div>
				</div>
			</div><!-- End Contact -->
		
		
			<!-- ========== Page Footer ========== -->
			<div class="page-footer">
				<div class="row">
					<!-- Column #1 -->
					<div class="medium-2 columns">
						<figure class="company-logo">
							<a href="#"><img src="images/logo-footer.png" alt="LangTech"></a>
						</figure>
						<ul class="social-links">
							<li><a href="#"><i class="fa fa-facebook"></i></a></li>
							<li><a href="#"><i class="fa fa-twitter"></i></a></li>
							<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
							<li><a href="#"><i class="fa fa-youtube"></i></a></li>
						</ul>
					</div>
		
					<!-- Column #2 -->
					<div class="medium-2 columns">
						<h6 class="footer-title">Services</h6>
						<ul class="footer-links">
							<li><a href="#">Cloud Strategy</a></li>
							<li><a href="#">Desktop as a Service</a></li>
							<li><a href="#">Hosting</a></li>
							<li><a href="#">Virtualization</a></li>
							<li><a href="#">Software as a Service</a></li>
							<li><a href="#">Web Sites</a></li>
							<li><a href="#">Mobile Apps</a></li>
						</ul>
					</div>
		
					<!-- Column #3 -->
					<div class="medium-2 columns">
						<h6 class="footer-title">Solutions</h6>
						<ul class="footer-links">
							<li><a href="#">Strategy</a></li>
							<li><a href="#">Managed Services</a></li>
							<li><a href="#">IT Projects</a></li>
							<li><a href="#">Help Desk</a></li>
							<li><a href="#">Desktop as a Service</a></li>
						</ul>
					</div>
		
					<!-- Column #4 -->
					<div class="medium-2 columns">
						<h6 class="footer-title">Software</h6>
						<ul class="footer-links">
							<li><a href="#">Website Design</a></li>
							<li><a href="#">Custom Software Develiopment &amp; Support</a></li>
							<li><a href="#">Mobile Apps</a></li>
							<li><a href="#">Hosting</a></li>
							<li><a href="#">CRM</a></li>
							<li><a href="#">VC/Private Equity</a></li>
						</ul>
					</div>
		
					<!-- Column #5 -->
					<div class="medium-2 columns">
						<h6 class="footer-title">Consulting</h6>
						<ul class="footer-links">
							<li><a href="#">IT Strategy</a></li>
							<li><a href="#">Data &amp; Software Consulting</a></li>
							<li><a href="#">Projects</a></li>
						</ul>
					</div>
		
					<!-- Column #6 -->
					<div class="medium-2 columns">
						<h6 class="footer-title">Why Langtech</h6>
						<ul class="footer-links">
							<li><a href="#">About Us</a></li>
							<li><a href="#">Differentiators</a></li>
							<li><a href="#">Industry Specialists</a></li>
							<li><a href="#">Testimonials</a></li>
						</ul>
					</div>
				</div>
				<hr class="spacer"/>
		
				<!-- Copyright -->
				<div class="row">
					<div class="small-12 columns">
						<p class="mb-0">Copyright © Langtech All Rights Reserved</p>
					</div>
				</div>
			</div><!-- End Page Footer -->
		
		
			<!-- ==================== Scripts =================== -->
			<script src="js/jquery-2.1.1.min.js"></script>
			<script src="js/jquery.smartmenus.min.js"></script>
			<script src="js/jquery.flexslider-min.js"></script>
			<script src="js/jquery.magnific-popup.min.js"></script>
			<script src="js/script.js"></script>
			<script>
				$(function() {
					setUpHomePageSlider();
					setUpTestimonialSlider();
					setUpVideoModal();
				});
			</script>
		</body>
		</html>
								
							

Partial CSS Code

								
		/* General Rules
		   ======================================================= */
		a {
			cursor: pointer;
			outline: 0 none;
		}
		
		/* Page Header
		   ======================================================= */
		.page-header {
			background: #333;	
			position: relative;
			z-index: 999;
		}
		
		.page-header .logo-small {
			float: left;
		}
		
		.page-header .logo {
			background-color: #fabc02;
			display: none;
			text-align: center;
			vertical-align: middle;
		}
		
		.page-header .logo h1 {
			margin: 0;
		}
		
		.page-header .contact {
			margin-bottom: 10px;
			overflow: hidden;
			padding: 10px 0;
			text-align: center;
			width: 100%;
		}
		
		.page-header .contact .button {
			text-transform: uppercase;
		}
		
		.page-header .phone {
			color: #fabc02;
			display: block;
			font-size: 29px;	
			font-weight: 700;
			line-height: 33px;
			margin: 10px 0;	
		}
		
		.page-header .phone,
		.page-header .button {
			vertical-align: middle;
		}
		
		.page-header .navigation > .row {
			box-shadow: 0 -10px 15px -10px rgba(0, 0, 0, 0.7);
		}
		
		/* Media Queries */
		@media only screen and (min-width: 49.063em) {
			.page-header-inner {
				display: table;
				width: 100%;
			}
		
			.page-header .logo,
			.page-header .actions {
				display: table-cell;
			}
		
			.page-header .logo-small {
				display: none;
			}
			
			.page-header .contact {
				background: transparent;
				margin-bottom: 0;
				text-align: right;
			}
		
			.page-header .phone {
				display: inline-block;
			}
		
			.page-header .button {		
				margin-left: 10px;
			}
		
			.page-header .navigation > .row {
				box-shadow: none;
			}
		}
		
		@media only screen and (min-width: 64.063em) {
			.page-header .logo {
				width: 220px;
			}
		}
		
		/* Page Slider
		   ======================================================= */
		.page-slider.flexslider {
			background: #333;	
			overflow: hidden;
		}
		
		.page-slider .slide-content {	
			-webkit-background-size: cover;
			-moz-background-size: cover;
			-o-background-size: cover;
			background-size: cover;
			display: table;
			height: 100%;
			width: 100%;
		}
		
		.page-slider .slide-content.featimg1 {
			background-image: url('images/featimg1.jpg');
		}
		
		.page-slider .slide-content .slide-content-inner {
			display: table-cell;	
			vertical-align: middle;
		}
		
		.page-slider .slide-caption {
			color: #e1e1e1;
			line-height: 1.4em;
			padding: 40px 10px;	
		}
		
		.page-slider .slide-caption .slide-caption-title {	
			font-size: 1.7647em;
			font-weight: 700;
			color: #fff;
			text-transform: uppercase;
		}
		
		.page-slider .slide-caption .play {
			background: url('images/icon-play.png') no-repeat 2px 1px;
			background-size: 30px 30px;
			color: #fff;
			display: inline-block;
			font-size: 1.2941em;
			line-height: 1.2em;
			padding: 0.15em 0.35em 0.15em 1.8em;
		}
		
		.page-slider .slide-caption .play:hover {
			border-radius: 50px;
			background-color: rgba(51,51,51,0.5);
		}
		
		.page-slider .flex-direction-nav a {
			top: 100px;
		}
		
		.page-slider .flex-direction-nav a:before,
		.page-slider .flex-direction-nav a:after {
			color: #dd4b39;
			line-height: 1em;
			text-shadow: none;
		}
		
		/* Media Queries */
		@media only screen and (min-width: 40.063em) {
			.page-slider.flexslider,
			.page-slider.flexslider .slides,
			.page-slider.flexslider .slides li {
				height: 100%;
			}
		
			.page-slider .flex-direction-nav a {
				top: 50%;
			}
		
			.page-slider .slide-content .slide-content-inner {
				height: 400px;
			}
		
			.page-slider .slide-caption .slide-caption-title {
				font-size: 3.5294em;
			}
		
			.page-slider .slide-caption .play {
				background-size: auto auto;
				font-size: 2.1176em;
			}
		}
		
		/* Page Sections
		   ======================================================= */
		.page-section {
			background-color: #fff;
			padding: 50px 0;
			position: relative;
		}
		
		.page-section.connected:after {
			border-style: solid;
			border-width: 22px 23px 0 23px;
			border-color: #fff transparent transparent transparent;
			content: '';
			position: absolute;
			width: 0;
			height: 0;
			left: 50%;
			bottom: -21px;
			margin-left: -23px;
			z-index: 10;
		}
		
		.page-section.bgcolor-1 {
			background-color: #e2f2f9;
		}
		
		.page-section.bgcolor-2 {
			background-color: #eef1f4;
		}
		
		
		/* Page Footer
		   ======================================================= */
		.page-footer {
			background: #333;
			color: #fff;
			font-size: 0.8235em;
			padding: 30px 0;
			text-align: center;
		}
		
		.page-footer .footer-title {
			color: #fff;
			font-size: 1em;
			font-weight: 400;
			margin-bottom: 0.8em;
			text-transform: uppercase;
		}
		
		.page-footer a {
			color: #fff;
		}
		
		.page-footer a:hover {
			color: #fabc02;
		}
		
		.page-footer .company-logo {
			margin-bottom: 30px;
		}
		
		.page-footer .footer-links {
			list-style: none outside none;
			margin-left: 0;
			margin-bottom: 30px;
		}
		
		.page-footer .footer-links li {
			margin: 2px 0;
		}
		
		.page-footer .footer-links a {
			display: block;
			line-height: 1.4em;
		}
		
		.social-links {
			list-style: none outside none;
			margin-bottom: 30px;
			margin-left: 0;
		}
		
		.social-links li {
			display: inline-block;
			margin: 5px 2px;
		}
		
		.social-links li a {
			background-color: #fff;
			border-radius: 50%;
			color: #333;
			display: inline-block;
			font-size: 16px;
			line-height: 28px;
			text-align: center;
			height: 28px;
			width: 28px;
		}
		
		.social-links li a:hover {
			background-color: #fabc02;
			color: #333;
		}
		
		/* Media Queries */
		@media only screen and (min-width: 40.063em) {
			.page-footer {
				padding: 40px 0;
				text-align: left;
			}
		}
		
		/* Individual Styles
		   ======================================================= */
		.no-padding {
			padding-left: 0;
			padding-right: 0;
		}
		
		.mb-0 { margin-bottom: 0; }
		.mb-5 { margin-bottom: 5px; }
		.mb-15 { margin-bottom: 15px; }
		.mb-40 { margin-bottom: 40px; }
		.mbn-50 { margin-bottom: -50px; }
		.mt-25 { margin-top: 25px; }
		
		.p-0 { padding: 0; }
		.pt-0 { padding-top: 0!important; }
		.pb-0 { padding-bottom: 0; }
		
		.text-italic { font-style: italic; }
		.text-regular { font-weight: 400; }
		.text-medium { font-weight: 500; }
		.text-strong { font-weight: 700; }
		
		.text-color-primary { color: #990000;}
		
		.w-100 { width: 100%; }
								
							

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