Simple Login Form using only HTML & CSS

Basic HTML & CSS Login Form

Hello friends, Today I’m going to create a Simply Login Form using only HTML & CSS.
This template is a login form it is the form used to validate the user before giving entry to a particular page.

a simple User login form template that has an easy user interface to log in. This login form template has a title, input field for your name, email or phone number & password, and a button for “sign-in”.

this program has a color scheme-inspired Design, That can be customized according to your needs.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>UserLoginForm</title>
    <link rel="stylesheet" href="style-from.css">
</head>
<body>
    <div class="min_container">

     <h1 class="label-lo">User Login</h1>

            <form class="form1"name="form">
                <div class="text">Name:</div>
                <input autocomplete="off" type="text" name="name" placeholder="Enter Your Name" autofocus >
                
                <div class="text ">Email or Phone:</div>
                <input autocomplete="off" type="text" name="email" placeholder="Enter Your Email Address">
                
                <div class="text ">Password</div>
                <input type="password" name="password" placeholder="Enter Your Password">
                
                <button type="submit">Login</button>
            </form>
    </div>    
</body>

CSS code here

*{
	padding: 0;
	margin: 0;
}
body{
	background-color: rgb(155, 107, 53);
	background-size: cover;
	align-items: center;
	justify-content: center;
	display: flex;
	font-family: sans-serif;
}
.min_container{
	position: relative;
	margin-top: 100px;
	width: 450px;
	height: auto;
	background: #dedede;
	border-radius: 5px;
}
.label-lo{
    padding: 15px 130px;
    margin-top: 10px;
	font-size: 35px;
	font-weight: bold;
	color: #477fe6;
} 
.form1{
	padding: 20px 40px;
}

    .form1 input{
        height: 40px;
        width: 350px;
        padding: 1px 5px;
        font-size: 20px;
        outline: none;
        border: 1px solid silver;
        
    }
    .form1 .text{
        margin-top: 30px;
    }
    .form1 button{
        margin: 45px 0 30px 0;
        height: 45px;
        width: 365px;
        font-size: 20px;
        color: white;
        outline: none;
        cursor: pointer;
        font-weight: bold;
        background: #1a237e;
        border-radius: 3px;
        border: 1px solid #2f2f31;
        transition: .5s;
    }
    .form1 button:hover{
        background: #288299;
    }

This program Login form includes three input fields used for a username and email address or phone & another one is used for the password. This form is created using only HTML & CSS and I have not added a JavaScript function in this program[log in form] so when you fill up your login details [emair and password] and submit the form, it won’t submit your details anywhere But the program will work. If you want, you can download the source code of the program and try it.