Hubally
The team from Hubally needed to release a new landing page in a key short time-frame so they requested us to code great Responsive HTML/CSS Markup for their launch.
Take a look the code
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Hubally</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="favicon.ico" />
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<div id="main-content" role="main">
<header>
<div class="row">
<div class="column large-4 header-logo">
<h1 id="logo">
<a href="#">
<img class="show-for-large-up desktop-logo" width="141" src="img/logo.png" alt="" />
<img class="hide-for-large-up mobile-logo" width="141" src="img/logo-mobile.png" alt="" />
</a>
</h1>
</div>
<a href="#" class="menu-trigger hide-for-large-up">
<i class="fa fa-bars"></i>
</a>
<div class="column large-8">
<nav class="menu text-right show-for-large-up">
<ul>
<li>
<a class="scroll-to" href="#home-block">
Home
</a>
</li>
<li>
<a class="scroll-to" href="#about-block">
About
</a>
</li>
<li>
<a class="scroll-to" href="#products-block-list">
Product
</a>
</li>
<li>
<a class="scroll-to" href="#partners-block">
Partners
</a>
</li>
<li>
<a class="scroll-to" href="#contact-form">
Contact
</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
<section id="hero-block">
<div class="row text-center">
<div class="column">
<h1>Humanize your brand’s message;</h1>
<p>automate your advertising investments.</p>
<div class="request-demo">
<a class="scroll-to" href="#contact-form">
REQUEST A DEMO
</a>
</div>
</div>
</div>
</section>
<section id="home-block" class="text-block">
<div class="row text-center">
<div class="column home-top">
<h2>HOME</h2>
<p>
<strong>
HUBALLY is a technology platform for massive and selective mobile inventory purchase. <br />
Reach any user and choose the right moment to show them your ad.
</strong>
</p>
<p>
Hubally is a proprietary technology DSP platform for programmatic mobile inventory buying.
<br /> With emphasis on data analysis and audience optimization, Hubally offers an essential marketing tool for Brands, Agencies and Ad Networks
<br /> that are seeking to acquire new users or gain customer loyalty by taking their message to their audience’s mobile screens.
</p>
</div>
<div class="column home-icons">
<div class="row">
<div class="column large-4">
<div class="home-icons--image">
<img src="img/re-engagement.png" alt="" />
</div>
<h3>
RE-ENGAGEMENT <br />
<strong>
& CONVERSION <br />
FUNNEL OPTIMIZATION
</strong>
</h3>
<p>
Hubally follows your customer through their purchase journey to guarantee a conversion. Identify your leads in early stages and bring them down the sales funnel with data-driven retargeting and re-engagement tactics. Automated dynamic ads allocation will lower cost per acquisition, leverage ROI and sales.
</p>
</div>
<div class="column large-4">
<div class="home-icons--image">
<img src="img/mobile.png" alt="" />
</div>
<h3>
MOBILE <br />
<strong>
NATIVE ADS
</strong>
</h3>
<p>
Deliver effective brand awareness with tailor-made and highly targeted messages that fit your audience’s screen seamlessly. In times where real time B2C interactions are key to every marketing effort, Hubally enables brands and agencies to efficiently target custom audience groups with personalized ads that adapt to any mobile screen.
</p>
</div>
<div class="column large-4">
<div class="home-icons--image">
<img src="img/premium.png" alt="" />
</div>
<h3>
PREMIUM <br />
<strong>
PROGRAMMATIC
</strong>
</h3>
<p>
Massive media buying, cherry-picked audiences and premium placement are combined through Hubally. Ad campaigns with wider reach are easily placed in one single hub of global mobile inventory. Hubally is a DSP platform for ID based advertising, where media buys are made on RTB and optimized using transparent traffic data with bids on CPM. Bids are optimized towards CTR, eCPC, and CPI goals.
</p>
</div>
</div>
</div>
</div>
</section>
<section id="about-block" class="text-block">
<div class="row text-center">
<div class="column">
<h2>ABOUT</h2>
<p>
<strong>
HUBALLY is a technology-oriented platform , designed to consider mobile-specific data <br />
in order to channel real-time consumer behavior and generate positive roi.
</strong>
</p>
<p>
Our technology ensures robust solutions for each of the fundamental challenges mobile advertising faces today:
<br /> Variability in data availability, User identification, Audience intelligence and segmentation, andTracking.
</p>
</div>
</div>
</section>
<div id="products-block-list">
<section id="products-block" class="text-block">
<div class="row text-center">
<div class="column">
<h2>PRODUCTS</h2>
<p>
Hubally is a <strong>advertising technology platform</strong> that enables
<br /> brands, agencies and networks to access global mobile traffic from a single interface.
</p>
<p>
It stands out for providing <strong>easy access</strong> to a high availability of traffic defined by
<br /> customized <strong>Audience Groups</strong> and <strong>customized Campaign Contexts.</strong>
</p>
<p>
Retargeting, Re-engagement and <strong>Conversion Funnel Optimization</strong> tools are in place
<br /> to elevate the rates of converting advertising investments into actionable new leads and actual consumers.
</p>
<p>
Mobile advertising requires advanced technology that enables fast and <strong>complex processing</strong> on a large and <strong>mobile specific data set</strong>
<br /> Hubally collects, combines, analyzes and processes massive amounts of real-time data in order to execute successful campaigns.
</p>
</div>
</div>
</section>
<section id="optimized-programmatic-advertising">
<div class="row">
<div class="column">
<div class="banner">
<h4>OPTIMIZED PROGRAMMATIC ADVERTISING FOR</h4>
<p>BRANDS - AGENCIES - AD NETWORKS</p>
</div>
</div>
</div>
</section>
<section id="details">
<div class="row">
<div class="column left-column">
<div class="detail-box retargeting">
<div class="detail-box--text">
<div class="icon"></div>
<h5>RETARGETING</h5>
</div>
<div class="tooltip">
<p>
After the users click on a specific ad, visit a site or download an e-commerce app, our targeting technology can still identify their unique device ID and track their behaviors in other mobile websites or apps, and therefore display relevant ads to redirect them back into the conversion funnel. Our comprehensive audience coverage, synchronous targeting, and innovative re-targeting technologies can help our clients capture their customer’s loyalty and increase overall ARPPU.
<br /> Remarketing should be part of every mobile user acquisition campaign. Consumers want ads and other content that are relevant to them. Hubally Retargeting will help ensure that you are moving users through your funnel towards deeper engagement with your app. This will invariably result in more quality, more innovation and a more satisfying experience for everyone involved.
</p>
</div>
</div>
<div class="row">
<div class="column large-6">
<div class="detail-box managed-services">
<div class="detail-box--text">
<div class="icon"></div>
<h5>MANAGED SERVICES</h5>
</div>
<div class="tooltip">
<p>
Take advantage of all the benefits of the Hubally platform and have your ad campaigns managed by advertising experts, thus saving hours of your time.
</p>
</div>
</div>
</div>
<div class="column large-6">
<div class="detail-box reporting">
<div class="detail-box--text">
<div class="icon"></div>
<h5>REAL TIME<br />REPORTING</h5>
</div>
<div class="tooltip">
<p>
Visualize campaign progress at a granular level with reporting by any selected criteria: creative, day, time, spend, device, geo & more.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="column right-column">
<div class="row">
<div class="column large-6">
<div class="detail-box your-campaigns">
<div class="detail-box--text">
<div class="icon"></div>
<h5>WIDE REACH FOR<br />YOUR CAMPAIGNS</h5>
</div>
<div class="tooltip">
<p>
Hubally offers access to ad placement in over 31,000 active mobile apps, on over 1 billion unique devices and in countless marketing events.
</p>
</div>
</div>
</div>
<div class="column large-6">
<div class="detail-box control-costs">
<div class="detail-box--text">
<div class="icon"></div>
<h5>CONTROL YOUR COSTS</h5>
</div>
<div class="tooltip">
<p>
Hubally helps advertisers to effectively control spends and reduce advertising costs by enabling transparent access to premium inventory and new uncharted inventory on RTB bidding.
</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="column large-6">
<div class="detail-box custom-audience">
<div class="detail-box--text">
<div class="icon"></div>
<h5>CUSTOM AUDIENCE<br />GROUPS - CAMPAIGN<br />CONTEXTS</h5>
</div>
<div class="tooltip">
<p>
Use the Hubally platform to reach highly targeted audiences with extensive device, user profile and behavior data.
<br /> Supported targeting dimensions:
<br /> Location, Hyper-location, Device ID, OS, OS Version, Inventory Type, Inventory Source, Network Speed, Carrier, Frequency.
</p>
</div>
</div>
</div>
<div class="column large-6">
<div class="detail-box ad-creatives">
<div class="detail-box--text">
<div class="icon"></div>
<h5>CONTEXT EFFICIENT<br />AD CREATIVES</h5>
</div>
<div class="tooltip">
<p>
Hubally platform will provide dynamic and native ad formats to help advertisers highlight their ads and differentiate their brand image.
<br /> Standard IAB formats, smart ads and native ads create an enhanced user experience to emphasize the ads’ call to action.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<section id="partners-block" class="text-block">
<div class="row text-center">
<div class="column">
<h2>PARTNERS</h2>
<p>
<strong>
Join us in our commitment towards the advertising industry to increase returns and profit yields <br />
with improved audience targeting and enhanced ad display quality.
</strong>
</p>
<p>
Partner up with us as our inventory supplier and ensure competitive rates for all your ad placements in any location worldwide.
<br /> As our partner, you will gain access to all our advertisers ad campaigns that adjust to your audience groups.
<br /> We ensure transparent traffic & revenue reports and timely payments.
</p>
</div>
</div>
</section>
<footer id="contact-form" class="text-block">
<div class="row">
<div class="column">
<h2>CONTACT</h2>
<div class="contact-footer row">
<div class="contact-footer--container column align-center">
<div class="contact-footer--container-data hide-for-large-only">
<div class="contact-us">
<p>
<strong>CONTACT US</strong>
<br /> Av. Cnel. Niceto Vega 4736
<br /> Buenos Aires, Argentina.
<br /> Telephone: +54 9 47030950
<br /> info@hubally.com
</p>
</div>
<div class="follow-us">
<h4>FOLLOW US</h4>
<nav class="social">
<ul>
<li>
<a href="https://www.facebook.com/huballydsp/" target="_blank" class="facebook">
<i class="fa fa-facebook"></i>
</a>
</li>
<li>
<a href="https://www.youtube.com/channel/UC1iNyNFIvj6BQSnj5JsD4Aw" class="youtube">
<i class="fa fa-youtube"></i>
</a>
</li>
<li>
<a href="https://twitter.com/huballydsp" target="_blank" class="twitter">
<i class="fa fa-twitter"></i>
</a>
</li>
<li>
<a href="https://www.linkedin.com/company/hubally-dsp?trk=biz-brand-tree-co-name" class="linkedin" target="_blank">
<i class="fa fa-linkedin"></i>
</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="contact-footer--container-fields">
<h4>WANT TO LEARN MORE?</h4>
<form>
<div class="form-row">
<input type="text" placeholder="*First Name" required />
</div>
<div class="form-row">
<input type="text" placeholder="*Last Name" required />
</div>
<div class="form-row">
<input type="email" placeholder="*Email Address" required />
</div>
<div class="form-row">
<input type="text" placeholder="*Phone Number" required />
</div>
<div class="form-row">
<input type="text" placeholder="*Company" required />
</div>
<div class="form-row">
<input type="text" placeholder="*Job Title" required />
</div>
<div class="form-row">
<input type="text" placeholder="*Industry" required />
</div>
<div class="form-row">
<input type="text" placeholder="*Country" required />
</div>
<div class="form-row">
<textarea required placeholder="*Comments"></textarea>
</div>
<div class="form-row submit-buttons">
<input type="reset" value="Delete" />
<input type="submit" value="Submit" />
</div>
</form>
</div>
<div class="contact-footer--container-data show-for-large-only">
<div class="contact-us">
<p>
<strong>CONTACT US</strong>
<br /> Av. Cnel. Niceto Vega 4736
<br /> Buenos Aires, Argentina.
<br /> Telephone: +54 9 47030950
<br /> info@hubally.com
</p>
</div>
<div class="follow-us">
<h4>FOLLOW US</h4>
<nav class="social">
<ul>
<li>
<a href="https://www.facebook.com/huballydsp/" target="_blank" class="facebook">
<i class="fa fa-facebook"></i>
</a>
</li>
<li>
<a href="https://www.youtube.com/channel/UC1iNyNFIvj6BQSnj5JsD4Aw" class="youtube">
<i class="fa fa-youtube"></i>
</a>
</li>
<li>
<a href="https://twitter.com/huballydsp" target="_blank" class="twitter">
<i class="fa fa-twitter"></i>
</a>
</li>
<li>
<a href="https://www.linkedin.com/company/hubally-dsp?trk=biz-brand-tree-co-name" class="linkedin" target="_blank">
<i class="fa fa-linkedin"></i>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
<div class="footer-bottom row">
<div class="column small-3 footer-logo text-left">
<a href="#">
<img src="img/logo-small.png" alt="" />
</a>
</div>
<div class="column small-9 footer-menu text-right">
<a title="CONTACT" class="scroll-to" href="#home-block">HOME</a> | <a class="scroll-to" href="#about-block">ABOUT</a> | <a class="scroll-to" href="#products-block-list">PRODUCT</a> | <a class="scroll-to" href="#partners-block">PARTNERS</a> | <a class="scroll-to" href="#contact-form">CONTACT</a>
</div>
</div>
</div>
</div>
<div class="copyright text-center">
Copyright © 2016 Hubally. All Rights Reserved. Development by <a title="Piso46" href="#" target="_blank">Piso46</a>
</div>
</footer>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="js/vendor/jquery-1.11.3.min.js"><\/script>')
</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
</body>
</html>
$font-family: 'Open Sans', 'Arial';
$black: #000;
$white: #FFF;
$grey: #808285;
$lightgrey: #808284;
$darkgrey: #231F20;
$pink: #EC008C;
$base-color: $grey;
$linkcolor: $darkgrey;
$blue: #038be5;
#hero-block {
background: $pink;
color: $white;
padding: 80px 0 50px;
h1 {
font-size: 42px;
font-weight: 700;
line-height: 50px;
}
p {
font-size: 29px;
line-height: 35px;
margin-bottom: 48px;
}
.request-demo {
> a {
@include border-radius(30px);
background: $white;
color: $pink;
display: inline-block;
font-family: 'nexa_boldregular';
font-size: 12px;
line-height: 44px;
padding: 0 26px;
&:hover {
background: $black;
}
}
}
@media (max-width: 1023px) {
h1,
p {
margin-left: auto;
margin-right: auto;
max-width: 363px;
}
}
}
#home-block {
background: $white;
.home-icons {
margin-top: 60px;
h3 {
font-size: 17.69px;
font-weight: 300;
min-height: 55px;
strong {
font-size: 13.65px;
font-weight: 700;
}
}
p {
font-size: 10px;
margin: 30px auto 0;
max-width: 216px;
}
}
.home-icons--image {
margin-bottom: 20px;
}
@media (max-width: 1023px) {
.home-icons {
p {
max-width: 300px;
}
}
.column + .column {
margin-top: 70px;
}
}
}
#about-block,
#partners-block {
background: $grey;
color: $white;
h2 {
color: $white;
&:after {
background: $white;
}
}
}
#products-block {
background: $white;
p {
font-size: 14px;
}
}
#optimized-programmatic-advertising {
background: $pink;
color: $white;
padding: 36px 0 33px;
text-align: center;
.banner {
border: 1px solid $white;
padding: 30px 10px 18px;
h4 {
font-family: 'nexa_boldregular';
font-size: 17px;
margin-bottom: 18px;
}
p {
font-family: 'nexa_lightregular';
font-size: 33px;
}
}
@media (max-width: 1023px) {
padding: 18px 0 16.5px;
.banner {
p {
font-size: 16.5px;
}
}
}
}
#details {
background: $white;
padding: 52px 0 52px;
.left-column{
float: left;
width: 45.837837838%;
}
.right-column {
float: right;
width: 54.162162162%;
}
.detail-box {
background: $grey;
border: 1px solid $grey;
margin-bottom: 18px;
overflow: hidden;
position: relative;
text-align: center;
.icon {
background-image: url('../img/sprite.png');
background-repeat: no-repeat;
display: block;
margin: 0 auto;
}
&--text {
bottom: 0;
height: 100%;
left: 0;
padding-bottom: 0;
padding-top: 35px;
right: 0;
@media (min-width: 1024px) {
padding-bottom: 0;
position: absolute;
}
}
&.retargeting {
height: 407px;
.icon {
background-position: 0 -657px;
height: 283px;
width: 284px;
}
}
&.managed-services,
&.reporting {
height: 196px;
h5 {
margin-top: 15px;
}
.detail-box--text {
padding-top: 25px;
}
}
&.managed-services {
.icon {
background-position: -510px -96px;
height: 100px;
width: 97px;
}
}
&.reporting {
.icon {
background-position: 0 -503px;
height: 98px;
width: 106px;
}
}
&.your-campaigns,
&.control-costs
{
height: 243px;
}
&.your-campaigns {
.icon {
background-position: -586px -196px;
height: 129px;
width: 76px;
}
}
&.control-costs {
.icon {
background-position: 0 0;
height: 112px;
width: 117px;
}
}
&.custom-audience,
&.ad-creatives{
height: 360px;
}
&.custom-audience {
.icon {
background-position: 0 -362px;
height: 141px;
width: 142px;
}
}
&.ad-creatives {
.icon {
background-position: 0 -112px;
height: 166px;
width: 130px;
}
}
@media (max-width: 1023px) {
&.detail-box {
height: auto;
}
}
@media (min-width: 1024px) {
&:hover {
background: $white;
h5 {
color: $grey;
}
}
&.retargeting {
&:hover {
.icon {
background-position: -284px -657px;
}
}
}
&.managed-services {
&:hover {
.icon {
background-position: -607px -96px;
}
}
}
&.reporting {
&:hover {
.icon {
background-position: -106px -503px;
}
}
}
&.your-campaigns {
&:hover {
.icon {
background-position: -510px -196px;
}
}
}
&.control-costs {
&:hover {
.icon {
background-position: -117px 0;
}
}
}
&.custom-audience {
&:hover {
.icon {
background-position: -142px -362px;
}
}
}
&.ad-creatives {
&:hover {
.icon {
background-position: -130px -112px;
}
}
}
}
}
h5 {
color: $white;
font-family: 'nexa_boldregular';
font-size: 14.34px;
margin-top: 20px;
}
.tooltip {
background-color: $pink;
color: $white;
font-size: 11px;
font-weight: 300;
left: 0;
padding: 20px 20px 16px 20px;
position: absolute;
top: 100%;
width: 100%;
}
@media (max-width: 1023px) {
padding: 26px 0;
.left-column,
.right-column {
width: 100%;
}
.tooltip {
background: none;
color: $white;
font-size: 14px;
margin-bottom: 18px;
position: static;
text-align: center;
}
}
}
@media (max-width: 1023px) {
#hero-block,
.home-top,
#about-block,
#products-block,
#partners-block {
br {
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."