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 code

Auth0 WordPress Project

HTML5/CSS3 handcode with Jade/Stylus

<!DOCTYPE html>
<html>
  <head>
    <title>Single Sign On &amp; 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 href="/"><span>Auth0</span></a></h1><a href="/jobs" class="no-basic hiring animated bounce hidden-sm hidden-xs hidden-md">We&apos;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 href="/why-auth0">Why Auth0</a></li>
                        <li class="li-how"><a href="/how-it-works">How It Works</a></li>
                        <li class="li-pricing"><a 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 href="/lock">Lock</a></li>
                                <li><a href="/passwordless">Passwordless</a></li>
                                <li><a href="/wordpress">WordPress</a></li>
                                <li class="divider"></li>
                                <li><a href="/about">About</a></li>
                                <li><a href="/blog">Blog</a></li>
                                <li><a href="/customers">Customers</a></li>
                                <li><a href="/resources">Resources</a></li>
                                <li><a href="/partners">Partners</a></li>
                                <li><a href="/opensource">Open Source</a></li>
                                <li><a href="/jobs">Jobs</a></li>
                                <li><a href="/press">Press</a></li>
                            </ul>
                        </li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li class="li-docs no-basic"><a href="/support">Help &amp; Support</a></li>
                        <li class="li-docs no-basic"><a href="/docs">Documentation</a></li>
                        <li><a 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 href="https://auth0.com/pricing">Pricing</a></div>
                    <div class="item"><a href="https://auth0.com/why-auth0">Why Auth0</a></div>
                    <div class="item"><a 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 href="https://auth0.com/about">About Us</a></div>
                    <div class="item"><a href="https://auth0.com/blog">Blog</a></div>
                    <div class="item"><a href="https://auth0.com/jobs">Jobs</a></div>
                    <div class="item"><a href="https://auth0.com/press">Press</a></div>
                </div>
                <div class="column">
                    <div class="item">
                        <h6>Security</h6></div>
                    <div class="item"><a href="https://auth0.com/availability-trust">Availability & Trust</a></div>
                    <div class="item"><a href="https://auth0.com/security">Security</a></div>
                    <div class="item"><a href="https://auth0.com/whitehat">White Hat</a></div>
                </div>
                <div class="column">
                    <div class="item">
                        <h6>Learn</h6></div>
                    <div class="item"><a href="https://auth0.com/support">Help & Support</a></div>
                    <div class="item"><a href="https://auth0.com/docs">Documentation</a></div>
                    <div class="item"><a href="https://auth0.com/opensource">Open Source</a></div>
                </div>
                <div class="column">
                    <div class="item">
                        <h6>Extend</h6></div>
                    <div class="item"><a href="https://auth0.com/lock">Lock</a></div>
                    <div class="item"><a href="https://auth0.com/wordpress">WordPress</a></div>
                    <div class="item"><a 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 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 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&amp;width&amp;layout=button_count&amp;action=like&amp;show_faces=false&amp;show_count=false&amp;share=false&amp;height=21&amp;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 href="https://auth0.com/privacy">Privacy Policy</a></li>
                        <li><a href="https://auth0.com/terms">Terms of Service</a></li>
                        <li><span>&copy; 2013-2016 Auth0&reg; 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;
      
1k

Clients trusted us with their web projects.

Like our work? Let’s build something together!

Get a quote!