Able Lending
The design team at Able Lending needed an email template that their marketing team could use in a campaign very quickly. We worked based on their Sketch design to produce this awesome responsive email template code they could use in their campaign in no time.
Take a look the code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>Able</title>
</head>
<body>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#00abd7" style="margin:0;padding:0;border-collapse:collapse!important;width:100%!important;font-family: Arial, Helvetica,sans-serif;font-size:14px;color:#4a4a4a !important;" id="backgroundTable">
<tbody>
<tr>
<td valign="top">
<table align="center" width="800" border="0" cellpadding="0" cellspacing="0" class="emailWrapper" bgcolor="#ffffff" style="width:800px;min-width:800px;margin: 0 auto;">
<tbody>
<!-- Top logo -->
<tr>
<td align="center" valign="top" bgcolor="#00abd7" style="padding:34px 0;">
<a title="" href="https://pixel2html.com/" target="_blank" style="display: inline-block;"><img src="images/logo.png" alt="Pixel2HTML Logo" width="156" style="display: block;outline:none;border:0;"></a>
</td>
</tr>
<!-- Body Content -->
<tr>
<td valign="top">
<table style="border-collapse:collapse;" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" align="center" width="100%;">
<tbody>
<!-- Top Title -->
<tr>
<td align="center" valign="top" style="padding: 43px 20px;color:#4a4a4a;font-size:32px;font-family: 'Montserrat', Arial, Helvetica, sans-serif;line-height: 1.23;" class="break">Refer your clients to a lender
<br> who can fund more deals</td>
</tr>
<!-- Banner -->
<tr>
<td valign="top"><img src="images/banner.jpg" width="800" style="display: block;max-width: 100%;" alt="Banner"></td>
</tr>
<!-- Services section -->
<tr>
<td valign="top" style="padding:30px 0 0 0;">
<table align="center" border="0" cellpadding="0" width="100%" style="border-collapse: collapse;">
<tbody>
<!-- Caption -->
<tr>
<td align="center" valign="top" style="color:#4a4a4a;font-size:16px;font-family: 'Montserrat', Arial, Helvetica, sans-serif;line-height: 1.85;padding: 20px 110px 26px 110px" class="caption">Able offers you the ability to sell meaningful capital at a sustainable cost for your clients. This helps you attract more qualified candidates, maximize your revenues from services, and provide a best-in-class customer experience.</td>
</tr>
<!-- Separator starts -->
<tr>
<td align="center" valign="top" style="padding-top:0px;padding-bottom:0px">
<table border="0" cellpadding="0" cellspacing="0" width="202" style="margin:0 auto;">
<tbody>
<tr>
<td align="center" valign="top" style="border-top:2px solid #fbb864;"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- Separator ends -->
<!-- Services List -->
<tr>
<td valign="top" style="padding:10px 20px 30px 20px;" class="mobile-spacing">
<table align="center" border="0" cellpadding="0" width="100%" style="border-collapse: collapse;">
<tbody>
<!-- First row -->
<tr>
<td valign="top" style="padding: 20px 0;" class="row">
<table align="left" width="379" style="border-collapse:collapse;" border="0" cellpadding="0" cellspacing="0" class="block-col-6">
<tbody>
<tr>
<td valign="top" align="center" style="padding: 30px 0 20px 0;"><img src="images/icon-money.png" alt="Icon Money" width="124" style="display: block;outline:none;border:0;"></td>
</tr>
<tr>
<td align="center" valign="top" style="padding: 5px 0;color:#4a4a4a;font-size:16px;font-family: 'Montserrat', Arial, Helvetica, sans-serif;line-height: 1.2;text-transform:uppercase;">Lowest Apr Online</td>
</tr>
<tr>
<td align="center" valign="top" style="padding: 4px 0 24px 0;color:#4a4a4a;font-size:16px;font-family: 'Montserrat', Arial, Helvetica, sans-serif;line-height: 1.35;">Our model allows us to offer
<br> the lowest non-bank rates.</td>
</tr>
</tbody>
</table>
<!--[if gte mso 9]></td><td valign="top"><![endif]-->
<table align="right" width="379" style="border-collapse:collapse;" border="0" cellpadding="0" cellspacing="0" class="block-col-6">
<tbody>
<tr>
<td valign="top" align="center" style="padding: 30px 0 20px 0;"><img src="images/icon-spaceship.png" alt="Spaceship" width="124" style="display: block;outline:none;border:0;"></td>
</tr>
<tr>
<td align="center" valign="top" style="padding: 5px 0;color:#4a4a4a;font-size:16px;font-family: 'Montserrat', Arial, Helvetica, sans-serif;line-height: 1.2;text-transform:uppercase;">Funding up to $1mm</td>
</tr>
<tr>
<td align="center" valign="top" style="padding: 4px 0 24px 0;color:#4a4a4a;font-size:16px;font-family: 'Montserrat', Arial, Helvetica, sans-serif;line-height: 1.35;">Move upmarket and fund larger
<br> deals. Our avg. is $180k.</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- Second row -->
<tr>
<td valign="top" style="padding: 20px 0;" class="row">
<table align="left" width="379" style="border-collapse:collapse;" border="0" cellpadding="0" cellspacing="0" class="block-col-6">
<tbody>
<tr>
<td valign="top" align="center" style="padding: 30px 0 20px 0;"><img src="images/icon-gears.png" alt="Gears icon" width="124" style="display: block;outline:none;border:0;"></td>
</tr>
<tr>
<td align="center" valign="top" style="padding: 5px 0;color:#4a4a4a;font-size:16px;font-family: 'Montserrat', Arial, Helvetica, sans-serif;line-height: 1.2;text-transform:uppercase;">Broker Portal</td>
</tr>
<tr>
<td align="center" valign="top" style="padding: 4px 0 24px 0;color:#4a4a4a;font-size:16px;font-family: 'Montserrat', Arial, Helvetica, sans-serif;line-height: 1.35;">Keep track of your deal flow
<br> with a custom dashboard.</td>
</tr>
</tbody>
</table>
<!--[if gte mso 9]></td><td valign="top"><![endif]-->
<table align="right" width="379" style="border-collapse:collapse;" border="0" cellpadding="0" cellspacing="0" class="block-col-6">
<tbody>
<tr>
<td valign="top" align="center" style="padding: 30px 0 20px 0;"><img src="images/icon-partnership.png" alt="Partnership" width="124" style="display: block;outline:none;border:0;"></td>
</tr>
<tr>
<td align="center" valign="top" style="padding: 5px 0;color:#4a4a4a;font-size:16px;font-family: 'Montserrat', Arial, Helvetica, sans-serif;line-height: 1.2;text-transform:uppercase;">True partbership</td>
</tr>
<tr>
<td align="center" valign="top" style="padding: 4px 0 24px 0;color:#4a4a4a;font-size:16px;font-family: 'Montserrat', Arial, Helvetica, sans-serif;line-height: 1.35;">Marketing assets and sales
<br> resources to help you close.</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- Become a partner section -->
<tr>
<td valign="top" style="background-color:#f6f7f8;padding: 26px 0 17px 0;">
<table align="center" border="0" cellpadding="0" width="100%" style="border-collapse: collapse;">
<tbody>
<tr>
<td align="center" valign="top" style="color:#4a4a4a;font-size:18px;font-family: 'Montserrat', Arial, Helvetica, sans-serif;line-height: 1.2;padding:6px 0;">Become an Able Partner today!</td>
</tr>
<tr>
<td align="center" valign="top" style="padding:10px 0;"><img src="images/avatar.png" alt="Avatar" width="99" style="display: block;outline:none;border:0;"></td>
</tr>
<tr>
<td align="center" valign="top" style="color:#464646;font-size:16px;font-family: 'Montserrat', Arial, Helvetica, sans-serif;line-height: 1.2;padding:3px 0 18px 0;">Matt Irving • Partner Lead</td>
</tr>
<tr>
<td valign="top" style="padding:6px 0;">
<table style="margin:0 auto;" border="0" cellpadding="0" cellspacing="0" align="center">
<tbody>
<tr>
<td align="center" style="-webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px;" bgcolor="#00abd7"><a title="Email Me" href="https://pixel2html.com" target="_blank" style="font-size: 13px;font-family: 'Montserrat', Arial, Helvetica, sans-serif; color: #ffffff; text-decoration: none; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; padding: 10px 40px; border: 1px solid #00abd7;text-transform: uppercase;font-weight: 400; display: inline-block;line-height: 1.2;">Email Me</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top" style="padding:10px 0;"><img src="images/or.jpg" alt="" width="159" style="display: block;outline:none;border:0;"></td>
</tr>
<tr>
<td align="center" valign="top" style="color:#00abd7;font-size: 13px;font-family: 'Montserrat', Arial, Helvetica, sans-serif;text-transform:uppercase;padding:10px 0;"><a title="Book a call" href="https://pixel2html.com" target="_blank" style="color:#00abd7;font-family: 'Montserrat', Arial, Helvetica, sans-serif;text-transform:uppercase;text-decoration:none;line-height: 1.2;">Book a call</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- Footer -->
<tr>
<td align="center" valign="top" bgcolor="#00abd7" style="color:#fff;font-size:16px;font-family: 'Montserrat', Arial, Helvetica, sans-serif;line-height: 1.2;padding: 46px 0;"><span class="appleLink">800 West Cesar Chavez Street B101, Austin TX 78701</span></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</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."