-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathroom.html
More file actions
151 lines (134 loc) · 6.75 KB
/
room.html
File metadata and controls
151 lines (134 loc) · 6.75 KB
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
142
143
144
145
146
147
148
149
150
151
<!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">
<link href="https://fonts.googleapis.com/css?family=Montserrat+Subrayada&display=swap" rel="stylesheet">
<title>Rooms Zoosort</title>
</head>
<body >
<main id="product-list">
<header>
<a href="./index.html"><img src="./images/logo3.png" alt="Zoosort logo"></a>
<nav class="headernav">
<ul>
<li><a href="./room.html">Room</a></li>
<li><a href="./activity.html">Activity</a></li>
<li><a href="./animals.html">Animals</a></li>
<li><a href="./resort.html">Resort</a></li>
<li><a href="./about_us.html">About Us</a></li>
</ul>
</nav>
</header>
<form>
<div id="booking-form">
<div class="form-item">
<label for="form-arrival-date">Arrival Date</label><br>
<input type="date" id="form-arrival-date">
</div>
<div class="form-item">
<label for="form-depature-date">Depature Date</label><br>
<input type="date" id="form-depature-date">
</div>
<div class="form-item">
<label for="form-number-of-guest">Guest</label><br>
<input type="number" id="form-number-of-guest" min="1" max="4">
</div>
<div class="form-item">
<label for="form-room_type">Room Type</label><br>
<select name="form-room_type" id="form-room_type">
<option></option>
<option>Underwater Room</option>
<option>Wetland Room</option>
<option>Cave Room</option>
<option>Grassland Room</option>
</select>
</div>
<div class="form-item">
<input type="button" id="form-availability" value="Book" onclick="window.alert('Your room has been booked.')">
</div>
</div>
</form>
<section class="content">
<article class="list-page-product" data-scroll-class="fadeInBottom">
<a href="underwater_room.html">
<section class="overlay-container">
<img class="list-page-product-img-1" src="./images/animals-deep-ocean-deep-sea-130621.jpg" alt="underwater">
<div class="overlay">
<p class="overlay_text">Find More Details</p>
</div>
</section>
<p class="list-page-product-code">01</p>
<h1 class="list-page-product-name">Underwater Room</h1>
<hr>
<p class="list-page-product-discription">Relax in the sea has never been this easy. Featured floor to ceiling windows allow an imersive view of the underwater world from your bed.</p>
<p class="list-page-product-find-details">Find Details</p>
</a>
</article>
<article class="list-page-product" data-scroll-class="fadeInBottom">
<a href="wetland_room.html">
<p class="list-page-product-code">02</p>
<h1 class="list-page-product-name">Wetland Room</h1>
<hr>
<p class="list-page-product-discription">Obsessed with flamingos? This is the best place to be in the world. Located right next to the Flamingo Lake, you will enjoy a prepium view over Blackhorse Wetland and these lovely pink feathered birds.</p>
<p class="list-page-product-find-details">Find Details</p>
<section class="overlay-container">
<img class="list-page-product-img-2" src="./images/animals-black-background-colors-1327405-2.jpg" alt="wetland">
<div class="overlay">
<p class="overlay_text">Find More Details</p>
</div>
</section>
</a>
</article>
<article class="list-page-product" data-scroll-class="fadeInBottom">
<a href="cave_room.html">
<section class="overlay-container">
<img class="list-page-product-img-3" src="./images/animal-cheetah-feline-2553357.jpg" alt="cave">
<div class="overlay">
<p class="overlay_text">Find More Details</p>
</div>
</section>
<p class="list-page-product-code">03</p>
<h1 class="list-page-product-name">Cave Room</h1>
<hr>
<p class="list-page-product-discription"> Are you an animal lover or a thrill seaker? Adjoined to a variety of habitats across Zoosort, a glass wall is all between you and the most fierce animals in the world. </p>
<p class="list-page-product-find-details">Find Details</p>
</a>
</article>
<article class="list-page-product" data-scroll-class="fadeInBottom">
<a href="grassland_room.html">
<p class="list-page-product-code">04</p>
<h1 class="list-page-product-name">Grassland Room</h1>
<hr>
<p class="list-page-product-discription">A home away from home. An Africa away from Africa. Featuring balconies with panoramic views over the vast Blackhorse Grassland, you even have the opportunity to hand feed a giraffe on the balcony. </p>
<p class="list-page-product-find-details">Find Details</p>
<section class="overlay-container">
<img class="list-page-product-img-4" src="./images/africa-animal-bush-2387872.jpg" alt="grassland">
<div class="overlay">
<p class="overlay_text">Find More Details</p>
</div>
</section>
</a>
</article>
</section>
<div id="scroll-down" data-scroll-class="fadeOutBottom">
<img src="./images/arrow.png" alt="scroll-down-arrow">
<p>Scroll Down</p>
</div>
<footer>
<nav class="foottool">
<ul>
<li><a id="book-now" href="#">BOOK A ROOM</a></li>
<li><a id="activity-planner" href="#">ACTIVITY PLANNER</a></li>
<li><a id="contact-us" href="#">CONTACT US</a></li>
</ul>
</nav>
</footer>
</main>
<script src="./js/jquery-3.4.1.min.js"></script>
<script src="./js/script.js"></script>
<script src="./js/scrollClass.min.js"></script>
</body>
</html>