-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
141 lines (130 loc) · 5.09 KB
/
index.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
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
135
136
137
138
139
140
141
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Project 3: The Business Site</title>
<link rel="stylesheet" href="./style.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat|Open+Sans+Condensed:300|Playfair+Display&display=swap"
rel="stylesheet">
<!-- dont forget to add a css file and link it here! -->
</head>
<body>
<!-- Header -->
<div class="header-n-content">
<header>
<div class="hero-image">
<div class="menu">
<a href="#">
<img src="logo.jpeg" alt="Picture of surfer girl">
</a>
<a href="#">
<p>About us</p>
</a>
</div>
<div class="hero-text">
<h1>Stand Up Paddleboard<br> in Bled, slovenia</h1>
<p>Plan your SUP adventure today! We have award winning instructors and the best views in Europe, so what are
you waiting for?</p>
<div id="button" class="button">
<h2 id="h2">Book now</h2>
</div>
<form class="bookingForm" action="http://httpbin.org/anything" method="POST">
<label> Number of people:
<select name="numberOfPeople" id="numberOfPeople" required>
<option value="1">1 person</option>
<option value="2">2 people</option>
<option value="3">3 people</option>
<option value="4">4 people</option>
<option value=">4">More than 4 people</option>
</select>
</label>
<label>Pick a date:
<input type="date" name="date" required>
</label>
<label>What time would you prefer:
<div class="checkbox">
<input type="checkbox" name="time" value="morning"> Morning 10:00-12:00
</div>
<div class="checkbox">
<input type="checkbox" name="time" value="mid-day"> Mid-day 12:00-14:00
</div>
<div class="checkbox">
<input type="checkbox" name="time" value="afternoon"> Afternoon 14:00-16:00
</div>
<div class="checkbox">
<input type="checkbox" name="time" value="sunset"> Sunset 19:00-21:00
</div>
</label>
<label>What's your name?
<input type="text" name="name" required>
</label>
<label>Your cellphone:
<input type="tel" name="telephoneNumber" required>
</label>
<label>E-mail:
<input type="email" name="email" required>
</label>
<label>Anything we should know:
<input type="text" name="note" class="message">
</label>
<button type="submit">Submit</button>
</form>
</div>
</div>
</header>
<!-- Content (Signup form) -->
<div class="tablet-view">
<section class="accordion">
<!-- Accordion -->
<h1>FAQ</h1>
<div class="question" id="section1">What is Stand Up Paddling?</div>
<div class="answer1">
<p>It's a really fun sport where you stand on a board and paddle with a paddle!</p>
</div>
<div class="question" id="section2">If I've never done this before, is this suitable for me?</div>
<div class="answer2">
<p>Yes, yes, yes, even your grandmother could probably do it! As long as you can swim if (and I do say IF),
you
fall in the water you should be fine and have so much fun on the water.</p>
</div>
<div class="question" id="section3">What should I bring?</div>
<div class="answer3">
<p>Swimming suit or training clothes for comfortability, sunscreen, sunhat and a sunny mood.</p>
</div>
<div class="question" id="section4">Where can I store my belongings?</div>
<div class="answer4">
<p>Our instructor has a waterproof bag where you can put your valuables, but the bag is not big so don't
bring
too
much! </p>
</div>
</section>
<!-- Content (Newsletter) -->
<section class="newsletter">
<img src="logo.jpeg" alt="Surfer-girl">
<h2>Sign up for sup <br>news & updates</h2>
<p>Get the latest info straight to your inbox!</p>
<form class="signUp" action="http://httpbin.org/anything" method="POST">
<div>
<input type="email" name="email" placeholder="E-mail" required>
<button type="submit">Hook me up!</button>
</div>
</form>
</section>
</div>
</div>
<!-- Footer -->
<div class="footer">
<footer>
<img src="technigo-logo.svg" alt="Technigo logo">
<div class="footer-text">
<p> This is a school project for the Technigo Bootcamp 2019.<br>Questions? Email: <a
href="mailto:[email protected]">[email protected]</a>
</p>
</div>
</footer>
</div>
<script type="text/javascript" src="./script.js"></script>
</body>
</html>