Reg - Final Copy

by Shankar

HTML

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>West Brom - New User Register form</title>

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/bootstrap-toggle.min.css" rel="stylesheet">

    <!-- Register CSS -->
    <link href="css/new_user_register.css" rel="stylesheet">


    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>

<body>
    <!-- Navigation -->
    <div class="header">
        <div class="container-fluid" style="background-color:#C9C6C6;">
          <div class="row">
            <div class="col-lg-2 col-md-2 col-sm-2 col-xs-3">
                <span> <a href="home.html"><img src="img/logo.png" class="img-responsive logo" alt="Logo"></a></span>
            </div>            
            </div>
          </div>  
        </div>

    <!-- Page Content -->
    <div class="container-fluid" style="border:1px dashed;">

        <!-- <section id="wizard"> -->
      <div class="page-header">
        <h3>New user registration process</h3>
      </div>

    <div class="row text-center">
      <div class="col-xs-2"></div><!-- col -->
        <div class="col-xs-8">
            <div class="stepwizard">
              <div class="stepwizard-row setup-panel">
                <div class="stepwizard-step"...

CSS

body {
    margin-top:40px;
    padding-top: 70px;
}
.stepwizard-step p {
    margin-top: 10px;
}
.stepwizard-row {
    display: table-row;
}
.stepwizard {
    display: table;
    width: 100%;
    position: relative;
}
.stepwizard-step button[disabled] {
    opacity: 1 !important;
    filter: alpha(opacity=100) !important;
}
.stepwizard-row:before {
    top: 35px;
    bottom: 0;
    position: absolute;
    content: " ";
    width: 100%;
    height: 3px;
    background-color: #ccc;
    z-order: 0;
}
.stepwizard-step {
    display: table-cell;
    text-align: center;
    position: relative;
}
.btn-circle {
    width: 70px;
    height: 70px;
    text-align: center;
    padding: 6px 0;
    font-size: 3em;
    line-height: 1.428571429;
    border-radius: 100px;
    background-color: #82c341;
}
.btn-circle:hover {
  background-color: #7F1999;
  border-color: #7F1999;
}
.setup-content {
  padding:.8em;
}

.btn-primary {
  background-color: #7F1999;
  border-color: #7F1999;
}

.btn-next-nav{
  width: auto;
  background: none;
  color: #000;
  text-transform: uppercase;
  border: 2px solid #793697;
  padding: 7px 16px;
  height: auto;
  min-width: 160px;
  font-size: 20px;
  text-decoration: none;
}
.btn-next-nav:hover,
.btn-next-nav:focus{
  background: #82c341;
  color: #fff;
  border-color: #82c341;
}

/*Check Box CSS*/
.toggle.ios, .toggle-on.ios, .toggle-off.ios { border-radius: 20px; }
.toggle.ios .toggle-handle { border-radius: 20px; }


.header{
  top:0;
  position:absolute;
  width:100%;
  border-top: 15px solid #73b62b;
}
.staticheader{
  background-color:#ffffff;
  width:100%;
  border-bottom:1px solid #cccccc;
}
.logo{
  margin: 8px 0;
}

/*Footer*/

.footer{
  width:100%;
  background-color:#793697;
  color:#fff;
  padding:42px;
  font-family:
}

.footer ul{
  padding: 0;
  margin: 0;
}
.footer ul li{
  list-style: none;
}
.footer ul li a{
  color: #fff;
}
.footer ul li a:hover{
  text-decoration: underline;
}
.footermenu li{
  display: inline-block;
 ...

JavaScript

/*

JS
jQuery.min.js
bootstrap.min.js
bootstrap.toggle.min.js
pwstrength.js
jquery.maskinput.min.js

CSS
bootstrap.min.css
bootstrap.toggle.min.css
new_user_register.css (CSS panel)


*/