<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login FOrm</title>
   
</head>
<body>
    
    <div class="container">
        <h2>Login</h2>
        <form action="">
            <input type="text" name="username" id="username" placeholder="username">
            <input type="password" name="pass" id="pass" placeholder="password">
           <div class="btns">
            <button type="submit">Login</button>
            <a href="./registration.html"><button type="button" id="sign-up">Sign Up</button></a>
           </div>
            
        </form>
    </div>
</body>
</html>
        body{
            padding: 0;
            margin: 0;
            font-family: Arial, Helvetica, sans-serif;
            background-color: rgb(48, 46, 46);
            color: white;
            padding-top: 25vh;
        }
        .container{
            width: 400px;
            display: flex;
            flex-direction: column;
            margin: auto;
            align-items: center;
            background-color: rgb(22, 21, 21);
            border-radius: 15px;
            padding: 25px 10px;
            box-shadow: 0 0 15px rgb(80, 79, 79);
        }
        form{
            display: flex;
            flex-direction: column;
            width: 90%;
            
        }
        input{
            height: 40px;
            border-radius: 10px;
            border: none;
            outline: none;
            margin: 5px ;
            text-align: center;
            font-size: 18px;
            color: white;
            background-color: rgb(48, 46, 46);

        }
        .btns{
            margin: 15px auto;
        }
        button{
            background-color: rgb(0, 0, 0);
            color: white;
            border: none;
            padding: 8px 30px;
            border-radius: 10px;
            font-size: 18px;
            cursor: pointer;
            margin: 5px 25px;
        }
        button:hover{
            background-color: tomato;
        }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.