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 & 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 & 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%; }