forms.html

<!-- <link href="style/font-awesome.css" type="text/css" rel="stylesheet" media="screen">  -->
<link rel="stylesheet" type="text/css" href="style/bs/css/bootstrap.css"/>
<script type="text/javascript" src="behaviour/jQuery/jquery.js"></script>
    <script type="text/javascript" src="style/bs/js/bootstrap.js"></script>

    <!-- bootstrapValidator.js -->
    <script type="text/javascript" src="behaviour/bootstrapValidator.js"></script>
    <!-- calling plugin -->
    <script type="text/javascript" src="behaviour/validate.js"></script>

    <!-- contacts.js -->
    <script type="text/javascript" src="behaviour/contacts.js"></script>

<!-- mobile friendly -->
<meta name="viewport" content="width=device-width, initial-scale=1">   

<style type="text/css">
    
    .square, .btn {
    border-radius: 0px!important;
}

/* -- color classes -- */
.coralbg {
    background-color: #FA396F;
    height: 220px;

} 

.coral {
    color: #FA396f;
}

.turqbg {

    background-color: #46D8D2;
}

.turq {
    color: #46D8D2;
}

.white {
    color: #fff!important;
}
.user-menu{
    background:#FA396F;
    height: 450px;
}
/* -- The "User's Menu Container" specific elements. Custom container for the snippet -- */
div.user-menu-container {
  z-index: 10;
  background-color: #fff;
  margin-top: 20px;
  background-clip: padding-box;
  opacity: 0.97;
  filter: alpha(opacity=97);
  -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
}

div.user-menu-container .btn-lg {
    padding: 0px 12px;
}

div.user-menu-container h4 {
    font-weight: 300;
    color: #8b8b8b;
}

div.user-menu-container a, div.user-menu-container .btn  {
    transition: 1s ease;
}

div.user-menu-container .thumbnail {
   width:100%;
   min-height:200px;
   border: 0px!important;
   padding: 0px;
   border-radius: 0;
   border: 0px!important;
}

/* -- Vertical Button Group -- */
div.user-menu-container .btn-group-vertical {
    display: block;
}

div.user-menu-container .btn-group-vertical>a {
    padding: 20px 25px;
    background-color: #46D8D2;
    color: white;
    border-color: #fff;
}

div.btn-group-vertical>a:hover {
    color: white;
    border-color: white;
}

div.btn-group-vertical>a.active {
    background: #FA396F;
    box-shadow: none;
    color: white;
}
/* -- Individual button styles of vertical btn group -- */
div.user-menu-btns {
    padding-right: 0;
    padding-left: 0;
    padding-bottom: 0;
}

div.user-menu-btns div.btn-group-vertical>a.active:after{
  content: '';
  position: absolute;
  left: 100%;
  top: 50%;
  margin-top: -13px;
  border-left: 0;
  border-bottom: 13px solid transparent;
  border-top: 13px solid transparent;
  border-left: 10px solid #46D8D2;
}
/* -- The main tab & content styling of the vertical buttons info-- */
div.user-menu-content {
    color: #323232;
}

div.user-menu div.user-menu-content:not(.active){
  display: none;
}

/* -- The btn stylings for the btn icons -- */
.btn-label {position: relative;left: -12px;display: inline-block;padding: 6px 12px;background: rgba(0,0,0,0.15);border-radius: 3px 0 0 3px;}
.btn-labeled {padding-top: 0;padding-bottom: 0;}

/* -- Custom classes for the snippet, won't effect any existing bootstrap classes of your site, but can be reused. -- */

.user-pad {
    padding: 20px 25px;
   /*background: url('img/mama&kage.jpg') no-repeat center center;*/
}


.no-pad {
    padding-right: 0;
    padding-left: 0;
    padding-bottom: 0;
}

.user-details {
    background: #eee;
    max-height: 333px;
}

.user-image {
  max-height:220px;
  overflow:hidden;
}


.overview h3 {
    font-weight: 200;
    margin-top: 1px;
    margin: 1px 0 -2px 0;
}

.overview h4 {
    font-weight: bold!important;
    font-size: 30px;
    margin-top: 0;
    margin-bottom: 0px;
}


.info {
    display: block;
    padding: 10px;
    background: #eee;
    text-transform: uppercase;
    font-weight: 300;
    text-align: right;
}

