Creating a Fun and Interactive Monkey-Themed Login Page

In this blog, we’ll create an engaging and interactive login page featuring a playful monkey face that reacts to user interactions. The project combines HTML, CSS, and JavaScript to deliver a fun and functional user experience.

Project Overview

Our login page includes:

A dynamic monkey face that changes its expression based on user actions.
A responsive and visually appealing design.
Interactive input fields with hover and focus effects.

Here’s how you can build it step by step.

Step 1: HTML Structure

The HTML defines the structure of the page. It includes a container for the monkey emoji and input fields for email and password.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Monkey Login</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="login-container">
    <div class="monkey">
      <div class="face">🙉</div>
    </div>
    <form>
      <div class="input-field">
        <label for="email">Email</label>
        <input type="text" id="email" placeholder="[email protected]">
      </div>
      <div class="input-field">
        <label for="password">Password</label>
        <input type="password" id="password" placeholder="Enter your password">
      </div>
      <button type="submit">Login</button>
    </form>
  </div>
  <script src="script.js"></script>
</body>
</html>

Step 2: Styling with CSS

The CSS adds a beautiful gradient background, styles the form, and enhances interactivity with hover and focus effects.

body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background: linear-gradient(135deg, #ff9a9e, #fad0c4, #fbc2eb);
  background-size: 400% 400%;
  animation: gradientBG 8s ease infinite;
}

@keyframes gradientBG {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.login-container {
  background: #ffffffaa;
  padding: 25px;
  border-radius: 15px;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
  text-align: center;
  width: 350px;
  backdrop-filter: blur(10px);
}

.monkey {
  position: relative;
  margin-bottom: 20px;
  height: 100px;
}

.face {
  font-size: 60px;
  transition: transform 0.3s ease;
}

.input-field {
  margin: 15px 0;
}

label {
  display: block;
  font-size: 14px;
  margin-bottom: 5px;
  color: #333;
}

input {
  width: 100%;
  padding: 12px;
  font-size: 16px;
  border: 2px solid #ddd;
  border-radius: 8px;
  transition: 0.3s;
}

input:focus {
  outline: none;
  border-color: #ff6f61;
  background: #fff5f5;
  box-shadow: 0 0 5px #ff6f61;
}

input:hover {
  border-color: #ffa69e;
}

button {
  margin-top: 15px;
  padding: 10px 20px;
  background: #ff6f61;
  border: none;
  border-radius: 8px;
  color: white;
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s;
}

button:hover {
  background: #ff4b5c;
  box-shadow: 0 4px 10px rgba(255, 75, 92, 0.4);
}

Step 3: Adding Interactivity with JavaScript

Use JavaScript to make the monkey face react dynamically as users interact with the form fields.

const emailInput = document.getElementById("email");
const passwordInput = document.getElementById("password");
const face = document.querySelector(".face");

// Change face emoji when typing in email
emailInput.addEventListener("input", () => {
  face.textContent = "🙊"; // Monkey covering its mouth
});

// Change face emoji when focusing on password
passwordInput.addEventListener("focus", () => {
  face.textContent = "🙈"; // Monkey covering its eyes
});

// Change face emoji back when leaving the password field
passwordInput.addEventListener("blur", () => {
  face.textContent = "🙉"; // Monkey covering its ears
});

Final Result

When you combine the HTML, CSS, and JavaScript, you get a fully functional login page that is not only visually appealing but also interactive and fun to use.

Key Features

Animated background gradient.
Interactive form with hover and focus effects.
A playful monkey emoji that reacts dynamically to user actions.

Ideas for Enhancements

Add animations for the monkey face using CSS transitions.
Include form validation for the email and password fields.
Use custom emojis or SVGs for the monkey face to make it more unique.
Enhance accessibility with ARIA attributes.

Let us know if you build this project or have other creative ideas to extend its functionality. Happy coding!