// Mixins
mixin input(type, label)
  .input-container
    input(type='#{type}' id='#{label}' required)
    label(for='#{label}')=label
    .bar
mixin button(text)
  .button-container
    button
      span=text

// Pen Title
.pen-title
  h1 Material Login Form
  span
    | Pen <i class='fa fa-code'></i> by <a href='http://andytran.me'>Andy Tran</a>
    
.rerun
  a(href='') Rerun Pen
  
.container
  .card
  .card
    h1.title Login
    form
      +input('text', 'Username')
      +input('password', 'Password')
      +button('Go')
      .footer
        a(href='#') Forgot your password?
  .card.alt
    .toggle
    h1.title Register
      .close
    form
      +input('text', 'Username')
      +input('password', 'Password')
      +input('password', 'Repeat Password')
      +button('Next')

// Portfolio
a#portfolio(href='http://andytran.me/' title='View my portfolio!')
  i.fa.fa-link
  
// CodePen
a#codepen(href='https://codepen.io/andytran/' title='Follow me!')
  i.fa.fa-codepen