<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="container">
<div class="col-md-12 col-lg-offset-2">
<div class="login-signup">
<div class="row">
<div class="col-md-8 nav-tab-holder">
</div>
</div>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<div class="row">
<div class="col-md-8 mobile-pull">
<article role="login">
<h3 class="text-center"><i class="fa fa-lock"></i>USER</h3>
<form role="form" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" name="loginform">
<fieldset>
<legend>Login</legend>
<div class="form-group">
<label for="name">Email</label>
<input type="text" name="email" placeholder="Your Email" required class="form-control" />
</div>
<div class="form-group">
<label for="name">Password</label>
<input type="password" name="password" placeholder="Your Password" required class="form-control" />
</div>
<div class="form-group">
<input type="submit" name="login" value="Login" class="btn btn-primary" />
</div>
<button type="button" class="btn btn-info btn-lg" id="myBtn">signup here</button>
</fieldset>
</form>
<footer role="signup" class="text-center">
<ul>
<li>
<a href="#">Terms of Use</a>
</li>
<li>
<a href="#">Privacy Statement</a>
</li>
</ul>
</footer>
</article>
</div>
</div>
<!-- end of row -->
</div>
<!-- end of home -->
<!-- Trigger the modal with a button -->
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content col-md-12">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<div class="row">
<article role="login">
<h3 class="text-center"><i class="fa fa-lock"></i> Create User Account</h3>
<form role="form" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" name="signupform">
<!-- Text input-->
<div class="form-group">
<label class="col-md-5 control-label">Company Name</label>
<div class="col-md-7">
<input type="text" name="name" placeholder="Enter Full Name" value="<?php if($error) echo $name; ?>" class="form-control" />
<span class="text-danger"><?php if (isset($name_error)) echo $name_error; ?></span>
</div>
</div>
<br>
<br>
<br>
<!-- Text input-->
<div class="form-group">
<label class="col-md-5 control-label">Company Logo <small>(optional)</small></label>
<div class="col-md-7">
<input type="file" name="inputFile" id="inputFile" class="form-control" placeholder="" >
</div>
</div>
<br>
<br>
<!-- Text input-->
<div class="form-group">
<label class="col-md-5 control-label">Company Email</label>
<div class="col-md-7">
<input type="email" name="email" placeholder="Email" value="<?php if($error) echo $email; ?>" class="form-control" />
<span class="text-danger"><?php if (isset($email_error)) echo $email_error; ?></span>
</div>
</div>
<br>
<br>
<!-- Text input-->
<div class="form-group">
<label class="col-md-5 control-label">Password <small>(optional)</small></label>
<div class="col-md-7">
<input type="password" name="password" placeholder="Password" class="form-control" />
<span class="text-danger"><?php if (isset($password_error)) echo $password_error; ?></span>
</div>
</div>
<br><br> <!-- Text input-->
<div class="form-group">
<label class="col-md-5 control-label">Confirm Password <small>(optional)</small></label>
<div class="col-md-7">
<input type="password" name="cpassword" placeholder="Confirm Password" class="form-control" />
<span class="text-danger"><?php if (isset($cpassword_error)) echo $cpassword_error; ?></span>
</div>
</div>
<br><br>
<div class="form-group">
<label class="col-md-5 control-label">Company Telephone</label>
<div class="col-md-7">
<input type="text" class="form-control" id="telephone" name ="telephone"placeholder="" />
</div>
</div>
<br> <br>
<div class="form-group">
<label class="col-md-5 control-label">Company Address</label>
<div class="col-md-7">
<input type="text" class="form-control" id="com_add" name ="com_add"placeholder="" />
</div>
</div>
<br>
<br>
<div class="form-group">
<label class="col-md-5 control-label">Country</label>
<div class="col-md-7">
<input type="text" class="form-control" id="contry" name ="country"placeholder="" />
</div>
</div>
<br> <br>
<div class="form-group">
<label class="col-md-5 control-label">Website <small>(optional)</small></label>
<div class="col-md-7">
<input type="url" class="form-control" id="inputwebsite" name ="web"placeholder="">
</div>
</div> <br>
<br>
<div class="form-group">
<label class="col-md-5 control-label">Website <small>(optional)</small></label>
<div class="col-md-7">
<input type="url" class="form-control" id="inputwebsite" name ="web"placeholder="">
</div>
</div>
<br><br>
<div class="form-group">
<label class="col-md-5 control-label">Video <small>(optional)</small></label>
<div class="col-md-7">
<input type="url" class="form-control" id="inputvideo" name="video" placeholder="A link to a video about your company" />
</div>
</div>
<br><br>
<div class="form-group">
<label class="col-md-5 control-label">Facebook Username <small>(optional)</small></label>
<div class="col-md-7">
<input type="url" class="form-control" id="inputfbUser" name="fbuser" placeholder="web.facebook.com/?" />
</div>
</div>
<!--
<div class="form-group">
<input type="submit" class="btn btn-success btn-block" value="SUBMIT">
</div>
-->
<div class="form-group">
<input type="submit" name="signup" value="Sign Up" class="btn btn-primary" />
</div>
</form>
</article>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$("#myBtn").click(function(){
$("#myModal").modal();
});
});
</script>
</body>
</html>
.login-signup {
padding: 25 0 25px;
margin-top:25px;
}
.login-signup {
padding: 0 0 25px;
}
.btn-success {
background: #23bab5;
border-radius:0;
border: 2px solid #23bab5;
webkit-transition: all 400ms cubic-bezier(.4,0,.2,1);
transition: all 400ms cubic-bezier(.4,0,.2,1);
}
a {
color: #23bab5;
}
ul {
list-style-type: none;
}
article[role="login"] {
background: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 10px rgba(0, 0, 0, 0.24);
webkit-transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
padding: 30px 50px;
margin-bottom: 20px;
}
article[role="login"] input[type="submit"] {
padding: 10px 15px;
font-size: 16px;
}
article[role="login"]:hover {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
-webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 1px 15px rgba(0, 0, 0, 0.23);
webkit-transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
article[role="login"] h3 {
font-size: 26px;
font-weight: 300;
color: #23bab5;
margin-bottom: 20px;
}
article[role="login"] p {
font-size: 16px;
padding: 5px 15px;
}
.nav-tab-holder {
padding: 0 0 0 30px;
float: right;
}
.nav-tab-holder {
float: none;
overflow: hidden;
}
.nav-tabs > li > a {
font-size: 13px;
font-weight: 600;
padding: 10px 5px;
overflow: hidden;
text-overflow: ellipsis;
}
.nav-tabs > li {
width: 50%;
}
.nav-tab-holder .nav-tabs {
border: 0;
float: none;
display: table;
table-layout: fixed;
width: 100%;
}
.nav-tab-holder
.nav-tabs > li > a {
background: #d9d9d9;
color: #6c6c6c;
margin: 0;
font-size: 18px;
font-weight: 300;
}
.nav-tab-holder .nav-tabs > li {
margin-bottom: -3px;
text-align: center;
padding: 0;
display: table-cell;
float: none;
padding: 0;
}
.nav-tab-holder .nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
color: #FFF;
background-color: #23bab5;
border: 0;
border-radius: 0;
}
![Sign up form [Validations NOT ACHIEVED]](http://d2d3qesrx8xj6s.cloudfront.net/img/screenshots/085267fd2b785be54d5d05937defdd27ccc633ab.jpg)
