AdventureSignUpForm/index.html at main · zagrosjawar/AdventureSignUpForm · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Adventure Signup</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/styles.css"> <!-- Updated the path -->
</head>
<body>
    <h2>Sign up for your next adventure!</h2>
    <iframe
        src="https://www.youtube.com/embed/ywlUN3yg4K8"
        title="YouTube video player" frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen>
    </iframe>
    <section>
        <form action="#" method="post">
            <fieldset>
                <legend>Personal Information</legend>
                <label class="form-label-personal" for="fname">First name:</label>
                <input class="form-input" type="text" id="fname" name="fname" required>

                <label class="form-label-personal" for="lname">Last name:</label>
                <input class="form-input" type="text" id="lname" name="lname" placeholder="MIX114">

                <label class="form-label-personal" for="email">Email:</label>
                <input class="form-input" type="email" id="email" name="email" required>
            </fieldset>

            <fieldset>
                <legend>Additional Details</legend>
                <div>
                    <input type="radio" id="male" name="gender" value="male">
                    <label class="form-label" for="male">Male</label>

                    <input type="radio" id="female" name="gender" value="female">
                    <label class="form-label" for="female">Female</label>
                </div>
                <label class="form-label" for="bodyShape">Body Shape:</label>
                <select class="form-input" name="bodyShape" id="bodyShape">
                    <option value="CrossFit">CrossFit</option>
                    <option value="Powerlifter">Powerlifter</option>
                    <option value="RegularExercise" selected>Regular exercise</option>
                    <option value="Athletic">Athletic</option>
                </select>

                <div>
                    <input type="checkbox" id="europe" name="location">
                    <label class="form-label" for="europe">Europe</label>
                    <input type="checkbox" id="asia" name="location">
                    <label class="form-label" for="asia">Asia</label>
                    <input type="checkbox" id="america" name="location">
                    <label class="form-label" for="america">America</label>
                </div>

                <label class="form-label" for="bmi">BMI (20-30):</label>
                <input class="form-input" type="range" id="bmi" name="bmi" min="20" max="30" step="1" value="25">

                <label class="file-label" for="myfile">Your photo:</label>
                <input class="form-input" type="file" id="myfile" name="myfile">

                <label class="form-label" for="comment">Comment:</label>
                <textarea class="form-input" id="comment" name="comment" rows="4" cols="40"></textarea>
            </fieldset>

            <div class="form-controls">
                <input class="button" type="submit" value="Submit">
                <input class="button button-reset" type="reset" value="Reset">
            </div>
        </form>
    </section>
    <footer>
        <a href="https://github.com/zagrosjawar/AdventureSignUpForm" target="_blank">View Source on GitHub</a>
    </footer>
</body>
</html>