wdd230/join.html at main · nikitawong19/wdd230 · 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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Malaysia Chamber of Commerce</title>
    <meta name="description" content="WDD 230 Web Frontend Development I">
    <link rel="shortcut icon" href="chamber/images/favicon.ico">
    <link href="chamber/styles/normalize.css" rel="stylesheet">
    <link href="chamber/styles/main.css" rel="stylesheet">
    <link href="chamber/styles/medium.css" rel="stylesheet">
    <link href="chamber/styles/large.css" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
</head>

<body>
    <header>
        <div id="container">
            <div class="logo">
                <figure class="logo">
                    <img src="chamber/images/logo.webp" alt="logo">
                </figure>
                <div class="heading">
                    <h1>Malaysia</h1>
                    <p>Chamber of Commerce</p>
                </div>
            </div>
        </div>
        <button id="hamburgerBtn"><span>&#9776;</span><span>X</span></button>
        <div class="socialIcon">
            <a href="https://www.facebook.com/" target="_blank"><img class="facebookLogo" src="chamber/images/facebook-icon.png" alt="facebook logo"></a>
            <a href="https://www.linkedin.com/" target="_blank"><img class="linkedinLogo" src="chamber/images/linkedin-icon.png" alt="linkedin logo"></a>
        </div>
        <nav>
            <ul id="navigation">
                <li><a href="chamber-home-page-build.html">Home</a></li>
                <li><a href="discover.html">Discover</a></li>
                <li><a href="directory.html">Directory</a></li>
                <li><a href="join.html">Join</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </nav>
        <div class="date"></div>
        <div class="reminder"></div>
    </header>
    <main>
        <h2 class="main-title">Membership Application Form</h2>
        <form method="get" action="thankyou.html">
            <fieldset>
                <legend>Applicant Information</legend>
                <label class="top">First Name*<input type="text" name="fname" required></label>
                <label class="top">Last Name*<input type="text" name="lname" required></label>
                <label class="top">Email*<input type="email" name="email" placeholder="name@domain.com" required></label>
                <label class="top">Phone Number*<input type="tel" name="phone" placeholder="123456789" required></label>
            </fieldset>
            <fieldset>
                <legend>Business Information</legend>
                <label class="top">Business Name/Title*<input type="text" name="name" required></label>
                <label class="top">Business Position/Title<input type="text" name="title" pattern="[A-Za-z -]{7,}"></label>
                Minimum of 7 characters
                <label class="top">Business Description<textarea name="description" cols="30" rows="10"></textarea></label>
            </fieldset>
            <fieldset>
                <legend>Membership Level</legend>
                <label class="sbs"><input type="radio" name="level" value="np membership"> NP Membership</label>
                For non-profit organizations and there is no fee.
                <hr>
                <label class="sbs"><input type="radio" name="level" value="bronze membership"> Bronze Membership</label>
                RM5,000/year. For business looking for networking access to Chamber programming. If you want to participate in Chamber activities but do not need to promote your business through our marketing programmes, join at this level.
                <hr>
                <label class="sbs"><input type="radio" name="level" value="silver membership"> Silver Membership</label>
                RM10,000/year. For business looking Chamber access AND marketing and promotional exposure. Benefit include eligible to place ads in the e-newsletter and on chamber spotlight page in the website.
                <hr>
                <label class="sbs"><input type="radio" name="level" value="gold membership"> Gold Membership</label>
                RM15,000/year. For business looking for higher profile opportunity to market. Benefit include featured once annually on Chamber Facebook page, boosted to 26,000+ viewers in surrounding area and two free tickets to the Annual Awards event.
            </fieldset>
            <input type="hidden" id="date" name="date" value="CurrentTime">
            <input type="hidden" id="time" name="time" value="CurrentDate">
            <input type="submit" value="Join The Chamber" class="submitBtn">
        </form>
    </main>
    <footer>
        <div class="sub-footer1">
            <img src="chamber/images/logo.webp" alt="logo">
            <div class="sub-footer2">
                <p>Malaysia Chamber of Commerce</p>
                <p>15 A, Jalan Rejang 8, Taman Setapak Jaya 53300 Kuala Lumpur.</p><br>
                <a href="https://openweathermap.org/" target="_blank">Weather Data Source</a>
            </div>
            <div class="sub-footer3">
                <p>malaysiachamber.com</p>
                <p>60-126521214</p><br>
                <a href="https://www.google.com/maps/place" target="_blank">Location Map</a>
            </div>
        </div>
        <div class="copyright">
            <span>&copy; 2022 Malaysia Chamber of Commerce | Nikita Wong | WDD 230 Project | <span id="lastModified"></span></span>
        </div>
    </footer>
    <script src="chamber/scripts/function.js"></script>
    <script src="chamber/scripts/currentdate.js"></script>
</body>

</html>