h1.splash--title underwater #[strong conf]
      h2.splash--subtitle An underwater conference, with some lightning talks to set the scene, all about the next generation of web technologies.
      a(href="#") register
View Compiled
lato = 'Lato', sans-serif
slab = 'Roboto Slab', sans-serif

  font-family sans-serif
  -ms-text-size-adjust 100%
  -webkit-text-size-adjust 100%
  box-sizing border-box

    -webkit-font-smoothing antialiased
    -moz-osx-font-smoothing grayscale
  box-sizing inherit

  margin 0
  padding 0
  min-height 100%
  height 100%
  width 100%

  max-width 40em
  margin auto

  position relative
  padding 10% 0
  z-index 10

  display flex
  flex-direction column
  align-items center
  justify-content center

  position relative

  background-position top center
  background-repeat no-repeat
  background-size cover
  background-image url('https://unsplash.imgix.net/uploads/14135967189272ee843f8/f9c22c58?fit=crop&fm=jpg&h=675&q=75&w=1050')

  text-align center
  color #fff

    text-transform uppercase
    letter-spacing 3px
    font-size 2em
    border 2px solid #fff
    border-left 0
    border-right 0

    font-family lato
    font-weight 300

    font-family slab
    font-weight 300
    font-size 1.25em
    line-height 1.875rem

    content ""
    display block
    position absolute
    top 0
    right 0
    bottom 0
    left 0
    pointer-events none
    background rgba(0,0,0,0.35)

  display inline-block
  padding 20px 0 3px 0
  position relative

  color #fff
  text-transform uppercase
  text-decoration none
  letter-spacing 1px
  font-family lato

    content ''
    display block
    margin auto
    height 3px
    width 0px
    background transparent
    transition: width .5s ease, background-color .5s ease 

    width 100%
    background #fff
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.