.info p, .stats p {
    margin-bottom: 0;
}

.stats {
    display: block;
    padding: 10px;
    color: white;
}



.square, .btn {
    border-radius: 0px!important;
}

/* -- media query for user profile image -- */
@media (max-width: 767px) {
    .user-image {
        max-height: 400px;
    }
}
</style>

<div class="container">
    <div class="row user-menu-container square">
        <div class="col-md-7 user-details">
            <div class="row coralbg white">
                <div class="col-md-6 no-pad">
                    <div class="user-pad">
                        <h3>Warm Welcome regards for visiting KinuKids</h3>
                        <h4 class="white"><i class=""></i> Lets Begin, with</h4>
                        <h4 class="white"><i class=""></i> Your Name <div class="glyphicon glyphicon-chevron-right"></div></h4>
                      
                    </div>
                </div>
                <div class="col-md-6 no-pad">
                    <div class="user-image">
                        <img src="img/mama&kage.jpg" class="img-responsive thumbnail">
                    </div>
                </div>
            </div>


           <!--  <div class="row overview">
                <div class="col-md-4 user-pad text-center">
                    <h3>FOLLOWERS</h3>
                    <h4>2,784</h4>
                </div>
                <div class="col-md-4 user-pad text-center">
                    <h3>FOLLOWING</h3>
                    <h4>456</h4>
                </div>
                <div class="col-md-4 user-pad text-center">
                    <h3>APPRECIATIONS</h3>
                    <h4>4,901</h4>
                </div>
            </div> -->

        </div>
        <div class="col-md-1 user-menu-btns">
            <div class="btn-group-vertical square" id="responsive">
                <a href="#" class="btn btn-block btn-default active">
                  <i class="glyphicon glyphicon-hand-right "></i>
                </a>
                <a href="#" class="btn btn-default">
                  <i class="glyphicon glyphicon-phone "></i>
                </a>
                <a href="#" class="btn btn-default">
                  <i class="glyphicon glyphicon-heart "></i>
                </a>

                <a href="#" class="btn btn-default">
                    <i class="glyphicon glyphicon-cloud-upload "></i>
                </a>
              
            </div>
        </div>
        <div class="col-md-4 user-menu user-pad">
            <div class="user-menu-content white active">
                <h3>
                   Parents Details
                </h3>
             <div class="form-group col-lg-12">
                <form role="form" class="form-group" >
                    <label>Title:</label>
                    <div class="form-group multiple-form-group input-group ">
                        <div class="input-group-btn form-group input-group-select ">
                            <button type="button" class="btn btn-default dropdown-toggle " data-toggle="dropdown">
                                <span class="concept ">Your..</span> <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#mr">Mr</a></li>
                                <li><a href="#mis">Mis</a></li>
                                <li><a href="#sir">Sir</a></li>
                                <li><a href="#madam">Madam</a></li>
                                <li><a href="#dr">Dr</a></li>
                                <li><a href="#ms">Ms</a></li>
                                <li><a href="#hon">Hon</a></li>
                                <li><a href="rev">Rev</a></li>
                            </ul>
                            
                        </div>
                       
                    </div>
                <div class="col-lg-12 form-group">
                <label for="inputName" class="contol-label">Parent Name</label>
                    <input type="text" class="form-control" id="inputName" name="username" placeholder="FullName" required>
                </div>

                 <div class="col-lg-12 form-group">
                <label for="inputName" class="contol-label">Address</label>
                    <input type="text" class="form-control" id="inputName" name="username" placeholder="Physical address" required>
                </div>

                 <div class="col-lg-12 form-group">
                <label for="inputName" class="contol-label">City</label>
                    <input type="text" class="form-control" id="inputName" name="username" placeholder="Current city" required>
                </div>

                   <div class="col-lg-12 form-group">
                         <label for="occupation" class="control-label">Occupations</label>
                         <input type="text" class="form-control" id="" placeholder="Field of expert">
                    </div>


             </form>
        
                  </div>

              </div>

            <!-- end of parents details -->

            <div class="user-menu-content white">
                <h3>
                    Lets Get intouch
                </h3>
    <div class="row form-group">
        
        <div class="col-lg-12">
            <div class="contacts">
                <label>Contacts:</label><br>
                <label>Please enter your email and your phone number</label>
                <label><i>Click + button and choose on the left side email or phone,<br>
                you can add more than one email and phone number</i></label>

                    <div class="form-group multiple-form-group input-group">
                        <div class="input-group-btn input-group-select">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                <span class="concept">Phone</span> <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#phone">Phone</a></li>
                                <li><a href="#email" >Email</a></li>
                                
                            </ul>
                            <input type="hidden" class="input-group-select-val" name="contacts['type'][]" value="phone">
                        </div>
                        <input type="text" name="contacts['value'][]" class="form-control">
                        <span class="input-group-btn">
                            <button type="button" class="btn btn-success btn-add">+</button>
                        </span>
                    </div>
                </div>
            </div>
        </div>
        </div>


            <div class="user-menu-content white ">
                <h2>
                    About your kid
                </h2>



                      <div class="col-lg-12 form-group">
                         <label for="occupation" class="control-label">Kid Name</label>
                         <input type="text" class="form-control" id="" placeholder="What is your kidname?">
                    </div>
              
                     <div class="col-lg-12 form-group">
                        <label for="DOB" class="control-label">Date of birth</label>
                          <input type="text" class="form-control" name="birthday"
                                placeholder="YYYY/MM/DD" />
                       
                    </div>


                    <div class="col-lg-12 form-group">
                         <label for="gurdain" class="control-label">The following gurdains will pick-up my kid
                         on my behalf
                         </label><br>
                         <label for="gurdain" class="control-label">
                             I here by Authorize
                         </label><br>
                         <label for="gurdain" class="control-label">Gurdain Name</label>
                         <input type="text" class="form-group form-control" id="" placeholder="Mr or Miss">
                         <label for="gurdain" class="control-label">Phone Number</label>
                         <input type="text" class="form-group form-control" id="" placeholder="(+255)-713 007329">
                         
                    </div>
               
         
            
            </div>

            <div class="user-menu-content white">
                
            <div class="col-lg-12 btn-group btn-justified">
                <label class="control-label">Thank you parent
                </label>                
                <button class="btn btn-success btn-lg" type="submit">SignUp</button>
            </div>
            </div>

        </div>
    </div>
