Untitled

body
{
    width: 100vw;
    height: 100vh;
    background-color: #bde0fe;
    display:flex;
    justify-content: space-around;
    align-items: center;
}
.container
{
    background-color: #edf2f4;
    width: max-content;
    height: max-content;
    border-radius:2rem;
    padding: 3em;
    margin: 1em;
    border-radius: 1rem;
    box-shadow: 5px 5px 5px 3px rgb(0 0 0 / 20%);
}
div .elements
{
    margin: 1em;
}
input
{
    width: 100%;
    background-color: #d5dce4;
    border: none;
    padding: 0.5rem;
}
button
{
    margin-left:38%;
    padding: 1rem 2rem 1rem 2rem;
    background-color: #bdb2ff ;
    border: none;
    border-radius: 1rem;
}










<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Registration HTML</title>
    <link rel="stylesheet" href="./style/signup.css">
</head>
<body>
    <div class="container">
        <h1>Prady Counselling Academy!</h1>
        <h2>Sign Up</h2>
        <form action="#" method="post">
            <div class="elements">
                <h3>Email :</h3>
                <input type="Password" placeholder="Enter the Password.">
            </div>
            <div class="elements">
                <h3>User Name :</h3>
                <input type="text" placeholder="Enter the username.">
            </div>
            <div class="elements">
                <h3>Password :</h3>
                <input type="Password" placeholder="Enter the Password.">
            </div>
            <div class="elements">
                <h3>Confirm Password :</h3>
                <input type="Password" placeholder="Enter the Password Again.">
            </div>
            <button type="submit">Submit</button>
        </form>
    </div>
</body>
</html>
Editor is loading...