How to log in and Register HTML CSS JS

1. HTML (index.html):

Here’s the HTML code that defines the structure of the login and registration forms, along with social media icons.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>Login | Register</title>

    <!-- add styles -->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="hero">
        <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-container">
                <a href="#" class="social">
                    <i class="fa fa-facebook"></i>
                </a>
                <a href="#" class="social">
                    <i class="fa fa-youtube-play"></i>
                </a>
                <a href="#" class="social">
                    <i class="fa fa-linkedin"></i>
                </a>
            </div>
        
            <form id="login" class="input-group">
                <input type="text" class="input-field" placeholder="Username" required>
                <input type="password" class="input-field" placeholder="Password" required>
                <input type="checkbox" class="check-box"><span>Remember Password</span>
                <button class="submit-btn" type="submit">Log In</button>
            </form>
        
            <form id="register" class="input-group">
                <input type="text" class="input-field" placeholder="Username" required>
                <input type="email" class="input-field" placeholder="Email" required>
                <input type="password" class="input-field" placeholder="Password" required>
                <input type="checkbox" class="check-box"><span>I agree to the terms & conditions</span>
                <button class="submit-btn" type="submit">Register</button>
            </form>
        </div>
    </div>
    <!-- add internal js -->
    <script type="text/javascript" src="js/internal.js"></script>
</body>
</html>

2. CSS (style.css):

This CSS file defines the styles for the page elements, such as form input fields, buttons, and the social media icons.

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

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
    background: #eee;
}

.fa-facebook {
    color: #2196F3;
}
.fa-youtube-play {
    color: red;
}
.fa-linkedin {
    color: #03A9F4;
}

.form-box {
    width: 380px;
    height: 480px;
    margin: 6% auto;
    padding: 5px;
    overflow: hidden;
    position: relative;
    border-radius: 20px;
    background: #eeeeee;
    box-shadow: 11px 11px 22px #b3b3b3, -11px -11px 22px #ffffff;
}

.button-box {
    width: 220px;
    margin: 35px auto;
    position: relative;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
    border-radius: 30px;
}
  
.toggle-btn {
    padding: 10px 30px;
    font-weight: bolder;
    cursor: pointer;
    background: transparent;
    border: 0;
    outline: none;
    position: relative;
}
  
#btn {
    top: 0;
    left: 0;
    position: absolute;
    width: 110px;
    height: 100%;
    background: linear-gradient(to right, rgb(238 238 238) 0%, rgb(224 224 224) 96%);
    border-radius: 30px;
    transition: 0.5s;
}

.social-container {
    margin: 20px 100px;
}

.social-container a {
    border: 1px solid #eee;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 0 5px;
    height: 40px;
    width: 40px;
    text-decoration: none;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.15);
}
  
.input-group {
    top: 180px;
    position: absolute;
    width: 280px;
    transition: 0.5s;
}

.input-field {
    width: 100%;
    border-radius: 25px;
    padding: 10px 1em;
    margin: 5px 0;
    border-left: 0;
    border-top: 0;
    border-right: 0;
    border-bottom: 1px solid #999;
    outline: none;
    background: #f2f2f2;
    box-shadow: inset 5px 5px 10px #d1cdc7, inset -2.5px -2.5px 5px #ffffff;
}

.submit-btn {
    width: 85%;
    padding: 10px 30px;
    font-weight: bolder;
    cursor: pointer;
    display: block;
    margin: auto;
    background: linear-gradient(to right, rgb(220 220 220) 0%, rgb(244 244 244) 96%);
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.15);
    transition: transform 80ms ease-in;
    border: 0;
    outline: none;
    border-radius: 30px;
}

.check-box {
    margin: 30px 10px 30px 0;
}

span {
    color: #777;
    font-size: 12px;
    bottom: 68px;
    position: absolute;
}

#login {
    left: 50px;
}

#register {
    left: 450px;
}

3. JavaScript (internal.js):

This JavaScript file controls the switching between the login and registration forms.

var x = document.getElementById("login");
var y = document.getElementById("register");
var z = document.getElementById("btn");

function register() {
    x.style.left = "-400px";
    y.style.left = "50px";
    z.style.left = "110px";
}

function login() {
    x.style.left = "50px";
    y.style.left = "450px";
    z.style.left = "0px";
}

How It Works:

HTML: Structures the page and includes buttons to switch between the login and registration forms. The social media icons are also included.
CSS: Provides styling for the layout, buttons, forms, and social media icons, giving the page a modern look.
JavaScript: This handles the switching between the login and registration forms by modifying the left position of the forms and the button background.

Souy Soeng