Login Form Page Design with HTML and CSS

-

 Introduction

Hlo everyone,

In this Blog, i am going to design a login page using html and css, this design is very helpful for those students who is trying to learn html or css and those also who is doing practice of html and css. 



In above image, the exact login page design made by the html and css. and i am providing you the tutorial also. So, you can able to  understand the concept and the way of making the login page.


                    

Step 1: Set Up Your HTML Structure:

Begin by creating a new HTML file. You can use any code editor, such as Visual Studio Code or Sublime Text, to write your code. Here's a basic HTML structure to start with:



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <title>Login</title>
</head>
<body>
    <div class="container">
        <div class="wrapper">
            <h1>Login</h1>
            <div class="inputs">
                <input type="text" placeholder="Username" required>
                <label for=""><i class="fa-solid fa-user"></i></label>
            </div>
            <div class="inputs">
                <input type="password" placeholder="Password" required>
                <label for=""><i class="fa-solid fa-lock"></i></label>
            </div>
            <div class="remfor">
                <div class="remember">
                    <input type="checkbox">
                    <label for="">Remember me</label>
                </div>
                <div class="forget">
                    <a href="">Forget Password?</a>
                </div>
            </div>
           <button>Login</button>
           <p>-----------<span> Or Sign up </span>-----------</p>
            <div class="social-links">
                <div class="google"><i class="fa-brands fa-google"></i></div>
                <div class="twitter"><i class="fa-brands fa-x-twitter"></i></div>
                <div class="facebook"><i class="fa-brands fa-facebook-f"></i></div>
            </div>
        </div>
    </div>
</body>
</html>

Step 2: Create a Stylesheet (CSS):

Now, create a CSS file (style.css) to style your login page. You can customize it to match Instagram's visual aesthetics. Below are some basic CSS styles to get you started:



*{
    padding: 0;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    box-sizing: border-box;
}

body{
    width: 100%;
    height: 100vh;
    background-image: url(background.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container{
    backdrop-filter: blur(5px);
    max-width: 400px;
    width: 100%;
    border-radius: 10px;
    height: auto;
    box-shadow: 0 0 10px white;
}

.container .wrapper{
    width: 100%;
    color: white;
}

.wrapper h1{
    text-align: center;
    font-size: 3rem;
    margin: 10px 0;
}

.wrapper .inputs{
    width: 80%;
    height: 5vh;
    display: flex;
    border-radius: 10px;
    border: 1px solid white;
    margin: 8% 10%;
    justify-content: space-between;
}

.inputs input{
    width: 90%;
    padding-left: 10px;
    color: white;
    border: none;
    outline: none;
    background-color: transparent;
}

::placeholder{
    color: white;
}

.inputs label{
    width: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wrapper .remfor{
    display: flex;
    width: 80%;
    margin: 0 10%;
    justify-content: space-between;
}

.remfor .forget a{
    color: white;
    text-decoration: none;
    transition: 0.2s linear;
}

.remfor .forget a:hover{
    color: red;
}

.wrapper button{
    width: 80%;
    height: 6vh;
    border-radius: 10px;
    outline: none;
    border: none;
    background-color: #194388;
    color: white;
    font-size: 1.7rem;
    font-weight: 700;
    margin: 7% 10%;
    transition: 0.2s linear;
}

.wrapper button:hover{
    scale: 1.1;
}

.wrapper p{
    margin: 20px 0;
    text-align: center;
}

.wrapper p span{
    font-size: 1.2rem;
}

.wrapper .social-links{
    margin: 30px 0;
    display: flex;
    justify-content: space-evenly;
}

.social-links div i{
    width: 55px;
    height: 55px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-size: 1.4rem;
    font-weight: 700;
    transition: 0.2s linear;    

}

.social-links .google i{
    background-color: red;
    box-shadow: 0 0 50px red;
    color: white;
}

.social-links .google i:hover{
    background-color: transparent;
    box-shadow: 0 0 20px red;
    color: red;
}

.social-links .twitter i{
    background-color: black;
    box-shadow: 0 0 50px black;
    color: white;
}

.social-links .twitter i:hover{
    background-color: transparent;
    box-sizing: 0 0 20px black;
    color: black;
}

.social-links .facebook i{
    background-color: #0866ff;
    box-shadow: 0 0 50px #0866ff;
    color: white;
}

.social-links .facebook i:hover{
    background-color: transparent;
    box-shadow: 0 0 20px #0866ff;
    color: #0866ff;
}



Comments

Post a Comment