Mail-Karo/contactUs.html at main · Creativeklvn/Mail-Karo · 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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Mail Karo – Contact Us</title>

  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">

  <!-- Icons -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

  <!-- Contact page styles -->
  <link rel="stylesheet" href="Homepage CSS/contactUs.css">
</head>

<body>
  <main class="mk-page yellow-glow-bg" id="contact-particle-area">

    <!-- HERO -->
    <header class="mk-hero">
      <div class="mk-hero-inner">
        <h1 class="mk-title">Mail Karo</h1>
        <p class="mk-subtitle">Contact Us - we're here to help</p>
        <p class="mk-lead">
          Fast. Private. Secure. Send us a message and we'll get back to you soon.
        </p>
      </div>
    </header>

    <!-- CONTACT SECTION (YELLOW BG + PARTICLES APPLIED HERE) -->
    <section class="mk-section mk-form-section yellow-glow-bg" id="contact-particle-area">
      <div class="container">
        <div class="panel glass" data-animate>

          <!-- LEFT -->
          <div class="panel-left">
            <h2 class="panel-heading">Say hello</h2>
            <p class="panel-text">
              Have feedback, a question or a partnership idea?
              Drop a message and we'll reply within 48 hours.
            </p>

            <ul class="contact-meta">
              <li><i class="fas fa-shield-alt"></i> No data collected • Client-side only</li>
              <li><i class="fas fa-bolt"></i> Fast replies • Friendly team</li>
            </ul>

            <div class="social-compact">
              <a href="https://x.com/AdarshMi18" class="social-icon" target="_blank">
                <i class="fab fa-x-twitter"></i>
              </a>
              <a href="https://github.com/Code-By-Adarsh/Mail-Karo" class="social-icon" target="_blank">
                <i class="fab fa-github"></i>
              </a>
              <a href="https://www.linkedin.com/company/mail-karo/" class="social-icon" target="_blank">
                <i class="fab fa-linkedin"></i>
              </a>
            </div>
          </div>

          <!-- RIGHT (FORM) -->
          <form id="contactForm" class="panel-right" novalidate data-animate>

            <div class="field-row">
              <div class="input-group">
                <label for="name">Full name</label>
                <input id="name" name="name" type="text" placeholder="Jane Doe" required>
                <small class="input-error">This field is required</small>
              </div>

              <div class="input-group">
                <label for="email">Email</label>
                <input id="email" name="email" type="email" placeholder="you@example.com" required>
                <small class="input-error">Enter a valid email</small>
              </div>
            </div>

            <div class="input-group">
              <label for="subject">Subject</label>
              <input id="subject" name="subject" type="text" placeholder="What is this about?" required>
              <small class="input-error">This field is required</small>
            </div>

            <div class="input-group">
              <label for="message">Message</label>
              <textarea id="message" name="message" rows="6" placeholder="Tell us more..." required></textarea>
              <small class="input-error">This field is required</small>
            </div>

            <div class="form-actions">
              <button id="submitBtn" class="btn primary" disabled>
                <span class="btn-text">Submit</span>
              </button>

              <button type="button" class="btn ghost back-btn" onclick="location.href='index.html'">
                Back
              </button>

              <button type="button" class="btn ghost back-btn"
                onclick="location.href='https://forms.gle/P6ZuD96CJK6jcWMP7'">
                Give Feedback
              </button>
            </div>

            <div id="formToast" class="toast"></div>
          </form>

        </div>
      </div>
    </section>

    <!-- FOOTER -->
    <footer class="mk-footer">
      <div class="container footer-inner">
        <div class="footer-left">
          <h3>Mail Karo</h3>
          <p class="muted">
            Built with privacy-first principles. &copy; <span id="year"></span> Mail Karo
          </p>
        </div>

        <div class="footer-right">
          <nav class="footer-links">
            <a href="index.html">Home</a>
            <a href="All-pages-html/privacyPolicy.html">Privacy Policy</a>
            <a href="All-pages-html/terms-of-service.html">Terms</a>
          </nav>
        </div>
      </div>
    </footer>

  </main>

  <!-- SUCCESS MODAL -->
  <div id="successModal" class="success-modal">
    <h2>Message Sent</h2>
    <p>Thanks for reaching out 🙌<br>We usually reply within 24–48 hours.</p>
    <button class="modal-ok-btn" onclick="closeSuccessModal()">Okay</button>
  </div>

  <!-- JS -->
  <script src="Homepage JS/contactUs.js"></script>
</body>
</html>