forked from NataliDvinskikh/luxury_hotels
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathfacilities.html
160 lines (155 loc) · 7.95 KB
/
facilities.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
149
150
151
152
153
154
155
156
157
158
159
160
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Facilities</title>
<link rel="icon" href="./images/fav-crown.svg" type="image/svg">
<link rel="stylesheet" href="./styles/normalize.css">
<link rel="stylesheet" href="./styles/index.css">
</head>
<body>
<header class="header__container header__container-facilities">
<nav class="nav">
<img class="header__logo" src="./images/logo.svg" alt="logo">
<ul class="nav__list">
<li><a class="nav__list-item" href="index.html" target="_self">Home</a></li>
<li><a class="nav__list-item" href="facilities.html" target="_self">Facilities</a></li>
<li><a class="nav__list-item" href="rooms.html" target="_self">Rooms</a></li>
<li><a class="nav__list-item" href="contact.html" target="_self">Contact-us</a></li>
</ul>
<div class="burger-menu">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
</nav>
<div class="header__title">
<div class="header__title-main">
<h2 class="header__title-firstLine">WELCOME TO</h2>
<h1 class="header__title-secondLine">LUXURY</h1>
<h2 class="header__title-thirdLine">HOTELS</h2>
</div>
<p class="header__title-descr">Book your stay and enjoy Luxury <br> redefined at the most affordable rates.</p>
</div>
<div class="header__book">
<button class="btn header__book-btn">
<svg class="header__book-btn-svg" width="28" height="26" viewbox="0 0 28 26" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M12.8333 0H15.1667V2.33333H12.8333V0Z" fill="white" />
<path d="M19.8333 0H22.1667V2.33333H19.8333V0Z" fill="white" />
<path d="M5.83333 0H8.16666V2.33333H5.83333V0Z" fill="white" />
<path
d="M26.8333 2.33331H22.1667V5.83331H19.8333V2.33331H15.1667V5.83331H12.8333V2.33331H8.16667V5.83331H5.83333V2.33331H1.16667C0.857247 2.33331 0.560501 2.45623 0.341709 2.67502C0.122916 2.89381 0 3.19056 0 3.49998L0 24.5C0 24.8094 0.122916 25.1061 0.341709 25.3249C0.560501 25.5437 0.857247 25.6666 1.16667 25.6666H26.8333C27.1427 25.6666 27.4395 25.5437 27.6583 25.3249C27.8771 25.1061 28 24.8094 28 24.5V3.49998C28 3.19056 27.8771 2.89381 27.6583 2.67502C27.4395 2.45623 27.1427 2.33331 26.8333 2.33331ZM21.4887 17.2827L19.8333 16.1V21C19.8333 21.3094 19.7104 21.6061 19.4916 21.8249C19.2728 22.0437 18.9761 22.1666 18.6667 22.1666H15.75V17.5C15.75 17.1906 15.6271 16.8938 15.4083 16.675C15.1895 16.4562 14.8927 16.3333 14.5833 16.3333H13.4167C13.1072 16.3333 12.8105 16.4562 12.5917 16.675C12.3729 16.8938 12.25 17.1906 12.25 17.5V22.1666H9.33333C9.02391 22.1666 8.72717 22.0437 8.50837 21.8249C8.28958 21.6061 8.16667 21.3094 8.16667 21V16.1L6.51146 17.2827L5.15521 15.3839L13.3219 9.5506C13.5206 9.4113 13.7573 9.33657 14 9.33657C14.2427 9.33657 14.4794 9.4113 14.6781 9.5506L22.8448 15.3839L21.4887 17.2827Z"
fill="white" />
</svg>
Book now
</button>
<div class="header__scroll">
<div class="scroll header__scroll-text">Scroll</div>
<button class="header__scroll-btn">
<svg class="header__scroll-img" width="61" height="61" viewbox="0 0 61 61" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M30.662 61C23.6269 60.9939 16.8101 58.5566 11.366 54.1008C5.92184 49.6451 2.18493 43.4447 0.78804 36.5497C-0.608846 29.6547 0.420145 22.4888 3.70077 16.2655C6.98139 10.0421 12.312 5.14381 18.79 2.40002C26.218 -0.616 34.5347 -0.58696 41.9415 2.48086C49.3483 5.54868 55.2499 11.4087 58.37 18.7936C61.49 26.1786 61.5778 34.4949 58.6144 41.944C55.6509 49.3932 49.8744 55.3765 42.534 58.6C38.7784 60.1907 34.7405 61.007 30.662 61ZM18.439 20.755L13.422 25.655L30.262 42.1L47.103 25.65L42.086 20.75L30.262 32.3L18.439 20.755Z"
fill="white" />
</svg>
</button>
</div>
</div>
</header>
<main class="main__container-facilities">
<div class="text__facilities">
<h1>FACILITIES</h1>
<p>We want your stay at our lush hotel to be truly unforgettable. That is why we give special attention
to all of your needs so that we can ensure an experience quite uniquw. Luxury hotels offers the perfect setting
with stunning views for
leisure and our modern luxury resort facilities will help you enjoy the best of all.</p>
</div>
<div class="main__image">
<div class="image__card">
<img class="image__facilities" src="./images/facility_gym.jpg" alt="the gym">
</div>
<span class="image__label">THE GYM</span>
</div>
<div class="main__image">
<div class="image__card">
<img class="image__facilities" src="./images/facility_poolside.jpg" alt="poolside bar">
</div>
<span class="image__label">POOLSIDE BAR</span>
</div>
<div class="main__image">
<div class="image__card">
<img class="image__facilities" src="./images/facility_spa.jpg" alt="the spa">
</div>
<span class="image__label">THE SPA</span>
</div>
<div class="main__image">
<div class="image__card">
<img class="image__facilities" src="./images/facility_swimming.jpg" alt="swimming pool">
</div>
<span class="image__label">SWIMMING POOL</span>
</div>
<div class="main__image">
<div class="image__card">
<img class="image__facilities" src="./images/facility_restaurant.jpg" alt="restaurant">
</div>
<span class="image__label">RESTAURANT</span>
</div>
<div class="main__image">
<div class="image__card">
<img class="image__facilities" src="./images/facility_laundry.jpg" alt="laundry">
</div>
<span class="image__label">LAUNDRY</span>
</div>
<div class="container__testimonials">
<div class="text__testimonials">
<h2>Testimonials</h2>
<p>"Calm, Serene, Retro – What a way to relax and enjoy"</p>
<p>Mr. and Mrs. Baxter, UK</p>
</div>
<div>
<button class="button__tesimonials"><img src="./images/facility_left.svg" alt="arrow"></button>
<button class="button__tesimonials"><img src="./images/facility_right.svg" alt="arrow"></button>
</div>
</div>
</main>
<footer class="footer">
<div class="container__footer">
<div class="footer__section">
<div>
<div class="footer__title">
<h1 class="footer__title-firstLine">LUXURY</h1>
<h2 class="footer__title-secondLine">HOTELS</h2>
</div>
<div class="footer__contacts">497 Evergreen Rd. Roseville, CA 95673<br>+44 345 678 903<br>luxury_hotels@gmail.com</div>
</div>
</div>
<div class="footer__section">
<ul class="footer__menu">
<li class="footer__menu-link"><a class="link" href="#">About Us</a></li>
<li class="footer__menu-link"><a class="link" href="#">Contact</a></li>
<li class="footer__menu-link"><a class="link" href="#">Terms & Conditions</a></li>
</ul>
</div>
<div class="footer__section">
<ul class="footer__social">
<li><img class="footer__social-img" src="./images/facebook.svg" alt="logo-facebook">
<a class="link" href="#">Facebook</a> </li>
<li><img class="footer__social-img" src="./images/twitter.svg" alt="logo-twitter">
<a class="link" href="#">Twitter</a> </li>
<li><img class="footer__social-img" src="./images/instagram.svg" alt="logo-instagram">
<a class="link" href="#">Instagram</a> </li>
</ul>
</div>
<div class="footer__section">
<div class="footer__section-text">Subscribe to our newsletter</div>
<form class="footer__section-form">
<input class="footer__section-input" type="email" placeholder="Email Address">
<button class="footer__section-btn" type="button">ОК</button>
</form>
</div>
</div>
</footer>
</body>
</html>