php

Create a Professional Login & Registration Form using HTML & CSS

In this tutorils we are going to teach how to make a attractive Login & Registration Form using HTML & CSS.i made the design using bootstrap along with flexbox css.

Register

Login

Register and login complete code

registation.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <title>Register</title>

    <style>
        .container 
            {
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  justify-content: center;
                  height: 100vh; 
             }

      .card-header{
          font-size: 24px;
          font-weight: bold;
          text-transform: uppercase;
          background-color: black;
          color:white;
          
      }
      label{
       
          font-weight: bold;
          text-transform: uppercase;
          
      }

     form div  {
       
          padding-top: 20px;
       
   }

   .input {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
   
  .btn button + button {
   margin-left: 10px; /* Add space between buttons */}
  </style>


</head>
<body>
        <div class="container">
            <div class="col-md-5">

                <div class="card shadow">
                    <div class="card-header">
                          Reghistation
                     </div>
                     
                     <div class="card-body">    
                        <form>
                  <div class="mb-3">
                    <label>Email</label>
                    <input type="email" class="form-control" name="email" id="exampleFormControlInput1" placeholder="Email">
                  </div>

                  <div class="mb-3">
                    <label>Mobile</label>
                    <input type="number" class="form-control" name="number" id="exampleFormControlInput1" placeholder="Email">
                  </div>

                  <div class="mb-3">
                    <label>Password</label>
                    <input type="password" class="form-control" name="password" id="exampleFormControlInput1" placeholder="Email">
                  </div>

                  <div class="mb-3">
                    <label>Confirm Password</label>
                    <input type="password" class="form-control" name="confirmpassword" id="exampleFormControlInput1" placeholder="Email">
                  </div>

                  <div class="btn">

                  <button type="submit" class="btn btn-primary">Register</button>
                  <button type="submit" class="btn btn-warning">Reset</button>
                </div>
            </form>
            </div>
        </div>
            </div>
        </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>   
</body>
</html>

login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <title>Register</title>

    <style>
        .container 
            {
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  justify-content: center;
                  height: 100vh; 
             }

      .card-header{
          font-size: 24px;
          font-weight: bold;
          text-transform: uppercase;
          background-color: black;
          color:white;
          
      }
      label{
       
          font-weight: bold;
          text-transform: uppercase;
          
      }

     form div  {
       
          padding-top: 20px;
       
   }

  .btn button + button {
   margin-left: 10px; /* Add space between buttons */}
  </style>


</head>
<body>
        <div class="container">
            <div class="col-md-5">

                <div class="card shadow" >
                    <div class="card-header">
                            Login
                     </div>
                     
                     <div class="card-body">    
                        <form>
                <div class="mb-3">
                    <label>Email</label>
                    <input type="email" class="form-control" name="email" id="exampleFormControlInput1" placeholder="Email">
                  </div>
                 

                  <div class="mb-3">
                    <label>Password</label>
                    <input type="password" class="form-control"  name="password" id="exampleFormControlInput1" placeholder="Password">
                  </div>

                  <div class="btn">

                  <button type="submit" class="btn btn-primary">Login</button>
                  <button type="submit" class="btn btn-warning">Reset</button>
                </div>
            </form>
            </div>
        </div>
            </div>

        </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>   
</body>
</html>

 

 

 

 

admin

Recent Posts

Creating Grocery Inventory App Using React

Introduction to Grocery Inventory Apps Managing grocery inventory can be a daunting task, but with…

2 days ago

Fish Inventory Shop Management System in Angular

This article explain how to make a Fish Inventory Management App in Angular.this app explain…

1 week ago

Fish Inventory Management with React

Introduction to Fish Inventory Management In the aquaculture industry, managing fish inventory is crucial for…

1 week ago

Java GUI CRUD for Beginners

Introduction to Java GUI CRUD Java is a powerful programming language widely used for building…

1 week ago

Creating Beautiful Login Form Design Using React

Introduction to Login Form Design Designing an effective and beautiful login form is crucial for…

2 weeks ago

Creating Responsive Login Form with React

Introduction In today creating a responsive login form is essential for providing a seamless user…

2 weeks ago