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;
