-
Notifications
You must be signed in to change notification settings - Fork 0
/
rooms.html
133 lines (112 loc) · 4.9 KB
/
rooms.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
<!DOCTYPE html>
<html>
<head>
<!-- Title of room and link to style sheet-->
<title>Rooms & Rates</title>
<meta name="decription"content ="Galway bed and breakfast">
<link rel="stylesheet" href="styles.css"/>
</head>
<body>
<!--Navigation for the page -->
<header class="main-header">
<nav class="nav main-nav">
<ul>
<li><a href="index.html"> Home </a></li>
<li><a href="rooms.html"> Rooms and Rates </a></li>
<li><a href="sightseeing.html"> Sightseeing Tours </a></li>
<li><a href="contact.html"> Contact us </a></li>
<!-- anchor to bring to book now part of page-->
<li><a href="rooms.html#anchor"> Book Now </a></li>
</ul>
</nav>
<h1 class="bandb-name bandb-name-large">Gillian's Bed and Breakfast</h1>
</header>
<section class="content-section container">
<h2 class="section-header"> Rooms and Rates </h2>
<!-- instructions for the user if they dont realise they can scroll down-->
<h3 class="small-header"> Please scroll down to book your stay </h3>
<div class ="rooms">
<div class="room">
<span class="room-name"> Large Double Room </span>
<img class="room-img" src="images/double.jpeg" alt = "Large Double Room">
<div class="details">
<span class="room-price"> €100.00 </span>
<!--More information about the rooms on a seperate page that is now viewable from the nav-->
<a href="Largedouble.html"> <button class="btn" role = "button"> More Info</button> </a>
</div>
</div>
<div class="room">
<strong class="room-name"> Quad Room </strong>
<img class="room-img" src="images/triple.jpeg" alt = "Triple Room" >
<div class="details">
<span class="room-price"> €120.00 </span>
<a href="Quadroom.html"> <button class="btn" role = "button"> More Info</button> </a>
</div>
</div>
<div class="room">
<strong class="room-name"> Small Double Room </strong>
<img class="room-img" src="images/smalldouble.jpeg" alt = "Small Double Room" >
<div class="details">
<span class="room-price"> €80.00 </span>
<a href="Smalldouble.html"> <button class="btn" role = "button"> More Info</button> </a>
</div>
</div>
<div class="room">
<strong class="room-name"> Twin Room </strong>
<img class="room-img" src="images/twin.jpeg" alt = "Twin Room" >
<div class="details">
<span class="room-price"> €80.00 </span>
<a href="Twinroom.html"> <button class="btn" role = "button"> More Info</button> </a>
</div>
</div>
</div>
</section>
<hr>
<a id="anchor"></a>
<section class="content-section container">
<h2 class="section-header">Book Now</h2>
<div class="contact-form-area-outer">
<div class="contact-form-area-inner">
<div id="error"></div>
<form id = "form" class="contact-form" action="/" method="GET">
<div>
<!-- Details for booking -->
<input type="text" name="fullname" id="fullname" placeholder="Enter Name">
<input type="email" name="email" placeholder="Enter Email">
<label for="check-in"> Check-in date:</label>
<input type="date" name="Check-in" placeholder="date">
<label for="check-out"> Check-out date:</label>
<input type="date" name="Check-out" placeholder="date">
<label for="rooms">Room Selection</label>
<select name="rooms" class="rooms">
<option value = "Quad Room"> Quad Room €120.00 per night </option>
<option value = "Large Double Room"> Large Double Room €100.00 per night </option>
<option value = "Small Double Room"> Small Double Room €80.00 per night </option>
<option value = "Twin Room"> Twin Room €80.00 per night </option> </div>
<textarea name="messaage" paceholder="Fill in any Special Requests"></textarea>
</form>
</div>
<div class = "wrapper">
<!---->
<button onclick="my_button_click_handler()"type="Submit" class="btn"> Submit </button>
<script>
function my_button_click_handler()
{
alert('Congratulations, you are booked, please check your email for your confirmaiton email');
}
</script>
</div>
</div>
</section>
<footer class="main-footer">
<div class="container main-footer-container">
<h3 class="footer-name">Gillians bed and breakfast</h3>
<ul class="nav footer-nav">
<li><a href="https://www.facebook.com" target="_blank"> <img src = "images/facebooklogo.png"alt = "Facebook logo"></li>
<li><a href="https://www.instagram.com" target="_blank"> <img src = "images/instagramlogo.png" alt = "Instagram logo"></li>
<li><a href="https://www.whatsapp.com" target="_blank"> <img src = "images/whatsapplogo.png" alt = "Whatsapp logo" ></li>
</ul>
</footer>
<script src="assets/main.js"> </script>
</body>
</html>