How to make a registration form-using Html & CSS-Step by step-2021

How to make a registration form-using Html & CSS-Step by step-2021

Html Coding:

<!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>Registration Form</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="SoloKing">
        <div class="form-box">
            <div class="button-box">
                <div id="btn"></div>
                <button type="button" class="toggle-btn" onclick="Login()">Log In</button>
                <button type="button" class="toggle-btn" onclick="register()">Register</button>
            </div>
            <div class="social-icons">
                <img src="fb.png">
                <img src="tw.png">
                <img src="gp.png">
            </div>
            <form id="Login" class="input-group">
                <input type="text" class="input-field" placeholder="user id" required>
                <input type="text" class="input-field" placeholder="Enter Password" required>
                <input type="checkbox" class="check-box"><span>Remember Password</span>
                <button type="submit" class="submit-btn">Log in</button>
            </form>
            <form id="register" class="input-group">
                <input type="text" class="input-field" placeholder="User id" required>
                <input type="email" class="input-field" placeholder="Email id" required>
                <input type="text" class="input-field" placeholder="Enter Password" required>
                <input type="checkbox" class="check-box"><span>I agree term & condition</span>
                <button type="submit" class="submit-btn">Register</button>
            </form>
            </div>
        
    </div>

    <script>
        var x = document.getElementById("Login");
        var y = document.getElementById("register");
        var z = document.getElementById("btn");

        function register(){
            x.style.left = "-480px";
            y.style.left = "50px";
            z.style.left = "110px";
        }
        function Login(){
            x.style.left = "50px";
            y.style.left = "450px";
            z.style.left = "0px";
        }
    </script>
    
</body>
</html>


CSS Coding:

*{
    margin0;
    padding0;
    font-familysans-serif;
}
.SoloKing{
    height100%;
    width100%;
    background-imagelinear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)),url(background.jpg);
    background-positioncenter;
    background-sizecover;
    positionabsolute;
}
.form-box{
    width380px;
    height480px;
    positionrelative;
    margin6% auto;
    backgroundwhite;
    padding5px;
    overflowhidden;
}
.button-box{
    width220px;
    margin35px auto;
    positionrelative;
    box-shadow0 0 20px 9px #ff61241f;
    border-radius30px;
}
.toggle-btn{
    padding10px 30px;
    cursorpointer;
    backgroundtransparent;
    border0;
    outlinenone;
    positionrelative;
}
#btn{
    top0;
    left0;
    positionabsolute;
    width110px;
    height100%;
    backgroundlinear-gradient(to right#ff105f,#ffad06);
    border-radius30px;
    transition.5s;
}
.social-icons{
    margin30px auto;
    text-aligncenter;
}
.social-icons img{
    width30px;
    margin0 12px;
    box-shadow0 0 20px 0 #7f7f7f3d;
    cursorpointer;
    border-radius50%;
}
.input-group{
    top180px;
    positionabsolute;
    width280px;
    transition.5s;
}
.input-field{
    width100%;
    padding10px 0;
    margin5px 0;
    border-left0;
    border-top0;
    border-right0;
    border-bottom1px solid #999;
    outlinenone;
    backgroundtransparent;
}
.submit-btn{
    width85%;
    padding10px 30px;
    cursorpointer;
    displayblock;
    marginauto;
    backgroundlinear-gradient(to right#ff105f,#ffad06);
    border0;
    outlinenone;
    border-radius30px;
}
.check-box{
    margin30px 10px 30px 0;
}
span{
    color#777;
    font-size12px;
    bottom68px;
    positionabsolute;
}
#Login{
    left50px;
}
#Register{
    left450px;
}



Watch a Video How to use these coding to make a Registration form