Site icon NextStepHub

Creating a Fun and Interactive Monkey-Themed Login Page

nextstephub

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:

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@domain.com">
      </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

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

Ideas for Enhancements

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

Exit mobile version