AnimateItNow/contact.html at main · Praneetha-B5/AnimateItNow · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Contact | AnimateItNow</title>
  <link rel="stylesheet" href="styles.css" />
  <link rel="icon" type="image/png" href="images/logo.png" />
</head>

<body class="contact">
  <nav class="navbar scroll-fade">
    <div class="nav-left">
      <img src="images/logo.png" alt="AnimateItNow Logo" class="logo" />
      <span class="site-name">Animate It Now</span>
    </div>
    <div class="nav-right">
      <ul class="nav-links">
        <li><a href="index.html">Home</a></li>
        <li><a href="templates.html">Templates</a></li>
        <li><a href="contributors.html">Contributors</a></li>
        <li><a href="contact.html" class="active">Contact</a></li>
        <li>
          <button id="theme-toggle" aria-label="Toggle dark/light mode">🌙</button>
        </li>
      </ul>
    </div>
  </nav>

  <main class="main-section scroll-fade">
    <div class="contact-main">
      <h1 class="fade-in">Get in Touch</h1>
      <div class="contact-container scroll-fade">
        <form class="contact-form">
          <div class="form-group scroll-fade">
            <label for="name">Name</label>
            <input type="text" id="name" name="name" placeholder = "Enter your name" required>
          </div>

          <div class="form-group scroll-fade">
            <label for="email">Email</label>
            <input type="email" id="email" name="email"placeholder = "Enter your email id (e.g. john@gmail.com)" required>
          </div>

          <div class="form-group scroll-fade">
            <label for="subject">Subject</label>
            <input type="text" id="subject" name="subject"placeholder = "Enter the subject" required>
          </div>

          <div class="form-group scroll-fade">
            <label for="message">Message</label>
            <textarea id="message" name="message" rows="5"placeholder = "Enter the message you want to convey" required></textarea>
          </div>

          <div class="contact-button scroll-fade">
            <button type="submit" class="submit-btn">Send Message</button>
          </div>
        </form>
      </div>
    </div>
  </main>

  <footer class="footer scroll-fade">
    <div class="footer-content">
      <div class="footer-left">
        <h2>AnimateItNow</h2>
        <p>Creating impactful web animations and templates for everyone.</p>
      </div>
      <div class="footer-right">
        <h4>Connect With Us</h4>
        <ul>
          <li><a href="https://github.com/" target="_blank" rel="noopener noreferrer">🌐 GitHub</a></li>
          <li><a href="https://linkedin.com/" target="_blank" rel="noopener noreferrer">💼 LinkedIn</a></li>
          <li><a href="mailto:contact@animateitnow.com" rel="noopener noreferrer">📧 Email Us</a></li>
        </ul>
      </div>
    </div>
    <div class="footer-bottom">
      <p>© 2025 AnimateItNow. Made with ❤️ by <span class="highlight">Anuj</span> and Contributors.</p>
    </div>
  </footer>
  <div id="cursor-snake"></div>
  <script src="script.js"></script>
</body>

</html>