├── images
    ├── cus1.jpg
    ├── cus2.jpg
    ├── cus3.jpg
    ├── img1.jpg
    ├── img2.jpg
    ├── img3.jpg
    ├── logo.png
    ├── banner-img.jpg
    └── customer-banner.jpg
├── script.js
├── main.css
└── index.html


/images/cus1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/prabinmagar/hotel-gp-single-page-site/HEAD/images/cus1.jpg


--------------------------------------------------------------------------------
/images/cus2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/prabinmagar/hotel-gp-single-page-site/HEAD/images/cus2.jpg


--------------------------------------------------------------------------------
/images/cus3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/prabinmagar/hotel-gp-single-page-site/HEAD/images/cus3.jpg


--------------------------------------------------------------------------------
/images/img1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/prabinmagar/hotel-gp-single-page-site/HEAD/images/img1.jpg


--------------------------------------------------------------------------------
/images/img2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/prabinmagar/hotel-gp-single-page-site/HEAD/images/img2.jpg


--------------------------------------------------------------------------------
/images/img3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/prabinmagar/hotel-gp-single-page-site/HEAD/images/img3.jpg


--------------------------------------------------------------------------------
/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/prabinmagar/hotel-gp-single-page-site/HEAD/images/logo.png


--------------------------------------------------------------------------------
/images/banner-img.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/prabinmagar/hotel-gp-single-page-site/HEAD/images/banner-img.jpg


--------------------------------------------------------------------------------
/images/customer-banner.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/prabinmagar/hotel-gp-single-page-site/HEAD/images/customer-banner.jpg


--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
 1 | const navBtn = document.getElementById('nav-btn');
 2 | const cancelBtn = document.getElementById('cancel-btn');
 3 | const sideNav = document.getElementById('sidenav');
 4 | const modal = document.getElementById('modal');
 5 | 
 6 | navBtn.addEventListener("click", function(){
 7 |     sideNav.classList.add('show');
 8 |     modal.classList.add('showModal');
 9 | });
10 | 
11 | cancelBtn.addEventListener('click', function(){
12 |     sideNav.classList.remove('show');
13 |     modal.classList.remove('showModal');
14 | });
15 | 
16 | window.addEventListener('click', function(event){
17 |     if(event.target === modal){
18 |         sideNav.classList.remove('show');
19 |         modal.classList.remove('showModal');
20 |     }
21 | });


