Login Form | BimStudies.Com

HTML

<!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="styles.css">
    <title>Login & Registration | BimStudies.com</title>
</head>

<body>
    <div class="container">
        <div class="form-container sign-up-container">
            <form action="#" method="post" id="register-form">
               <img src="bimlogo.png" width="150">
                <h1>Create Account</h1>
                <input type="text" placeholder="Username" id="register-username" required>
                <input type="email" placeholder="Email" id="register-email" required>
                <input type="password" placeholder="Password" id="register-password" required>
                <button type="button" onclick="registerUser()">Sign Up</button>
            </form>
        </div>
        <div class="form-container sign-in-container">
            <form action="#" method="post" id="login-form">
                <h1>Sign in</h1>
                <input type="text" placeholder="Username or Email" id="login-username" required>
                <input type="password" placeholder="Password" id="login-password" required>
                <button type="button" onclick="loginUser()">Sign In</button>
            </form>
        </div>
    </div>
<script>
   const signUpButton = document.getElementById("signUp");
const signInButton = document.getElementById("signIn");
const registerForm = document.getElementById("register-form");
const loginForm = document.getElementById("login-form");

signUpButton.addEventListener("click", () => {
  registerForm.classList.add("active");
  loginForm.classList.remove("active");
});

signInButton.addEventListener("click", () => {
  registerForm.classList.remove("active");
  loginForm.classList.add("active");
});

function registerUser() {
  // Handle registration logic here
  console.log("Registering user...");
}

function loginUser() {
  // Handle login logic here
  console.log("Logging in user...");
}

</script>
</body>
</html>

CSS


   body {
    font-family: 'sans-serif';
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #106f56;
    margin: 0;
}

.container {
    width: 80%;
    max-width: 500px;
    background-color: #e9ecee;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
}

.form-container {
    position: relative;
    z-index: 1;
    background-color: #63a2bf;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
    text-align: center; /* Center the content */
}

.form-container h1 {
    margin-bottom: 20px;
    color: #333;
}

.form-container input[type="text"],
.form-container input[type="email"],
.form-container input[type="password"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
}

.form-container button {
    width: 100%;
    padding: 10px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.overlay-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
}

.overlay {
    background-color: rgba(0, 0, 0, 0.5);
    padding: 30px;
    border-radius: 10px;
    display: flex;
    justify-content: space-around; /* Center the panels horizontally */
}

.overlay-panel {
    position: relative;
    width: 48%; /* Adjusted to leave some space between panels */
    transition: all 0.3s ease-in-out;
}

.overlay-left {
    transform: translateX(-100%);
}

.overlay-right {
    transform: translateX(100%);
}

.overlay-panel.active {
    transform: translateX(0);
}

.overlay-panel h1 {
    margin-bottom: 20px;
    color: #fff;
}

.overlay-panel p {
    font-size: 14px;
    text-align: center;
    margin-bottom: 20px;
    color: #ccc;
}

.overlay-panel button {
    padding: 10px;
    background-color: transparent;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 5px;
    cursor: pointer;
}

.overlay-panel button:hover {
    background-color: #fff;
    color: #007bff;
}

HTML

<!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="styles.css">
    <title>BimStudies Login</title>
</head>

<body>
    <div class="login-container">
        <div class="login-box">
            <img src="bimlogo.png" alt="BIM Logo" class="logo">
            <form>
                <input type="text" placeholder="Email or phone number">
                <input type="password" placeholder="Password">
                <button type="submit">Sign In</button>
                <div class="options">
                    <label>
                        <input type="checkbox"> Remember me
                    </label>
                    <a href="#">Need help?</a>
                </div>
            </form>
            <div class="bottom">
                <p>New to BimStudies? <a href="#">Sign up now.</a></p>
                <p>This page is protected by Google reCAPTCHA to ensure you're not a bot. <a href="#">Learn more.</a></p>
            </div>
        </div>
    </div>
</body>
</html>

CSS


    body {
    margin: 0;
    padding: 0;
    font-family: 'Arial', sans-serif;
    background: #141414;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.login-container {
    text-align: center;
}

.login-box {
    background: rgba(0, 0, 0, 0.75);
    padding: 60px;
    border-radius: 8px;
    width: 300px;
}

.logo {
    width: 100%;
    max-width: 200px;
    margin-bottom: 20px;
}

form {
    display: flex;
    flex-direction: column;
}

input {
    padding: 10px;
    margin-bottom: 15px;
    border: none;
    border-radius: 4px;
}

