<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 ----------> <header> <div class="topHead"> <div class="leftside"> </div> <div class="rightside"> <a href="#" data-toggle="modal" data-target="#myModal1"> Sign in</a> </div> <div id="myModal1" class="modal fade " role="dialog"> <div class="modal-dialog"> <!-- modal content--> <div class="modal-content modalbgimg"> <div class="modal-header "> <button type="button" class="close btnclose" data-dismiss="modal">x</button> <!--<h4 class="modal-title"> Login</h4>--> <!--<img src="asset/images/Hopstarter-Soft-Scraps-User-Coat-Red.ico" class="imglogo" />--> </div> <div class="modal-body"> <div class=" co-lg-12"> <form> <div class="form-group"> <label for="username">User name :</label> <input type="text" class="form-control " placeholder="User name" /> </div> <div class="form-group"> <label for="pwd">Password :</label> <input type="password" class="form-control" placeholder="Password" /> </div> <div class="form-group "> <input type="checkbox" tabindex="3" class="" name="remember" > <label for="remember"> Remember Me</label> </div> </form> <button type="button" class="btn btn-info btn-lg custominfobtn">Login</button> </div> </div> <div class="modal-footer"> <div class="col-lg-12 text-right"> <a href="#" class="newregitext"> Click Here New Registration..! </a> </div> </div> </div> </div> </div> <!-- end sign model--> </div> </header> <!-- / header-->

.topHead{ background:#fff;} .rightside a { color:#82C226; font-family:Georgia, "Times New Roman", Times, serif; font-weight:700; letter-spacing:1px;} /*.rightside a:hover { text-decoration:none; color:#FFF;}*/ .newregitext { color:#09F; font-size:15px;} .newregitext { color:#09F; font-size:15px;} .newregitext:hover{ color:#F00;} .btnclose:hover{ color:#F00;} .imglogo { margin: 0 0px 0px 30%; border: 5px solid rebeccapurple; padding: 10px; border-radius:50%; background: #000; width: 200px; } @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { .imglogo { margin: 0 0px 0px 70px; border: 3px solid rebeccapurple; padding: 5px; border-radius: 50%; background: #000;width: 100px;} }