--------------------------------------------------------------------------------
/main.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800;900&display=swap');
  2 | 
  3 | :root{
  4 |     --transition: all 0.7s ease;
  5 |     --yellow: #f9d342;
  6 |     --dark: #292826;
  7 | }
  8 | *{
  9 |     box-sizing: border-box;
 10 |     padding: 0;
 11 |     margin: 0;
 12 |     font-family: 'Playfair Display', serif;
 13 | }
 14 | html{
 15 |     scroll-behavior: smooth;
 16 | }
 17 | body{
 18 |     line-height: 1.6;
 19 | }
 20 | .btn{
 21 |     font-size: 16px;
 22 |     text-transform: uppercase;
 23 |     font-weight: 600;
 24 |     border: none;
 25 |     border-radius: 5px;
 26 |     padding: 10px;
 27 |     width: 140px;
 28 |     display: block;
 29 |     margin: 15px auto;
 30 |     cursor: pointer;
 31 |     transition: var(--transition);
 32 | }
 33 | .btn:hover{
 34 |     opacity: 0.85;
 35 | }
 36 | .flex{
 37 |     display: flex;
 38 |     flex-direction: column;
 39 |     justify-content: center;
 40 |     align-items: center;
 41 | }
 42 | h1, h2, h3, h4, h5, h6{
 43 |     padding: 8px 0;
 44 | }
 45 | img{
 46 |     width: 100%;
 47 |     display: block;
 48 | }
 49 | @media(max-width: 500px){
 50 |     body{
 51 |         font-size: 14px;
 52 |     }
 53 | }
 54 | 
 55 | /* header */
 56 | .header{
 57 |     background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2)), url("images/banner-img.jpg") center/cover no-repeat;
 58 |     min-height: 100vh;
 59 |     color: #fff;
 60 |     padding: 25px;
 61 |     display: flex;
 62 |     flex-direction: column;
 63 |     align-content: stretch;
 64 | }
 65 | .head-top{
 66 |     display: flex;
 67 |     justify-content: space-between;
 68 |     align-items: center;
 69 | }
 70 | .head-top span{
 71 |     cursor: pointer;
 72 |     letter-spacing: 2px;
 73 |     transition: var(--transition);
 74 | }
 75 | .head-top span:hover{
 76 |     color: var(--yellow);
 77 | }
 78 | .head-bottom{
 79 |     flex: 1;
 80 |     text-align: center;
 81 |     width: 80vw;
 82 |     margin: 0 auto;
 83 | }
 84 | .head-bottom h2{
 85 |     padding: 22px 0;
 86 |     font-size: 45px;
 87 |     border-bottom: 1px solid #fff;
 88 | }
 89 | .head-bottom p{
 90 |     opacity: 0.7;
 91 |     font-size: 20px;
 92 |     margin: 45px auto;
 93 |     width: 60vw;
 94 | }
 95 | .head-btn{
 96 |     margin: 20px 0;
 97 |     font-size: 20px;
 98 |     font-weight: bold;
 99 |     border: 3px solid #fff;
100 |     background: transparent;
101 |     padding: 13px 20px;
102 |     background: rgba(0, 0, 0, 0.3);
103 |     color: #fff;
104 |     cursor: pointer;
105 |     transition: var(--transition);
106 | }
107 | .head-btn:hover{
108 |     background: transparent;
109 | }
110 | @media(max-width: 500px){
111 |     .head-btn{
112 |         font-size: 17px;
113 |     }
114 |     .head-bottom h2{
115 |         font-size: 28px;
116 |     }
117 |     .head-bottom p{
118 |         font-size: 17px;
119 |         margin: 20px auto;
120 |     }
121 | }
122 | 
123 | /* side nav */
124 | .sidenav{
125 |     background: var(--dark);
126 |     color: #fff;
127 |     position: fixed;
128 |     top: 0;
129 |     bottom: 0;
130 |     right: -100%;
131 |     width: 300px;
132 |     padding: 20px;
133 |     transition: var(--transition);
134 |     z-index: 10;
135 | }
136 | 
137 | /********/
138 | .sidenav.show{
139 |     right: 0;
140 | }
141 | /*************/
142 | .cancel-btn{
143 |     position: absolute;
144 |     right: 25px;
145 |     font-size: 22px;
146 |     cursor: pointer;
147 |     transition: var(--transition);
148 | }
149 | .cancel-btn:hover{
150 |     opacity: 0.7;
151 | }
152 | .navbar{
153 |     margin-top: 50px;
154 |     list-style: none;
155 |     padding: 12px;
156 | }
157 | .navbar li a{
158 |     color: #fff;
159 |     text-transform: capitalize;
160 |     text-decoration: none;
161 |     padding: 15px 0;
162 |     display: block;
163 |     border-bottom: 0.5px solid rgba(249, 211, 66, 0.3);
164 |     opacity: 0.8;
165 |     letter-spacing: 1.5px;
166 |     transition: var(--transition);
167 | }
168 | .navbar li a:hover{
169 |     padding-left: 12px;
170 | }
171 | .sign-up, .log-in{
172 |     background: var(--yellow);
173 |     color: #fff;
174 | }
175 | @media(max-width: 400px){
176 |     .sidenav{
177 |         width: 100vw;
178 |     }
179 | }
180 | 
181 | /** title */
182 | .title{
183 |     text-transform: uppercase;
184 |     letter-spacing: 3px;
185 |     font-size: 30px;
186 |     color: var(--yellow);
187 |     border-bottom: 5px solid var(--dark);
188 |     width: 235px;
189 |     margin: 15px 0;
190 | }
191 | 
192 | .sec-width{
193 |     width: 85vw;
194 |     margin: 0 auto!important;
195 | }
196 | 
197 | /* service */
198 | .services{
199 |     margin: 40px 0;
200 | }
201 | .service{
202 |     display: flex;
203 |     margin: 30px 0;
204 | }
205 | .service-icon{
206 |     flex: 30%;
207 |     align-self: flex-start;
208 |     font-size: 48px;
209 |     color: #252525;
210 | }
211 | .service-content{
212 |     padding-left: 20px;
213 | }
214 | .service-content h2{
215 |     opacity: 0.7;
216 | }
217 | .service-content button{
218 |     margin-left: 0;
219 |     margin-right: 0;
220 |     background: var(--yellow);
221 |     color: #fff;
222 | }
223 | @media(min-width: 992px){
224 |     .services-container{
225 |         display: grid;
226 |         grid-template-columns: repeat(2, 1fr);
227 |         grid-column-gap: 30px;
228 |     }
229 |     .title h2{
230 |         font-size: 10px!important;
231 |     }
232 | }
233 | @media(max-width: 500px){
234 |     .title h2{
235 |         font-size: 24px;
236 |     }
237 | }
238 | 
239 | /* booking form */
240 | .book{
241 |     background: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85)), url("images/banner-img.jpg") center/cover no-repeat;
242 |     color: #fff;
243 |     padding: 40px 60px;
244 | }
245 | .book-form{
246 |     display: grid;
247 | }
248 | .form-item{
249 |     display: flex;
250 |     flex-direction: column;
251 |     justify-content: center;
252 | }
253 | .book-form input[type = "submit"]{
254 |     margin: 18px 0 0 0;
255 |     background: var(--dark);
256 |     color: #fff;
257 |     border: 1px solid #fff;
258 | }
259 | .book-form label, .book-form input{
260 |     width: 100%;
261 | }
262 | .book-form label{
263 |     font-weight: 600;
264 |     word-spacing: 5px;
265 |     padding-bottom: 8px;
266 | }
267 | .book-form input:not(.btn){
268 |     margin: 4px 0 16px 0;
269 |     padding: 12px 15px;
270 |     border-radius: 5px;
271 |     font-size: 17px;
272 |     border: none;
273 | }
274 | .book-form input:focus{
275 |     outline: 0;
276 |     box-shadow: 0 0 7px rgba(0, 0, 0, 0.4);
277 | }
278 | @media(min-width: 768px){
279 |     .book-form{
280 |         grid-template-columns: repeat(2, 1fr);
281 |         grid-gap: 24px;
282 |     }
283 | }
284 | @media(min-width: 1170px){
285 |     .book-form{
286 |         grid-template-columns: repeat(3, 1fr);
287 |     }
288 | }
289 | @media(min-width: 1370px){
290 |     .book-form{
291 |         grid-template-columns: 2fr 2fr 1fr 1fr 1fr 2fr;
292 |     }
293 |     .book{
294 |         height: 40vh;
295 |         display: grid;
296 |     }
297 | }
298 | @media(max-width: 500px){
299 |     .book{
300 |         padding-left: 20px;
301 |         padding-right: 20px;
302 |     }
303 | }
304 | 
305 | /* room */
306 | 
307 | .rooms{
308 |     margin: 40px 0;
309 | }
310 | .room{
311 |     margin: 45px 0;
312 |     padding-bottom: 25px;
313 |     background: var(--dark);
314 |     color: #fff;
315 | }
316 | .room-text{
317 |     padding: 5px 20px;
318 | }
319 | .room-text h3{
320 |     font-size: 24px;
321 | }
322 | .room-text ul{
323 |     list-style-type: none;
324 |     margin: 15px 0;
325 | }
326 | .room-text ul li{
327 |     padding: 7px 0;
328 | }
329 | .room-text ul li i{
330 |     color: var(--yellow);
331 |     margin-right: 10px;
332 | }
333 | .rate{
334 |     opacity: 0.8;
335 | }
336 | .rate span{
337 |     font-size: 40px;
338 |     font-weight: 900;
339 |     color: var(--yellow);
340 | }
341 | .room-image{
342 |     overflow: hidden;
343 | }
344 | .room-image img{
345 |     transition: var(--transition);
346 | }
347 | .room-image:hover img{
348 |     transform: scale(1.1);
349 | }
350 | @media (min-width: 900px){
351 |     .rooms-container{
352 |         display: flex;
353 |         flex-wrap: wrap;
354 |     }
355 |     .room{
356 |         flex: 0 0 calc(50% - 20px);
357 |         margin: 10px;
358 |     }
359 | }
360 | @media(min-width: 1370px){
361 |     .rooms-container{
362 |         flex-direction: column;
363 |     }
364 |     .room{
365 |         display: flex;
366 |         padding-bottom: 0;
367 |         margin: 5px 0;
368 |     }
369 |     .room-image{
370 |         flex: 1;
371 |     }
372 |     .room-image img{
373 |         height: 100%;
374 |     }
375 |     .room-text{
376 |         flex: 1;
377 |     }
378 |     .room:nth-child(even){
379 |         flex-direction: row-reverse;
380 |     }
381 | }
382 | 
383 | /* customers */
384 | 
385 | .customers{
386 |     margin-top: 40px;
387 |     padding: 40px 0;
388 |     background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("images/customer-banner.jpg") center/cover no-repeat fixed;
389 | }
390 | .customer{
391 |     background: #fff;
392 |     padding: 35px;
393 |     text-align: center;
394 |     margin: 24px 0;
395 |     box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.75);
396 |     cursor: pointer;
397 |     transition: var(--transition);
398 | }
399 | .rating{
400 |     margin: 10px 0;
401 |     color: var(--yellow);
402 | }
403 | .customer h3{
404 |     font-size: 25px;
405 | }
406 | .customer p{
407 |     opacity: 0.7;
408 |     line-height: 1.8;
409 |     width: 60%;
410 |     margin: 0 auto;
411 | }
412 | .customer img{
413 |     width: 170px;
414 |     height: 170px;
415 |     border-radius: 50%;
416 |     margin: 25px auto;
417 | }
418 | .customer span{
419 |     font-weight: 700;
420 |     opacity: 0.7;
421 | }
422 | .customer:hover{
423 |     transform: translateY(-18px);
424 | }
425 | @media(min-width: 992px){
426 |     .customers-container{
427 |         display: grid;
428 |         grid-template-columns: repeat(2, 1fr);
429 |         grid-gap: 30px;
430 |     }
431 | }
432 | @media(min-width: 1370px){
433 |     .customers-container{
434 |         display: grid;
435 |         grid-template-columns: repeat(3, 1fr);
436 |     }
437 | }
438 | @media(max-width: 500px){
439 |     .customer p{
440 |         width: 100%;
441 |     }
442 |     .customer img{
443 |         width: 100px;
444 |         height: 100px;
445 |     }
446 | }
447 | 
448 | /* footer */
449 | .footer{
450 |     background: var(--dark);
451 |     color: #fff;
452 |     text-align: center;
453 | }
454 | .footer-container{
455 |     width: 85vw;
456 |     margin: 0 auto;
457 |     padding: 30px 0;
458 | }
459 | .footer-container p, .footer-container a, .footer-container span{
460 |     opacity: 0.8;
461 | }
462 | .footer a{
463 |     display: block;
464 |     color: #fff;
465 |     text-decoration: none;
466 | }
467 | .social-icons{
468 |     list-style: none;
469 |     display: flex;
470 |     justify-content: center;
471 |     padding: 15px 0;
472 | }
473 | .social-icons li{
474 |     margin: 0 10px;
475 |     width: 50px;
476 |     height: 50px;
477 |     background: #2e2e2e;
478 |     border-radius: 50%;
479 |     transition: var(--transition);
480 |     cursor: pointer;
481 | }
482 | .social-icons li:hover{
483 |     background: #fff;
484 |     color: #2e2e2e;
485 | }
486 | .contact-item span{
487 |     display: block;
488 | }
489 | @media(min-width: 900px){
490 |     .footer-container{
491 |         display: grid;
492 |         grid-template-columns: repeat(2, 1fr);
493 |         grid-gap: 20px;
494 |     }
495 | }
496 | @media(min-width: 1170px){
497 |     .footer{
498 |         text-align: left;
499 |     }
500 |     .footer-container{
501 |         grid-template-columns: repeat(4, 1fr);
502 |     }
503 |     .footer-container div:nth-child(1) p{
504 |         padding-right: 20px;
505 |     }
506 |     .contact-item{
507 |         display: grid;
508 |         grid-template-columns: 10% 90%;
509 |         margin-bottom: 15px;
510 |         align-items: center;
511 |     }
512 | }
513 | 
514 | .showModal{
515 |     position: fixed;
516 |     background: transparent;
517 |     top: 0;
518 |     right: 0;
519 |     bottom: 0;
520 |     left: 0;
521 |     z-index: 5;
522 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |     <head>
  4 |         <meta charset="utf-8">
  5 |         <title>HOTEL GP</title>
  6 |         <meta name="viewport" content="width=device-width, initial-scale=1">
  7 |         <link rel="stylesheet" href="main.css">
  8 |         <script src="https://kit.fontawesome.com/dbed6b6114.js" crossorigin="anonymous"></script>
  9 |         <link rel = "icon" href = "images/logo.png" type = "image/png">
 10 |     </head>
 11 |     <body>
 12 |         
 13 |         <!-- header -->
 14 |         <header class = "header" id = "header">
 15 |             <div class = "head-top">
 16 |                 <div class = "site-name">
 17 |                     <span>GEEKPROBIN</span>
 18 |                 </div>
 19 |                 <div class = "site-nav">
 20 |                     <span id = "nav-btn">MENU <i class = "fas fa-bars"></i></span>
 21 |                 </div>
 22 |             </div>
 23 | 
 24 |             <div class = "head-bottom flex">
 25 |                 <h2>NICE AND COMFORTABLE PLACE TO STAY</h2>
 26 |                 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto est quos veniam impedit numquam itaque voluptatum, dicta asperiores accusamus, eligendi neque ut incidunt, modi harum molestiae atque natus officia minima.</p>
 27 |                 <button type = "button" class = "head-btn">GET STARTED</button>
 28 |             </div>
 29 |         </header>
 30 |         <!-- end of header -->
 31 | 
 32 |         <!-- side navbar -->
 33 |         <div class = "sidenav" id = "sidenav">
 34 |             <span class = "cancel-btn" id = "cancel-btn">
 35 |                 <i class = "fas fa-times"></i>
 36 |             </span>
 37 | 
 38 |             <ul class = "navbar">
 39 |                 <li><a href = "#header">home</a></li>
 40 |                 <li><a href = "#services">services</a></li>
 41 |                 <li><a href = "#rooms">rooms</a></li>
 42 |                 <li><a href = "#customers">customers</a></li>
 43 |             </ul>
 44 |             <button class = "btn sign-up">sign up</button>
 45 |             <button class = "btn log-in">log in</button>
 46 |         </div>
 47 |         <!-- end of side navbar -->
 48 | 
 49 |         <!-- fullscreen modal -->
 50 |         <div id = "modal"></div>
 51 |         <!-- end of fullscreen modal -->
 52 | 
 53 |         <!-- body content  -->
 54 |         <section class = "services sec-width" id = "services">
 55 |             <div class = "title">
 56 |                 <h2>services</h2>
 57 |             </div>
 58 |             <div class = "services-container">
 59 |                 <!-- single service -->
 60 |                 <article class = "service">
 61 |                     <div class = "service-icon">
 62 |                         <span>
 63 |                             <i class = "fas fa-utensils"></i>
 64 |                         </span>
 65 |                     </div>
 66 |                     <div class = "service-content">
 67 |                         <h2>Food Service/ Food Runner</h2>
 68 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias blanditiis tempore officia accusamus asperiores. Illum maxime eligendi necessitatibus laudantium iste nisi pariatur doloremque ut illo similique voluptatum enim distinctio perferendis, ad ipsam aspernatur omnis rem autem ex, reiciendis corporis suscipit!</p>
 69 |                         <button type = "button" class = "btn">Know More</button>
 70 |                     </div>
 71 |                 </article>
 72 |                 <!-- end of single service -->
 73 |                 <!-- single service -->
 74 |                 <article class = "service">
 75 |                     <div class = "service-icon">
 76 |                         <span>
 77 |                             <i class = "fas fa-swimming-pool"></i>
 78 |                         </span>
 79 |                     </div>
 80 |                     <div class = "service-content">
 81 |                         <h2>Refreshment</h2>
 82 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias blanditiis tempore officia accusamus asperiores. Illum maxime eligendi necessitatibus laudantium iste nisi pariatur doloremque ut illo similique voluptatum enim distinctio perferendis, ad ipsam aspernatur omnis rem autem ex, reiciendis corporis suscipit!</p>
 83 |                         <button type = "button" class = "btn">Know More</button>
 84 |                     </div>
 85 |                 </article>
 86 |                 <!-- end of single service -->
 87 |                 <!-- single service -->
 88 |                 <article class = "service">
 89 |                     <div class = "service-icon">
 90 |                         <span>
 91 |                             <i class = "fas fa-broom"></i>
 92 |                         </span>
 93 |                     </div>
 94 |                     <div class = "service-content">
 95 |                         <h2>Housekeeping</h2>
 96 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias blanditiis tempore officia accusamus asperiores. Illum maxime eligendi necessitatibus laudantium iste nisi pariatur doloremque ut illo similique voluptatum enim distinctio perferendis, ad ipsam aspernatur omnis rem autem ex, reiciendis corporis suscipit!</p>
 97 |                         <button type = "button" class = "btn">Know More</button>
 98 |                     </div>
 99 |                 </article>
100 |                 <!-- end of single service -->
101 |                 <!-- single service -->
102 |                 <article class = "service">
103 |                     <div class = "service-icon">
104 |                         <span>
105 |                             <i class = "fas fa-door-closed"></i>
106 |                         </span>
107 |                     </div>
108 |                     <div class = "service-content">
109 |                         <h2>Room Security</h2>
110 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias blanditiis tempore officia accusamus asperiores. Illum maxime eligendi necessitatibus laudantium iste nisi pariatur doloremque ut illo similique voluptatum enim distinctio perferendis, ad ipsam aspernatur omnis rem autem ex, reiciendis corporis suscipit!</p>
111 |                         <button type = "button" class = "btn">Know More</button>
112 |                     </div>
113 |                 </article>
114 |                 <!-- end of single service -->
115 |             </div>
116 |         </section>
117 | 
118 |         <div class = "book">
119 |             <form class = "book-form">
120 |                 <div class = "form-item">
121 |                     <label for = "checkin-date">Check In Date: </label>
122 |                     <input type = "date" id = "chekin-date">
123 |                 </div>
124 |                 <div class = "form-item">
125 |                     <label for = "checkout-date">Check Out Date: </label>
126 |                     <input type = "date" id = "chekout-date">
127 |                 </div>
128 |                 <div class = "form-item">
129 |                     <label for = "adult">Adults: </label>
130 |                     <input type = "number" min = "1" value = "1" id = "adult">
131 |                 </div>
132 |                 <div class = "form-item">
133 |                     <label for = "children">Children: </label>
134 |                     <input type = "number" min = "1" value = "1" id = "children">
135 |                 </div>
136 |                 <div class = "form-item">
137 |                     <label for = "rooms">Rooms: </label>
138 |                     <input type = "number" min = "1" value = "1" id = "rooms">
139 |                 </div>
140 |                 <div class = "form-item">
141 |                     <input type = "submit" class = "btn" value = "Book Now">
142 |                 </div>
143 |             </form>
144 |         </div>
145 | 
146 |         <section class = "rooms sec-width" id = "rooms">
147 |             <div class = "title">
148 |                 <h2>rooms</h2>
149 |             </div>
150 |             <div class = "rooms-container">
151 |                 <!-- single room -->
152 |                 <article class = "room">
153 |                     <div class = "room-image">
154 |                         <img src = "images/img1.jpg" alt = "room image">
155 |                     </div>
156 |                     <div class = "room-text">
157 |                         <h3>Luxury Rooms</h3>
158 |                         <ul>
159 |                             <li>
160 |                                 <i class = "fas fa-arrow-alt-circle-right"></i>
161 |                                 Lorem ipsum dolor sit amet.
162 |                             </li>
163 |                             <li>
164 |                                 <i class = "fas fa-arrow-alt-circle-right"></i>
165 |                                 Lorem ipsum dolor sit amet.
166 |                             </li>
167 |                             <li>
168 |                                 <i class = "fas fa-arrow-alt-circle-right"></i>
169 |                                 Lorem ipsum dolor sit amet.
170 |                             </li>
171 |                         </ul>
172 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus exercitationem repellendus maxime ullam tempore architecto provident unde expedita quam beatae, dolore eligendi molestias sint tenetur incidunt voluptas. Unde corporis qui iusto vitae. Aut nesciunt id iste, cum esse commodi nemo?</p>
173 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla corporis quasi officiis cumque, fugiat nostrum sunt, tempora animi dicta laborum beatae ratione doloremque. Delectus odio sit eius labore, atque quo?</p>
174 |                         <p class = "rate">
175 |                             <span>$99.00 /</span> Per Night
176 |                         </p>
177 |                         <button type = "button" class = "btn">book now</button>
178 |                     </div>
179 |                 </article>
180 |                 <!-- end of single room -->
181 |                 <!-- single room -->
182 |                 <article class = "room">
183 |                     <div class = "room-image">
184 |                         <img src = "images/img2.jpg" alt = "room image">
185 |                     </div>
186 |                     <div class = "room-text">
187 |                         <h3>Luxury Rooms</h3>
188 |                         <ul>
189 |                             <li>
190 |                                 <i class = "fas fa-arrow-alt-circle-right"></i>
191 |                                 Lorem ipsum dolor sit amet.
192 |                             </li>
193 |                             <li>
194 |                                 <i class = "fas fa-arrow-alt-circle-right"></i>
195 |                                 Lorem ipsum dolor sit amet.
196 |                             </li>
197 |                             <li>
198 |                                 <i class = "fas fa-arrow-alt-circle-right"></i>
199 |                                 Lorem ipsum dolor sit amet.
200 |                             </li>
201 |                         </ul>
202 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus exercitationem repellendus maxime ullam tempore architecto provident unde expedita quam beatae, dolore eligendi molestias sint tenetur incidunt voluptas. Unde corporis qui iusto vitae. Aut nesciunt id iste, cum esse commodi nemo?</p>
203 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla corporis quasi officiis cumque, fugiat nostrum sunt, tempora animi dicta laborum beatae ratione doloremque. Delectus odio sit eius labore, atque quo?</p>
204 |                         <p class = "rate">
205 |                             <span>$99.00 /</span> Per Night
206 |                         </p>
207 |                         <button type = "button" class = "btn">book now</button>
208 |                     </div>
209 |                 </article>
210 |                 <!-- end of single room -->
211 |                 <!-- single room -->
212 |                 <article class = "room">
213 |                     <div class = "room-image">
214 |                         <img src = "images/img3.jpg" alt = "room image">
215 |                     </div>
216 |                     <div class = "room-text">
217 |                         <h3>Luxury Rooms</h3>
218 |                         <ul>
219 |                             <li>
220 |                                 <i class = "fas fa-arrow-alt-circle-right"></i>
221 |                                 Lorem ipsum dolor sit amet.
222 |                             </li>
223 |                             <li>
224 |                                 <i class = "fas fa-arrow-alt-circle-right"></i>
225 |                                 Lorem ipsum dolor sit amet.
226 |                             </li>
227 |                             <li>
228 |                                 <i class = "fas fa-arrow-alt-circle-right"></i>
229 |                                 Lorem ipsum dolor sit amet.
230 |                             </li>
231 |                         </ul>
232 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus exercitationem repellendus maxime ullam tempore architecto provident unde expedita quam beatae, dolore eligendi molestias sint tenetur incidunt voluptas. Unde corporis qui iusto vitae. Aut nesciunt id iste, cum esse commodi nemo?</p>
233 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla corporis quasi officiis cumque, fugiat nostrum sunt, tempora animi dicta laborum beatae ratione doloremque. Delectus odio sit eius labore, atque quo?</p>
234 |                         <p class = "rate">
235 |                             <span>$99.00 /</span> Per Night
236 |                         </p>
237 |                         <button type = "button" class = "btn">book now</button>
238 |                     </div>
239 |                 </article>
240 |                 <!-- end of single room -->
241 |             </div>
242 |         </section>
243 | 
244 | 
245 |         <section class = "customers" id = "customers">
246 |             <div class = "sec-width">
247 |                 <div class = "title">
248 |                     <h2>customers</h2>
249 |                 </div>
250 |                 <div class = "customers-container">
251 |                     <!-- single customer -->
252 |                     <div class = "customer">
253 |                         <div class = "rating">
254 |                             <span><i class = "fas fa-star"></i></span>
255 |                             <span><i class = "fas fa-star"></i></span>
256 |                             <span><i class = "fas fa-star"></i></span>
257 |                             <span><i class = "fas fa-star"></i></span>
258 |                             <span><i class = "far fa-star"></i></span>
259 |                         </div>
260 |                         <h3>We Loved it</h3>
261 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat beatae veritatis provident eveniet praesentium veniam cum iusto distinctio esse, vero est autem, eius optio cupiditate?</p>
262 |                         <img src = "images/cus1.jpg" alt = "customer image">
263 |                         <span>Customer Name, Country</span>
264 |                     </div>
265 |                     <!-- end of single customer -->
266 |                     <!-- single customer -->
267 |                     <div class = "customer">
268 |                         <div class = "rating">
269 |                             <span><i class = "fas fa-star"></i></span>
270 |                             <span><i class = "fas fa-star"></i></span>
271 |                             <span><i class = "fas fa-star"></i></span>
272 |                             <span><i class = "fas fa-star"></i></span>
273 |                             <span><i class = "far fa-star"></i></span>
274 |                         </div>
275 |                         <h3>Comfortable Living</h3>
276 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat beatae veritatis provident eveniet praesentium veniam cum iusto distinctio esse, vero est autem, eius optio cupiditate?</p>
277 |                         <img src = "images/cus2.jpg" alt = "customer image">
278 |                         <span>Customer Name, Country</span>
279 |                     </div>
280 |                     <!-- end of single customer -->
281 |                     <!-- single customer -->
282 |                     <div class = "customer">
283 |                         <div class = "rating">
284 |                             <span><i class = "fas fa-star"></i></span>
285 |                             <span><i class = "fas fa-star"></i></span>
286 |                             <span><i class = "fas fa-star"></i></span>
287 |                             <span><i class = "fas fa-star"></i></span>
288 |                             <span><i class = "far fa-star"></i></span>
289 |                         </div>
290 |                         <h3>Nice Place</h3>
291 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat beatae veritatis provident eveniet praesentium veniam cum iusto distinctio esse, vero est autem, eius optio cupiditate?</p>
292 |                         <img src = "images/cus3.jpg" alt = "customer image">
293 |                         <span>Customer Name, Country</span>
294 |                     </div>
295 |                     <!-- end of single customer -->
296 |                 </div>
297 |             </div>
298 |         </section>
299 |         <!-- end of body content -->
300 |         
301 |         <!-- footer -->
302 |         <footer class = "footer">
303 |             <div class = "footer-container">
304 |                 <div>
305 |                     <h2>About Us </h2>
306 |                     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque sapiente mollitia doloribus provident? Eos quisquam aliquid vel dolorum, impedit culpa.</p>
307 |                     <ul class = "social-icons">
308 |                         <li class = "flex">
309 |                             <i class = "fa fa-twitter fa-2x"></i>
310 |                         </li>
311 |                         <li class = "flex">
312 |                             <i class = "fa fa-facebook fa-2x"></i>
313 |                         </li>
314 |                         <li class = "flex">
315 |                             <i class = "fa fa-instagram fa-2x"></i>
316 |                         </li>
317 |                     </ul>
318 |                 </div>
319 | 
320 |                 <div>
321 |                     <h2>Useful Links</h2>
322 |                     <a href = "#">Blog</a>
323 |                     <a href = "#">Rooms</a>
324 |                     <a href = "#">Subscription</a>
325 |                     <a href = "#">Gift Card</a>
326 |                 </div>
327 | 
328 |                 <div>
329 |                     <h2>Privacy</h2>
330 |                     <a href = "#">Career</a>
331 |                     <a href = "#">About Us</a>
332 |                     <a href = "#">Contact Us</a>
333 |                     <a href = "#">Services</a>
334 |                 </div>
335 | 
336 |                 <div>
337 |                     <h2>Have A Question</h2>
338 |                     <div class = "contact-item">
339 |                         <span>
340 |                             <i class = "fas fa-map-marker-alt"></i>
341 |                         </span>
342 |                         <span>
343 |                             203 Fake St.Mountain View, San Francisco, California, USA
344 |                         </span>
345 |                     </div>
346 |                     <div class = "contact-item">
347 |                         <span>
348 |                             <i class = "fas fa-phone-alt"></i>
349 |                         </span>
350 |                         <span>
351 |                             +84545 37534 48
352 |                         </span>
353 |                     </div>
354 |                     <div class = "contact-item">
355 |                         <span>
356 |                             <i class = "fas fa-envelope"></i>
357 |                         </span>
358 |                         <span>
359 |                             info@domain.com
360 |                         </span>
361 |                     </div>
362 |                 </div>
363 |             </div>
364 |         </footer>
365 |         <!-- end of footer -->
366 |         
367 |         <script src="script.js"></script>
368 |     </body>
369 | </html>


--------------------------------------------------------------------------------