</div>



<script type="text/javascript">
    $(document).ready(function() {
    var $btnSets = $('#responsive'),
    $btnLinks = $btnSets.find('a');
 
    $btnLinks.click(function(e) {
        e.preventDefault();
        $(this).siblings('a.active').removeClass("active");
        $(this).addClass("active");
        var index = $(this).index();
        $("div.user-menu>div.user-menu-content").removeClass("active");
        $("div.user-menu>div.user-menu-content").eq(index).addClass("active");
    });
});

// $( document ).ready(function() {
//     $("[rel='tooltip']").tooltip();    
 
//     $('.view').hover(
//         function(){
//             $(this).find('.caption').slideDown(250); //.fadeIn(250)
//         },
//         function(){
//             $(this).find('.caption').slideUp(250); //.fadeOut(205)
//         }
//     ); 
// });





$(document).ready(function() {
    $('#registrationForm').bootstrapValidator({
        // To use feedback icons, ensure that you use Bootstrap v3.1.0 or later
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            username: {
                message: 'The username is not valid',
                validators: {
                    notEmpty: {
                        message: 'The username is required and cannot be empty'
                    },
                    stringLength: {
                        min: 6,
                        max: 30,
                        message: 'The username must be more than 6 and less than 30 characters long'
                    },
                    regexp: {
                        regexp: /^[a-zA-Z0-9]+$/,
                        message: 'The username can only consist of alphabetical and number'
                    },
                    different: {
                        field: 'password',
                        message: 'The username and password cannot be the same as each other'
                    }
                }
            },
            email: {
                validators: {
                    notEmpty: {
                        message: 'The email address is required and cannot be empty'
                    },
                    emailAddress: {
                        message: 'The email address is not a valid'
                    }
                }
            },
      
            birthday: {
                validators: {
                    notEmpty: {
                        message: 'The date of birth is required'
                    },
                    date: {
                        format: 'YYYY/MM/DD',
                        message: 'The date of birth is not valid'
                    }
                }
            },
            // gender: {
            //     validators: {
            //         notEmpty: {
            //             message: 'The gender is required'
            //         }
            //     }
            // }
        }
    });
});
</script>