PmqGmO

index.pug

link(rel="stylesheet", href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css")
.hero
  img(src="https://static.pexels.com/photos/207385/pexels-photo-207385.jpeg")
  .invite <h1>Let's go exploring!</h1>
    p Come for a barbeque of the most epic proportions!
    a(href="#modal" class="cta") RSVP Now!
  #modal
    form(method='POST' action='/register')
      .close-btn <i class="fa fa-times-circle-o" aria-hidden="true"></i>
      h1.header Wouldn't Miss It! 
      .form-group
        input(type='text', placeholder='Name' name='name')
      .form-group
        input(type='email', placeholder='Email Address' name='email')
      button(type='submit') Sign up
    

pmqgmo.markdown

PmqGmO

A Pen by Sean Kelly on CodePen.

License.

script.js

$(function(){
  
  $('.cta').click(function() {
      openModal();
  });
  $('.close-btn').click(function() {
      closeModal();
  });
  $(document).on('keyup', function(e) {
     if (e.keyCode === 27) {
			closeModal();
		}
	});
	
	$('#modal').click(function (event) {
		if (this == event.target) {
			closeModal();
		}
	});
});

function openModal() {
    $('#modal').fadeIn(500);
    $('#modal').css('display','flex');
    
    return false;
}
function closeModal() {
    $('#modal').fadeOut(500);
    
    
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

style.sass

@import url('https://fonts.googleapis.com/css?family=Megrim|Raleway')
html, body
  margin: 0
  padding: 0
  box-sizing: border-box
  font: 20px/20px 'Raleway', Georgia, serif
  h1
    font: 50px/50px 'Megrim', Georgia, serif

    
.hero
  width: 100%
  height: 100vh
  margin: 0
  padding: 0
  overflow: hidden
  &:after
    content: ''
    position: absolute
    top: 0
    left: 0
    width: 100vw
    height: 100vh
    z-index: -1
    background-image: linear-gradient(45deg, rgba(40, 60, 134,0.5) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.2) 75%, #eee 100%),linear-gradient(45deg, rgba(255,255,255,0.2) 25%, rgba(255,255,255,0.2) 25%, rgba(255,255,255,0.2) 75%, rgba(40, 60, 134,0.5) 75%, #45a247 100%)
    transform: rotate(180deg)
  img
    height: 100%
    position: relative
    z-index: -2
   
.invite
  background: rgba(255,255,255,.4)
  position: absolute
  padding: 30px
  z-index: 3
  top: 33%
  left: 30%
  text-align: center
  a
    text-decoration: none
    color: white
    background-color: rgba(40, 60, 134,0.5)
    background-image: linear-gradient(45deg, rgba(40, 60, 134,0.5) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.2) 75%, rgba(69, 162, 71,0.5) 100%)
    padding: 15px 20px
    display: block
    margin: 30px
    transition: all 0.9s ease
    &:hover
      background-color: transparentize(#a17066,0.8)
      color: white
      text-shadow: 0px 0px 5px black
#modal
  position: absolute
  top: 0
  left: 0
  right: 0
  bottom: 0
  z-index: 4
  background-color: fade-out(black,.08)
  display: none
  justify-content: center
  align-items: center
  flex-direction: column
  transition
  form
    padding: 30px
    max-width: 600px
    border-radius: 2% 10%
    background: white
    .form-group
      display: flex
      input
        height: 30px
        margin: 10px auto
        flex: 1
        outline: none
        border: none
        border-bottom: 1px solid tint(black,50%)
    button
      border-radius: 5px 15px
      outline: none
      border: none
      background-color: tint(rgba(69, 162, 71,0.5),30%)
      pointer-events: none
      
      
    .header
      margin: 0
      margin-top: -40px
      line-height: 95px
    .close-btn
      width: 30px
      height: 30px
      text-align: center
      line-height: 30px
      font-size: 30px
      color: white
      cursor: pointer
      position: relative
      top: -80px
      left: 400px
      transition: all 200ms ease-in-out
      &:hover
        transform: scale(1.2)
    .form-group
      
    button
      width: 100%
      height: 45px
      margin-top: 10px
      
@media only screen and (max-width: 840px)
  .invite
    top: 33%
    left: 16%
@media only screen and (max-width: 440px)
  .invite
    top: 22%
    left: 0
  .header
    font-size: 1.3em
  #modal form .close-btn
    top: -80px
    left: 230px