A Pen by Gavin Simpson on CodePen.
-
-
Save CodeMyUI/97e7fbecabd9269c185d to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(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); | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
<script src="http://arti.us/clients/concept/questionnaire/dist/js/bootstrap.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* 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;} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" /> | |
<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css" rel="stylesheet" /> | |
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,100,400,300,600,700,800" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment