Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                div.container.positions
   h2 Job Openings
   ul
      li.pos-card#pos_1
         div.content
            div.title.new UI/UX Designer
            div.dept Design
            div.date June 4
            div.refer Refer
         ul.desc
            -
               list = ["6+ years’ experience designing desktop and mobile apps.",
               "Deep appreciation for simple solutions to complex problems.",
               "An amazing portfolio demonstrating successful delivery of innovative design solutions."
               ]
            each item in list
              li= item
      li.pos-card#pos_2
         div.content
            div.title Sales Manager
            div.dept Sales
            div.date April 21
            div.refer Refer
         ul.desc 
            -
               list = ["Determines annual unit and gross-profit plans by implementing marketing strategies; analyzing trends and results.",
               "Implements national sales programs by developing field sales action plans.",
               "Establishes and adjusts selling prices by monitoring costs, competition, and supply and demand."
               ]
            each item in list
              li= item
      li.pos-card#pos_3
         div.content
            div.title Business Analyst
            div.dept Research 
            div.date March 15
            div.refer Refer
         ul.desc
            -
               list = ["Technical tasks (include coding, web pages, stored procedures, all database related work, technical design & specifications, loading data).",
               "Developing and documenting reports or data extracts starting from an end user request.",
               "Developing and documenting specifications for software, websites and e-commerce development or modifications."
               ]
            each item in list
               li= item
div.return Return to listings   
div.container.refer-card

  div.modal.confirmed
       span.close-modal
       h2 Thank you!
       p <span id="refer_name" class="focus"></span> has been submitted for the <span id="refer_pos" class="focus"></span> position.
       
  div.sign-up.card
    div.card__header 
      h1 Employee Referral
      div.description For more information, please consult the <a href="#">employee handbook</a>.
    div.card__content
       form(method='post').referral
          div.field.line
             input(maxlength="240" type="text" name="name" value="" required).req#name
             label(for="name" class="placeholder") Full Name
          div.field.line
             input(maxlength="240" type="email" name="email" value="" required).req#email
             label(for="email" class="placeholder") Email
          div.field.line.inline
             input(maxlength="240" type="text" name="position" value="" required).req#position
             label(for="position" class="placeholder") Position
          div.field.inline.right
             span.dropdown-wrapper
                select(name="department")#choice.empty
                   option(value="" selected="selected") Department
                   option(value="1") Development
                   option(value="2") Sales
                   option(value="3") QA
                   option(value="4") Design
                   option(value="5") HR
                   option(value="6") Research  
          div
            input(type="submit" value="Submit" disabled)#btn 
          a(href="#").reset Reset 


              
            
!

