-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsubscribe.html
99 lines (90 loc) · 4.47 KB
/
subscribe.html
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
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width= , initial-scale=1.0">
<link rel="stylesheet" href="assets/css/style.css">
<title>Subscribe!</title>
</head>
<body>
<header> <!--This should stay in the beginning of the page-->
<nav>
<!--To navigate in the website-->
<ul>
<li id="Top"><a href="index.html">Home Page</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="firtVisit.html">You First Visit</a></li>
<li><a href="courses.html">Our Courses</a></li>
<li><a href="shop.html">Gear Up!</a></li>
</ul>
</nav>
</header>
<main>
<section>
<picture>
<img src="assets\images\pexels-pavel-danilyuk-7591327.jpg" id="hero-pic"
alt="Hero picture. Two hands of man holds two boulders of a bouldering wall." />
</picture>
<div id="tex-box-2">
<h1>Subscribe!</h1>
</div>
</section>
<section>
<h2>Subscribe to Boulderpalooza</h2>
<p>Ready to become a part of the Boulderpalooza community and enjoy all the perks of our bouldering gym?
Fill out the form below to subscribe and stay updated on the latest news, events, and exclusive offers.
</p>
</section>
<section>
<h3>Subscription Form:</h3>
<form onsubmit="" method="get" name="subscriptionForm">
<!--I need to understand better the "onsubmit" and the "get"-->
<fieldset>
<legend>Personal Data</legend>
Full Name:<sup>* </sup><input type="text" name="name" autofocus required /><br>
<!--autofocus makes that when you load the page, that field is already selected-->
<!--"sup" makes whatever is in between to go higher-->
Email:<sup>* </sup> <input placeholder="myemail@email.com" type="email" name="email" required /><br>
<!--placeholder "writes" something as an example-->
Age:<sup>* </sup> <input type="number" min="8" max="100" style="width: 45px" name="age" required />
<!--The style in this line changes the size of the box--><br>
Birthday:<sup>*</sup> <input type="date" name="birthday" required /> <br>
Phone Number:<sup>* </sup> <input type="tel" name="phone" required /><br>
<!--There us a type called "tel" that it is used for phone numbers, I need to understand how to use it together with the "pattern" atribute-->
</fieldset>
<fieldset>
<legend>Subscription Type</legend>
Preferred Subscription Type:<sup>* </sup>
<Select name="subscription" required> <!--"Select" makes a drop down menu-->
<option value="">Choose your subscription</option>
<option value="annual">Annual</option>
<option value="monthly">Monthly</option>
<option value="family">Familly</option>
<option value="kidsAnnual">Kids Annual</option>
<option value="kidsMontly">Kids Monthly</option>
<option value="student">Student</option>
</Select><br>
Comments/Questions: <textarea name="comments"></textarea><br>
</fieldset>
</section>
<aside>
<h3>Terms and Conditions:</h3>
<p>By subscribing to Boulderpalooza, you agree to our terms and conditions. Please review our
[link to Terms and Conditions page] for more details.</p>
<p>Once you've submitted your subscription request, a member of our team will get in touch with you to
finalize
the process and welcome you to the Boulderpalooza family.
<!--This make a invisible line in the page--> <br>
Thank you for choosing Boulderpalooza: A Bouldering Odyssey as your climbing destination! We can't
wait
to
climb and laugh with you.
</p>
<button type="submit"> Subscribe</button>
</aside>
</form>
</main>
<footer>
<p><a href="#Top">Back to the top</a></p>
</footer>
</body>
</html>