Auth0 - WordPress
The lovely guys from Auth0's Marketing team needed a custom build tool to easily create and test landing pages for their products. We collaborated with them creating a custom WordPress theme that uses reusable modules to help them craft landing pages without the need to touch code for on a day-to-day basis.
Take a look the codeAuth0 WordPress Project
HTML5/CSS3 handcode with Jade/Stylus
<!DOCTYPE html>
<html>
<head>
<title>Single Sign On & Token Based Authentication - Auth0</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<meta name="fragment" content="!">
<meta name="description" content="A universal identity platform for customers, employees and partners" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Identity infrastructure, built for developers" />
<meta property="og:site_name" content="Auth0" />
<meta property="og:description" content="A universal identity platform for customers, employees and partners" />
<meta property="og:locale" content="en_US" />
<meta property="og:url" content="https://auth0.com" />
<meta property="og:image" content="https://auth0.com/lib/opengraph/1x-new.png" />
<meta property="og:image:secure_url" content="https://auth0.com/lib/opengraph/1x-new.png" />
<meta property="fb:app_id" content="507756515938786" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@auth0" />
<meta name="twitter:creator" content="@auth0" />
<meta name="twitter:title" content="Auth0 - Identity infrastructure, for developers" />
<meta name="twitter:description" content="A universal identity platform for customers, employees and partners" />
<meta name="twitter:image:src" content="https://auth0.com/lib/twittercard/1x-new.png" />
<meta name="twitter:image:width" content="1024" />
<meta name="twitter:image:height" content="512" />
<link rel="shortcut icon" href="//cdn.auth0.com/styleguide/4.6.1/lib/logos/img/favicon.png">
<link href="/app.css" rel="stylesheet">
</head>
<body>
<header class="site-header">
<nav role="navigation" class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" data-toggle="collapse" data-target="#navbar-collapse" class="navbar-toggle"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
<h1 class="navbar-brand"><a title="We're hiring!" href="/"><span>Auth0</span></a></h1><a href="/jobs" class="no-basic hiring animated bounce hidden-sm hidden-xs hidden-md">We're hiring!</a></div>
<div id="navbar-collapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-left no-basic">
<li class="li-why"><a title="Why Auth0" href="/why-auth0">Why Auth0</a></li>
<li class="li-how"><a title="How It Works" href="/how-it-works">How It Works</a></li>
<li class="li-pricing"><a title="Pricing" href="/pricing">Pricing</a></li>
<li class="dropdown"><span role="button" data-toggle="dropdown" class="btn-dro">More<i class="icon-budicon-460"></i></span>
<ul role="menu" aria-labelledby="dLabel" class="dropdown-menu">
<li><a title="Lock" href="/lock">Lock</a></li>
<li><a title="Passwordless" href="/passwordless">Passwordless</a></li>
<li><a title="WordPress" href="/wordpress">WordPress</a></li>
<li class="divider"></li>
<li><a title="About" href="/about">About</a></li>
<li><a title="Blog" href="/blog">Blog</a></li>
<li><a title="Customers" href="/customers">Customers</a></li>
<li><a title="Resources" href="/resources">Resources</a></li>
<li><a title="Partners" href="/partners">Partners</a></li>
<li><a title="Open Source" href="/opensource">Open Source</a></li>
<li><a title="Jobs" href="/jobs">Jobs</a></li>
<li><a title="Press" href="/press">Press</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="li-docs no-basic"><a title="Help & Support" href="/support">Help & Support</a></li>
<li class="li-docs no-basic"><a title="Documentation" href="/docs">Documentation</a></li>
<li><a title="Open Dashboard" href="https://manage.auth0.com" class="signin-button login">Open Dashboard</a></li>
</ul>
</div>
</div>
</nav>
</header>
<div class="site-content"></div>
<footer class="site-footer">
<div class="container">
<div class="logo"><img src="https://cdn.auth0.com/styleguide/latest/lib/logos/img/badge.png" width="30"></div>
<div class="footer-grid">
<div class="column">
<div class="item">
<h6>Product</h6></div>
<div class="item"><a title="Pricing" href="https://auth0.com/pricing">Pricing</a></div>
<div class="item"><a title="Why Auth0" href="https://auth0.com/why-auth0">Why Auth0</a></div>
<div class="item"><a title="How It Works" href="https://auth0.com/how-it-works">How It Works</a></div>
</div>
<div class="column">
<div class="item">
<h6>Company</h6></div>
<div class="item"><a title="About Us" href="https://auth0.com/about">About Us</a></div>
<div class="item"><a title="Blog" href="https://auth0.com/blog">Blog</a></div>
<div class="item"><a title="Jobs" href="https://auth0.com/jobs">Jobs</a></div>
<div class="item"><a title="Press" href="https://auth0.com/press">Press</a></div>
</div>
<div class="column">
<div class="item">
<h6>Security</h6></div>
<div class="item"><a title="Availability & Trust" href="https://auth0.com/availability-trust">Availability & Trust</a></div>
<div class="item"><a title="Security" href="https://auth0.com/security">Security</a></div>
<div class="item"><a title="White Hat" href="https://auth0.com/whitehat">White Hat</a></div>
</div>
<div class="column">
<div class="item">
<h6>Learn</h6></div>
<div class="item"><a title="Help & Support" href="https://auth0.com/support">Help & Support</a></div>
<div class="item"><a title="Documentation" href="https://auth0.com/docs">Documentation</a></div>
<div class="item"><a title="Open Source" href="https://auth0.com/opensource">Open Source</a></div>
</div>
<div class="column">
<div class="item">
<h6>Extend</h6></div>
<div class="item"><a title="Lock" href="https://auth0.com/lock">Lock</a></div>
<div class="item"><a title="WordPress" href="https://auth0.com/wordpress">WordPress</a></div>
<div class="item"><a title="API Explorer" href="https://auth0.com/docs/apiv2">API Explorer</a></div>
</div>
<div class="contact">
<div class="column">
<div class="item">
<h6>Contact</h6></div>
<div class="item item-text">10900 NE 8th Street
<br>Suite 700
<br>Bellevue, WA 98004</div>
</div>
<div class="column no-heading">
<div class="item"><a title="+1 (425) 312-6521" href="tel:+18882352699">+1 (888) 235-2699</a><a href="tel:+14253126521">+1 (425) 312-6521</a></div>
<div class="item item-phone-label">Support</div>
<div class="item"><a title="+1 (425) 559-9554" href="tel:+14255599554">+1 (425) 559-9554</a></div>
</div>
</div>
</div>
<div class="colophon">
<div class="column">
<div class="social">
<div class="twitter">
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="//platform.twitter.com/widgets/follow_button.html?screen_name=auth0" class="twitter"></iframe>
</div>
<div class="facebook">
<iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Ffacebook.com%2Fgetauth0&width&layout=button_count&action=like&show_faces=false&show_count=false&share=false&height=21&appId=507756515938786" scrolling="no" frameborder="0" allowtransparency="true" class="facebook"></iframe>
</div>
</div>
</div>
<div class="column">
<ul class="list-inline text-right">
<li><a title="Privacy Policy" href="https://auth0.com/privacy">Privacy Policy</a></li>
<li><a title="Terms of Service" href="https://auth0.com/terms">Terms of Service</a></li>
<li><span>© 2013-2016 Auth0® Inc. All Rights Reserved.</span></li>
</ul>
</div>
</div>
</div>
</footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="/lib/vendor/libs/jquery.min.js">\x3C/script>')
</script>
<script src="/app.js"></script>
<!--if IEscript(src='//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js')
script(src='//oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js')
-->
</body>
</html>
@import 'base-styles/variables'
@import 'base-styles/mixins'
// Parent Class
html.wordpress-page
footer.site-footer.site-footer
background-color #25252c
border none
h6
color rgba(white, 0.36)
.item, .colophon
color white
a
border-color transparent
color rgba(white,.7)
.banner
background: #25252c
text-align: center;
margin-bottom: 0;
padding-bottom 0
padding-top: 50px
+breakpoint("desktop")
padding 92px+60px 0 0 0
.wplogo
max-width: 100px
margin: 0 auto
img
max-width: 100%
p
margin-bottom 20px
@import 'tweentyten'
.twentytwenty-container
height: 160px
.twentytwenty-handle
background: rgba(0,0,0,.4);
.twentytwenty-before-label:before
content: "WordPress";
display none
.twentytwenty-after-label:before
content: "Auth0";
display none
.twentytwenty-wrapper
width:100%;
img
width:100%
// Reporting and Customization Sections
// Browser
.browser
box-shadow: 0 1px 6px rgba(0,0,0,.4);
border-radius 0
border-top-left-radius: 3px;
border-top-right-radius: 3px;
overflow: hidden
background: white;
width:100%;
position:relative;
height: 160px;
margin-top: 50px;
+breakpoint('tablet')
height 420px
.browser-toolbar
background: white;
padding: 4px 10px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
position: relative;
overflow: hidden
height: 32px;
border-bottom: 1px solid #eee;
i
width: 12px;
height: 12px;
display: inline-block
border-radius: 100px;
margin-right: 8px;
float: left
margin-top: 6px;
background: color_grey
span
font-size: 10px;
text-transform: uppercase
font-weight: 500
text-align: center
position: absolute;
left: 0;
right: 0;
top: 6px;
color: #666;
background: lighten(color_grey, 30%)
width: 50%;
margin: auto;
padding: 3px;
border-radius: 3px;
.browser-content
display: block
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
// Connections Section
section.connections
padding-bottom 60px
.page-title
+breakpoint("desktop")
margin-bottom: 120px
.flexy-row
display: flex
flex-direction: column
+breakpoint("desktop")
flex-direction: row
flex-wrap: wrap
.info-box
text-align: center
flex-basis: auto
max-width: 100%
+breakpoint("desktop")
max-width: ((351px * 986px) / 1077px )
flex-basis: ((351px * 986px) / 1077px )
text-align: left
p
color: $color_light_secondary
font-size: 16px
max-width: 600px
margin: 0 auto
+breakpoint("desktop")
font-size: 14px
h3
+breakpoint("desktop")
margin-top: 0
.info-box--last
+breakpoint("desktop")
margin-left: auto
.info-box--pullup
+breakpoint("desktop")
margin-top: -190px
.phone
flex-basis: auto
max-width: 300px
order: -1
margin: 0 auto
+breakpoint("desktop")
max-width: ((262px * 986px) / 1077px )
flex-basis: ((262px * 986px) / 1077px )
order: 0
margin-top: -60px
img
max-width: 100%
section.how-it-works
background #F5F7F9
overflow hidden
.normal-row
position: relative
overflow: hidden
&:before, &:after
content: ''
display: table
&:after
clear: both
.picture
margin: 0 auto
+breakpoint("desktop")
float: left
display: inline-block
width: 57%
position: absolute
bottom: 0
img
max-width: 100%
.step-by-step
font-size: 18px
max-width: 600px
margin: 0 auto
+breakpoint("desktop")
float: left
display: inline-block
max-width: 43%
.step
position: relative
margin-bottom: 30px
display: flex
align-items: center
+breakpoint("desktop")
margin-bottom: 35px
&:before, &:after
content: ''
display: table
&:after
clear: both
.line
content: ''
position: absolute
top 0
height calc(100% + 30px)
background: #21759B
width: 1px
left 20px
opacity: 0.3
+breakpoint("desktop")
height: calc(100% + 35px)
.bullet
display: flex
align-items: center
justify-content: center
width: 40px
height: 40px
margin-right: 15px
float: left
background: #21759B
border-radius: 50%
text-align: center
line-height: (24/18)
color: $color_dark_primary
position: relative
p
display: inline-block
width: calc(100% - 55px)
float: left
color: $color_light_primary
line-height: (25/18)
margin: 0
section.more
text-align: center
.duo
padding: 0 15px
max-width: 1016px
margin: 0 auto
&:before, &:after
content: ''
display: table
&:after
clear: both
.feature
padding 55px 0
+breakpoint("desktop")
float: left
width: 50%
display: inline-block
text-align: left
padding-left: 30px
&.control
border-bottom: 1px solid #e6e6e6
+breakpoint("desktop")
border-bottom none
border-right: 1px solid #e6e6e6
padding-left: 0
padding-right: 30px
h3
margin-top: 0
p
color: $color_light_secondary
font-size: 16px
+breakpoint("desktop")
font-size: 17px
.look-more
border-top: 1px solid #e6e6e6
p
color $color_light_secondary
section.try-free
margin-top 0
background: #f5f7f9
p
color: $color_light_secondary
html.wordpress-page.touch
.achieve
.center-title-block
margin-bottom:40px;
.cards-col
height:auto;
min-height:auto;
.cards-container
.card
position:relative;
top:auto !important;
left:auto !important;
transform:none !important;
-webkit-transform:none !important;
margin-left:auto;
margin-right:auto;
margin-top:30px;
margin-bottom:60px;
&:last-child
margin-bottom:0;
// Desktop
@media (min-width: 992px)
html.wordpress-page
section.connections
.big-tabs
margin-bottom:40px;
li
width:auto;
a
border-radius:0;
width:auto;
display:inline-block;
&:first-child
a
border-top-left-radius:3px;
border-bottom-left-radius:3px;
&:last-child
a
border-top-right-radius:3px;
border-bottom-right-radius:3px;
.browser-lite
max-width:800px;
overflow:hidden;
box-shadow:0 1px 10px rgba(0,0,0,0.5);
.browser-background
background: url('/lib/wordpress/img/bg.jpg');
background-size: cover;
padding: 40px 0;
max-width: 900px;
margin: auto;
.connection
text-align:left;
box-shadow: 0 1px 0 lighten(color_grey, 50%), 1px 0 0 lighten(color_grey, 50%);
&.off
background: #e6e6e6
.cb
background: red;
i
right: 17px
.cb
background: #55df58;
float: right
width: 40px;
border-radius: 100px;
display: block
text-align: right
height: 24px;
margin-top: 4px;
i
background: white;
height: 20px;
border-radius: 100px;
width: 20px;
display: inline-block
margin: 1px;
top: 1px;
right: 1px;
position: relative;
#social
.connection
width:20%;
padding: 20px 20px 14px 20px;
.zocial
margin-right:6px;
footer.site-footer
border-top:1px solid #f1f1f1;
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."