Paul Williams
A well known agency needed a solid foundation for their markup so they came to us. We helped them building great responsive HTML/CSS using Foundation that they could later on use as a base of their CMS.
Take a look what we do!Paul Williams
HTML5/CSS3 with foundation framework and responsive layout
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation | Welcome</title>
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/font-awesome.min.css" />
<link rel="stylesheet" href="css/app.css" />
</head>
<body>
<div class="header">
<div class="row">
<div class="large-12 columns">
<a title="" href="#" class="logo"><img src="img/logo.png" alt=""></a>
<a title="" href="#menu" class="mobilemenu"><span></span></a>
<p> <span class="none">FREE CONSULTATION <cite>|</cite></span> <span class="color">Call <a title="954.523.2181" href="tel:9545232181">954.523.2181</a></span></p>
</div>
</div>
</div>
<div class="banner">
<div class="row">
<div class="large-6 float-right medium-6 columns">
<h2>Your Marketing, Message Goes Here. <small>Smaller Secondary Message Goes Here.</small></h2>
<form action="#">
<div class="row">
<div class="small-6 columns">
<label><i class="fa fa-user"></i>First Name</label>
<input type="text">
</div>
<div class="small-6 columns">
<label><i class="fa fa-user"></i>Last Name</label>
<input type="text">
</div>
</div>
<div class="row">
<div class="small-6 columns">
<label><i class="fa fa-phone-square"></i>Phone Number</label>
<input type="text">
</div>
<div class="small-6 columns">
<label><i class="fa fa-envelope"></i>Email Address</label>
<input type="text">
</div>
</div>
<div class="row">
<div class="medium-12 columns">
<label><i class="fa fa-comment"></i>Comment</label>
<textarea></textarea>
</div>
</div>
<input type="submit" class="button medium" value="get a free consultation">
</form>
</div>
</div>
<div class="nav-bar">
<nav id="menu">
<ul>
<li class="active"><a title="Home" href="#"><i class="fa fa-angle-up"></i>Home</a></li>
<li>
<a title="About Us" href="#"><i class="fa fa-angle-up"></i>About Us</a></li>
<li>
<a title="Attorney Profile" href="#"><i class="fa fa-angle-up"></i>Attorney Profile</a></li>
<li>
<a title="Practice Areas" href="#"><i class="fa fa-angle-up"></i>Practice Areas</a></li>
<li>
<a title="Results" href="#"><i class="fa fa-angle-up"></i>Results</a></li>
<li>
<a title="News & Announcements" href="#"><i class="fa fa-angle-up"></i>News & Announcements</a></li>
<li>
<a title="Contact Us" href="#"><i class="fa fa-angle-up"></i>Contact Us</a></li>
</ul>
</nav>
</div>
</div>
<div class="video-bar">
<div class="row">
<div class="text medium-7 columns">
<h2>Ea vitae phaedrum reprimique <br>quoivendo electram has et.</h2>
<span>Elit utamur ceteros ea eos, his volumus interesset consectetuer et. </span>
<p>Elit utamur ceteros ea eos, his volumus interesset consectetuer et. Te mundi saepe duo, homero volumus apeirian et mei, usu quis pericula forensibus eu eripuit labores sea, usu te ornatus mastatiste stet percipit scripseritis legere pertinax amittantur eum. Impedit epicurei no nam, graeci inciderint nec ex, clita commodo inciderint nam ea. </p>
<a title="" href="#" class="button">read more <i class="fa fa-caret-right"></i></a>
</div>
<div class="video medium-4 columns">
<img src="img/video_img.jpg" alt="">
<p>“ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor eaoccaecat cupidatat non proident, sunt ” </p>
<p><span>- Author Name</span></p>
</div>
</div>
</div>
<div class="item-bar">
<ul>
<li><img src="img/img1.jpg" alt=""><span class="title-text">PRACTICE AREA HEADLINE</span>
<div class="overlay">
<div class="text">
<h4>PRACTICE AREA HEADLINE</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<a title="" href="#" class="button">READ MORE <i class="fa fa-caret-right"></i></a>
</div>
</div>
</li>
<li><img src="img/img2.jpg" alt=""><span class="title-text">PRACTICE AREA HEADLINE</span>
<div class="overlay">
<div class="text">
<h4>PRACTICE AREA HEADLINE</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<a title="" href="#" class="button">READ MORE <i class="fa fa-caret-right"></i></a>
</div>
</div>
</li>
<li><img src="img/img3.jpg" alt=""><span class="title-text">PRACTICE AREA HEADLINE</span>
<div class="overlay">
<div class="text">
<h4>PRACTICE AREA HEADLINE</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<a title="" href="#" class="button">READ MORE <i class="fa fa-caret-right"></i></a>
</div>
</div>
</li>
<li><img src="img/img4.jpg" alt=""><span class="title-text">PRACTICE AREA HEADLINE</span>
<div class="overlay">
<div class="text">
<h4>PRACTICE AREA HEADLINE</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<a title="" href="#" class="button">READ MORE <i class="fa fa-caret-right"></i></a>
</div>
</div>
</li>
<li><img src="img/img5.jpg" alt=""><span class="title-text">PRACTICE AREA HEADLINE</span>
<div class="overlay">
<div class="text">
<h4>PRACTICE AREA HEADLINE</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<a title="" href="#" class="button">READ MORE <i class="fa fa-caret-right"></i></a>
</div>
</div>
</li>
<li><img src="img/img6.jpg" alt=""><span class="title-text">PRACTICE AREA HEADLINE</span>
<div class="overlay">
<div class="text">
<h4>PRACTICE AREA HEADLINE</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<a title="" href="#" class="button">READ MORE <i class="fa fa-caret-right"></i></a>
</div>
</div>
</li>
<li><img src="img/img7.jpg" alt=""><span class="title-text">PRACTICE AREA HEADLINE</span>
<div class="overlay">
<div class="text">
<h4>PRACTICE AREA HEADLINE</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<a title="" href="#" class="button">READ MORE <i class="fa fa-caret-right"></i></a>
</div>
</div>
</li>
<li><img src="img/img8.jpg" alt=""><span class="title-text">PRACTICE AREA HEADLINE</span>
<div class="overlay">
<div class="text">
<h4>PRACTICE AREA HEADLINE</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<a title="" href="#" class="button">READ MORE <i class="fa fa-caret-right"></i></a>
</div>
</div>
</li>
</ul>
<div class="bottom-block">
<div class="row">
<div class="medium-6 text-right columns">
<h3>Headline Lorem Ipsum dolor sit amet, aliquam quaerat voluptatem. <span>sum dolor sit amet, aliquam quasum dolor sit amet, aliquam qua</span></h3>
</div>
<div class="medium-6 text-center columns">
<a title="" href="#" class="button">practice areas <i class="fa fa-caret-right"></i></a>
</div>
</div>
</div>
</div>
<div class="logo-bar">
<div class="row">
<div class="medium-12 columns">
<ul>
<li><img src="img/logo1.jpg" alt=""></li>
<li><img src="img/logo2.jpg" alt=""></li>
<li><img src="img/logo3.jpg" alt=""></li>
<li><img src="img/logo4.jpg" alt=""></li>
<li><img src="img/logo5.jpg" alt=""></li>
<li><img src="img/logo6.jpg" alt=""></li>
<li><img src="img/logo7.jpg" alt=""></li>
<li><img src="img/logo8.jpg" alt=""></li>
</ul>
</div>
</div>
</div>
<div class="contact_form-bar">
<div class="row">
<div class="medium-12 columns">
<h3>Get a Free Cosultation <span>His Bolumus Interesset Consectetuer.</span></h3>
<form action="#">
<div class="row">
<div class="medium-4 columns">
<label><i class="fa fa-user"></i>Full name</label>
<input type="text">
</div>
<div class="medium-4 columns">
<label><i class="fa fa-phone-square"></i>Phone Number</label>
<input type="text">
</div>
<div class="medium-4 columns">
<label><i class="fa fa-envelope"></i>Email</label>
<input type="text">
</div>
</div>
<div class="row">
<div class="medium-12 columns">
<label><i class="fa fa-comment"></i>Comment</label>
<textarea></textarea>
</div>
</div>
<div class="text-center">
<input type="submit" class="button medium" value="get a free consultation">
</div>
</form>
</div>
</div>
</div>
<div class="footer-bar">
<i class="fa fa-location-arrow"></i>
<address>219 SW 17th Street Fort Lauderdale, Florida 33315
<br>Email: <a title="954.523.2181" href="mailto:youremail@yourdomain.com">youremail@yourdomain.com</a> - Phone: <a href="tel:9545232181">954.523.2181</a> - Fax: 954.337.6169 </address>
<ul>
<li><a title="" href="#"><i class="fa fa-facebook"></i></a></li>
<li><a title="" href="#"><i class="fa fa-google-plus"></i></a></li>
<li><a title="" href="#"><i class="fa fa-twitter"></i></a></li>
<li><a title="" href="#"><i class="fa fa-linkedin"></i></a></li>
<li><a title="" href="#"><i class="fa fa-youtube"></i></a></li>
</ul>
<p>© Copyright 2015 <a title="Disclaimer A PaperStreet Essentials Web Design" href="#">Firm Name</a>. All Rights Reserved. <a href="#">Sitemap</a> | <a href="#">Disclaimer A PaperStreet Essentials Web Design</a></p>
</div>
<script src="js/vendor/jquery.min.js"></script>
<script src="js/foundation.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
*, h1, h2, h3, h4, h5, h6 { font-family: 'Roboto', sans-serif; }
[type="text"], [type="password"], [type="date"], [type="datetime"], [type="datetime-local"], [type="month"], [type="week"], [type="email"], [type="number"], [type="search"], [type="tel"], [type="time"], [type="url"], [type="color"], textarea { border: 1px solid #909396; background: rgba(0,0,0,0); box-shadow: none; -webkit-box-shadow: none; color: #fff; height: 45px; }
textarea { height: 100px; }
[type="text"]:focus, [type="password"]:focus, [type="date"]:focus, [type="datetime"]:focus, [type="datetime-local"]:focus, [type="month"]:focus, [type="week"]:focus, [type="email"]:focus, [type="number"]:focus, [type="search"]:focus, [type="tel"]:focus, [type="time"]:focus, [type="url"]:focus, [type="color"]:focus, textarea:focus { border-color: #fff; background: rgba(0,0,0,0); box-shadow: none; -webkit-box-shadow: none; }
hr { border-color: #dddddd; margin: 35px 0; }
select { box-shadow: none !important; -webkit-box-shadow: none; -ms-box-shadow: none; -moz-box-shadow: none; -webkit-appearance: none; -moz-appearance: none; }
select:focus { outline: none; box-shadow: none; -webkit-box-shadow: none; -ms-box-shadow: none; -moz-box-shadow: none; }
label { padding-bottom: 14px; display: block; color: #fff; font-size: 14px; line-height: 20px; font-family: 'Roboto', sans-serif; letter-spacing: -0.01em; }
label i { display: inline-block; padding-right: 7px; }
.tabs-content { border: none; overflow: hidden; background: none; }
.tabs-panel { padding: 0; }
ul { margin: 0; padding: 10px 40px; list-style: none; }
li { padding: 8px 0; font-size: 15px; line-height: 20px; }
li a { color: #585858; }
li a i.fa-angle-right { color: #00a5ec; margin-right: 5px; }
li a:hover, li.selected a { color: #00a5ec; }
h2 { font-size: 30px; line-height: 40px; font-weight: 400; }
h3 { font-size: 24px; line-height: 30px; font-weight: 400; }
p { color: #585858; font-size: 15px; line-height: 25px; }
a { color: #00a5ec; }
.pagination { padding: 0; margin: 70px 0 25px; margin-left: -5px; }
.pagination .pagination-previous { padding-right: 5px; }
.pagination .pagination-next { padding-left: 5px; }
.pagination li, .pagination .current { text-transform: uppercase; padding: 0; margin: 0 3px; font-weight: 500; font-size: 14px; min-width: 30px; line-height: 30px; text-align: center; }
.pagination .current { background: #00aeef; text-decoration: underline; }
.pagination a, .pagination button { padding: 0 6px; min-width: 30px; line-height: 30px; }
.pagination-previous a::before, .pagination-previous.disabled::before { display: none; }
.pagination-next a::after, .pagination-next.disabled::after { display: none; }
select { padding: 10px 60px 10px 15px; color: #6d6d6f; font-size: 14px; font-style: italic; font-weight: 500; background:#f3f3f3 url(../img/select.png) right center no-repeat; box-shadow: none; height: 50px; border: 1px solid #e8e8e8; }
.button { text-transform: uppercase; padding: 18px 34px; letter-spacing: 0.07em; font-size: 13px; font-weight: 700; background: #31aeef; }
.button.medium { padding: 22px 28px; }
/* header */
.header { z-index:999; height: 121px; width: 100%; position: absolute; left: 0px; top: 0px; overflow: hidden; background: rgba(15,22,28,0.5); }
.header .logo { float:left; margin: 20px 15px 0 0 ; }
.header p { padding: 44px 0 0 0; font-weight: 300; letter-spacing: 2px; text-transform: uppercase; color: #aaaaaa; font-size: 18px; line-height: 24px; float: right; }
.header p cite { font-size: 18px; font-style: normal; padding: 0 8px; display: inline-block; color: #303030; }
.header p cite:before { display: none; }
.header span.color { color: #00a5ec; }
.header.inner { position: relative; background: #0f1215; }
/* banner */
.banner { position: relative; padding: 157px 0 0; width: 100%; min-height: 980px; background: url(../img/banner_img.jpg) center top no-repeat; background-size: cover; }
.banner h2 { font-family: 'Cinzel', serif; padding-bottom: 54px; color: #fff; font-size: 60px; line-height: 72px; }
.banner h2 small { font-family: 'Cinzel', serif; display: block; color: #8a8a8a; font-size: 20px; line-height: 24px; padding: 30px 0 0; }
.banner .button { margin-top: 5px; }
.banner.inner-banner1 { padding-top: 110px; margin-top: -40px; min-height: 460px; background-image: url(../img/banner_img2.jpg); }
.banner h3 { font-family: 'Cinzel', serif; padding-bottom: 35px; color: #fff; font-size: 48px; line-height: 54px; margin: 0; }
.banner h3 small { font-family: 'Cinzel', serif; display: block; color: #8a8a8a; font-size: 20px; line-height: 22px; padding: 0; }
.banner .address-block ul { list-style: none; overflow: hidden; margin: 0; padding: 0; }
.banner .address-block li { padding: 10px 5px 8px 50px; margin-bottom: 8px; position: relative; width: 100%; font-size: 17px; line-height: 25px; float: left; color: #fff; }
.banner .address-block li a { color: #fff; }
.banner .address-block li i { position: absolute; font-size: 15px; text-align: center; left: 0px; top: 5px; width: 35px; height: 35px; border: 1px solid #e8e8e8; line-height: 33px; display: block; }
.banner .right_block { float: right; width: 51.2%; }
.banner .nav-bar li a { height: 80px; line-height: 80px; font-size: 14px; }
.banner-row { width: 100%; height: 309px; overflow: hidden; background-size: cover; background-repeat: no-repeat; background-position: center top; }
.mobile_banner { display: none; }
/* nav-bar */
.nav-bar { width: 100%; z-index: 99; position: absolute; left: 0px; bottom: 0px; background: rgba(240,240,240,0.9); }
.nav-bar ul { list-style: none; text-align: center; overflow: hidden; padding: 0; margin: 0; }
.nav-bar li { display: inline-block; padding: 0; }
.nav-bar li:first-child { border: none; }
.nav-bar li a { text-transform: uppercase; display: block; border-left: 1px solid #595959; border-right: 1px solid #595959; margin-left: -1px; position: relative; z-index: 9; font-weight: 700; letter-spacing: 0.07em; padding: 0 40px; height: 40px; line-height: 40px; color: #000; font-size: 13px; }
.nav-bar li a:hover, .nav-bar li.active a { background: #00a5ec; color: #fff; position: relative; z-index: 99; border-color: #bbbbbb; }
.nav-bar li a i { position: absolute; left: 0px; top: 15px; display: none; width: 100%; text-align: center; }
.nav-bar li a:hover i, .nav-bar li.active a i { display: block; }
.nav-bar.inner { position: relative; left: auto; bottom: auto; }
/* video-bar */
.video-bar { padding: 95px 0; }
.video-bar h2 { color: #000; font-size: 30px; line-height: 40px; margin:0; padding: 0 0 25px; }
.video-bar .text span { color: #3d3d3d; font-size: 15px; line-height: 24px; display: block; font-family: 'Cinzel', serif; padding-bottom: 25px; }
.video-bar .text p { padding: 0 0 42px; color: #585858; font-size: 15px; line-height: 25px; letter-spacing: 0.01em; }
.video-bar .video { margin: 5px 0 0; }
.video-bar .video p { color: #3d3d3d; font-size: 15px; line-height: 25px; font-style: italic; letter-spacing: -0.01em; padding: 0 0 10px; }
.video-bar .video img { width: 100%; margin-bottom: 22px; }
.video-bar .video p span { display: block; text-align: right; float: right; }
.video-bar.spacer p { margin: 0; padding: 0 0 25px; }
.video-bar.spacer { padding: 40px 0 60px; }
.video-bar.gap_none { padding: 30px 0; }
.side-block { margin-top: 38px; padding-bottom: 25px; background: #f9f9f9; }
.side-block h3 { padding: 20px 40px; border-bottom: 2px solid #e8e8e8; font-size: 24px; line-height: 30px; font-weight: 400; }
.rss_btn { padding: 10px 25px; letter-spacing: 0.04em; font-weight: 500; font-size: 14px; color: #fff !important; line-height: 20px; text-transform: uppercase; margin: 55px 0; display: block; background: #000; }
.rss_btn:hover { background: #1583cc; }
.rss_btn i { padding-right: 5px; }
/* item-bar */
.item-bar { width: 100%; overflow:hidden; }
.item-bar ul { list-style: none; margin: 0; padding: 0; width: 100%; overflow:hidden; }
.item-bar li { padding: 0; float:left; width: 25%; position: relative; background: #000; }
.item-bar span.title-text { position: absolute; font-weight: 700; right: 20px; bottom: 20px; color: #fff; font-size: 15px; line-height: 24px; }
.item-bar li a { display: block; position: relative; }
.item-bar li a img { opacity: 0.5; width: 100%; }
.item-bar .bottom-block { overflow:hidden; padding:125px 0; min-height: 440px; background: #0e171f; }
.item-bar h3 { color: #fff; font-size: 30px; line-height: 46px; letter-spacing: 0.01em; }
.item-bar h3 span { color: #fff; font-size: 15px; line-height: 24px; display: block; letter-spacing: 0; font-family: 'Cinzel', serif; padding-top: 20px; }
.item-bar .button { margin: 38px 0 0 95px; }
.item-bar .overlay { opacity: 0; transition: all 0.3s; -webkit-transition: all 0.3s; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background: rgba(0,165,236,0.8); text-align: center; }
.item-bar .overlay .text { padding: 15px; overflow: auto; position: absolute; left: 0px; width: 100%; top: 50%; -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); }
.item-bar .overlay h4 { color: #fff; padding: 0 0 20px; margin: 0; font-size: 15px; line-height: 20px; font-weight: 700; }
.item-bar .overlay p { color: #fff; padding: 0 0 30px 0; margin: 0; font-size: 15px; line-height: 25px; }
.item-bar .overlay .button { padding:0; width: 128px; display: inline-block; height: 40px; line-height: 40px; margin: 0; background: #0e0e0e; font-weight: 700; }
.item-bar .overlay .button:hover { background: #1583cc; }
.item-bar li img { width: 100%; opacity: 0.5; transition: all 0.3s; -webkit-transition: all 0.3s; }
.item-bar li:hover .overlay { opacity: 1; }
.item-bar li:hover .overlay { opacity: 1; }
.item-bar li:hover span.title-text { opacity: 0; }
.item-bar.attorneys li:hover span.title-text { opacity: 1 }
.item-bar.attorneys li:hover img { opacity: 0.8; }
.item-bar.attorneys span cite { color: #fff; font-size: 14px; line-height: 18px; font-weight: 400; }
.item-bar.attorneys a { text-decoration: none; color:#fff; }
.item-bar.attorneys span cite::before { display: none; }
.item-bar.attorneys span.title-text { text-align: right; font-weight: 700; }
/* logo-bar */
.logo-bar { overflow: hidden; width: 100%; }
.logo-bar ul { margin:0 0 -1px; padding:0; list-style: none; overflow: hidden; }
.logo-bar li { padding: 65px 10px; border-bottom: 1px solid #e4e4e4; border-left: 1px solid #e4e4e4; float:left; width: 25%; }
.logo-bar li img { margin: auto; display: block; opacity: 0.7; }
.logo-bar li:first-child { border-left-color: #fff; }
.logo-bar li:nth-child(5n) { border-left-color: #fff; }
.logo-bar.inner ul { border-top: 1px solid #e4e4e4; }
/* practice-bar */
.practice-bar { text-align: center; padding: 70px 0 65px; }
.practice-bar h2 { color: #000000; font-size: 30px; line-height: 40px; font-weight: 700; padding: 0 0 25px; margin: 0; }
.practice-bar p { color: #585858; font-size: 15px; line-height: 25px; margin: 0; padding-bottom: 45px; }
.practice-bar .col { text-align: center; vertical-align: top; max-width: 824px; margin: auto; }
.practice-bar .mid { padding-right: 14px; display: inline-block; width: 50%; vertical-align: top; }
.practice-bar .mid.right { padding: 0 0 0 14px; vertical-align: top; }
.practice-bar input[type="text"] { padding: 10px 60px 10px 15px; color: #6d6d6f; font-size: 14px; font-style: italic; font-weight: 500; background:#f3f3f3 url(../img/search_bg.jpg) right center no-repeat; box-shadow: none; height: 50px; border: 1px solid #e8e8e8; }
.practice-bar *::-webkit-input-placeholder{opacity:1; color: #6d6d6f }
.practice-bar *::-moz-placeholder{opacity:1; color: #6d6d6f }
.practice-bar *:-ms-input-placeholder{opacity:1; color: #6d6d6f }
/* tab-bar */
.tab-bar { padding: 0; overflow: hidden; background: #dadada; }
.tab-bar ul { list-style: none; padding: 0px; margin: 0; overflow: hidden; border-right: 1px solid #fff; }
.tab-bar li { width: 25%; float:left; padding: 0; margin: 0; border-left: 1px solid #fff; }
.tab-bar li a { padding: 0 20px 0 25px; display: block; text-transform: uppercase; letter-spacing: 0.04em; color: #0f1215; font-size: 14px; height: 40px; line-height: 40px; }
.tab-bar li a i { float: right; display: block; line-height: 40px; }
.tab-bar li a:hover, .tab-bar li.is-active a { background: #fff; }
.about-bar { padding: 40px 0; }
.about-bar small { color: #3d3d3d; font-size: 15px; line-height: 24px; display: block; font-family: 'Cinzel', serif; padding-bottom: 25px; }
.about-bar h2 { padding-bottom: 20px; }
.about-bar p { padding-bottom: 13px; }
.about-bar h3 { padding-bottom: 17px; }
.about-bar ul { padding: 0px 30px 20px; }
.about-bar li a { font-style: italic; }
.about-bar .button { padding-left: 22px; padding-right: 22px; }
.blog-bar { padding: 40px 0; }
.blog-bar h2 { padding-bottom: 5px; }
.blog-post { border: 1px solid #ebebeb; margin-top: 29px; padding: 35px 40px 63px; position: relative; }
.blog-post h3 { margin-bottom: 0px; }
.blog-post span { font-size: 14px; color: #585858; padding-bottom: 25px; display: block; line-height: 25px; }
.blog-post .button { position: absolute; right: 0px; bottom: 0px; margin: 0; padding: 18px 24px; }
.search-box input[type="text"] { padding: 10px 70px 10px 20px; margin: 0; color: #6d6d6f; font-size: 14px; font-style: italic; font-weight: 500; background:#f9f9f9; box-shadow: none; height: 50px; border: 1px solid #e8e8e8; }
.search-box *::-webkit-input-placeholder{opacity:1; color: #6d6d6f }
.search-box *::-moz-placeholder{opacity:1; color: #6d6d6f }
.search-box *:-ms-input-placeholder{opacity:1; color: #6d6d6f }
.search-box { margin: 10px 0 0; padding-bottom: 10px; position: relative; width: 100%; }
.search-box input[type="submit"] { position: absolute; right: 0px; margin: 0; top: 0px; border: none; cursor: pointer; width: 50px; height: 50px; background: url(../img/submit.png) no-repeat #31aeef ; }
.search-box input[type="submit"]:hover { background-color: #1583cc; }
/* contact_form-bar */
.contact_form-bar { padding: 95px 0; overflow: hidden; background: url(../img/form_bg.jpg) center top no-repeat; background-size: cover; }
.contact_form-bar form { max-width: 930px; margin: auto; }
.contact_form-bar h3 { padding-bottom: 60px; color: #fff; font-size: 30px; line-height: 34px; font-weight: 400; text-align: center; text-transform: uppercase; }
.contact_form-bar h3 span { color: #fff; font-size: 18px; line-height: 26px; font-weight: 400; display: block; letter-spacing: 0; font-family: 'Cinzel', serif; padding-top: 30px; }
.contact_form-bar input[type="text"] { height: 50px; }
.contact_form-bar textarea { height: 150px; }
.contact_form-bar .button { margin-top: 15px; }
.contact_form-bar.side_inner { padding:35px 30px; margin-top: 60px; }
.contact_form-bar.side_inner .button { width: 100%; padding-left: 10px; padding-right: 10px; margin: 0; }
.contact_form-bar.side_inner h3 { font-size: 18px; line-height: 20px; font-weight: 700; padding-bottom: 18px; }
.contact_form-bar.side_inner h3 span { font-size: 14px; line-height: 20px; font-weight: 400; padding-top: 20px; }
.contact_form-bar.side_inner textarea { height: 100px; margin-bottom: 20px; }
.contact_form-bar.spacer { margin-top: -60px; }
/* footer-bar */
.footer-bar { padding: 95px 0 30px; text-align: center; color: #fff; background: #0e171f; }
.footer-bar .fa-location-arrow { display: inline-block; margin-bottom: 95px; font-size: 42px; width: 103px; height: 103px; line-height: 100px; text-align: center; border: 2px solid #fff; border-radius: 50%; -webkit-border-radius: 50%; }
.footer-bar address { padding: 0 0 77px; color: #fff; font-size: 30px; line-height: 40px; font-style: normal; }
.footer-bar address a { color: #fff; }
.footer-bar address a:hover { color: #64717b; }
.footer-bar ul { list-style: none; padding: 0; margin: 0; }
.footer-bar li { padding: 0 20px; display: inline-block; }
.footer-bar li a { color: #fff; font-size: 26px; transition: all 0.3s; -webkit-transition: all 0.3s; line-height: 48px; width: 51px; height: 51px; border: 2px solid #fff; display: block; }
.footer-bar li a:hover { box-shadow: inset 0 -50px #fff; color: #000; }
.footer-bar p { padding: 73px 0 0; color: #64717b; font-size: 10px; line-height: 20px; text-transform: uppercase; letter-spacing: 0.09em; word-spacing: 2px; }
.footer-bar p a { color: #64717b; }
.footer-bar p a:hover { color: #fff; }
@media screen and (max-width: 1359px) {
.nav-bar li a { padding: 0 30px; }
}
@media screen and (max-width: 1279px) {
.nav-bar li a { padding: 0 24px; }
.item-bar .button { margin-left: 0px; }
}
@media screen and (max-width: 1169px) {
.nav-bar li a { padding: 0 17px; }
.footer-bar address { font-size: 26px; }
.banner h2 { font-size: 45px; line-height: 50px; }
.item-bar .overlay p { padding-bottom: 15px; line-height: 18px; }
.item-bar .overlay h4 { padding-bottom: 5px; }
.item-bar .overlay { overflow: auto; }
}
@media screen and (max-width: 1023px) {
.nav-bar li a { padding: 0 17px; }
.footer-bar address { font-size: 20px; line-height: 28px; padding-bottom: 50px; }
.footer-bar .fa-location-arrow { margin-bottom: 50px; }
.footer-bar { padding-top: 55px; }
.footer-bar p { padding-top: 50px; }
.item-bar li { width: 50% }
.item-bar .bottom-block { padding: 70px 0; min-height: inherit; }
.item-bar h3 { font-size: 24px; line-height: 36px; letter-spacing: 0px; }
.item-bar h3 span { padding-top: 10px; }
.logo-bar li { padding: 20px 10px; }
.logo-bar li img { width: 150px; }
.contact_form-bar, .video-bar { padding: 50px 0; }
.about-bar p { padding-bottom: 10px; margin: 0; }
hr { margin: 25px 0; }
.about-bar h3 { padding-bottom: 15px; margin: 0; }
.video-bar .text p { padding-bottom: 20px; }
.video-bar .text span, .about-bar small { font-size: 14px; padding-bottom: 15px; line-height: 18px; }
.video-bar h2 { font-size: 26px; line-height: 34px; }
.video-bar .video p { font-size: 14px; line-height: 20px; }
.about-bar ul { padding: 0 0 5px; }
.about-bar .button { margin-top: 20px; }
.contact_form-bar h3 span { padding-top: 15px; }
.contact_form-bar h3 { padding-bottom: 40px; }
.banner h2 { font-size: 34px; line-height: 40px; padding-bottom: 20px; }
.about-bar h2 { margin:0; padding-bottom: 15px; }
.banner h2 small { padding-top: 10px; font-size: 16px; }
.nav-bar li a { padding: 0 14px; }
.practice-bar p br { display: none; }
}
@media screen and (max-width: 979px) {
.nav-bar li a { padding: 0 9px; font-size: 11px; }
.banner .nav-bar li a { height: 60px; line-height: 60px; font-size: 11px; }
.nav-bar li a i { top: 7px; }
.header .logo { width: 300px; }
.header { height: 104px; }
.header p { font-size: 14px; }
.banner { min-height: 800px; }
.logo-bar li img { width: 130px; }
.item-bar h3 { font-size: 22px; line-height: 28px; }
.video-bar .text p, .about-bar p { font-size: 14px; line-height: 22px; }
.video-bar h2 { font-size: 24px; line-height: 30px; padding-bottom: 20px; }
.banner h2 { font-size: 28px; line-height: 36px; }
.banner .right_block { padding-right: 15px; width: 60%; }
.contact_form-bar.side_inner { padding: 25px 20px; }
}
@media screen and (max-width: 767px) {
.nav-bar li a { font-size: 9px; padding: 0 9px; }
.nav-bar li a i { top: 2px; }
.banner { min-height: 640px; }
.banner h2 small { font-size: 14px; line-height: 18px; }
.banner .nav-bar li a { height: 44px; line-height: 44px; }
.header .logo { width: 180px; margin-top: 15px; }
.header { height: 68px; }
.header p { font-size: 12px; padding-top: 27px; }
.item-bar h3 span { font-size: 14px; line-height: 20px; }
.footer-bar address { font-size: 17px; line-height: 22px; padding-bottom: 30px; }
.footer-bar li { padding: 0 10px; }
.footer-bar .fa-location-arrow { font-size: 30px; line-height: 66px; height: 70px; width: 70px; margin-bottom: 30px; }
.footer-bar { padding-top: 40px; padding-bottom: 20px; }
.footer-bar p { padding: 30px 0 0; margin-bottom: 0px; font-size: 10px; }
.mm-opened a.close { display: block; }
.mobilemenu span { width: 30px; border-radius: 5px; transition: all 0.3s; -webkit-transition: all 0.3s; -webkit-border-radius: 5px; -webkit-transition: -webkit-transform .3s;transition:transform .3s; background: #fff; display: block; height: 4px; left: 0; position: absolute; right: 0; top: 15px; }
.mobilemenu span:before{ top: -7px; transition-property:top,transform; }
.mobilemenu span:after,.mobilemenu span:before { border-radius: 5px; -webkit-border-radius: 5px; background-color: #fff; content: ""; display: block; height: 4px; left: 0; position: absolute; width: 100%; transition-duration:.3s,.3s; }
.mobilemenu span:after{ bottom: -7px; transition-property:bottom,transform; }
.mm-opened .mobilemenu span { background:0 0; transition: all 0.3s; -webkit-transition: all 0.3s; }
.mm-opened .mobilemenu span:before { top:0; -webkit-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg)}
.mm-opened .mobilemenu span:after { bottom:0; -webkit-transform:rotate(-45deg); -ms-transform:rotate(-45deg); transform:rotate(-45deg)}
.mobilemenu { display: block; float: left; font-size: 17px; color: #fff; height: 30px; margin-top: 2px; line-height: 30px; font-family: 'titilliumsemibold_upright'; text-transform: uppercase; overflow: hidden; padding: 0; position: relative; width: 35px;transition: all 0.3s; -webkit-transition: all 0.3s; }
.mm-opened .mobilemenu { text-indent: -9999px; }
.nav-bar { display: none; }
.mobilemenu { float: right; margin-top: 18px; }
.header p { position: absolute; right: 0px; top: 0px; display: none; }
.header p span.none { display: none; }
.contact_form-bar, .video-bar { padding: 30px 0; }
.footer-bar p { padding-left: 10px; padding-right: 10px; }
.button.medium { padding: 15px 20px; }
.button { font-size: 12px; }
.practice-bar p { padding-bottom: 25px; }
.practice-bar h2 { font-size: 26px; padding-bottom: 10px; }
.practice-bar { padding: 30px 0; }
.banner .right_block { padding-right: 15px; width: 100%; }
.banner h3 { font-size: 34px; line-height: 40px; }
.banner .address-block li { font-size: 15px; }
.tab-bar li a { padding: 0 15px; font-size: 13px; }
.side-block h3 { padding: 15px 20px; font-size: 22px; }
.side-block { padding-bottom: 20px; }
li { font-size: 14px; }
ul { padding: 10px 20px; }
.mobile_banner { display: block; }
.contact_form-bar.side_inner { padding: 20px 15px; margin-top: 30px; }
.contact_form-bar.side_inner h3 { font-size: 17px; }
.blog-post { padding: 25px 20px 63px; margin-top: 20px; }
.side-block { margin-top: 20px; }
.rss_btn { margin: 30px 0; }
h2 { font-size: 26px; line-height: 30px; }
.blog-bar h2 { padding-bottom: 0; }
.blog-bar { padding: 30px 0; }
.blog-post span { line-height: 18px; padding: 5px 0 20px; }
h3 { font-size: 20px; line-height: 24px; }
.pagination li, .pagination .current { margin: 0; }
.pagination .pagination-previous { padding-right: 1px; }
.pagination .pagination-next { padding-left: 1px; }
.pagination { margin: 40px 0 20px; }
.about-bar { padding: 30px 0; }
.tab-bar .column { padding: 0; }
.tab-bar li { width: 100%; border: none !important; border-bottom: 1px solid #fff !important; }
.banner .right_block { padding: 10px 0px !important; }
.banner.inner-banner1 { background: #000; padding: 0; }
.banner.inner-banner1::before { display: none; }
}
@media screen and (max-width: 639px) {
.item-bar .bottom-block .text-right { text-align: center; }
.item-bar .bottom-block { padding: 30px 0; }
.item-bar .button { margin-top: 10px; }
.banner:before { content: ''; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background: rgba(0,0,0,0.6); }
.banner .row { position: relative; z-index: 1; }
.banner { padding-top: 90px; background-position: 40% top; }
.item-bar li { width: 100%; }
.footer-bar li a { width: 40px; height: 40px; font-size: 18px; line-height: 36px; }
.footer-bar li { padding: 0 5px; }
.video-bar h2 { font-size: 22px; line-height: 24px; padding-bottom: 10px; }
.video-bar .text p { margin: 0; }
.practice-bar .mid { padding-right: 5px }
.practice-bar .mid.right { padding-left: 5px; }
.footer-bar address { font-size: 14px; padding-bottom: 20px; }
.footer-bar p { padding-top: 20px; line-height: 16px; }
.footer-bar { padding-top: 30px; }
.footer-bar .fa-location-arrow { font-size: 24px; height: 50px; line-height: 46px; margin-bottom: 20px; width: 50px;}
.banner .right_block { width: 100%; padding: 0 15px 20px; }
.banner.inner-banner1 { padding-top: 30px; margin-top: -10px; min-height: 100px; }
.banner h3 { padding-bottom: 15px; font-size: 32px; }
.tab-bar li:nth-child(1) { border-bottom: 1px solid #fff; }
.tab-bar li:nth-child(2) { border-bottom: 1px solid #fff; }
.video-bar.spacer { padding: 30px 0 40px; }
.search-box { margin-top: 30px; }
.pagination { margin: 20px 0 0px; }
.pagination .pagination-next { float: right; }
.banner-row { height: 250px; }
.about-bar { padding-bottom: 0;}
.about-bar .button { margin-bottom: 0px; }
.video-bar.gap_none { padding-top: 20px; }
.video-bar.gap_none .video { margin-top: 0px; }
.banner-row { height: 140px; }
}
@media screen and (max-width: 479px) {
.logo-bar li { width: 50%; }
.logo-bar li:nth-child(3){ border-left-color: #fff;}
.logo-bar li:nth-child(7){ border-left-color: #fff;}
.practice-bar .mid { padding-right: 0; width: 100%; }
.practice-bar { padding-bottom: 15px; }
.practice-bar .mid.right { padding-left: 0; }
.banner .address-block li { line-height: 22px; font-size: 13px; }
}
@media only screen and (min-width: 768px) {
.mm-menu.mm-current { display: none !important; }
html.mm-opening .mm-slideout { transform: translate(0px, 0px) !important; -webkit-transform: translate(0px, 0px) !important; }
html.mm-opened { overflow: visible !important; }
html.mm-opened body { overflow: visible !important; }
#mm-blocker { display: none !important; }
.mobilemenu { display: none; }
}
Other examples of our work
Clients trusted us with their web projects.
“For the last 5+ years, Pixel2HTML has been my secret weapon I keep in my back pocket. Even when I'm working with full-time internal teams, it's great to have a reliable resource that can step in and supplement our efforts. I've used other on-line resources, but none compare to this team.".
“Pixel2HTML pays a lot of attention to details, which is something that Auth0 values deeply. We've done 3 promo-sites with them and they were all delivered in time and with great quality thanks to the fluent communication we had with their team”.
“We needed a total overhaul on our Shopify site and Pixel2HTML really came through. I have been very impressed with their flexibility and eagerness to take on all of our ideas, no matter how big. We are extremely happy with what they have built for us and will continue to recommend them in the future.”
“Pixel2HTML has become an incredible resource for my team. I send them very extensive FrontEnd development work with very specific functionality requirements that are always met. They have an excellent project management staff that’s always there to ensure the project stays on course from start to finish.”.
"Pixel2HTML has shown nothing short of spectacular flexibility in development helping us understand the limits, potential and ultimately what creative solutions we could achieve together to build something wholly original on an ongoing basis. For years, they have been my number 1 recommendation every time anyone asks for help with what they do."
"We have a very complex site that had to be responsive and use a large amount of JavaScript. Pixel2Html built very clean html for us and simply did a great job. Their communication is great as is their work."