DEV Community

Cover image for Cool sign up page design using HTML, CSS, and Javascript
Ashutosh Tiwari
Ashutosh Tiwari

Posted on • Originally published at incoderweb.blogspot.com

Cool sign up page design using HTML, CSS, and Javascript

#html #css #javascript #incoderweb

Hello friends, today in this blog we will see how to create a cool sign-up form design using HTML, CSS, and Javascript. In our previous blog, we saw how to create an awesome login form design using HTML and CSS Only. Earlier, I shared many projects related to CSS Forms, you can check if you want, and don't forget to check HTML, CSS, and Javascript projects.

The Sign-Up form is commonly used by websites, computer applications, and mobile apps. A Sign-Up page (also known as a registration page) enables users to create an account and use the platform's services. There are some standard details, that platforms ask to fill in the form like name, email, and password.

You may like these:

In this program (sign up page design), when the page is loaded the form scales its size from small to large. there is a gradient background and in the center of the page there is a sign up form as you can see in the image above, In the sign up form, there are some input fields like first name, last name, e-mail, and password there is a submit button. When you hover on the button the arrow icon will start animating.

If you like this blog and want to download the source code files, I’ve also provided the download link of this program where you can easily download the source files of this program here.

HTML Code 

<!DOCTYPE html>
<html lang="en">
<!-- -------------------- Created By InCoder -------------------- -->

<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>Cool sign up form - InCoder</title>
    <link rel="stylesheet" href="main.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
</head>

<body>
    <div class="container">
        <h1 class="title">Create Account</h1>
        <p class="link">Already have an account? <a href="#">Sign in</a></p>
        <form id="signUp">
            <div class="form-group name-input-group">
                <input type="text" placeholder="First Name">
                <input type="text" placeholder="Last Name">
            </div>
            <div class="form-group">
                <input type="email" placeholder="Email">
            </div>
            <div class="form-group passInput">
                <input type="password" placeholder="Password">
                <i class="fa-solid fa-eye" onclick="toggleType(this)"></i>
            </div>
            <div class="form-group passInput">
                <input type="password" placeholder="Confirm Password">
                <i class="fa-solid fa-eye" onclick="toggleType(this)"></i>
            </div>
            <button type="submit" class="submitBtn">Sign Up <i class="fa-solid fa-arrow-right"></i></button>
        </form>
        <p class="terms-services">
            <input class="input" id="terms-services" type="checkbox" />
            <label class="checkbox" for="terms-services"><span>
                    <svg width="12px" height="10px">
                        <use xlink:href="#check"></use>
                    </svg></span><span>I have read and agree to the Terms of Service</span></label>
            <!--SVG Sprites-->
            <svg class="inline-svg">
                <symbol id="check" viewbox="0 0 12 10">
                    <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
                </symbol>
            </svg>
        </p>
    </div>
</body>

</html>
Enter fullscreen mode Exit fullscreen mode

CSS Code 

/* -------------------- Created By InCoder -------------------- */

@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");


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

body {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-rendering: optimizelegibility;
    -webkit-font-smoothing: antialiased;
    background: linear-gradient(50deg, rgb(255 159 77 / 71%), rgb(253 80 112 / 79%) 20%, rgb(255 83 101 / 76%) 80%, rgb(255 159 77 / 55%));
}

.container {
    margin: 1.2rem;
    background: #fff;
    border-radius: 1.5rem;
    transition: transform .3s;
    width: clamp(20rem, 55vh, 30rem);
    transform: scale(1) translateY(0rem);
    animation: scaleUp 1s cubic-bezier(0, 1.06, 0.73, 1.02);
}

@keyframes scaleUp {
    0%{
        transform: scale(.7) translateY(6rem);
    }
    100%{
        transform: scale(1) translateY(0rem);
    }
}

.container .title {
    margin-top: 1rem;
    text-align: center;
    letter-spacing: -0.5px;
    font-size: clamp(1.8rem, 6vh, 2.5rem);
}

.container .link {
    margin-bottom: 1.5rem;
    text-align: center;
}

.container .link a {
    color: #5056c6;
    text-decoration: none;
}

.container .link a:hover {
    text-decoration: underline;
}

#signUp {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.form-group {
    width: 80%;
    display: flex;
    position: relative;
    align-items: center;
    margin-bottom: .8rem;
    justify-content: center;
}

.form-group input {
    border: 0;
    width: 100%;
    height: 3.2rem;
    font-size: 1rem;
    border-radius: 1rem;
    padding-left: .8rem;
    padding-right: .8rem;
    color: rgb(0 0 0 / 50%);
    background-color: rgb(0 0 0 / 5%);
}

.form-group input:focus {
    background-color: rgb(0 0 0 / 8%);
}

.form-group input::placeholder {
    font-size: 1rem;
    color: rgb(0 0 0 / 50%);
}

