<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ---------->
<div class="container">
<div class="row">
<h2>Menu</h2>
<div id="header"> <a id="logo" href="#">Asterisk<span>*</span></a>
<hr>
<nav>
<ul>
<li><a href="#"><strong>Home</strong> <span>Lorem ipsum</span></a></li>
<li><a href="#"><strong>About</strong> <span>Whe we are</span></a></li>
<li><a href="#"><strong>Work</strong> <span>What we do</span></a></li>
<li><a href="#"><strong>Blog</strong> <span>Lorem ipsum</span></a></li>
<li><a href="#"><strong>Contact</strong> <span>Get in touch</span></a></li>
</ul>
</nav>
</div>
</div>
<h2><center> Validate Nic Number and ged Birthday</center><h2>
<center><form name="input" action="" method="get" onsubmit="myFunction()">
Nic No: <input type="text" id="numb" name="numb">
<input type="submit" value="Submit">
</form>
</center>
</div>
#header {height: 98px;position: relative;}
#header a#logo {font-size: 1.8em;font-weight: bold;display: block;line-height: 98px;position: absolute;top: 0;left: 0;color: #323338;font-family: "Lato", Arial;}
#header a#logo span {color: #d00401} /* color */
#header a#logo:hover {text-decoration: none;color: #000}
#header nav ul {position: absolute;top: 0;right: 0}
#header nav li {float: left;}
#header nav li a {float: left;color: #323338;display: block;padding: 32px 20px;text-decoration: none; }
#header nav li a strong {display: block;font-size: 1.1em;margin-bottom: 0;}
#header nav li a span {color: #989898;font-size: 11px}
#header nav li.active a strong, #header nav li.active a span,
#header nav li a:hover strong, #header nav li a:hover span {cursor: pointer;color: #000 !important}
#intro {color: #fff;height: 255px;position: relative;padding: 50px 550px 10px 0;position: relative}
#intro #macbook {position: absolute;bottom: -34px;right: 0;width: 550px;height: 309px;background: url('../img/macbook.png') no-repeat}
#intro #macbook img {position: relative;top: 20px;left:89px}
#intro h2 {font-size: 1.2em;text-shadow: 0 0 0;color: #afadae}
#intro p {color: #dddddd;margin-bottom: 20px}
#subIntro {height: 70px;position: relative;padding: 33px 0 7px 0;position: relative}
#subIntro h2 {color: #000;font-size: 1.4em;font-weight: normal;margin-bottom: 0}
#subIntro p {font-size: 1.1em}
#subIntro .button {position: relative;top: 5px;right: 60px !important}
function myFunction() {
var str = document.getElementById("numb").value;
var myyear= str.substring(0, 2);
var year= "19"+myyear;
var gender= str.substring(2, 5);
var date= str.substring(2, 5);
var mydate = date-500;
if(gender<500){
document.write("Gender is : Male"+ "<br>");
document.write("Birth year is "+ " " +year + "<br>");
// document.write(date);
// document.write(year);
dateFromDay(year, gender);
}
else{
document.write("Gender is FeMale"+ "<br>");
document.write("your birth year is :"+year + "<br>");
//document.write(mydate);
dateFromDay(year, mydate);
}
function dateFromDay(year, day){
var date = new Date(year, 0); // initialize a date in `year-01-01`
document.write ("birthday is : "+ new Date(date.setDate(day))); // add the number of days
document.write(mydate);
}
document.getElementById("demo").innerHTML = res;
}