Post
Ask Question

Create Modern Login Page Using HTML, CSS And Bootstrap

Create HTML File (login.html)

<html>
    <head>
        <title>Login</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="mystyle.css">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
        <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>    
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    </head>
    <body>
      <div>
         <img src="images/istockphoto-1281150061-612x612.jpg" style="margin-left:70px ;">
     </div>
    <div class="container">
      <div id="logincard" class="card">
        <div class="card-header">
          <h3 class="text-center text-gray-dark">Login<span><img src="images/login-text-logo.png" width="100px" height="60px"></span></h3>
        </div>
        <div class="card-body">
          <form>
             <div class="form-group">
                <label for="email">Email :</label>
                <input type="email" class="form-control" id="email">
              </div>
              <div class="form-group">
                <label for="pwd">Password:</label>
                <input type="password" class="form-control" id="pwd">
              </div>
              <div class="checkbox">
                <label><input type="checkbox"> Remember me</label>
              </div>
              <div class="card-footer">
                <button type="submit" class="btn btn-success float-right">Submit</button>
              </div>
        </form>
        </div> 
      </div> 
      </div>
    </body>
</html>

Create External Cascading Style Sheet (mystyle.css)

.signup{
    color:black;
    padding-top:80px;
    float:right;
    padding-right:300px;
}
   

h1{
    border-style: ridge;
}

.logo{
    background-color:black!important;
    color: #f4511e!important;
}

.bg1{
      background-repeat:no-repeat;
}

.jumbotron{
    background-color: #f4511e!important; /* Orange */
    color: #ffffff!important;
}

.btnlink{
    text-decoration: none;
}

#logincard{
    width:400px;
    height:350px;
    border-top-color:blueviolet;
    border-bottom-color:seagreen;
    /* border-left-color: blue;
    border-right-color:red; */
    margin-top:-450px;
    margin-left:580px ;
}

#signupcard{
    width:400px;
    height:535px;
    border-top-color:blue;
    border-bottom-color:blueviolet;
    border-left-color: green;
    border-right-color:red;
    margin-top:-530px;
    margin-left:580px ;
}

Create an image folder to store the images.

Show As Your Login Page

Login Page
Next Recommended Reading Create modern Sign Up page Using HTML, CSS And Bootstrap