Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

Behavior

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.

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 class="covering">
  <div class="progress">
    <div class="progress-bar" style="width: 0;"> <span class="sr-only">60% Complete</span> </div>
  </div>
  <!--<video autoplay muted loop id="video-bg" >
     <source src="dist/video/rain.mp4" type="video/mp4" >
      <source src="dist/video/rain.webm"  type="video/webM" >
       <source src="dist/video/rain.ogv"  type="video/ogg" >
</video>-->
  <h1 class="h1-header animated bounceInLeft">What's The Big Idea?</h1>
  <div class="container-fluid table-class">
    <div class="black " >
      <div class="inner cover">
        <div class="centerUp">
          <div class="questionaire">
            <form>
              <ul class="progress-form">
                <li class="form-group animated fadeInRightBig  activate" data-color="#E1523D" data-percentage="20%">
                  <label for="nameInput">
                  <h1>Hey there!</h1>
                  Let's get this party started. Would you mind introducing yourself?
                  </label>
                  <input type="text" class="form-control getName" id="q1" placeholder="Herby"  required="required"/>
                </li>
                <li class="form-group animated hide inactive" data-color="#7C6992"  data-percentage="40%">
                  <label for="exampleInputEmail1">
                  <h1>Nice to meet you, <span class="cName">parnter</span>!</h1>
                  We're going to send you some information when we're thru. Can we have your email? Don't worry, we're not into spamming.
                  </label>
                  <input type="email" class="form-control" id="q2" placeholder="youremail@domain.com" required="required"/>
                </li>
                <li class="form-group animated hide" data-color="#00AF66"  data-percentage="60%">
                  <label for="exampleInputEmail1">
                  <h1>Let's talk  why you're here.</h1>
                  Why are you doing this and why does the customer need you?
                  </label>
                  <textarea class="form-control" id="q3"  required/></textarea>
                  <button type="button" class="btn btn-xs btn-danger help pull-right" style="margin:5px 0; border-radius: 36px; padding: 3px 10px;" data-toggle="popover" data-placement="top" title="What's the big idea?" data-content="It's important to know all of your evironments (PEST).  Don't just assume you know your them, you need research to back it up">?</button>
                </li>
                <li class="form-group animated hide" data-color="#00AF66"  data-percentage="80%">
                  <label for="exampleInputEmail1">
                  <h1>Now, what's the problem?</h1>
                  Why is there a need for this big idea? Spill it. (Also, the answer is not to increase brand awareness, so don't even try it)
                  </label>
                  <textarea class="form-control" id="q4" placeholder="These are the tough questions" required/></textarea>
                </li>
                <li class="form-group animated hide" data-color="#00AF66"  data-percentage="100%">
                  <label for="exampleInputEmail1">
                  <h1>Let's talk big idea</h1>
                  Why are you doing this and why does the customer need you?
                  </label>
                  <textarea class="form-control" id="q5" placeholder="These are the tough questions" required/></textarea>
                </li>
                <li class="form-group animated hide scrollable" data-color="#00AF66"  data-percentage="100%">
                  <h3>Please Review Your Answers (click on any of them to edit):</h3>
                  <div class=" editable">
                    <div class="break answer1" contenteditable="true"></div>
                    <div class="break answer2" contenteditable="true"></div>
                    <div class="break answer3" contenteditable="true"></div>
                    <div class="break answer4" contenteditable="true"></div>
                    <div class="break answer5" contenteditable="true"></div>
                  </div>
                </li>
              </ul>
            </form>
          </div>
          <div class="count"><span class="img_cnt"></span> / <span class="img_amt"></span></div>
          <button class="btn btn-default btn-lg nxt animated hide" >Next <span class="icon-next"></span></button>
        </div>
        <div class="clearfix"></div>
      </div>
    </div>
    <form >
      <input hidden="" class="answer1" style="color:#444"/>
      <input hidden="" class="answer2" style="color:#444"/>
      <input hidden="" class="answer3" style="color:#444"/>
      <input hidden="" class="answer4" style="color:#444"/>
      <input hidden="" class="answer5" style="color:#444"/>
      <input type="submit" class="btn btn-default btn-lg hide submit" value="Ready to Send"/>
    </form>
  </div>
</div>
</div>
<div class="animated thanks hide">
  <h1 style="font-weight:100; font-size:48px; width: 80%; margin: 0 auto;">Thanks!  We'll get back to you shortly!</h1>
  <form action="https://www.linkedin.com/in/gavinsimpson1">
    <button class="btn btn-lg btn-success" style="margin:20px;" >Let's go play</button>
  </form>
</div>
              
            
!

CSS

              
                /*
 * Globals
 */

/* Links */
a,
a:focus,
a:hover {
  color: #fff;
}

/* Custom default button */
.btn-default,
.btn-default:hover,
.btn-default:focus {
  color: #333;
  text-shadow: none; /* Prevent inheritence from `body` */
  background-color: #fff;
  border: 1px solid #fff;
}


/*
 * Base structure
 */

html,
body {
  height: 100%; font-family: 'Open Sans', sans-serif !important; font-weight:300; margin-top:-1px;
  
}
body { position:relative; background-color: #3498db}
.covering {
  left: 0;
  right: 0;
  z-index: 1;
  display: block;
 /* background-color:rgba(0, 0, 0, .75);*/
  width: 100%;
  height: 100%; overflow:hidden;
 
 
	}
	
.red { background-color:#e1523d}
.table-class {display: table; width:100%; height:100%}	
.black {
	
	  z-index:1111111; display: table-cell;
  vertical-align: middle;
	}	
	
	
body {
  color: #fff;
  
  
  
}
.container-fluid {
    padding: 0px;
}

.centerUp {max-width:750px; margin:0 auto;}

/* Extra markup and styles for table-esque vertical and horizontal centering */
.btn-lg {border-radius:0;}
.btn-default, .btn-default:hover, .btn-default:focus {
color: #fff;
text-shadow: none;
background-color: #2ecc71;
border: none;
}
.site-wrapper-inner {
  
}
.cover-container {
  margin-left: auto;
  margin-right: auto;
}

/* Padding for spacing */
/* Extra markup and styles for table-esque vertical and horizontal centering */

.cover-container {
  margin-right: auto;
  margin-left: auto;
}
#video-bg {
position: fixed;
right: 0;
bottom: 0;
width: auto;
min-width: 100%;
height: auto;
min-height: 100%;
z-index: -100;
background: transparent url(video-bg.jpg) no-repeat;
background-size: cover;
}
/* Padding for spacing */
.inner {
  padding: 30px;
}
.break {border-bottom:1px solid #4DB8FF; margin-bottom:15px; padding-bottom:15px}
.progress {border-radius:0; height:7px; background-color:#1E6697;  -webkit-box-shadow: none; box-shadow:none;}
.progress-bar {background-color:#2ecc71; -webkit-box-shadow: none;box-shadow:none; }
.progress-form {margin:0; padding:0; position:relative; min-height:500px}
.count {font-size:36px; position:absolute; bottom:5%; left: 5%;}
.activate { }
.progress-form  li {margin:0; padding:0; list-style:none; position:absolute; width:100%}
.popover {
position: absolute;
top: 0;
left: 0;
z-index: 1010;
display: none;
min-width:300px;
max-width: 500px;
width:auto;
padding: 1px;
text-align: left;
background-color: #ffb500;
background-clip: padding-box;
border: none;
border: none;
border-radius: 0px;
-webkit-box-shadow: none);
box-shadow: none;
white-space: normal;
}
.popover-title {
margin: 0;
padding: 8px 14px;
font-size: 14px;
font-weight: 400;
line-height: 18px;
background-color:transparent;
border-bottom: none;
border-radius: 0;

}

.scrollable {overflow-y: scroll;
overflow-wrap: break-word;
max-height: 500px;
}
.popover-content {
padding: 9px 14px;
font-size:14px;
}
.popover.top .arrow:after {
content: " ";
bottom: 1px;
margin-left: -10px;
border-bottom-width: 0;
border-top-color: #ffb500;
}
.form-group {color:#fff; position:relative}
.alerted {position:absolute; top:-35px;  border-left:5px solid #e1523D; color:#e1523D; padding:5px 10px; font-size:24px;  }
.form-group label { box-shadow:none; border-radius:0; font-size:20px; color:#fff; font-weight:100; padding:10px 0;}
.form-group label h1 {font-size:48px; font-weight:100;}
.form-group input, .form-group textarea  { border:none;  background:rgba(255,255,255, .2);height:auto; padding:15px 15px; box-shadow:none; border-radius:0; font-size:36px; color:#fff; outline: 0; width:100% }

.form-group textarea {font-size:18px; padding:10px; min-height:300px;}

.form-group input:focus, .form-group textarea:focus {outline:0; border:none;  box-shadow:none;}

input:active  {outline:0 !important}
.navbar {}
.navbar-brand { font-weight:normal; margin-top:30px;} .h1-header {font-weight:100; margin-top:0; font-size:36px; background:#e74c3c; padding:25px; margin-left:-10px; width:400px; position:absolute}
::focus {outline:none !important}
::blur {outline:none !important}
.nxt , .submit {position:absolute; bottom:3%; right:3%}
/*
 * Cover
 */

.cover {
  padding: 0 20px; margin-top:-50px;
}
.cover .btn-lg {
 padding: 20px 60px;
font-weight: bold;
font-size: 24px;

}


/*
 * Footer
 */

.mastfoot {
  color: #999; /* IE8 proofing */
  color: rgba(255,255,255,.5);
}


/*
 * Affix and center
 */

@media (min-width: 768px) {
  /* Pull out the header and footer */
  .masthead {
    position: fixed;
    top: 0;
  }
  .mastfoot {
    position: fixed;
    bottom: 0;
  }
  /* Start the vertical centering */
  .site-wrapper-inner {
    vertical-align: middle;
  }
  /* Handle the widths */
  .masthead,
  .mastfoot,
  .cover-container {
    width: 100%; /* Must be percentage or pixels for horizontal alignment */
  }
}

@media (min-width: 992px) {
  .masthead,
  .mastfoot,
  .cover-container {
    width: 700px;
  }
}
::-webkit-input-placeholder {
   color:rgba(255,255,255, 0.3) !important  ;
}

:-moz-placeholder { /* Firefox 18- */
  color: #348779 !important  ;
}

::-moz-placeholder {  /* Firefox 19+ */
   color: #348779 !important  ;
}

:-ms-input-placeholder {  
   color: #348779 !important  ;
}

[contenteditable="true"]:focus > style{
display:block;
font-size: .75em;
color: blue;
font-family: courier, sans-serif;
background: #fff;
line-height: 1.5;
position:relative;
right: -36em;
top:-2em;
}


.darken {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
z-index: 9999999999999999;
display: none;
}

.thanks {
	
position: fixed;
top: 20%;
z-index: 99999999999999999999999;
width: 100%;
text-align: center;

}


.btn-success {
color: #fff;
background-color: #00af66;
border-color: transparent;
}

.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active, .open .dropdown-toggle.btn-success {
color: #fff;
background-color: #009e5c;
border-color: transparent;
}




@media (max-width: 480px) {
.h1-header {
	position:static;
font-weight: 100;
margin-top: 0;
font-size: 18px;
background: transparent;
padding: 25px;
margin-left: -10px;
/* width: 400px; */
border-bottom:1px solid white;
}

.progress {margin-bottom:0}
.form-group label {font-size:16px;}
.form-group label h1 {font-size:36px; font-weight:700}

.form-group textarea {
font-size: 18px;
padding: 10px;
min-height: 150px;
}

.form-group input, .form-group textarea {
border: none;
background: rgba(255,255,255, .2);
padding: 35px 15px;
box-shadow: none;
border-radius: 0;
font-size: 20px;
color: #fff;
outline: 0;
width: 100%;
}

}


@media only screen 
and (min-device-width : 320px)
and (max-device-width : 736px) 
and (orientation : landscape) {
    /* CSS here */

.h1-header {
	position:static;
font-weight: 100;
margin-top: 0;
font-size: 18px;
background: transparent;
padding: 0 0 10px 20px;
margin-left: -10px;
/* width: 400px; */
border-bottom:1px solid white;
}


 .form-group label h1 {font-size:24px;} .form-group label {font-size:14px;} .form-group input, .form-group textarea {font-size:18px;padding: 15px 15px;} .questionaire {padding:20px 0;} .count {font-size:20px;} .cover .btn-lg {padding:10px 20px; font-size:20px;}
	.form-group textarea {min-height:150px;}
	
}
              
            
!

JS

              
                $(function() {
  $('input.getName').keyup("keyup", function() {
    $('.cName').html($('.getName').val());
  });
  $('.help').popover();
  //$('.progress-bar').css("width", "20%");
  $('.submit').click(function() {
    event.preventDefault();
    var darken = '<div class="darken" style="display:none;"></div>';
    $('body').prepend(darken);

    $(".darken").delay().show(0).animate({
      opacity: 0.8
    }, "fast");
    $('.thanks').removeClass('hide').addClass('fadeInDownBig');
  });
  var img_cnt = $('li.activate').index() + 1;

  var img_amt = $('li.form-group').length;
  $('.img_cnt').html(img_cnt);
  $('.img_amt').html(img_amt);
  var progress = ($('.img_cnt').text() / $('.img_amt').text()) * 100;
  $('.progress-bar').css("width", progress + "%");
  $('.form-control').keyup(function() {
    $('.nxt').removeClass("hide fadeOutDown").addClass("fadeInUp");
  })

  $('.nxt').click(function() {
    $('.nxt').removeClass("fadeInUp").addClass('fadeOutDown');

    if ($('.progress-form li').hasClass('activate')) {

      $('p.alerted').removeClass('fadeInLeft').addClass('fadeOutUp');

      var $activate = $('li.activate');
      var $inactive = $('li.inactive');
      $activate.removeClass("fadeInRightBig activate").addClass('fadeOutLeftBig');
      $inactive.removeClass("hide inactive").addClass("activate fadeInRightBig").next().addClass('inactive');

      var img_cnt = $('li.activate').index() + 1;

      var img_amt = $('li.form-group').length;
      $('.img_cnt').html(img_cnt);
      $('.img_amt').html(img_amt);
      var progress = ($('.img_cnt').text() / $('.img_amt').text()) * 100;
      $('.progress-bar').css("width", progress + "%");

      if ($('.img_cnt').html() == $('.img_amt').html()) {

        $('.count, .nxt').hide();
        $('.submit').removeClass("hide");

      }

    } //End Else

  });

});

$(function() {

  $('#q1').keyup(function() {
    var nameValue = $(this).val();
    $('.answer1').html(nameValue);
  });

  $('#q2').keyup(function() {
    var nameValue = $(this).val();
    $('.answer2').html(nameValue);
  });

  $('#q3').keyup(function() {
    var nameValue = $(this).val();
    $('.answer3').html(nameValue);
  });

  $('#q4').keyup(function() {
    var nameValue = $(this).val();
    $('.answer4').html(nameValue);
  });

  $('#q5').keyup(function() {
    var nameValue = $(this).val();
    $('.answer5').html(nameValue);
  });

});
              
            
!
999px

Console