CSS

              
                @import url(https://fonts.googleapis.com/css?family=Lato:400,300,700);
@import 'compass';
$color-white: #fff;

html {
   display: flex;
}

body {
//background: #2C3B4F;
@include background-image(linear-gradient(left bottom, #557b8e 0%,#c7e5ce 100%));
width: 100%;
   
  // margin: auto;

	-webkit-text-size-adjust: 100%;
    font-family: 'Lato', sans-serif;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

h2 {
   color: #fff;
}

input {
    -webkit-appearance: none;
}

*, *:after, *:before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

html,body{min-height:100%;}

.card {
  border-radius: 5px;
  background-color: $color-white;
  display: flex;
  flex-wrap: wrap;
 
  &__header {
    flex-basis: 100%;
    margin: 80px 20px 40px;
    .description {
      color: #777;
      font-size: .8rem;
      text-align: center;
    }
  }
   &__content {
      flex-basis: 100%;
      padding: 50px;
      position: relative;
   } 
   
}

h1, h2, h3 {
  font-weight: normal;
}

h1 {
  font-size: 1.5rem;
  margin-bottom: 20px;
  text-align: center;
  
}

.req {
    border: 0 none;
     font-size: 1rem;
    line-height: 2.5rem;
    outline: none;
    transition: all .1s linear;
    width: 100%;
   position: relative;
   &:focus {
      outline: 0;
      background: rgba(255,255,255,1);
    }
}

.field {
   &.line {
      border-bottom: 1px solid #eee;
   }
   margin-bottom: 40px;
   position: relative;
 }

.placeholder {
   cursor: text;
    position: absolute;
    top: 10px;
    color: #909090;
    transform: translate3d(0, 0, 0);
    transition: all 0.2s ease-in-out;
}

input {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 0;
  font-size: 16px;
  font-weight: 400;
  background: rgba(255,255,255,0.97);
  color: #212121;
  outline: 0;
  appearance: none;
  transition: all 0.2s ease-in-out;
    &.ui-full + label,
    &:focus + label {
      color: #3FB8AF;
      font-size: 12px;
      transform: translate3d(0, -25px, 0);
    }
  
}



  label {
    position: absolute;
    color: #909090;
    transform: translate3d(0, 0, 0);
    transition: all 0.2s ease-in-out;
  }
 

#choice option {
   color: black; 
}
.empty { color: gray; }

#choice {
   font-family: 'Lato';
   border-radius: 5px;
   cursor: pointer;
   padding: 10px;
   padding-right: 50px;
   margin-top: 5px;
   font-size: .9rem;
}

.dropdown-wrapper {
   border: 1px solid #eee;
   border-radius: 5px;
   padding: 10px 5px;
   position: relative;
   &:after {
      font-family: 'FontAwesome';
      content: "\f107";
      color: #3FB8AF;
      position: absolute;
      right: 10px;
      top: 12px;
   }
   &.outline {
      border: 1px solid rgba(#3FB8AF, .5);
      box-shadow: 0 0 10px rgba(#3FB8AF, .2);
   }
}

select {
   appearance: none;
   background: none;
   border: 0 none;
   font-size: .8em;
   outline: 0;
}

.right {
   float: right;
}

.inline {
   display: inline-block;
}

#btn {
   background-color: #fff;
   border: 1px solid #3FB8AF;
   color: #3FB8AF;
   font-weight: bold;
   border-radius: 5px;
   font-size: 1rem;
   margin-top: 20px;
   padding: 20px;
   width: 100%;
   cursor: pointer;
   transition: all 0.2s ease-in-out;
   &:hover {
      background-color: #3FB8AF;
      color: #fff;
   }
   &:active {
      background-color: darken(#3FB8AF, 5%);
   }
 &[disabled] {
     background-color: #fff !important;
    color: #3FB8AF !important;
   opacity: .3;
   cursor: not-allowed;
}
}

a {
   color: #3FB8AF;
   &:hover {
      color: darken(#3FB8AF, 5%);
   }
}

.ui-full:invalid + label{
   color: red;
}

.modal {
   background-color: $color-white;
   border-radius: 5px;
   display: none;
   padding: 30px 50px 30px 90px;
   margin-bottom: 30px;
   position: relative;
   &.show {
      animation: grow 1s 1;
       animation-fill-mode: forwards;
   }
   &.shrink {
      animation: shrink 1.5s 1;
       animation-fill-mode: forwards;

   }
   &:before {
       color: #3FB8AF;
      content:  "\f00c";
      font-family: 'FontAwesome';
      font-size: 40px;
      position: absolute;
      left: 25px;
      top: 50%;
      margin-top: -25px;
   }
   h2 {
      color: #3FB8AF;
     font-size: 1.2rem;
      margin-bottom: 20px;
   }
   p {
      font-size: .9rem;
      line-height: 1.5rem;
   }
   
}

@keyframes grow {
 0% {
    opacity:0;
    transform:  rotate(0deg) scaleX(0) scaleY(0) ;
  }
  70% {
    opacity:1;
    transform:  rotate(0deg) scaleX(1.1) scaleY(1.1) ;
  }
     100% {
    opacity:1;
    transform:  rotate(0deg) scaleX(1) scaleY(1) ;
  }

}

@keyframes shrink {
0% {
    opacity:1;
    transform:  rotate(0deg) scaleX(1) scaleY(1) ;
  }
 
    100%{
    opacity:0;
    transform:  rotate(0deg) scaleX(0) scaleY(0) ;
  }

}


@keyframes fade {
0% {
    opacity:0;
 
      transform: translateY(10px);
  }
 
    100%{
    opacity:1;
 
    transform: translateY(0);
    }

}

@keyframes fadeOut {
0%{
      opacity:1;
      transform: translateY(0);
   }
100% {
    opacity:0;
      transform: translateY(10px);
  }
    

}

.focus {
   font-weight: bold;
}

#refer_pos {display: inline-block;}

.close-modal {
   cursor: pointer;
   float: right;
   position: relative;
   &:before {
      color: #aaa;
   content: "\f00d";
    position: absolute;
      right: -40px;
      top: -20px;
      padding: 10px;
    font-family: 'FontAwesome';
      transition: all 0.2s ease-in-out;
     }
   &:hover:before {
      color: darken(#aaa, 10%);
   }
}

.reset {
   color: #777;
   cursor: pointer;
   font-size: .8rem;
   margin: 0 auto;
   margin-top: 30px;
   padding: 10px 20px;
   text-align: center;
   display: table;
   transition: all 0.2 ease-in-out;
   &:hover {
      color: darken(#777, 10%);
   }
}

.refer-card {

   margin: 0 auto;
   margin-bottom: 100px;
   max-width: 475px;
   display: none;
   transition: all 0.6s ease-in-out;
   &.fade {
      display: block;
      animation: drop .3s 1;
      animation-fill-mode: forwards;
   }
}
@keyframes drop {
0% {
    transform:  translateY(-70px) ;
  }
 
   100%{
    transform: translateY(0px) ;
  }

}


li {
   list-style: none;
}

.positions {
   display: table;
   margin: 100px auto;

   width: 475px;  
   transition: all 0.3s ease-in-out;
   animation: fade .3s 1;
       animation-fill-mode: forwards;
   &.fadeOut {
      display: none;
      animation: fadeOut .4s 1;
      animation-fill-mode: forwards;
   }
 
    ul {
      background-color: #fff;
      border-radius: 5px;

      position: relative;
   }
   .pos-card {
      border-bottom: 1px solid #eee;
      cursor: pointer;
      padding: 25px;
      flex-basis: 100%;
      margin: auto;
      transition: all 0.4s ease-in-out;
      &:hover {
         box-shadow: 0 0 20px rgba(0,0,0,0.2);
         .date {
            right: 100px;
         }
         .refer {
            right: 0;
            opacity: 1;
            z-index: 9;
         }
      }
      &:last-child {
         border-bottom: 0 none;
      }
   }
   .content {
      position: relative;
   }
   .title {
      margin-bottom: 5px;
      &.new:after {
         content:"New";
         padding: 4px 6px;
         font-size: .6rem;
         margin-left: 10px;
         text-transform: uppercase;
         letter-spacing: 2px;
         color: #fff;
         background-color: #3FB8AF;
         border-radius: 3px;
      }
   }
   .dept {
      color: #777;
      font-size: .8rem;
      }
   .date, .refer {
      font-size: .8rem;
      position: absolute;
      right: 0;
      top: 0;
      display: table;
      bottom: 0;
      margin: auto;
      color: #777;
      transition: all 0.3s ease-in-out;
   }
   .refer {
      opacity: 0;
      padding: 15px 20px;
      border-radius: 3px;
      border: 1px solid #ddd;
      transition: all 0.2s ease-in-out;
      &:hover {
         background-color: #f8f8f8;
         box-shadow: 0 0 10px rgba(0,0,0,0.2);
      }
   }
   .desc {
      display: none;
      color: #555;
      font-size: .9rem;
      transition: all 0.2s ease-in-out;

      
      &.reveal {
         display: block;

     
         animation: fade .5s 1;
         animation-fill-mode: forwards; 
         padding-top: 30px;
         visibility: visible;
      }
      li {
         list-style: circle;
         margin-bottom: 15px;
         line-height: 1.5rem;
         margin-left: 20px;
         &:last-child {
            margin-bottom: 0;
         }
      }
   }
}

h2 {
   margin-bottom: 30px;
}

.return {
   display: none;
   width: 475px;
   margin: 0 auto;
   margin-bottom: 30px;
   margin-top: 50px;
   color: #fff;
   cursor: pointer;
   font-size: .9rem;
   transition: all 0.2s ease-in-out;
   position: relative;
   padding: 15px;
   opacity: 1;
   &:hover {
         opacity: .7;
   
   }
   &:before {
      content: "\f104";
      font-family: 'FontAwesome';
      color: #fff;
      position: absolute;
      left: 0;
      font-weight: bold;
      font-size: 1rem;
      opacity: 1;
      transition: all 0.2s ease-in-out;
   }
   &:hover:before {
     opacity: .7;
   }
  
}





              
            
!

JS

              
                $('.btn').click(function(){
   $('.dropdown-menu').toggle();
});

$('#choice').change(function () {
    if($(this).val() == "") {
       $(this).addClass("empty");
       
     }
    else {
       $(this).removeClass("empty")}
      
});

    $('form > div input, form > div select').change(function() {
        var empty = false;
      
       $('.req').each(function(){
          if ($(this).val()==""){
          $(this).removeClass('ui-full')
       }
       else {
          $(this).addClass('ui-full');
       }
       });
       
         if ($('#choice').val()==""){
                  empty = true;
               }
        $('form > div input').each(function() {
            if ($(this).val() == '' ){
                empty = true;
             
            }
         
        });
      
      
        if (empty) {
            $('#btn').attr('disabled', 'disabled'); 
        } 
        else {
           
            $('#btn').removeAttr('disabled'); 
        }
     
    });

$('.referral').submit(function(e) {
   if (this.checkValidity()){
      e.preventDefault();
       $("html, body").animate({ scrollTop: 0 }, 600);
   
      $('#refer_name').html($('#name').val());
        $('#refer_pos').html($('#position').val());
        $('.modal').slideDown().addClass('show').removeClass('shrink');
      e.preventDefault();
   }
   else {}
});

$('.close-modal').click(function(){
   $('.modal').removeClass('show').addClass('shrink').slideUp();
})

$('.reset').click(function(){
   $('.modal').removeClass('show').addClass('shrink').slideUp();
  $('.req').val("").removeClass('ui-full');
  $('#choice').val("").addClass('empty');
     $('#btn').attr('disabled', 'disabled'); 
});

$('select').focus(function(){
   $('.dropdown-wrapper').addClass('outline');
});

$('select').on('focusout',function(){
   $('.dropdown-wrapper').removeClass('outline');
});

$('.pos-card').click(function(){
   $('.desc').removeClass('reveal');
  $(this).find('.desc').toggleClass('reveal');

});

$('.refer').click(function(e){
   e.stopPropagation();
 //  $('.positions').animate({ height: 'toggle', opacity: 'toggle' }, 'medium');
   $('.positions').addClass('fadeOut');
   $('.refer-card').addClass('fade');
   $('.return').fadeIn('fast');
});

$('.return').click(function(){
   $('.refer-card').removeClass('fade');
     $(this).hide();
   $('.positions').delay('200').removeClass('fadeOut');
   $('.desc').removeClass('reveal');
});

$('#pos_1 .refer').click(function(){
   $('#position').val('UI/UX Designer').addClass('ui-full');
   $('#choice').val(4).removeClass('empty');
});

$('#pos_2 .refer').click(function(){
   $('#position').val('Sales Manager').addClass('ui-full');
   $('#choice').val(2).removeClass('empty');
});

$('#pos_3 .refer').click(function(){
   $('#position').val('Business Analyst').addClass('ui-full');
   $('#choice').val(6).removeClass('empty');
});


              
            
!
999px

Console