bNdMBZ

bNdMBZ.markdown

bNdMBZ

A Pen by Jake B‮ nedru on CodePen.

License.

index.jade

.container
  section.splash
    .island
      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

style.stylus

lato = 'Lato', sans-serif
slab = 'Roboto Slab', sans-serif

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

html
  *
    -webkit-font-smoothing antialiased
    -moz-osx-font-smoothing grayscale
    
*, 
*:before,
*:after
  box-sizing inherit

html,
body,
section,
.container
  margin 0
  padding 0
  min-height 100%
  height 100%
  width 100%


button
  border none
  background none
  outline none
  padding 0
  margin 15% auto

.island
  max-width 40em
  margin auto

  position relative
  padding 10% 0
  z-index 10

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


.splash
  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

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

    font-family lato
    font-weight 300

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

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


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

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

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


  &:hover:after
    width 100%
    background #fff