logo of SA Coder
        Menu
sign in

      References



Login Page Design


Are you looking for an attractive and user-friendly login page for your website? SA Coder has got you covered. We have designed a login page with a simple and elegant user interface that will make logging in to your website a breeze.



Our login page includes fields for email, password, and OTP verification, making it a secure option for your users. The page is designed with modern web development standards in mind and is responsive to different screen sizes, making it accessible from any device.



The page features a gradient background with shades of blue and orange that create a pleasant visual experience for your users. The login and signup buttons are styled with gradients, giving them a 3D-like appearance, making them easy to identify and click.



The email, password, and OTP fields are designed with rounded edges and light colors that contrast well with the darker colors of the page's background.


".css" code

copy

* {
    margin: 0;
    padding: 0;
}

:root {
    --light: rgb(234, 253, 255);
    --orange: rgb(255, 123, 0);
}

#login_bar1 {
    background: linear-gradient(0.13turn, #b9fffe, #fff3db, #96d7ff);
    height: 100%;
    display: flex;
    flex-direction: column;
    position: fixed;
    right: 0;
    z-index: 2;
    align-items: center;
    justify-content: center;
    box-shadow: -5px 5px 5px black;
}

#login_bar1 {
    width: 100%;
}

@media screen and (min-width: 850px) {
    #container {
        width: 50%;
    }
}

@media screen and (max-width: 850px) {
    #container {
        width: 100%;
    }
}

#container {
    background: linear-gradient(0.25turn, rgb(230, 165, 255), rgb(219, 254, 255));
    height: 70%;
    width: 35%;
    margin: 30px;
    padding: 15px;
    border-radius: 20px;
    border: 3px solid var(--orange);
    box-shadow: 0px 0px 10px rgb(0, 0, 0);
}

#email,
#pass,
#otp {
    display: block;
    border-radius: 25px;
    border-style: none;
    padding-left: 15px;
    height: 3em;
    width: 80%;
    position: relative;
    background-color: var(--light);
    border: 2px solid var(--orange);
    color: black;
    margin: 10px;
}

#capcha {
    border-radius: 25px;
    border-style: none;
    padding-left: 15px;
    height: 3em;
    width: 50%;
    position: relative;
    background-color: var(--light);
    border: 2px solid var(--orange);
    color: var(--dark);
    margin: 5px;
    float: left;
}

#capcha_main {
    width: 80%;
    display: flex;
}

#capcha_main img {
    width: 80px;
    height: 30px;
    margin: 5px 15px;
    float: right;
}

#button_main {
    display: block;
    margin: 10px;
}

.login {
    background: rgb(255, 0, 170);
    border: 1px solid rgb(255, 0, 170);
}

:hover.login {
    background: var(--light);
    color: rgb(255, 0, 170);
}

.singup {
    background: rgb(0, 255, 0);
    border: 1px solid rgb(0, 255, 0);
}

:hover.singup {
    background: var(--light);
    color: rgb(0, 255, 0);
}

.singup,
.login {
    cursor: pointer;
    margin: 10px 15px;
    width: 140px;
    height: 50px;
    border-radius: 20px;
    color: var(--light);
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 0.7px;
    background-image: linear-gradient(top, rgba(255, 255, 255, 0.224) 1px, rgba(255, 255, 255, 0) 1px, rgba(0, 0, 0, 0.179) 100%);
    box-shadow: 0 60px 12px -18px rgba(0, 0, 0, 0.1), 0 60px 20px -12px rgba(0, 0, 0, 0.1);
    animation: anim 1.5s infinite ease-in-out alternate;
}

.singup {
    animation-delay: .5s;
}

#forget {
    text-align: center;
    margin-top: 70px;
    font-weight: bold;
}

#forget a {
    color: black;
    font-size: larger;
    text-decoration: none;
}

:hover#forget a {
    color: var(--orange);
}


".html" code

copy

<!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 Page</title>
</head>

<body>
    <div id="main">
        <div id="login_bar">
            <div id="login_bar1">
                <h1>Login page</h1>
                <div id="container">
                    <form action="" method="post">
                        <div style="height: 30px;"></div>
                        <center><input id="email" type="email" name="email" placeholder="Email-ID" required></center>
                        <center><input id="pass" type="password" name="pass" placeholder="Password" required></center>
                        <center><input id="otp" type="text" name="otp" placeholder="OTP" required>
                            <p style="color: black;">Valid Only 10 Minutes</p>
                        </center>
                        <br>
                        <center>
                            <div id="button_main">
                                <button class="login">Log in</button>
                                <button class="singup">Sign up</button>
                            </div>
                        </center>
                    </form>
                    <div id="forget"><a href=""> Forgotten password?</a></div>
                </div>
            </div>
        </div>
</body>

</html>


Output


login page



Please login first to comment.