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

Popular posts from this blog

Shoes website using html and css - procoder09

-
Image
Shoes Website Using HTML and CSS Explore our selection of premium brands renowned for their quality craftsmanship and innovative designs. Whether you're seeking the latest trends or timeless classics, our website is your one-stop destination for all your shoe needs. Browse through our user-friendly interface, where you can effortlessly search, filter, and compare styles to find the perfect fit. With detailed product descriptions, high-resolution images, and customer reviews, you can shop with confidence, knowing you're making an informed decision. Experience the convenience of online shopping with our seamless checkout process and secure payment options. Plus, enjoy fast and reliable shipping to your doorstep, so you can start strutting in your new shoes in no time. Watch Full Tutorial :- 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...
Read more

Full Travel Responsive Website using html and css only | Source Code

-
Image
H ello, friends today in this blog I will teach you how to Create A Website in HTML and CSS Only. Earlier I have shared a blog about a Complete Personal Portfolio Website using HTML CSS & JavaScript and now I’m going to create a simple website. How can I make my website attractive? To make a website beautiful and attractive you need to follow the following steps: Take simple colors for your website. Use a maximum of 3 to 4 color Make Website Responsive (Fite in any screen sizes devices) Try To use the same sizes and font family for text. Keep essential navigation links inside the navigation bar If you are feeling difficulty with what I’m saying then you can watch the full video tutorial of this program.   For Source Code: Check above video discription
Read more

Bus Ticket Booking System Website design using HTML and CSS

-
Image
INTRODUCTION In today's fast-paced world, convenience is key, and one area where convenience is highly valued is in travel. Whether it's for commuting to work or embarking on a leisurely trip, having an efficient and user-friendly system for booking bus tickets is essential. This is where a well-designed bus ticket booking system website comes into play. In this article, we'll explore the process of designing such a website using HTML and CSS, focusing on key design principles and elements. Understanding the Requirements: Before diving into the design process, it's crucial to understand the requirements of a bus ticket booking system website. At its core, the website should allow users to search for bus routes, view available seats, select preferred departure and arrival times, and securely book tickets online. Additionally, the website should provide users with essential information such as bus schedules, ticket prices, and booking policies. Designing the Layout: The l...
Read more