-
Notifications
You must be signed in to change notification settings - Fork 0
/
bookbord.html
140 lines (128 loc) · 4.86 KB
/
bookbord.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/style.css">
<title>Book bord</title>
</head>
<body>
<!-- navigationsbar com--> <!-- Selvstudiedag 2 Spørgsmål 1 -->
<nav class="navbar">
<a href="index.html" class="nav-logo"><img src="images/logo.png" alt="Alices Restaurant logo" style="width: auto; height:55px;"></a>
<ul class="nav-menu">
<li class="nav-item">
<a href="menu.html" class="nav-link">MENU</a>
</li>
<li class="nav-item">
<a href="bookbord.html" class="nav-link">BOOK BORD</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">ÅBNINGSTIDER</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">OM OS</a>
</li>
</ul>
<!-- navigationsbar mobil-->
<div id="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</nav>
<nav class="navbarmobil">
<ul id="showBrg">
<li class="nav-item">
<a href="menu.html" class="nav-link">MENU</a>
</li>
<li class="nav-item">
<a href="bookbord.html" class="nav-link">BOOK BORD</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">ÅBNINGSTIDER</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">OM OS</a>
</li>
</ul>
</nav>
<!-- content -->
<header class="undersideHeader">
<img src="images/et-kopi.png" alt="Tallerken med mad fra Alice's Restaurant" style="width: 100%; height: auto;">
<h1>Reserver bord</h1>
<h4>Velkommen til online booking for Alice's Restaurant</h4>
<p>Reservationen er gennemført, når du har modtaget en bekræftelse pr. mail fra os. <br>
For reservationer af selskaber på over 8 personer, skal der rettes henvendelse på info@alicesrestaurant.dk</p>
<p>Vi glæder os til at byde jer indenfor til en god aften.</p>
</header>
<form name="myForm" action="action.html" onsubmit="return validateForm()" method="post">
<fieldset id="navn">
<legend>Indtast navn og email</legend>
<div class="navnskrift">
Navn: <input type="text" name="name" value=""> <br>
Email: <input type="text" name="email" value=""> <br>
</div>
<div class="btn1Placering">
<p>Udfyld & book bord</p>
<p>1 af 4</p>
<div id="btn1" class="alleKnapperne">Næste</div>
</div>
</fieldset>
<fieldset id="gæster">
<legend>Vælg <b>antal gæster</b></legend>
<!-- radio buttons -->
<label for="quantity">Antal gæster:</label>
<input type="number" id="quantity" name="quantity" min="1" max="8"><br>
<p class="bemærkGæster">For reservationer af selskaber på over 8 personer, skal der rettes henvendelse på info@alicesrestaurant.dk</p>
<div class="knapperPlacering">
<div id="tilbagebtn1" class="alleKnapperne">Tilbage</div>
<p>2 af 4</p>
<div id="btn2" class="alleKnapperne">Næste</div>
</div>
</fieldset>
<fieldset id="tidspunkt">
<legend>Vælg <b>tidspunkt</b></legend>
<label for="dato">Dato:</label>
<input type="date" id="dato" name="dato">
<label for="appt">Tidspunkt:</label>
<input type="time" id="appt" name="appt"><br>
<div class="knapperPlacering">
<div id="tilbagebtn2" class="alleKnapperne">Tilbage</div>
<p>3 af 4</p>
<div id="btn3" class="alleKnapperne">Næste</div>
</div>
</fieldset>
<fieldset id="radio">
<legend>Vælg mellem</legend>
<!-- radio buttons -->
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">Normalt bord (2,5 time)</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">Quick bord (1,5 time)</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">Teatermenu (2 timer)</label>
<div class="knapperPlacering">
<div id="tilbagebtn3" class="alleKnapperne">Tilbage</div>
<p>4 af 4</p>
<div id="btn4" class="alleKnapperne">Næste</div>
</div>
</fieldset>
<fieldset id="lastField">
<legend>Det var det, tak for dine svar</legend>
<p class="bemærkLast">Send for at gennemføre din reservation. <br> Du vil hurtigst muligt modtage en bekræftelse pr. mail fra os. </p>
<div class="knapperPlacering">
<div id="tilbagebtn4" class="alleKnapperne">Tilbage</div>
<input id="send" type="submit" value="Send">
</div>
</fieldset>
</form>
<!-- Selvstudiedag 1 Spørgsmål 1 + 2 -->
<footer>
<p id="footerInfo"></p>
</footer>
<!-- scripts -->
<script src="js/bookBord.js"></script>
</body>
</html>