Addminiproject/contact.html at main · JiyaBatra/Addminiproject · 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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline' https://cdnjs.cloudflare.com; img-src 'self' data: https:; font-src 'self' data: https://cdnjs.cloudflare.com; media-src 'self' data:; connect-src 'self'; object-src 'none'; base-uri 'self'; frame-ancestors 'self'; form-action 'self'; upgrade-insecure-requests">
    <title>Contact | Add Mini Project</title>

    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="contact.css">
    <link rel="stylesheet" href="3d-effects.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
</head>

<body class="contact-page">
    <div id="navbar"></div>

    <main class="contact-main">
        <section class="contact-hero">
            <p class="contact-eyebrow" data-motion="fade" data-motion-on="load">Let Us Connect</p>
            <h1 data-motion="stagger" data-stagger="letters" data-motion-on="load">Get in Touch &#10024;</h1>
            <p data-motion="slide" data-motion-on="load" data-motion-delay="180ms">
                Have an idea, feedback, or contribution question? Reach out and we will help you get started quickly.
            </p>
        </section>

        <section class="contact-layout" data-motion="slide" data-motion-on="scroll">
            <article class="contact-info-card">
                <h2 data-motion="fade" data-motion-on="scroll">Contact Channels</h2>

                <div class="contact-list">
                    <div class="contact-item">
                        <i class="fas fa-envelope"></i>
                        <div>
                            <span class="contact-item-label">Email</span>
                            <a href="mailto:jiyabatra0007@gmail.com">jiyabatra0007@gmail.com</a>
                        </div>
                    </div>

                    <div class="contact-item">
                        <i class="fab fa-github"></i>
                        <div>
                            <span class="contact-item-label">GitHub</span>
                            <a href="https://github.com/JiyaBatra" target="_blank"
                                rel="noopener noreferrer">JiyaBatra</a>
                        </div>
                    </div>

                    <div class="contact-item">
                        <i class="fab fa-linkedin"></i>
                        <div>
                            <span class="contact-item-label">LinkedIn</span>
                            <a href="https://www.linkedin.com/in/jiya-batra-12b02b289" target="_blank"
                                rel="noopener noreferrer">Jiya Batra</a>
                        </div>
                    </div>

                    <div class="contact-item">
                        <i class="fab fa-discord"></i>
                        <div>
                            <span class="contact-item-label">Community</span>
                            <a href="https://discord.gg/PzvvW59g" target="_blank" rel="noopener noreferrer">Contribution
                                Help</a>
                        </div>
                    </div>
                </div>

                <p class="contact-note">Always open to collaboration and creative ideas.</p>
            </article>

            <article class="contact-form-card">
                <h2 data-motion="stagger" data-stagger="words" data-motion-on="scroll">Send a Message</h2>

                <form class="contact-form" method="post" id="contactForm">
                    <div class="input-group">
                        <input name="name" type="text" autocomplete="name" required>
                        <label>Your Name</label>
                    </div>

                    <div class="input-group">
                        <input name="email" type="email" autocomplete="email" required>
                        <label>Your Email</label>
                    </div>

                    <div class="input-group">
                        <input name="subject" type="text" autocomplete="off" required>
                        <label>Subject</label>
                    </div>

                    <div class="input-group">
                        <textarea name="message" rows="5" required></textarea>
                        <label>Your Message</label>
                    </div>

                    <button type="submit" class="send-btn">Send Message &#10024;</button>
                </form>
            </article>
        </section>
    </main>

    <div id="footer"></div>

    <div class="cursor">
        <video src="Assets/butterfly.mp4" autoplay muted loop playsinline aria-hidden="true"></video>
    </div>
    <div class="sparkle-container"></div>

    <script>
      fetch("components/navbar.html")
        .then((res) => res.text())
        .then((data) => {
          document.getElementById("navbar").innerHTML = data;
        });
    </script>

    <script>
      fetch("components/footer.html")
        .then((res) => res.text())
        .then((data) => {
          document.getElementById("footer").innerHTML = data;
        });
    </script>

    <script src="auth.js"></script>
    <script>
        checkAuth();
        showLoggedInUser();
    </script>
    <script src="script.js"></script>
    <script src="form-config.js"></script>
</body>

</html>