-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
148 lines (141 loc) · 7.77 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
142
143
144
145
146
147
148
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Bree+Serif&family=GFS+Didot&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=GFS+Didot&display=swap" rel="stylesheet">
<link rel="stylesheet" href="home_style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/25118ccfa6.js" crossorigin="anonymous"></script>
</head>
<body>
<!-- Header -->
<header class="header">
<div class="branding">
<!-- logo -->
<img src="Team_6_Images/Cow_Logo_Circle.png" alt="Highland Cow Logo">
</div>
<div id="mainnav">
<ul>
<li class="current"><a href="index.html"><span class=fa><i class="fa-brands fa-fort-awesome"></i></span>Home</a></li>
<li><a href="Rooms.html"><span class=fa><i class="fa-solid fa-bed"></i></span>Rooms</a></li>
<li><a href="restaurant.html"><span class=fa><i class="fa-solid fa-utensils"></i></span>Restaurant</a></li>
<li><a href="spa.html"><span class=fa><i class="fa-solid fa-spa"></i></span>Spa</a></li>
</ul>
</div>
</header>
<!-- Main Page Content -->
<div class="container">
<h1>Home</h1>
<div id="showcase">
<div class="showcase-content">
<h1>Welcome to the Highland Hotel</h1>
<p>Experience the beauty of the Scottish Highlands</p>
</div>
</div>
<section class="facilities_home">
<div id="rooms">
<a href="Rooms.html">
<h2>Our Rooms</h2>
<p>Our rooms are designed to provide the perfect place to relax and unwind after a day of exploring the Scottish Highlands. Each room is equipped with a private bathroom, a TV, and a coffee maker. Our rooms are also pet-friendly, so you can bring your furry friend along on your adventure.</p></a>
</div>
<div id="restaurant">
<a href="restaurant.html">
<h2>Our Restaurant</h2>
<p>Our restaurant offers a variety of delicious dishes made with fresh, locally-sourced ingredients. Whether you're in the mood for a hearty breakfast, a light lunch, or a gourmet dinner, our restaurant has something for everyone. We also offer a selection of fine wines and craft beers to complement your meal.</p></a>
</div>
<div id="spa">
<a href="spa.html">
<h2>Our Spa</h2>
<p>Our spa is the perfect place to relax and rejuvenate during your stay. We offer a range of treatments, including massages, facials, and body scrubs, to help you unwind and de-stress. Our spa also features a sauna and a steam room, so you can enjoy a truly indulgent experience.</p></a>
</div>
<div id="lounge">
<a href="index.html">
<h2>Our Lounge</h2>
<p>Put your feet up and relax in front of a roaring fire. Borrow a book or boardgame from our shelves and unwind with stunning views of the loch.</p></a>
</div>
<div id="bar">
<a href="index.html">
<h2>Our Bar</h2>
<p>Learn about whisky from our knowledgable barman, Dougal. Let him take you on a taste adventure.</p></a>
</div>
</section>
<!-- Slideshow container -->
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<div class="numbertext">1 / 5</div>
<img src="Highland_Hotel_Images/Castle_West.jpg" style="width:100%">
<div class="text">From the West</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 5</div>
<img src="Highland_Hotel_Images/Castle_Night.jpg" style="width:100%">
<div class="text">The Castle at Night</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 5</div>
<img src="Highland_Hotel_Images/Castle_Loch.jpg" style="width:100%">
<div class="text">The Castle at Dawn</div>
</div>
<div class="mySlides fade">
<div class="numbertext">4 / 5</div>
<img src="Highland_Hotel_Images/Castle_Sunset.jpg" style="width:100%">
<div class="text">Sunset from the East</div>
</div>
<div class="mySlides fade">
<div class="numbertext">5 / </div>
<img src="Highland_Hotel_Images/Highland_Cow.jpg" style="width:100%">
<div class="text">Meet Our Neighbours</div>
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<!-- The dots/circles -->
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span>
<span class="dot" onclick="currentSlide(5)"></span>
</div>
<h2>Book Your Stay</h2>
<p>Ready to experience the beauty of the Scottish Highlands? Book your stay at the Highland Hotel today and start planning your adventure.</p>
<a href="Rooms.html#booking_form"><button class="book_now" type="button">Book Now</button></a>
<div id="reviews">
<h2>What Our Guests Say</h2>
<p>"The Highland Hotel is the perfect place to stay if you want to explore the Scottish Highlands. The rooms are comfortable, the food is delicious, and the staff are friendly and helpful. I can't wait to come back!"</p>
<span><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i></span>
<p>"I had an amazing experience at the Highland Hotel. The spa treatments were so relaxing, and the food in the restaurant was incredible. I would highly recommend this hotel to anyone looking for a luxurious getaway."</p>
<span><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i></span>
</div>
<div id="map">
<h2>Where to Find Us</h2>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2156.990191568831!2d-5.518733422581697!3d57.27389567368505!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x488e9119ab2d938d%3A0xb3238d97fcbf65d3!2sEilean%20Donan%20Castle!5e0!3m2!1sen!2suk!4v1709733205351!5m2!1sen!2suk" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</div>
</body>
<!-- Footer -->
<Footer class="Footer">
<ul id="social_links">
<li><a href="https://www.instagram.com/"><i class="fa-brands fa-instagram fa-2x"></i></a></li>
<li><a href="https://facebook.com"><i class="fa-brands fa-facebook fa-2x"></i></a></li>
<li><a href="https://Pinterest.com"><i class="fa-brands fa-pinterest fa-2x"></i></a></li>
<li><a href="https://youtube.com"><i class="fa-brands fa-youtube fa-2x"></i></a></li>
</ul>
<p>Copyright © Team 6 2024</p>
<p>Terms & Conditions</p>
<p>Privacy Policy</p>
</Footer>
<script src="home_script.js"></script>
</html>