Responsive Login Form with Password Show/Hide Password using HTML CSS & JavaScript

Hey, developers welcome to Day 73 of our 90Days 90Projects challenge. And today in this challenge we are going to Create a Responsive Responsive Login Form with Password Show/Hide Password using HTML CSS & JavaScript.

So to run this code you just need to copy the HTML and CSS code and run it into your code Editor. 

Preview

contact Form with advanced features, HTML CSS JavaScript, raju webdev, geeks help, Advanced Contact Form using HTML CSS JavaScript, contact form html css, free html contact form code, simple contact form html css

HTML Code

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title> Login Form with Password Show Hide </title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
        integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="form-container">
        <form>
            <h3> Login at geekshelp.in </h3>
            <label for="username">Username</label>
            <input type="text" name="username" id="username" placeholder="Enter email or phone">

            <label for="password">Password</label>
            <div class="pass">
                <input type="password" class="pass" name="password" placeholder="Enter assword" id="password">
                <i id="show-hide" class="fa-solid fa-eye-slash"></i>
            </div>
            <button type="submit">Log In</button>
            <hr>
            <div class="social-container">
                <h3> Login using </h3>
                <div class="social">
                    <div><a  class="go" href="#"><i class="fab fa-google"></i> Google </a></div>
                    <div><a class="fb" href="#"><i class="fab fa-facebook"></i> Facebook</a></div>
                </div>
            </div>
        </form>
    </div>

</body>
    <script src="script.js"></script>
</html>


CSS Code

style.css

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

body {
    background-color: #a499f6;
}

.form-container {
    width: 100%;
    display: flex;
    padding: 50px 20px;
    justify-items: center;
}

form {
    display: block;
    margin: auto;
    width: 400px;
    background-color: rgba(255, 255, 255, 0.13);
    border-radius: 10px;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 40px rgba(8, 7, 16, 0.6);
    padding: 50px 35px;
}

form h3 {
    font-size: 25px;
    text-align: center;
    color: #fff;
    text-shadow: 2px 2px 10px black;
}

label {
    display: block;
    margin-top: 2rem;
    font-size: 1rem;
}

input {
    outline: none;
    border: none;
    width: 100%;
    background-color: #f4f3f367;
    border-radius: 4px;
    padding: 15px 10px;
    margin-top: 8px;
    font-weight: 100;
}

input::placeholder {
    color: rgb(87, 79, 79);
}

.pass {
    position: relative;
}

.pass i {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    right: 20px;
}

#show-hide {
    font-size: 1rem;
}

button {
    margin-top: 30px;
    width: 100%;
    background-color: #ffffff;
    padding: 15px 0;
    font-size: 18px;
    border-radius: 5px;
    cursor: pointer;
    border: none;
    transition: all 0.1s;
}

button:hover {
    transform: translate(-0.25rem, -0.25rem);
    box-shadow: 0.25rem 0.25rem #2a2a2c;
}

hr {
    margin-top: 20px;
    height: 1px;
    background-color: #ffffff7f;
    border: none;
    outline: navajowhite;
}

.social-container h3 {
    margin-top: 20px;
    margin-bottom: 20px;
}

.social {
    display: flex;
    justify-content: center;
    width: 100%;
}

.social div {
    width: 150px;
    border-radius: 5px;
    padding: 10px 5px;
    background-color: rgba(255, 255, 255, 0.27);
    text-align: center;
    margin: 0 14px;
    cursor: pointer;
}

.social div:hover {
    background-color: rgba(248, 247, 247, 0.511);
}

.social a {
    text-decoration: none;
}

.go {
    color: #e60000;
}

.fb {
    color: blue;
}

.social i {
    margin-right: 4px;
}

@media screen and (max-width: 462px) {
    form {
        width: 100%;
    }
}

JavaScript

script.js

const showHide = document.getElementById('show-hide');
let passwordInput = document.getElementById('password');

showHide.addEventListener('click', function () {
    showHide.classList.toggle('show');

    if (showHide.classList.contains('show')) {
        showHide.classList.remove('fa-eye-slash');
        showHide.classList.add('fa-eye');
        passwordInput.setAttribute('type', 'text');
    }
    else {
        showHide.classList.add('fa-eye-slash');
        showHide.classList.remove('fa-eye');
        passwordInput.setAttribute('type', 'password');
    }
});

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Top Post Ad

Below Post Ad