button {
    padding: 15px;
    background: #e50914;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

a {
    color: #fff;
    text-decoration: none;
}

.bottom {
    margin-top: 20px;
    font-size: 14px;
    color: #8c8c8c;
}

.bottom a {
    color: #b3b3b3;
}

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Facebook Login Page | BimStudies.com</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="custom-container flex">
        <div class="custom-facebook-page">
            <div class="custom-text">
                <h1>facebook</h1>
                <p>Connect with friends and the world </p>
                <p> around you on Facebook.</p>
            </div>
            <form action="#" class="custom-form">
                <input type="email" placeholder="Email or phone number" required>
                <input type="password" placeholder="Password" required>
                <div class="custom-link">
                    <button type="submit" class="custom-login">Login</button>
                    <a href="#" class="custom-forgot">Forgot password?</a>
                </div>
                <hr class="custom-hr">
                <div class="custom-button">
                    <a href="#" class="custom-create-account">Create new account</a>
                </div>
            </form>
        </div>
    </div>
</body>
</html>

CSS


    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
}
.flex {
  display: flex;
  align-items: center;
  justify-content: center; /* Center horizontally */
}

.custom-container {
    padding: 0 15px;
    min-height: 100vh;
    background: #f0f2f5;
}

.custom-facebook-page {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center vertically */
    max-width: 1000px;
    width: 100%;
    margin-top: 30px; /* Adjust as needed */
}

.custom-facebook-page .custom-text {
    text-align: center;
    margin-bottom: 30px;
}

.custom-facebook-page h1 {
    color: #1877f2;
    font-size: 4rem;
    margin-bottom: 10px;
}

.custom-facebook-page p {
    font-size: 1.75rem;
    white-space: nowrap;
}

.custom-form {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1),
        0 8px 16px rgba(0, 0, 0, 0.1);
    max-width: 400px;
    width: 100%;
}

.custom-form input {
    height: 55px;
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 6px;
    margin-bottom: 15px;
    font-size: 1rem;
    padding: 0 14px;
}

.custom-form input:focus {
    outline: none;
    border-color: #1877f2;
}

.custom-link {
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 15px;
}

.custom-link .custom-login {
    border: none;
    outline: none;
    cursor: pointer;
    background: #1877f2;
    padding: 15px 0;
    border-radius: 6px;
    color: #fff;
    font-size: 1.25rem;
    font-weight: 600;
    transition: 0.2s ease;
}

.custom-link .custom-login:hover {
    background: #0d65d9;
}

.custom-form a {
    text-decoration: none;
}

.custom-link .custom-forgot {
    color: #1877f2;
    font-size: 0.875rem;
}

.custom-link .custom-forgot:hover {
    text-decoration: underline;
}

.custom-hr {
    border: none;
    height: 1px;
    background-color: #ccc;
    margin-bottom: 20px;
    margin-top: 20px;
}

.custom-button {
    margin-top: 25px;
    text-align: center;
    margin-bottom: 20px;
}

.custom-button a {
    padding: 15px 20px;
    background: #42b72a;
    border-radius: 6px;
    color: #fff;
    font-size: 1.063rem;
    font-weight: 600;
    transition: 0.2s ease;
}

.custom-button a:hover {
    background: #3ba626;
}

@media (max-width: 900px) {
    .custom-facebook-page .custom-text {
        margin-bottom: 20px;
    }
}

@media (max-width: 460px) {
    .custom-container {
        padding: 0 10px;
    }

    .custom-facebook-page h1 {
        font-size: 3.5rem;
    }

    .custom-facebook-page p {
        font-size: 1.3rem;
    }

    .custom-form {
        padding: 15px;
    }
}

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Registration Form | BimStudies.com</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <form action="#" method="post">
            <img src="bimlogo.png">
            <h2>Register</h2>
            <div class="input-group">
                <label for="username">Username</label>
                <input type="text" id="username" name="username" required>
            </div>
            <div class="input-group">
                <label for="email">Email</label>
                <input type="email" id="email" name="email" required>
            </div>
            <div class="input-group">
                <label for="password">Password</label>
                <input type="password" id="password" name="password" required>
            </div>
            <div class="input-group">
                <label for="confirm-password">Confirm Password</label>
                <input type="password" id="confirm-password" name="confirm-password" required>
            </div>
            <button type="submit">Register</button>
        </form>
    </div>
</body>
</html>

CSS


    * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif;
    background-color: #d6c1c1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
}

.container {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    width: 300px;
}

form {
    display: flex;
    flex-direction: column;
}

h2 {
    text-align: center;
    margin-bottom: 20px;
}

.input-group {
    margin-bottom: 15px;
}

