Free Friday: 2/20/2026

Today, I tweaked my login page on my website a bit. I changed some colors around and switched the font. I also made a registration page.

<div class="login-container">
    <h1>Login</h1>
    
    <div class="login-input">
        <input type="text" placeholder="Username" required>
        <i class="bx bx-user"></i>
    </div>
    
    <div class="login-input">
        <input type="text" placeholder="Email" required>
        <i class="bx bx-envelope"></i>
    </div>    
    
    <div class="login-input">
        <input type="password" placeholder="Password" required>
        <i class="bx bx-lock"></i>
    </div>
    

.login-input {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 50px;
}

.login-input input {
  width: 15%;
  padding: 10px 30px; /* space for the icon */
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.login-input i {
  position: absolute;
  margin-left: -250px;
  color: #888;
}

.register-link {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.login-submit-button {
  display: block;
  margin: 20px auto;
  padding: 10px 20px;
  font-size: 1rem;
  background-color: #ef5036;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;