<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>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Website CSS style -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Website Font style -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
<!-- Google Fonts -->
<link href='https://fonts.googleapis.com/css?family=Passion+One' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Oxygen' rel='stylesheet' type='text/css'>
<script>
function isNumberKey(evt){
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
</script>
<title>Admin</title>
</head>
<body>
<div class="container">
<div class="row main">
<div class="main-login main-center">
<h3 class="full-width"><center> Book Your Test</center></h3>
<form class="" method="post" action="#">
<div class="form-group">
<div class="">
<div class="col-lg-12 input-group">
<span class="input-group-addon"><i class="fa fa-user fa-fw" aria-hidden="true"></i></span>
<input type="text" class="col-lg-12 form-control" name="name" id="name" placeholder="Enter your Name"/>
<input type="number" class="col-lg-5 form-control" name="age" id="age" placeholder="Age" isNumberKey(evt) maxlength="2"/>
<center>
<input type="radio" class="form-control1" name="sex" id="sex" value="male" placeholder="Age"/> Male
<input type="radio" class="form-control1" name="sex" id="sex" value="female" placeholder="Age"/> Female
</center>
</div>
</div>
</div>
<div class="form-group">
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope fa-fw" aria-hidden="true"></i></span>
<input type="text" class="form-control" name="email" id="email" placeholder="Enter your Email"/>
</div>
</div>
</div>
<div class="form-group">
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-phone fa-fw" aria-hidden="true"></i></span>
<input type="text" class="form-control" name="phone" id="phone" placeholder="Enter your mobile no"/>
</div>
</div>
</div>
<div class="form-group">
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-flask fa-fw" aria-hidden="true"></i></span>
<select class="col-lg-12 form-control1">
<option>Health D1 Profile</option>
<option>Health Gs1 Profile</option>
<option>Health Gs2 Profile</option>
<option>Health Gs3 Profile</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-map-marker fa-fw" aria-hidden="true"></i></span>
<input type="text" class="form-control" name="pincode" id="pincode" placeholder="Pincode" isNumberKey(evt) maxlength="6"/>
<input type="text" rows="3" cols="auto" class="form-control" name="address" id="address" placeholder="Enter your address" />
</div>
</div>
</div>
<div class="form-group">
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-inr fa-fw" aria-hidden="true"></i></span>
<input type="number" class="form-control" name="Amt" value="2400" id="Amt" readonly/>
</div>
</div>
</div>
<p>The preferred appointment date and time is subject to the availability of our service provider.
</p>
<div class="form-group ">
<a href="http://www.rrdiagnosis.com" target="_blank" type="button" id="button" class="btn btn-primary btn-lg btn-block login-button">Book Test</a>
</div>
</form>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
/*
/* Created by Filipe Pina
* Specific styles of signin, register, component
*/
/*
* General styles
*/
#playground-container {
height: 500px;
overflow: hidden !important;
-webkit-overflow-scrolling: touch;
}
.main{
margin:100px 15px;
}
.full-width {
position: relative; /* for the child pseudo-elements */
/* negative offset = section padding */
margin: 0 -40px;
/* add back section padding value */
padding: 1.0rem;
background: #333;
bottom: 5px;
}
h1.title{
font-size: 50px;
font-family: 'Passion One', cursive;
font-weight: 400;
}
hr{
width: 10%;
color: #fff;
}
.form-group{
margin-bottom: 2px;
}
label{
margin-bottom: 2px;
}
.from-control1,input::-webkit-input-placeholder {
font-size: 11px;
padding-top: 3px;
}
.main-login{
background-color: #fff;
/* shadows and rounded borders */
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
-moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}
.form-control {
height: auto!important;
padding: 8px 10px !important;
}
.form-control1 {
height: auto !important;
padding: 8px 10px !important;
font-size: 11px;
padding-top: 3px;
}
.input-group {
-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.21)!important;
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.21)!important;
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.21)!important;
}
#button {
border: 1px solid #ccc;
margin-top: 28px;
padding: 6px 12px;
color: #666;
text-shadow: 0 1px #fff;
cursor: pointer;
-moz-border-radius: 3px 3px;
-webkit-border-radius: 3px 3px;
border-radius: 3px 3px;
-moz-box-shadow: 0 1px #fff inset, 0 1px #ddd;
-webkit-box-shadow: 0 1px #fff inset, 0 1px #ddd;
box-shadow: 0 1px #fff inset, 0 1px #ddd;
background: #f5f5f5;
background: -moz-linear-gradient(top, #f5f5f5 0%, #eeeeee 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #eeeeee));
background: -webkit-linear-gradient(top, #f5f5f5 0%, #eeeeee 100%);
background: -o-linear-gradient(top, #f5f5f5 0%, #eeeeee 100%);
background: -ms-linear-gradient(top, #f5f5f5 0%, #eeeeee 100%);
background: linear-gradient(top, #f5f5f5 0%, #eeeeee 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#eeeeee', GradientType=0);
}
.main-center{
margin-top: 30px;
margin: 0 auto;
max-width: 400px;
padding: 10px 40px;
background:#009edf;
color: #FFF;
text-shadow: none;
-webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.31);
-moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.31);
box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.31);
}
span.input-group-addon i {
color: #009edf;
font-size: 17px;
}
.login-button{
margin-top: 5px;
}
.login-register{
font-size: 11px;
text-align: center;
}