label {
    font-weight: bold;
    margin-bottom: 5px;
    display: block;
}

input {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 100%;
}

button {
    background-color: #007bff;
    color: #fff;
    padding: 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
    <title>Registration form | BimStudies.com</title>
  </head>
  
  <body>
    <section class="custom-container">
      <header>Registration Form</header>
      <form action="#" class="custom-form">
        <div class="custom-input-box">
          <label>Full Name</label>
          <input type="text" placeholder="Enter full name" required />
        </div>

        <div class="custom-input-box">
          <label>Email Address</label>
          <input type="text" placeholder="Enter email address" required />
        </div>

        <div class="custom-column">
          <div class="custom-input-box">
            <label>Phone Number</label>
            <input type="number" placeholder="Enter phone number" required />
          </div>
          <div class="custom-input-box">
            <label>Birth Date</label>
            <input type="date" placeholder="Enter birth date" required />
          </div>
        </div>
        <div class="custom-gender-box">
          <h3>Gender</h3>
          <div class="custom-gender-option">
            <div class="custom-gender">
              <input type="radio" id="custom-check-male" name="custom-gender" checked />
              <label for="custom-check-male">male</label>
            </div>
            <div class="custom-gender">
              <input type="radio" id="custom-check-female" name="custom-gender" />
              <label for="custom-check-female">Female</label>
            </div>
            <div class="custom-gender">
              <input type="radio" id="custom-check-other" name="custom-gender" />
              <label for="custom-check-other">prefer not to say</label>
            </div>
          </div>
        </div>
        <div class="custom-input-box custom-address">
          <label>Address</label>
          <input type="text" placeholder="Enter street address" required />
          <input type="text" placeholder="Enter street address line 2" required />
          <div class="custom-column">
            <div class="custom-select-box">
              <select>
                <option hidden>Country</option>
                <option>Nepal</option>
                <option>Japan</option>
                <option>India</option>
                <option>China</option>
              </select>
            </div>
            <input type="text" placeholder="Enter your city" required />
          </div>
          <div class="custom-column">
            <input type="text" placeholder="Enter your region" required />
            <input type="number" placeholder="Enter postal code" required />
          </div>
        </div>
        <button>Submit</button>
      </form>
    </section>
  </body>
</html>

CSS


    body {
  font-family: sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f4f4f4;
  margin: 0;
}

.custom-container {
  background-color: #8db5c1; /* Light yellow background */
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
  width: 80%;
  max-width: 600px;
}

header {
  text-align: center;
  margin-bottom: 30px;
  font-size: 24px;
  color: #007bff; /* Blue header text color */
}

.custom-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

label {
  font-weight: bold;
  margin-bottom: 5px;
  color: #333; /* Dark label text color */
}

input,
select {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  width: 100%;
  box-sizing: border-box;
}

/* Gender radio buttons */
.custom-gender-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.custom-gender-option {
  display: flex;
  gap: 10px;
}

.custom-gender {
  display: flex;
  align-items: center;
}

.custom-gender label {
  margin-left: 5px;
  color: #555; /* Medium gray radio button label color */
}

/* Address section */
.custom-address {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.custom-column {
  display: flex;
  gap: 10px;
}

/* Submit button */
button {
  background-color: #42b72a; /* Green submit button background */
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  cursor: pointer;
}

/* Responsiveness */
@media (max-width: 768px) {
  .custom-container {
    width: 90%;
  }
}

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="utf-8">
    <title>Animated Login Form | BimStudies.com</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
    
</head>
<body>
    <div class="container">
        <header>Login Form</header>
        <form>
            <div class="input-field">
                <input type="text" required>
                <label>Email or Username</label>
            </div>
            <div class="input-field">
                <input class="pswrd" type="password" required>
                <span class="show">SHOW</span>
                <label>Password</label>
            </div>
            <div class="button">
                <div class="inner"></div>
                <button>LOGIN</button>
            </div>
        </form>
        <div class="auth">
            Or login with
        </div>
        <div class="links">
            <div class="facebook">
                <i class="fab fa-facebook-square"></i><span>Facebook</span>
            </div>
            <div class="google">
                <i class="fab fa-google-plus-square"></i><span>Google</span>
            </div>
        </div>
        <div class="signup">
            Not a member? <a href="#">Signup now</a>
        </div>
    </div>
    <script>
        var input = document.querySelector('.pswrd');
        var show = document.querySelector('.show');
        show.addEventListener('click', active);

        function active() {
            if (input.type === "password") {
                input.type = "text";
                show.style.color = "#1DA1F2";
                show.textContent = "HIDE";
            } else {
                input.type = "password";
                show.textContent = "SHOW";
                show.style.color = "#111";
            }
        }
    </script>
</body>
</html>

CSS


        @import url('https://fonts.googleapis.com/css?family=Montserrat:600|Noto+Sans|Open+Sans:400,700&display=swap');

        * {
            margin: 0;
            padding: 0;
            border-radius: 5px;
            box-sizing: border-box;
        }

        body {
            height: 100vh;
            display: flex;
            align-items: center;
            text-align: center;
            font-family: 'Montserrat', sans-serif;
            justify-content: center;
            background: url(bg.jpg);
            background-size: cover;
            background-position: center;
            margin: 0;
        }

        .container {
            position: relative;
            width: 400px;
            background: white;
            padding: 60px 40px;
            box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
        }

        header {
            font-size: 40px;
            margin-bottom: 30px;
            font-family: 'Montserrat', sans-serif;
            color: #333;
        }

        .input-field, form .button {
            margin: 25px 0;
            position: relative;
            height: 50px;
            width: 100%;
        }

        .input-field input {
            height: 100%;
            width: 100%;
            border: 1px solid silver;
            padding-left: 15px;
            outline: none;
            font-size: 19px;
            transition: .4s;
            border-radius: 5px;
        }

        input:focus {
            border: 1px solid #1DA1F2;
        }

        .input-field label, span.show {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }

        .input-field label {
            left: 15px;
            pointer-events: none;
            color: grey;
            font-size: 18px;
            transition: .4s;
        }

        span.show {
            right: 20px;
            color: #111;
            font-size: 14px;
            font-weight: bold;
            cursor: pointer;
            user-select: none;
            visibility: hidden;
            font-family: 'Open Sans', sans-serif;
        }

        input:valid ~ span.show {
            visibility: visible;
        }

        input:focus ~ label,
        input:valid ~ label {
            transform: translateY(-33px);
            background: white;
            font-size: 16px;
            color: #1DA1F2;
        }

        form .button {
            margin-top: 30px;
            overflow: hidden;
            z-index: 111;
        }

        .button .inner {
            position: absolute;
            height: 100%;
            width: 300%;
            left: -100%;
            z-index: -1;
            transition: all .4s;
            background: -webkit-linear-gradient(right, #00dbde, #fc00ff, #00dbde, #fc00ff);
            border-radius: 5px;
        }

        .button:hover .inner {
            left: 0;
        }

        .button button {
            width: 100%;
            height: 100%;
            border: none;
            background: none;
            outline: none;
            color: white;
            font-size: 20px;
            cursor: pointer;
            font-family: 'Montserrat', sans-serif;
            border-radius: 5px;
        }

        .container .auth {
            margin: 35px 0 20px 0;
            font-size: 19px;
            color: grey;
        }

        .links {
            display: flex;
            cursor: pointer;
            justify-content: center;
        }

        .facebook, .google {
            height: 40px;
            width: 100%;
            border: 1px solid silver;
            border-radius: 3px;
            margin: 0 10px;
            transition: .4s;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .facebook:hover {
            border: 1px solid #4267B2;
        }

        .google:hover {
            border: 1px solid #dd4b39;
        }

        .facebook i, .facebook span,
        .google i, .google span {
            font-size: 18px;
            color: #333;
            display: flex;
            align-items: center;
        }

        .links span {
            font-size: 17px;
            font-weight: bold;
            padding-left: 8px;
            font-family: 'Open Sans', sans-serif;
            color: #333;
        }

        .signup {
            margin-top: 30px;
            font-family: 'Noto Sans', sans-serif;
        }

        .signup a {
            color: #3498db;
            text-decoration: none;
        }

        .signup a:hover {
            text-decoration: underline;
        }

        .show {
            cursor: pointer;
        }

BimStudies.Com

Beginners Projects

Exam Schedule Published: BBA, BIM, BBM, BBA-F, BHM, BTTM, BPA and BMS 1st and 3rd Semester Regular Examination 2024

Microprocessor and Computer Architecture Model Question and Solution(IT-228)

Microprocessor and Computer Architecture Model Question and Solutions

BBS 1st Year Model Question

Beginners Projects

How can we help?

Leave a Reply Cancel reply

Exam Schedule Published: BBA, BIM, BBM, BBA-F, BHM, BTTM, BPA and BMS 1st and 3rd Semester Regular Examination 2024

Microprocessor and Computer Architecture Model Question and Solution(IT-228)

Microprocessor and Computer Architecture Model Question and Solutions

BBS 1st Year Model Question