FED_10270399D_AngShunXiang_Assg1_website/contact.html at main · C0hErYl/FED_10270399D_AngShunXiang_Assg1_website · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Us</title>

    <link rel="stylesheet" href="css_folder/styles.css">
    <link rel="stylesheet" href="css_folder/Normalize.css">
    <link rel="stylesheet" href="css_folder/volume.css">
    <link rel="stylesheet" href="css_folder/cart.css">
</head>
<body>
    <header>
        <nav class="navbar">
            <div class="logo">
                <a href="index.html">
                    <img src="imgs_folder/smiths-logo.png" alt="The Fictional Band">
                </a>
            </div>

            <!-- Navigation Links -->
            <ul class="nav-links" id="navLinks">
                <li><a href="index.html">Home</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="shows.html">Upcoming Shows</a></li>
                <li><a href="music.html">Videos</a></li>
                <li><a href="gallery.html">Gallery</a></li>
                <li><a href="store.html">Store</a></li>
                <li><a href="contact.html" class="active">Contact</a></li>
            </ul>

            <!-- Hamburger menu icon -->
            <div class="menu-icon" id="menuIcon">
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
            </div>
        </nav>
    </header>
    <h4></h4>
    <section id="contact" class="dash">
        <h1 class="page_title">Contact Us</h1>
        <form id="contactForm">
            <label for="name">Name:</label>
            <input type="text" id="name" required>

            <label for="email">Email:</label>
            <input type="email" id="email" required>

            <label for="message">Message:</label>
            <textarea id="message" required></textarea>

            <button type="submit">Send</button>
        </form>

        <!-- Thank You Message -->
        <div id="thankYouMessage" style="display: none;">
            <h3>Thank you for contacting us!</h3>
            <p>We will get back to you shortly.</p>
        </div>
    </section>

    <button class="button-container" id="view-cart" onclick="window.location.href='cart.html'">
        View Cart
    </button>
    <h4></h4>
    <!-- Footer -->
    <footer>
        <p>&copy; 2024 The Fictional Band. All rights reserved.</p>
        <p>Follow us on
            <a href="https://www.facebook.com/TheSmiths/" target="_blank">Facebook</a>,
            <a href="https://www.instagram.com/thesmithsofficial/?hl=en" target="_blank">Instagram</a>,
            <a href="http://www.officialsmiths.co.uk/tqid/" target="_blank">OfficialSmiths</a> and
            <a href="https://lnk.to/TheSmithsHits" target="_blank">Music</a>
        </p>
    </footer>

    <!-- Audio -->
    <audio id="background-music" autoplay loop>
        <source src="videoAudio_folder/80x27s-old-school-rock-248901.mp4" type="audio/mpeg">
    </audio>

    <!-- Volume Button -->
    <div id="volumeButton">
        <i class="volume-icon">🔊</i>
    </div>

    <!-- Mute Button -->
    <div id="muteButton">
        <i class="mute-icon">🔇</i>
    </div>

    <!-- Volume Slider Container (Initially hidden) -->
    <div id="volumeSliderContainer">
        <input type="range" id="volumeSlider" min="0" max="1" step="0.1" value="0.5">
    </div>

    <script src="js_folder/app.js"></script>
    <script src="js_folder/volume.js"></script>
</body>
</html>