"Admin Signup"
Bootstrap 3.3.0 Snippet by mgustin12

<div class="head"> <h1>GIVINGEST</h1> </div> <div class="container"> <div class="stepwizard"> <div class="stepwizard-row setup-panel"> <div class="stepwizard-step"> <a href="#step-1" type="button" class="btn btn-primary btn-circle"> <i class="glyphicon glyphicon-user"></i></a> </div> <div class="stepwizard-step"> <a href="#step-2" type="button" class="btn btn-default btn-circle" disabled="disabled"> <i class="glyphicon glyphicon-heart"></i></a> </div> <div class="stepwizard-step"> <a href="#step-3" type="button" class="btn btn-default btn-circle" disabled="disabled"> <i class="glyphicon glyphicon-plus"></i></a> </div> <div class="stepwizard-step"> <a href="#step-4" type="button" class="btn btn-default btn-circle" disabled="disabled"> <i class="glyphicon glyphicon-ok"></i></a> </div> </div> </div> <div class="row setup-content" id="step-2"> <div class="col-xs-12"> <div class="col-md-12"> <h3>Business Info</h3> <div class="col-md-6"> <div class="form-group"> <label class="control-label">Business Name</label> <input maxlength="100" type="text" required="required" class="form-control" placeholder="Enter Name" /> </div> </div> <div class="col-md-6"> <div class="form-group"> <label class="control-label">EIN (used to verify your business)</label> <input maxlength="10" type="text" required="required" class="form-control" placeholder="12-3456789" /> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="subject"> Type of Business</label> <select id="subject" name="subject" class="form-control" required="required"> <option value="na" selected="">Choose One:</option> <option value="service">Restaurant</option> <option value="suggestions">Shopping</option> <option value="product">Financial</option> <option value="product">Retail</option> <option value="product">Online</option> <option value="product">Other</option> </select> </div> </div> <div class="col-md-6"> <div class="form-group"> <label class="control-label">Website (option)</label> <input maxlength="100" type="text" class="form-control" placeholder="URL" /> </div> </div> <h3>Business Location</h3> <div class="col-md-6"> <div class="form-group"> <label class="control-label">Street Adress</label> <input maxlength="100" type="text" required="required" class="form-control" placeholder="Enter Address" /> </div> </div> <div class="col-md-6"> <div class="form-group"> <label class="control-label">City</label> <input maxlength="40" type="text" required="required" class="form-control" placeholder="Enter City" /> </div> </div> <div class="col-md-6"> <div class="form-group"> <label class="control-label">ZIP</label> <input maxlength="5" type="text" required="required" class="form-control" placeholder="Enter ZIP Code" /> </div> </div> <div class="col-md-6"> <div class="form-group"> <label class="control-label">State</label> <input maxlength="2" type="text" required="required" class="form-control" placeholder="Enter State" /> </div> </div> <h3>Business Contact</h3> <div class="col-md-6"> <div class="form-group"> <label class="control-label">Phone Number</label> <input maxlength="14" type="text" required="required" class="form-control" placeholder="(555) 555-5555" /> </div> </div> <div class="col-md-6"> <div class="form-group"> <label class="control-label">Email</label> <input maxlength="100" type="text" required="required" class="form-control" placeholder="Enter Email" /> </div> </div> </div> <button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Next</button> </div> </div> </div> <div class="row setup-content" id="step-1"> <div class="col-xs-12"> <div class="col-md-12"> <div class="container"> <h3>Support Causes</h3> <p>(Select at least 3)</p> <div class="row"> <div class="col-md-12"> <button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Next</button> <div class="input-group" id="adv-search"> <input type="text" class="form-control" placeholder="Search Causes" /> <div class="input-group-btn"> <div class="btn-group" role="group"> <div class="dropdown dropdown-lg"> <button id="expandFilter" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span></button> <div class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="expandFilter"> <form class="form-horizontal" role="form"> <div class="form-group row"> <label for="filter" class="col-xs-10 col-xs-offset-1">Category</label> <div class="col-xs-10 col-xs-offset-1"> <select class="form-control"> <option value="0" selected>All Categories</option> <option value="1">Health</option> <option value="2">Animal</option> <option value="3">Environmental</option> <option value="4">International</option> <option value="5">Education</option> <option value="6">Arts & Culture</option> </select> </div> </div> <div class="form-group row"> <label for="contain" class="col-xs-10 col-xs-offset-1">Contains the words</label> <div class="col-xs-9 col-xs-offset-1"> <input class="form-control" type="text" /> <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-search" id="searchBtn" aria-hidden="true"></span></button> </div> </div> </form> </div> </div> <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button> </div> </div> </div> </div> </div> <ul class="listrap"> <li class="col-md-6"> <div class="listrap-toggle"> <span></span> <img src="http://lorempixel.com/60/60/people/?v=1" class="img-circle" /> </div> <strong>Special Olympics</strong> </li> <li class="col-md-6"> <div class="listrap-toggle"> <span></span> <img src="http://lorempixel.com/60/60/people/?v=2" class="img-circle" /> </div> <strong>Lymphoma Leukemia Society</strong> </li> <li class="col-md-6"> <div class="listrap-toggle"> <span></span> <img src="http://lorempixel.com/60/60/people/?v=3" class="img-circle" /> </div> <strong>Ames Animal Shelter</strong> </li> <li class="col-md-6"> <div class="listrap-toggle"> <span></span> <img src="http://lorempixel.com/60/60/people/?v=4" class="img-circle" /> </div> <strong>American Cancer Society</strong> </li> <li class="col-md-6"> <div class="listrap-toggle"> <span></span> <img src="http://lorempixel.com/60/60/people/?v=5" class="img-circle" /> </div> <strong>St. Jude Children's Hospital</strong> </li> </ul> </div> </div> </div> </div> </div> <div class="row setup-content" id="step-3"> <div class="col-xs-12"> <div class="col-md-12"> <div class="container"> <h3>Select Membership</h3> </br> <section id="plans"> <div class="col-md-4 text-center"> <div class="panel panel-info panel-pricing"> <div class="panel-heading"> <i class="fa fa-desktop"></i> <h1><b>Basic</b></h1> </div> <div class="panel-body text-center"> <p><strong>Free</strong></p> </div> <ul class="list-group text-center"> <li class="list-group-item"><i class="fa fa-check"></i> Feature</li> <li class="list-group-item"><i class="fa fa-check"></i> Feature</li> <li class="list-group-item"><i class="fa fa-check"></i> Feature</li> </ul> <div class="panel-footer"> <a class="btn btn-lg btn-block btn-info" href="#">Select</a> </div> </div> </div> <div class="col-md-4 text-center"> <div class="panel panel-primary panel-pricing"> <div class="panel-heading"> <i class="fa fa-desktop"></i> <h1><b>Pro</b></h1> </div> <div class="panel-body text-center"> <p><strong>$35 / Month</strong></p> </div> <ul class="list-group text-center"> <li class="list-group-item"><i class="fa fa-check"></i> Feature</li> <li class="list-group-item"><i class="fa fa-check"></i> Feature</li> <li class="list-group-item"><i class="fa fa-check"></i> Feature</li> </ul> <div class="panel-footer"> <a class="btn btn-lg btn-block btn-primary" href="#">Select</a> </div> </div> </div> <div class="col-md-4 text-center"> <div class="panel panel-success panel-pricing"> <div class="panel-heading"> <i class="fa fa-desktop"></i> <h1><b>Premium</b></h1> </div> <div class="panel-body text-center"> <p><strong>$250 / Month</strong></p> </div> <ul class="list-group text-center"> <li class="list-group-item"><i class="fa fa-check"></i> Feature</li> <li class="list-group-item"><i class="fa fa-check"></i> Feature</li> <li class="list-group-item"><i class="fa fa-check"></i> Feature</li> </ul> <div class="panel-footer"> <a class="btn btn-lg btn-block btn-success" href="#">Select</a> </div> </div> </div> </section> <button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Next</button> </div> </div> </div> </div> <div class="row setup-content" id="step-4"> <div class="col-xs-12"> <div class="col-md-12"> <div class="container"> <h4>Complete Registration</h4> <button class="btn btn-success completeBtn btn-lg pull-right" type="button" >Complete</button> </div> </div> </div> </div> </div> </div>
@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700); body { margin:40px; font-family: 'Roboto Condensed', sans-serif; background-color: #16A085; } .head { color: #ECF0F1; margin-bottom: 40px; } .container { background-color: #ECF0F1; padding: 30px; } .stepwizard-step p { margin-top: 10px; } .stepwizard-row { display: table-row; } .stepwizard { display: table; width: 100%; position: relative; } .stepwizard-step button[disabled] { background: #888; opacity: 1 !important; filter: alpha(opacity=100) !important; } .stepwizard-row:before { top: 50px; bottom: 0; position: absolute; content: " "; width: 100%; height: 3px; background-color: #BDC3C7; z-order: 0; } .stepwizard-step { display: table-cell; text-align: center; position: relative; } .stepwizard-step p { margin-top:10px; } .btn-success .glyphicon { color: #fff; font-size: 40px; } .btn-circle { width: 100px; height: 100px; text-align: center; padding: 25px 25px; font-size: 40px; line-height: 1.428571429; border-radius: 50px; } /* // Listrap v1.0, by Gustavo Gondim (http://github.com/ggondim) // Licenced under MIT License // For updates, improvements and issues, see https://github.com/inosoftbr/listrap */ .listrap { list-style-type: none; margin: 0; padding: 0; cursor: default; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .listrap li { margin: 0; padding: 10px; } .listrap li.active, .listrap li:hover { background-color: #d9edf7; } .listrap strong { margin-left: 10px; } .listrap .listrap-toggle { display: inline-block; width: 60px; height: 60px; } .listrap .listrap-toggle span { background-color: #428bca; opacity: 0.8; z-index: 100; width: 60px; height: 60px; display: none; position: absolute; border-radius: 50%; text-align: center; line-height: 60px; vertical-align: middle; color: #ffffff; } .listrap .listrap-toggle span:before { font-family: 'Glyphicons Halflings'; content: "\e013"; } .listrap li.active .listrap-toggle span { display: block; } } .dropdown.dropdown-lg .dropdown-menu { margin-top: -1px; padding: 6px 20px; } .input-group-btn .btn-group { display: flex !important; } .btn-group .btn { border-radius: 0; margin-left: -1px; } .btn-group .btn:last-child { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } .btn-group .form-horizontal .btn[type="submit"] { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } .form-horizontal .form-group { margin-left: 0; margin-right: 0; } .form-group .form-control:last-child { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } @media screen and (min-width: 768px) { #adv-search { width: 500px; } .dropdown.dropdown-lg { position: static !important; } .dropdown.dropdown-lg .dropdown-menu { min-width: 500px; } } .panel-pricing { -moz-transition: all .3s ease; -o-transition: all .3s ease; -webkit-transition: all .3s ease; } .panel-pricing:hover { box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.7); } .panel-pricing .panel-heading { padding: 20px 10px; } .panel-pricing .panel-heading .fa { margin-top: 10px; font-size: 58px; } .panel-pricing .list-group-item { color: #777777; border-bottom: 1px solid rgba(250, 250, 250, 0.5); } .panel-pricing .list-group-item:last-child { border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; } .panel-pricing .list-group-item:first-child { border-top-right-radius: 0px; border-top-left-radius: 0px; } .panel-pricing .panel-body { background-color: #f0f0f0; font-size: 40px; color: #777777; padding: 20px; margin: 0px; }
$(document).ready(function () { var navListItems = $('div.setup-panel div a'), allWells = $('.setup-content'), allNextBtn = $('.nextBtn'); allWells.hide(); navListItems.click(function (e) { e.preventDefault(); var $target = $($(this).attr('href')), $item = $(this); if (!$item.hasClass('disabled')) { navListItems.removeClass('btn-primary').addClass('btn-default'); $item.addClass('btn-primary'); allWells.hide(); $target.show(); $target.find('input:eq(0)').focus(); } }); allNextBtn.click(function(){ var curStep = $(this).closest(".setup-content"), curStepBtn = curStep.attr("id"), nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"), curInputs = curStep.find("input[type='text'],input[type='url']"), isValid = true; $(".form-group").removeClass("has-error"); for(var i=0; i<curInputs.length; i++){ if (!curInputs[i].validity.valid){ isValid = false; $(curInputs[i]).closest(".form-group").addClass("has-error"); } } if (isValid) nextStepWizard.removeAttr('disabled').trigger('click'); }); $('div.setup-panel div a.btn-primary').trigger('click'); }); // Listrap v1.0, by Gustavo Gondim (http://github.com/ggondim) // Licenced under MIT License // For updates, improvements and issues, see https://github.com/inosoftbr/listrap jQuery.fn.extend({ listrap: function () { var listrap = this; listrap.getSelection = function () { var selection = new Array(); listrap.children("li.active").each(function (ix, el) { selection.push($(el)[0]); }); return selection; } var toggle = "li .listrap-toggle "; var selectionChanged = function() { $(this).parent().parent().toggleClass("active"); listrap.trigger("selection-changed", [listrap.getSelection()]); } $(listrap).find(toggle + "img").on("click", selectionChanged); $(listrap).find(toggle + "span").on("click", selectionChanged); return listrap; } }); $(document).ready(function () { $(".listrap").listrap().on("selection-changed", function (event, selection) { console.log(selection); }); });

Questions / Comments:

Related: See More