.form-group input:focus {
    outline: none;
}

.passInput i{
    right: 5%;
    display: none;
    font-size: 1.2rem;
    cursor: pointer;
    position: absolute;
    color: rgb(0 0 0 / 40%);
}

.name-input-group input:first-child {
    border-radius: 1rem 0 0 1rem;
    border-right: 3px solid #fff;
}

.name-input-group input:last-child {
    border-radius: 0 1rem 1rem 0;
    border-left: 3px solid #fff;
}

.submitBtn {
    border: 0;
    width: 80%;
    color: #fff;
    height: 3.2rem;
    cursor: pointer;
    margin-top: .2rem;
    font-size: 1.2rem;
    position: relative;
    border-radius: 1rem;
    background-color: rgb(72 150 255);
}

.submitBtn i {
    top: 35%;
    right: 8%;
    position: absolute;
}

.submitBtn:hover i,
.submitBtn:focus i{
    outline: none;
    animation: move .8s cubic-bezier(0.4, 0, 1, 1) infinite alternate;
}

a:focus,
.submitBtn:focus {
    outline: none;
}

@keyframes move {
    0% {
        right: 8%;
    }

    100% {
        right: 6%;
    }
}

@-moz-keyframes move {
    0% {
        right: 8%;
    }

    100% {
        right: 6%;
    }
}

@-webkit-keyframes move {
    0% {
        right: 8%;
    }

    100% {
        right: 6%;
    }
}

@-o-keyframes move {
    0% {
        right: 8%;
    }

    100% {
        right: 6%;
    }
}

.terms-services {
    display: flex;
    margin-top: 1rem;
    margin-bottom: 1rem;
    justify-content: center;
}

.checkbox {
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
    padding: 6px 8px;
    display: flex;
    max-width: 80%;
    border-radius: 6px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.checkbox:not(:last-child) {
    margin-right: 6px;
}

.checkbox span {
    float: left;
    vertical-align: middle;
    transform: translate3d(0, 0, 0);
}

.checkbox span:first-child {
    position: relative;
    width: 18px;
    height: 18px;
    min-width: 18px;
    border-radius: 4px;
    transform: scale(1);
    border: 1px solid #cccfdb;
    transition: all 0.2s ease;
    box-shadow: 0 1px 1px rgba(0, 16, 75, 0.05);
}

.checkbox span:first-child svg {
    position: absolute;
    top: 3px;
    left: 2px;
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 16px;
    stroke-dashoffset: 16px;
    transition: all 0.3s ease;
    transition-delay: 0.1s;
    transform: translate3d(0, 0, 0);
}

.checkbox span:last-child {
    padding-left: 8px;
    line-height: 18px;
}

.checkbox:hover span:first-child {
    border-color: #07f;
}

.input {
    position: absolute;
    visibility: hidden;
}

.input:checked+.checkbox span:first-child {
    background: #07f;
    border-color: #07f;
    animation: wave 0.4s ease;
}

.input:checked+.checkbox span:first-child svg {
    stroke-dashoffset: 0;
}
.inline-svg {
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: none;
    user-select: none;
}

@-moz-keyframes wave {
    50% {
        transform: scale(0.9);
    }
}

@-webkit-keyframes wave {
    50% {
        transform: scale(0.9);
    }
}

@-o-keyframes wave {
    50% {
        transform: scale(0.9);
    }
}

@keyframes wave {
    50% {
        transform: scale(0.9);
    }
}

@media (max-width: 320px) {
    .container .title{
        font-size: 2rem;
    }
    .link{
        font-size: .9rem;
    }
}
Enter fullscreen mode Exit fullscreen mode

Javascript Code 

let passInput = document.querySelectorAll(".passInput input")
        let state = false

        const toggleType = (icon) => {
            if(state){
                icon.classList.remove('fa-eye-slash')
                icon.classList.add('fa-eye')
                icon.parentElement.querySelector('input').type = 'password'
                state = false
            }else{
                icon.classList.remove('fa-eye')
                icon.classList.add('fa-eye-slash')
                icon.parentElement.querySelector('input').type = 'text'
                state = true
            }
        }

        passInput.forEach(input => {
            input.addEventListener('keyup', e => {
                if(e.target.value.length != 0){
                  input.parentElement.querySelector('i').style.display = 'block'
                }else{
                    input.parentElement.querySelector('i').style.display = 'none'
                }
            })
        })
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Read next

martygo profile image

👀 How Check Memory Leaks in React?⚠️🚨🚨

Martins Gouveia -

rajnandan1 profile image

Built a cli for browser

Raj Nandan Sharma -

sharathchandark profile image

Learn How To Build A Translator App With API Using HTML, CSS, And JavaScript

sharathchandark -

sharathchandark profile image

Unlock Security: OTP Generator with Email Verification using JavaScript

sharathchandark -