Contact page made with HTML

This contact page demonstrates responsive design, interactive features, and detailed styling using HTML5, CSS3, and advanced effects. Below are the key sections and features included on the page:

Navigation Menu

Description: A horizontal navigation bar with links to different pages. Hover effects are implemented to improve user experience and indicate active links.

<nav>
  <ul>
    <li><a href="Home.html">Home</a></li>
    <li><a href="AboutMe.html">About Me</a></li>
    <li><a href="Projects.html">Projects</a></li>
    <li><a href="Contact.html">Contact</a></li>
  </ul>
</nav>

Interactive Section Hover Effect

Description: The section containing contact details highlights various gradient colors when hovered over, demonstrating advanced hover animations.

section:hover {
  box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0), 
              0 0 25px 10px rgba(255, 0, 0, 0.6),
              0 0 35px 15px rgba(255, 165, 0, 0.6),
              0 0 45px 20px rgba(255, 255, 0, 0.6),
              0 0 55px 25px rgba(0, 255, 0, 0.6),
              0 0 65px 30px rgba(0, 0, 255, 0.6),
              0 0 75px 35px rgba(75, 0, 130, 0.6),
              0 0 85px 40px rgba(238, 130, 238, 0.6);
}

Call-to-Action Button

Description: A LinkedIn button with hover effects and gradient transitions, linking directly to my professional profile.

<button class="linkedin-btn" onclick="window.location.href='https://www.linkedin.com/in/nicole-selo-ojeme-922223157/'">
  My LinkedIn
</button>

.linkedin-btn:hover {
  background: linear-gradient(45deg, #0ef, #ff0080);
  transform: scale(1.05);
}

Contact Form

Description: A sleek, minimalistic form with custom input styles and a gradient button. Input validation ensures that required fields are completed.

<div class="form">
  <div class="inp">
    <input type="text" id="name" class="input" placeholder="Enter your name" required>
  </div>
  <div class="inp">
    <input type="email" id="email" class="input" placeholder="Enter your email" required>
  </div>
  <div class="inp">
    <textarea id="message" class="input" rows="5" placeholder="Your message" required></textarea>
  </div>
  <button class="submit">Submit</button>
</div>