cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

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.

            
              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 


            
          
!
            
              @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;
   }
  
}





            
          
!
            
              $('.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
Loading ..................

Console