JOHN KENNETH DE LARA JOHN KENNETH DE LARA - 7 months ago 33
HTML Question

Login modal with logo

Login Modal

enter image description here

Can someone give me ideas on how to do it? I tried to do it on bootstrap but the logo is inside the modal. i want to put my logo in the middle and half of it are on outside like in the first picture. Im new to html and css. Can someone give me clues on how to do it?

here is my work...

My Login Modal

enter image description here

Answer

This is the code you are asking for. Use this code it will perfectly work for you.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Modal Login</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">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.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>
<style>
.logo-margin-negative{
margin-top: -100px;
}
.modal{
padding-top: 100px ! important;}
</style>
</head>
<body>

<div class="container">
  <h2>Click button to enter login</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Login Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title"><img src="http://placehold.it/150x150" class="center-block img-circle logo-margin-negative"></h4>
        </div>
        <div class="modal-body">
          <form>
          <div class="row">
  <div class="form-group col-sm-5 col-sm-offset-4">
    <label class="sr-only" for="exampleInputAmount">Username</label>
    <div class="input-group">
      <div class="input-group-addon"><span class="glyphicon glyphicon-user"></span></div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Username">
    </div>
  </div>
  <div class="form-group col-sm-5 col-sm-offset-4">
    <label class="sr-only" for="exampleInputAmount">Password</label>
    <div class="input-group">
      <div class="input-group-addon"><i class="fa fa-key"></i></div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Password">
    </div>
  </div>
    </div>
</form>
        </div>
        <div class="modal-footer">
          <div class="row">
          <div class="col-sm-5 col-sm-offset-4">
          <button type="button" class="btn btn-danger btn-block" data-dismiss="modal">Login</button>
          </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

</body>
</html>