Ad Code

Responsive Advertisement

Ticker

6/recent/ticker-posts

Neumorphism Sign-in & Sign-up

ime June 18, 2022


 



Sign up also called register means creating an online account by using a username and password or using an email address.  If you like to access some portal or application for the very first time, you need to sign up. Sign-in also called login means the user is identified and authenticated to access the portal or application where he is already registered.

This is a basic tutorial, you will learn how to create Sign in and Sign up forms using HTML and CSS step by step.  

I designed it with the very basics of HTML, CSS, and neumorphism technique. so it is best suitable for beginners in the web development field.

Complete source codes and images at the end 🠋🠋🠋

You may also like

Check the video tutorial 

Don't forget to Subscribe to our Youtube Channel for more.



HTML CODES index.html

<!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">
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />

    <link rel="stylesheet" href="styles.css">
    <title>Sign-in Sign-up</title>
</head>

<body>
    <div class="container">
        <div class="signin-sign-up">
            <form action="" class="sign-in-form">
                <h2 class="title">Sign in</h2>
                <div class="input-field">
                    <i class="fas fa-user"></i>
                    <input type="text" placeholder="Username">
                </div>
                <div class="input-field">
                    <i class="fas fa-lock"></i>
                    <input type="password" placeholder="Password">
                </div>
                <a href="#" class="forgot-password">Forgot password</a>
                <input type="submit" value="Login" class="btn">
                <p>Don't have an account? <a href="#" class="account-text" id="sign-up-link">Sign up</a></p>
            </form>
            <form action="" class="sign-up-form">
                <h2 class="title">Sign up</h2>
                <div class="input-field">
                    <i class="fas fa-user"></i>
                    <input type="text" placeholder="Username">
                </div>
                <div class="input-field">
                    <i class="fas fa-envelope"></i>
                    <input type="email" placeholder="Email">
                </div>
                <div class="input-field">
                    <i class="fas fa-lock"></i>
                    <input type="password" placeholder="Password">
                </div>
                <input type="submit" value="Sign up" class="btn">
                <p>Already have an account? <a href="#" class="account-text" id="sign-in-link">Sign in</a></p>

            </form>
        </div>
    </div>
    <script src="app.js"></script>
</body>

</html>

CSS CODES styles.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: #e0e0e0;
}

a {
    text-decoration: none;
}

.container {
    width: 350px;
    height: 500px;
    background: #e0e0e0;
    border-radius: 40px;
    box-shadow: 12px 12px 24px 0 rgba(0, 0, 0, 0.2), -12px -12px 24px 0 rgba(255, 255, 255, 1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.signin-sign-up {
    display: grid;
    grid-template-columns: 1fr;
}

form {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

form.sign-up-form {
    visibility: hidden;
}

.title {
    font-size: 35px;
    color: #5ab9ea;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.input-field {
    width: 280px;
    height: 50px;
    margin: 10px 0;
    background: #e0e0e0;
    border-radius: 40px;
    display: flex;
    align-items: center;
    box-shadow: inset 6px 6px 10px 0 rgba(0, 0, 0, 0.2), inset -6px -6px 10px 0 rgba(255, 255, 255, 0.5);
}

.input-field i {
    flex: 1.2;
    text-align: center;
    font-size: 20px;
    color: #999;
}

.input-field input {
    flex: 5;
    width: 100%;
    color: #444;
    font-size: 18px;
    font-weight: 600;
    border: none;
    outline: none;
    background: none;
}

.input-field input::placeholder {
    color: #999;
}

p,
a {
    font-size: 14px;
    color: #999;
}

.forgot-password {
    align-self: flex-end;
}

.btn {
    width: 130px;
    height: 45px;
    background: #e0e0e0;
    outline: none;
    border: none;
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 600;
    margin: 20px 0;
    color: #5ab9ea;
    cursor: pointer;
    border-radius: 40px;
    box-shadow: 12px 12px 24px 0 rgba(0, 0, 0, 0.2), -12px -12px 24px 0 rgba(255, 255, 255, 1);
}

.account-text {
    color: #5ab9ea;
}

.container.sign-up-mode form.sign-in-form {
    visibility: hidden;
}

.container.sign-up-mode form.sign-up-form {
    visibility: visible;
}


/* responsive starts here */

@media(max-width: 400px) {
    .container {
        width: 100vw;
        height: 100vh;
        border-radius: 0;
    }
}

JAVASCRIPT CODES app.js

const sign_up_link = document.querySelector("#sign-up-link");
const sign_in_link = document.querySelector("#sign-in-link");
const container = document.querySelector(".container");

sign_up_link.addEventListener("click", () => {
    container.classList.add("sign-up-mode");
});

sign_in_link.addEventListener("click", () => {
    container.classList.remove("sign-up-mode");
})

Don't forget to Subscribe to our Youtube Channel for more.

Download full source Codes

ime

Posted by ime

Post a Comment

0 Comments