"keshavnavbar"
Bootstrap 3.0.0 Snippet by keshavchaudhary1994

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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> <head> <title>Sign up</title> <link rel="stylesheet" href="bootstrap3.3.7/css/bootstrap.min.css"> <script src="jquery/jquery-3.2.1.js"></script> <script src="bootstrap3.3.7/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="a.css"> <meta name="viewport"content="width=device-width,intial-scale=1"> <style> .mynav{ font-size:15px; } </style> </head> <body style="background-color:teal"> <nav class="navbar navbar-inverse mynav"> <div class="fluid-container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#hello"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand " href="#" style="font-family:chiller;font-size:55px;color:red">BMCCSIT.COM</a> </div> <div class="collapse navbar-collapse" id="hello"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li class="dropdown"> <a href="#id" class="dropdown-toggle" data-toggle="dropdown">Syallabus</a> <ul class="dropdown-menu"> <li><a href="syallabus/1st-sem.pdf">First Semester</a></li> <li> <a href="syallabus/2nd-sem.pdf">Second Semester</a></li> <li><a href="syallabus/3rd-sem.pdf">Third Semester</a></li> <li><a href="syallabus/4th-sem.pdf">Fourth Semester</a></li> <li><a href="syallabus/5th-sem.pdf">Fifth Semester</a></li> <li><a href="syallabus/6th-sem.pdf">Sixth Semester</a></li> <li><a href="syallabus/7th-sem.pdf">Seventh semester</a></li> <li><a href="syallabus/8th-sem.pdf">Eighth semester</a></li> </ul> </li> <li><a href="#">Question</a></li> <li><a href="#">Solution</a></li> <li><a href="#">Notes</a></li> <li><a href="#" data-toggle="modal" data-target="#xyz">Profile</a></li> <div id="xyz" class="modal fade" tabindex="-5" role="dialog" aria-labelledby="myLargeModalLabel"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header" style="height:65px"> <h3><center>Profile</center></h3> </div> <div class="modal-body"> <div class="container"> <div class="row"> <div class="col-lg-3 col-sm-6"> <div class="card hovercard"> <div class="cardheader"> </div> <div class="avatar"> <img alt="Keshav" src="image/b.jpg"> </div> <div class="info"> <div class="title"> <a target="_blank" href="#">Keshav Chaudhary</a> </div> <div class="desc">Web Developer</div> <div class="desc">Maskey Cosultancy</div> <div class="desc">keshav.chaudhary688@gmail.com</div> </div> <div class="bottom"> <a class="btn btn-primary btn-twitter btn-sm" href="https://twitter.com/@keshavSince1994"> <i class="fa fa-twitter"></i> </a> <a class="btn btn-danger btn-sm" rel="publisher" href="https://plus.google.com/keshav.chaudhary688"> <i class="fa fa-google-plus"></i> </a> <a class="btn btn-primary btn-sm" rel="publisher" href="https://facebook.com/ranjit_chaudhary@hotmail.com"> <i class="fa fa-facebook"></i> </a> </div> </div> </div> </div> </div> </div> </div> </div> </div> <li><a href="#" data-toggle="modal" data-target="#abc">Contact</a></li> <div id="abc" class="modal fade" tabindex="-5" role="dialog" aria-labelledby="myLargeModalLabel"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header" style="height:60px;"> <div class="well"> <p><h4><b><center>Contact</center></b></h4> </p> </div> </div> <div class="modal-body" > <!-- Large modal --> <div class="well"> <div class="row"> <div class="col-md-12" style="font-size:13px"> <p> <span class="glyphicon glyphicon-envelope"></span> Keshav.chaudhary688@gmail.com</p> </div> <div class="col-md-12" style="font-size:13px"> <p> <span class="glyphicon glyphicon-phone"></span> 9846999439,9812993241</p> </div> <div class="col-md-12" style="font-size:13px"> <p> <span class="glyphicon glyphicon-education"></span> Birendra Multiple Campus</p> </div> <div class="col-md-12" style="font-size:13px;"> <p> <span class="glyphicon glyphicon-home"></span> Devchuli-17,Kujauli</p> </div> </div> </div> </div> </div> </div> </div> <li> <form class="navbar-form"> <input type="text" class="form-control" placeholder="Search here" required> <button class="btn btn-success btn-md"><span class="glyphicon glyphicon-search"></span></button> </li> </form> </ul> <ul class="nav navbar-nav navbar-right"> <li> <a class="navbar" href="#" data-toggle="modal" data-target="#a"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> <div id="a" class="modal fade"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header" style="background-color:#ff4b00;height:70px;"> <button class="btn btn-danger btn-sm pull-right" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span></a></button> <h2 class="modal-title" style=" font-size:35px;"><b>Sign In</b></h2> </div> <div class="modal-body"style="background-color:teal;height:280px;"> <form class="form-vertical" role="form"> <div class="form-group"> <label for="User Name">Username:</label> <input type="text" name="Username" placeholder="Enter your Username" class="form-control" required> </div> <div class="form-group"> <label for="Last Name">Password:</label> <input type="Password" name="Password" placeholder="Enter your Password" class="form-control" required> </div> <div class="form-group"> <input type="checkbox" name="checkbox">Remember me </div> <button class="btn btn-success btn-lg">Log In</button> </form> </div> <div class="modal-footer" style="background-color:#c5ddd6;height:115px;"> <p><a href="#">Forget Password?</a></p> <p> Click here to<a href="signup.html"> Sign Up!</a> </p> <a href="http://www.facebook.com"> <i class="fa fa-facebook-official"style="font-size:30px;"></i></a>   <a href="http://www.instagram.com"> <i class="fa fa-instagram"style="font-size:30px;"></i></a></a>   <a href="http://www.twitter.com"> <i class="fa fa-twitter"style="font-size:30px;"></i> </a>   <a href="http://www.skype.com"> <i class="fa fa-skype"style="font-size:30px;"></i></a> </div> </div> </div> </div> <li> <a class="navbar" href="#" data-toggle="modal" data-target="#b"> <span class="glyphicon glyphicon-user"></span>Sign Up</a></div> </li> <div id="b" class="modal fade"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header" style="background-color:#ff4b00;height:70px;"> <button class="btn btn-danger btn-md pull-right" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span></button> <h3 class="modal-title" style=" font-size:30px;"><b>Sign Up</b></h3> </div> <div class="modal-body"style="background-color:teal;height:auto;"> <form class="form-vertical" role="form"> <div class="form-group"> <label>First Name:</label> <input type="text" name="First name" class="form-control" placeholder="First name" required> <br> <label>Last Name:</label> <input type="text" name="Last Name" class="form-control" placeholder="Last name" required> </div> <div class="form-group"> <label>E-mail:</label> <input type="text" name="E-mail" class="form-control" placeholder="Enter your E-mail" required> </div> <div class="form-group"> <label>New password:</label> <input type="text" name="New password" class="form-control" placeholder="Enter New password" required> <br> <div class="form-group"> <label>Birth-Date:</label> <input type="date" name="dob" class="form-control"> </div> <label>Gender:</label> <label class="radio-inline"><input type="radio" name="gender" value="male">Male</label> <label class="radio-inline"><input type="radio" name="gender" value="female">Female</label> <p> <h6><input type="checkbox">I accept all the above terms and conditions!!</h6> <button class="btn btn-success btn-lg">Submit</button> </form> </div> </div> </div> </ul> </div> </div> </nav> <div id="slider" class="carousel slide" data-ride="carousel" style="top:-22px"> <ol class="carousel-indicators"> <li data-target="#slider" data-slide-to="0" class="active"></li> <li data-target="#slider" data-slide-to="1"></li> <li data-target="#slider" data-slide-to="2"></li> <li data-target="#slider" data-slide-to="3"></li> </ol> <div class="carousel-inner"> <div class="item active"> <img src="coding.JPG" alt="img" style="height:590px; width:1480px""> <div class="carousel-caption"> <H4>Code to live</H4> </div> </div> <div class="item"> <img src="program.jpeg"alt="img" style="height:590px; width:1480px"> <div class="carousel-caption"> <H4>programmer</H4> </div> </div> <div class="item"> <img src="animate.png"alt="img" style="height:590px; width:1480px"> <div class="carousel-caption"> <H4>Technology</H4> </div> </div> <div class="item"> <img src="nature.jpg"alt="img" style="height:590px; width:1480px"> <div class="carousel-caption"> <H4>Nature</H4> </div> </div> </div> <a class="left carousel-control" href="#slider" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">Next</span> </a> <a class="right carousel-control" href="#slider" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">previous</span> </a> </div> </body> </html>
.card { padding-top: 20px; margin: 10px 0 20px 0; background-color: rgba(214, 224, 226, 0.2); border-top-width: 0; border-bottom-width: 2px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .card .card-heading { padding: 0 20px; margin: 0; } .card .card-heading.simple { font-size: 20px; font-weight: 300; color: #777; border-bottom: 1px solid #e5e5e5; } .card .card-heading.image img { display: inline-block; width: 46px; height: 46px; margin-right: 15px; vertical-align: top; border: 0; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .card .card-heading.image .card-heading-header { display: inline-block; vertical-align: top; } .card .card-heading.image .card-heading-header h3 { margin: 0; font-size: 14px; line-height: 16px; color: #262626; } .card .card-heading.image .card-heading-header span { font-size: 12px; color: #999999; } .card .card-body { padding: 0 20px; margin-top: 20px; } .card .card-media { padding: 0 20px; margin: 0 -14px; } .card .card-media img { max-width: 100%; max-height: 100%; } .card .card-actions { min-height: 30px; padding: 0 20px 20px 20px; margin: 20px 0 0 0; } .card .card-comments { padding: 20px; margin: 0; background-color: #f8f8f8; } .card .card-comments .comments-collapse-toggle { padding: 0; margin: 0 20px 12px 20px; } .card .card-comments .comments-collapse-toggle a, .card .card-comments .comments-collapse-toggle span { padding-right: 5px; overflow: hidden; font-size: 12px; color: #999; text-overflow: ellipsis; white-space: nowrap; } .card-comments .media-heading { font-size: 13px; font-weight: bold; } .card.people { position: relative; display: inline-block; width: 170px; height: 300px; padding-top: 0; margin-left: 20px; overflow: hidden; vertical-align: top; } .card.people:first-child { margin-left: 0; } .card.people .card-top { position: absolute; top: 0; left: 0; display: inline-block; width: 170px; height: 150px; background-color: #ffffff; } .card.people .card-top.green { background-color: #53a93f; } .card.people .card-top.blue { background-color: #427fed; } .card.people .card-info { position: absolute; top: 150px; display: inline-block; width: 100%; height: 101px; overflow: hidden; background: #ffffff; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .card.people .card-info .title { display: block; margin: 8px 14px 0 14px; overflow: hidden; font-size: 16px; font-weight: bold; line-height: 18px; color: #404040; } .card.people .card-info .desc { display: block; margin: 8px 14px 0 14px; overflow: hidden; font-size: 12px; line-height: 16px; color: #737373; text-overflow: ellipsis; } .card.people .card-bottom { position: absolute; bottom: 0; left: 0; display: inline-block; width: 100%; padding: 10px 20px; line-height: 29px; text-align: center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .card.hovercard { position: relative; padding-top: 0; overflow: hidden; text-align: center; background-color: rgba(214, 224, 226, 0.2); } .card.hovercard .cardheader { background: url("nature.jpg"); background-size: cover; height: 135px; } .card.hovercard .avatar { position: relative; top: -50px; margin-bottom: -50px; } .card.hovercard .avatar img { width: 100px; height: 100px; max-width: 100px; max-height: 100px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; border: 5px solid rgba(255,255,255,0.5); } .card.hovercard .info { padding: 4px 8px 10px; } .card.hovercard .info .title { margin-bottom: 4px; font-size: 24px; line-height: 1; color: #262626; vertical-align: middle; } .card.hovercard .info .desc { overflow: hidden; font-size: 12px; line-height: 20px; color: #737373; text-overflow: ellipsis; } .card.hovercard .bottom { padding: 0 20px; margin-bottom: 17px; } .btnm{ border-radius: 50%; width:32px; height:32px; line-height:18px ; }

Related: See More

Paper Kit

Questions / Comments: