‭Texas College of Management and IT‬

Intrnet Fundamental and‬

‭
Application‬
‭
‭Explore, Learn and Excel‬

Mid-term project‬
‭

Submitted By:‬‭
‭ Aakash Rajdhami‬
Submitted To:‬
‭ Department Of IT‬
‭
LCID:LC00017002576‬
‭
Program:BIT‬
‭
Sections:F‬
‭
Date:24-08-2024‬
‭
 ‭Table of Content‬

‭ exas‬‭College‬‭of‬‭Management‬‭and‬‭IT‬‭..........................................................................................‬‭0‬
T
‭Explore,‬‭Learn‬‭and‬‭Excel‬‭..............................................................................................................‬‭0‬
‭1.Introduction‬‭.................................................................................................................................‬‭2‬
‭2.Project‬‭Overview‬‭.........................................................................................................................‬‭2‬
‭3.Design‬‭and‬‭Development‬‭Process‬‭..............................................................................................‬‭3‬
‭3.1‬‭Home‬‭page‬‭...........................................................................................................................‬‭3‬
‭3.2‬‭Luxury‬‭Rooms‬‭Pages‬‭...........................................................................................................‬‭4‬
‭3.3‬‭Dining‬‭Page‬‭..........................................................................................................................‬‭6‬
‭3.4‬‭Spa‬‭and‬‭Wellness‬‭Page‬‭.........................................................................................................‬‭7‬
‭3.5‬‭About‬‭Us‬‭Page‬‭.....................................................................................................................‬‭8‬
‭3.6‬‭Contact‬‭Page‬‭........................................................................................................................‬‭9‬
‭4.Technologies‬‭Used‬‭.....................................................................................................................‬‭10‬
‭5.‬‭Testing‬‭and‬‭Responsiveness‬‭.....................................................................................................‬‭10‬
‭6.‬‭Source‬‭Code‬‭..............................................................................................................................‬‭13‬
‭6.1‬‭index.html‬‭..........................................................................................................................‬‭13‬
‭6.2‬‭food.html‬‭............................................................................................................................‬‭19‬
‭6.3‬‭room.html‬‭...........................................................................................................................‬‭23‬
‭6.4‬‭spa.html‬‭..............................................................................................................................‬‭26‬
‭6.5‬‭about.html‬‭..........................................................................................................................‬‭30‬
‭6.6‬‭service.html‬‭........................................................................................................................‬‭34‬
‭6.7‬‭index.css‬‭.............................................................................................................................‬‭36‬
‭7.‬‭Conclusion‬‭................................................................................................................................‬‭39‬
‭1.Introduction‬
‭Welcome to the "Hasbin Hotel" website project, a comprehensive and responsive web design‬
‭crafted to provide an elegant online presence for a luxurious hotel. This website is designed to‬
‭showcase the hotel's finest features, including its exquisite rooms, top-tier dining experiences,‬
‭and rejuvenating spa services. With a focus on user experience, the site aims to offer visitors an‬
‭easy-to-navigate platform where they can explore everything the hotel has to offer, from booking‬
‭a stay to discovering the amenities and services available.‬

‭2.Project Overview‬
‭Website structure‬
‭Homepage:‬‭This website features a striking hero image that sets the tone for the hotel’s brand,‬
‭along with quick access to essential sections like Rooms, Dining, and Spa Services. And briefly‬
‭introduces the hotel, inviting visitors to explore more.‬

‭Rooms:‬‭This website hotel included different room categories‬‭with images and descriptions,‬
‭emphasizing comfort, luxury, and modern amenities.And also provides easy navigation for‬
‭booking or exploring room details.‬

‭Dining:‬‭This website hotel highlight the hotel’s culinary‬‭offerings, featuring exquisite dining‬
‭options with sample menus and chef specials.‬

‭Spa & Wellness:‬‭This website hotel provides the detail of rejuvenating spa services offered by‬
‭the hotel, including massages, therapies, and wellness programs. It also features a calming design‬
‭to reflect the serene atmosphere of the spa.‬

‭About Us:‬‭The website hotel offers an overview of the‬‭hotel’s history, mission, and‬
‭values.Including images and a brief narrative about what makes the hotel unique.‬

‭Contact:‬‭The hotel has provided essential contact information,‬‭including phone numbers, email,‬
‭and a contact form for inquiries or bookings.‬

‭3.Design and Development Process‬

‭3.1 Home page‬

‭3.2 Luxury Rooms Pages‬
‭3.3 Dining Page‬
‭3.4 Spa and Wellness Page‬
‭3.5 About Us Page‬
‭3.6 Contact Page‬
‭4.Technologies Used‬

‭The "Hasbin Hotel" website is built using a combination of modern web technologies to ensure a‬
‭robust, responsive, and visually appealing user experience.‬

‭HTML (HyperText Markup Language):‬‭The foundation of the website, HTML is used‬

‭to structure the content and layout. It defines the elements on the page, such as headings,‬
‭paragraphs, images, and links, forming the backbone of the website’s content.‬

‭CSS (Cascading Style Sheets):‬‭CSS is employed to style the website, enhancing the‬
‭visual appearance and ensuring consistency across different devices. Custom CSS is used‬
‭to define colors, fonts, margins, padding, and other design elements, allowing for a‬
‭unique and cohesive design that aligns with the hotel's brand.‬

‭Bootstrap:‬‭Bootstrap is a popular front-end framework‬‭that provides a responsive grid‬

‭system and a collection of pre-designed components, such as navigation bars, buttons,‬
‭forms, and cards. It ensures that the website is mobile-friendly and adaptable to various‬
‭screen sizes, providing a seamless user experience on desktops, tablets, and smartphones.‬

‭Bootstrap's built-in components are also customized with CSS to match the hotel’s‬
‭aesthetic, allowing for a balance between functionality and design.‬

‭5. Testing and Responsiveness‬

‭Website on smartphone‬
‭Website on Tablet‬
‭6. Source Code‬
‭6.1 index.html‬
<!‬
‭ DOCTYPE‬‭
‭ html‬
>‬
‭
<‬
‭ html‬‭
‭ lang‬
=‭
‭ "
‬en"‬
>‬
‭
<‬
‭ head‬
‭ >‬
‭
<‬
‭ meta‬‭
‭ charset‬
=‬
‭ "UTF-8"‬
‭ >‬
‭
<‬
‭ meta‬‭
‭ name‬
=‭
‭"‬viewport"‬‭
content‬
=‬
‭ "width=device-width,‬
‭
initial-scale=1.0"‬
‭ >‬
‭
<‬
‭ title‬
‭ > Hasbin hotel</‬
‭ title‬
‭ >‬
‭
<‬
‭ link‬
‭
href‬
‭ =‬
‭ "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/boot‬
‭
strap.min.css"‬‭
‭ rel‬
=‭
‭"‬stylesheet"‬
>‬
‭
<‬
‭ link‬‭
‭ rel‬
=‬
‭ "stylesheet"‬‭
‭ href‬
=‭
‭"‬index.css"‬
>‬
‭
<‬
‭ link‬
‭
href‬
‭ =‬
‭ "https://fonts.googleapis.com/css2?family=Playfair+Display:‬
‭
wght@700&display=swap"‬‭
‭ rel‬
=‭
‭"‬stylesheet"‬
>‬
‭

<!-- <style>‬
‭
/* Ensure full width */‬
‭
html, body {‬
‭
width: 100%;‬
‭
margin: 0;‬
‭
padding: 0;‬
‭
}‬
‭

/* Background Image Container Styles */‬

‭
.background-image-container {‬
‭
background-image: url('img/home.jpg');‬
‭
background-size: cover;‬
‭
background-position: center;‬
‭
color: #fff;‬
‭
padding: 100px 0;‬
‭
 text-align: center;‬
‭
width: 100%;‬
‭
}‬
‭

/* Optional: If using Bootstrap container, set padding‬

‭
to 0 for full-width effect */‬
‭
.background-image-container .container {‬
‭
padding-left: 0;‬
‭
padding-right: 0;‬
‭
}‬
‭

.background-image-container h2 {‬
‭
margin-bottom: 200px;‬
‭
}‬
‭

.background-image-container p {‬
‭
margin-bottom: 100px;‬
‭
}‬
‭

/* Features Section */‬

‭
.features-section img {‬
‭
max-width: 100px;‬
‭
}‬
‭

/* Footer */‬
‭
footer {‬
‭
background-color: #f8f9fa;‬
‭
width: 100%;‬
‭
}‬
‭

/* Additional Styles */‬

‭
h2 {‬
‭
margin-bottom: 30px;‬
‭
 }‬
‭

ul {‬
‭
list-style-type: none;‬
‭
padding: 0;‬
‭
}‬
‭

ul li {‬
‭
margin: 10px 0;‬
‭
}‬
‭

.custom-circle {‬
‭
width: 650px;
‭ /* Desired width */‬
height: 150px; /* Desired height */‬
‭
object-fit: cover; /* Ensures the image covers the entire‬
‭
area */‬
‭
border-radius: 0; /* Removes the circular/oval shape */‬
‭
} -->‬
‭

</‬
‭ style‬
‭ >‬
‭
</‬
‭ head‬
‭ >‬
‭
<‬
‭ body‬
‭ >‬
‭
<!-- Main Content -->‬
‭
<‬
‭ div‬‭
‭ class‬
=‭
‭ "
‬content"‬
>‬
‭
<!-- Navigation -->‬
‭
<‬
‭ nav‬‭
‭ class‬
=‭
‭ "
‬navbar navbar-expand-lg"‬‭
style‬
=‭
‭ "
‬background-image:‬
linear-gradient(to right, rgb(11 61 93), rgb(113, 163, 232));;"‬
‭ >‬
‭
<‬
‭ div‬‭
‭ class‬
=‭
‭ "
‬container-fluid"‬
>‬
‭
<‭
‭a‬‬‭
class‬
=‭
‭"
‬navbar-brand text-white"‬‭
href‬
=‭
‭"‬#"‬
>Hasbin‬
‭
Hotel</‬
‭ a‭
‭>‬‬
 <‭
‭b‬utton‬‭
class‬
=‬
‭ "navbar-toggler"‬‭
‭ type‬
=‭
‭"‬button"‬
data-bs-toggle‬
‭ =‭
‭ "
‬collapse"‬‭
data-bs-target‬
=‭
‭"‬#navbarNav"‬
aria-controls‬
‭ =‬
‭ "navbarNav"‬‭
‭ aria-expanded‬
=‭
‭"‬false"‬
aria-label‬
‭ =‭
‭ "
‬Toggle navigation"‬
>‬
‭
<‭
‭s‬pan‬‭
class‬
=‭
‭"‬navbar-toggler-icon"‬
></‬
‭ span‬
‭ >‬
‭
</‬
‭ button‬
‭ >‬
‭
<‭
‭d‬iv‬‭
class‬
=‭
‭ "
‬collapse navbar-collapse"‬‭
id‬
=‭
‭"‬navbarNav"‬
>‬
‭
<‭
‭u‬l‬‭
class‬
=‬
‭ "navbar-nav ms-auto"‬
‭ >‬
‭
<‭
‭l
‬i‬‭
class‬
=‬
‭ "nav-item"‬
‭ >‬
‭
<‭
‭a‬‬‭
class‬
=‭
‭"‬nav-link active text-white"‬
aria-current‬
‭ =‭
‭"‬page"‬‭
href‬
=‭
‭"‬#"‬
>Home</‬
‭ a‭
‭>‬‬
</‬
‭ li‬
‭ >‬
‭
<‭
‭l
‬i‬‭
class‬
=‬
‭ "nav-item"‬
‭ >‬
‭
<‭
‭a‬‬‭
class‬
=‭
‭"‬nav-link text-white"‬
href‬
‭ =‬
‭ "about.html"‬
‭ >About Us</‬
‭ a‭
‭>‬‬
</‬
‭ li‬
‭ >‬
‭
<‭
‭l
‬i‬‭
class‬
=‬
‭ "nav-item"‬
‭ >‬
‭
<‭
‭a‬‬‭
class‬
=‭
‭"‬nav-link text-white"‬
href‬
‭ =‬
‭ "#contact"‬
‭ >Contact</‬
‭ a‬
‭ >‬
‭
</‬
‭ li‬
‭ >‬
‭
</‬
‭ ul‬
‭ >‬
‭
</‬
‭ div‬
‭ >‬
‭
</‬
‭ div‬
‭ >‬
‭
</‬
‭ nav‬
‭ >‬
‭

<!-- Background Image Container -->‬

‭
<‭
‭d‬iv‬‭
class‬
=‭
‭ "
‬background-image-container"‬
>‬
‭
</‬
‭ div‬
‭ >‬
‭

<!-- Features Section -->‬

‭
<‬
‭ section‬‭
‭ class‬
=‭
‭ "
‬features-section py-5"‬
>‬
‭
<‬
‭ div‬‭
‭ class‬
=‭
‭ "
‬container"‬
>‬
‭
 <‭
‭d‬iv‬‭
class‬
=‭
‭ "
‬row"‬
>‬
‭
<‭
‭d‬iv‬‭
class‬
=‭
‭ "
‬col-md-4 d-flex align-items-stretch"‬
>‬
‭
<‭
‭d
‬iv‬‭
class‬
=‭
‭ "
‬card text-center w-100"‬
>‬
‭
<‭
‭i‬mg‬‭
src‬
=‭
‭"‬img/room.jpg"‬‭
class‬
=‬
‭ "card-img-top‬
‭
img-fluid"‬‭
‭ alt‬
=‭
‭"‬Luxury Rooms"‬‭
style‬
=‭
‭"‬height: 300px;‬‭
object-fit:‬
cover;"‬
‭ >‬
‭
<‭
‭d‬iv‬‭
class‬
=‭
‭ "
‬card-body d-flex flex-column"‬
>‬
‭
<‭
‭h‬5‬‭
class‬
=‬
‭ "card-title"‬
‭ >Luxury‬‭
‭ Rooms</‬
h5‬
‭ >‬
‭
<‭
‭p‬‬‭
class‬
=‭
‭"‬card-text‬
flex-grow-1"‬
‭ >Experience the best in class rooms with‬‭
‭ all the‬
modern amenities.</‬
‭ p‭
‭>‬‬
<‭
‭a‬‬‭
href‬
=‭
‭"‬room.html"‬‭
class‬
=‬
‭ "btn‬
‭
btn-primary mt-auto"‬
‭ >Explore</‬
‭ a‭
‭ >
‬‬
</‬
‭ div‬
‭ >‬
‭
</‬
‭ div‬
‭ >‬
‭
</‬
‭ div‬
‭ >‬
‭
<‭
‭d‬iv‬‭
class‬
=‭
‭ "
‬col-md-4 d-flex align-items-stretch"‬
>‬
‭
<‭
‭d
‬iv‬‭
class‬
=‭
‭ "
‬card text-center w-100"‬
>‬
‭
<‭
‭i‬mg‬‭
src‬
=‭
‭"‬img/food.jpg"‬‭
class‬
=‬
‭ "card-img-top‬
‭
img-fluid"‬‭
‭ alt‬
=‭
‭"‬Exquisite Dining"‬‭
style‬
=‭
‭"‬height: 300px;‬
object-fit: cover;"‬
‭ >‬
‭
<‭
‭d‬iv‬‭
class‬
=‭
‭ "
‬card-body d-flex flex-column"‬
>‬
‭
<‭
‭h‬5‬‭
class‬
=‬
‭ "card-title"‬
‭ >Exquisite‬
‭
Dining</‬
‭ h5‬
‭ >‬
‭
<‭
‭p‬‬‭
class‬
=‭
‭"‬card-text flex-grow-1"‬
>Enjoy‬
‭
gourmet meals prepared by our top chefs.</‬
‭ p‭
‭>‬‬
<‭
‭a‬‬‭
href‬
=‭
‭"‬food.html"‬‭
class‬
=‬
‭ "btn‬
‭
btn-primary mt-auto"‬
‭ >Explore</‬
‭ a‭
‭ >
‬‬
</‬
‭ div‬
‭ >‬
‭
</‬
‭ div‬
‭ >‬
‭
</‬
‭ div‬
‭ >‬
‭
<‭
‭d‬iv‬‭
class‬
=‭
‭ "
‬col-md-4 d-flex align-items-stretch"‬
>‬
‭
<‭
‭d
‬iv‬‭
class‬
=‭
‭ "
‬card text-center w-100"‬
>‬
‭
 <‭
‭i‬mg‬‭
src‬
=‭
‭"‬img/spa.jpg"‬‭
class‬
=‭
‭"‬card-img-top‬
img-fluid"‬‭
‭ alt‬
=‭
‭"‬Spa & Wellness"‬‭
style‬
=‬
‭ "height: 300px;‬
‭
object-fit: cover;"‬
‭ >‬
‭
<‭
‭d‬iv‬‭
class‬
=‭
‭ "
‬card-body d-flex flex-column"‬
>‬
‭
<‭
‭h‬5‬‭
class‬
=‬
‭ "card-title"‬
‭ >Spa‬‭
‭ &‬
Wellness</‬
‭ h5‬
‭ >‬
‭
<‭
‭p‬‬‭
class‬
=‭
‭"‬card-text flex-grow-1"‬
>Relax‬
‭
and rejuvenate with our world-class spa services.</‬
‭ p‭
‭>‬‬
<‭
‭a‬‬‭
href‬
=‭
‭"‬spa.html"‬‭
class‬
=‭
‭"‬btn‬
btn-primary mt-auto"‬
‭ >Explore</‬
‭ a‭
‭ >
‬‬
</‬
‭ div‬
‭ >‬
‭
</‬
‭ div‬
‭ >‬
‭
</‬
‭ div‬
‭ >‬
‭
</‬
‭ div‬
‭ >‬
‭
</‬
‭ div‬
‭ >‬
‭
</‬
‭ section‬
‭ >‬
‭

<!-- Footer -->‬

‭
<‬
‭ footer‬‭
‭ id‬
=‭
‭ "
‬contact"‬‭
class‬
=‭
‭ "
‬text-center py-4"‬
style‬
‭ =‭
‭"‬background-color: #4173a7; color: white;"‬
>‬
‭
<‬
‭ div‬‭
‭ class‬
=‭
‭ "
‬container"‬
>‬
‭
<‭
‭d‬iv‬‭
class‬
=‭
‭ "
‬row"‬
>‬
‭
<!-- Contact Information -->‬
‭
<‭
‭d‬iv‬‭
class‬
=‭
‭ "
‬col-md-6"‬
>‬
‭
<‭
‭p
‬‬><‬
‭ strong‬‭
‭ style‬
=‭
‭"‬color: white;"‬
>Contact‬
‭
Us:</‬
‭ strong‬
‭ ></‬
‭ p‭
‭>‬‬
<‭
‭p
‬‬‭
style‬
=‭
‭"‬color: white;"‬
>Phone: +977‬
‭
-9800000000</‬
‭ p‬
‭ >‬
‭
<‭
‭p
‬‬‭
style‬
=‭
‭"‬color: white;"‬
>Email:‬
‭
[email protected]</‬
‭ p‭
‭ >
‬‬
</‬
‭ div‬
‭ >‬
‭
<!-- Copyright -->‬
‭
<‭
‭d‬iv‬‭
class‬
=‭
‭ "
‬col-md-6"‬
>‬
‭
 <‭
‭p
‬‬‭
style‬
=‭
‭"‬color: white;"‬
>‭
‭&‬copy;‬‭
2024 Hotel‬
Hasbin. All rights reserved.</‬
‭ p‭
‭ >
‬‬
</‬
‭ div‬
‭ >‬
‭
</‬
‭ div‬
‭ >‬
‭
</‬
‭ div‬
‭ >‬
‭
</‬
‭ footer‬
‭ >‬
‭

</‬
‭ div‬
‭ >‬
‭

<‬
‭ script‬
‭
src‬
‭ =‭
‭"‬https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootst‬
rap.bundle.min.js"‬
‭ ></‬
‭ script‬
‭ >‬
‭
</‬
‭ body‬
‭ >‬
‭
</‬
‭ html‬
‭ >‬
‭

‭6.2 food.html‬
<!‬
‭ DOCTYPE‬‭
‭ html‬
>‬
‭
<‬
‭ html‬‭
‭ lang‬
=‭
‭ "
‬en"‬
>‬
‭
<‬
‭ head‬
‭ >‬
‭
<‬
‭ meta‬‭
‭ charset‬
=‬
‭ "UTF-8"‬
‭ >‬
‭
<‬
‭ meta‬‭
‭ name‬
=‭
‭"‬viewport"‬‭
content‬
=‬
‭ "width=device-width,‬
‭
initial-scale=1.0"‬
‭ >‬
‭
<‬
‭ title‬
‭ >About Us -
‭ Hasbin hotel</‬
title‬
‭ >‬
‭
<‬
‭ link‬
‭
href‬
‭ =‬
‭ "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/boot‬
‭
strap.min.css"‬‭
‭ rel‬
=‭
‭"‬stylesheet"‬
>‬
‭
</‬
‭ head‬
‭ >‬
‭
<‬
‭ body‬
‭ >‬
‭
<‬
‭ nav‬‭
‭ class‬
=‭
‭ "
‬navbar navbar-expand-lg"‬
style‬
‭ =‭
‭"‬background-image: linear-gradient(to right, rgb(36 96‬
169), rgb(113, 163, 232));"‬
‭ >‬
‭
<‭
‭d‬iv‬‭
class‬
=‭
‭ "
‬container-fluid"‬
>‬
‭
<‭
‭a‬‬‭
class‬
=‭
‭"‬navbar-brand text-white"‬‭
href‬
=‭
‭"‬#"‬
>Luxe‬
‭
Stay Inn</‬
‭ a‭
‭ >
‬‬
<‭
‭b‬utton‬‭
class‬
=‬
‭ "navbar-toggler"‬‭
‭ type‬
=‭
‭"‬button"‬
data-bs-toggle‬
‭ =‭
‭ "
‬collapse"‬‭
data-bs-target‬
=‭
‭"‬#navbarNav"‬
aria-controls‬
‭ =‬
‭ "navbarNav"‬‭
‭ aria-expanded‬
=‭
‭"‬false"‬
aria-label‬
‭ =‭
‭ "
‬Toggle navigation"‬
>‬
‭
<‭
‭s
‬pan‬‭
class‬
=‭
‭"‬navbar-toggler-icon"‬
></‬
‭ span‬
‭ >‬
‭
</‬
‭ button‬
‭ >‬
‭
<‭
‭d‬iv‬‭
class‬
=‭
‭ "
‬collapse navbar-collapse"‬
id‬
‭ =‬
‭ "navbarNav"‬
‭ >‬
‭
<‭
‭u
‬l‬‭
class‬
=‬
‭ "navbar-nav ms-auto"‬
‭ >‬
‭
<‭
‭l‬i‬‭
class‬
=‬
‭ "nav-item"‬
‭ >‬
‭
<‭
‭a‬‬‭
class‬
=‭
‭"‬nav-link active‬‭
text-white"‬
aria-current‬
‭ =‭
‭"‬page"‬‭
href‬
=‭
‭"‬index.html"‬
>Home</‬
‭ a‭
‭>‬‬
</‬
‭ li‬
‭ >‬
‭
<‭
‭l‬i‬‭
class‬
=‬
‭ "nav-item"‬
‭ >‬
‭
<‭
‭a‬‬‭
class‬
=‭
‭"‬nav-link text-white"‬
href‬
‭ =‬
‭ "about.html"‬
‭ >About Us</‬
‭ a‭
‭>‬‬
</‬
‭ li‬
‭ >‬
‭
<‭
‭l‬i‬‭
class‬
=‬
‭ "nav-item"‬
‭ >‬
‭
<‭
‭a‬‬‭
class‬
=‭
‭"‬nav-link text-white"‬
href‬
‭ =‬
‭ "contact.html"‬
‭ >Contact</‬
‭ a‬
‭ >‬
‭
</‬
‭ li‬
‭ >‬
‭
</‬
‭ ul‬
‭ >‬
‭
</‬
‭ div‬
‭ >‬
‭
</‬
‭ div‬
‭ >‬
‭
</‬
‭ nav‬
‭ >‬
‭

<!-- About Us Section -->‬

‭
<‬
‭ section‬‭
‭ class‬
=‭
‭ "
‬about-us-section py-5"‬
>‬
‭
 <‬
‭ div‬‭
‭ class‬
=‭
‭ "
‬container"‬
>‬
‭
<‭
‭d‬iv‬‭
class‬
=‭
‭ "
‬row"‬
>‬
‭
<!-- Text Section -->‬
‭
<‭
‭d‬iv‬‭
class‬
=‭
‭ "
‬col-md-6"‬
>‬
‭
<‭
‭h
‬2‬
>Waffle Buffet Spread</‬
‭ h2‬
‭ >‬
‭
<‭
‭p
‬‬>In the warmth of a bustling room,‬‭
‭ individuals‬
are captured in the act of delighting in a communal breakfast‬
‭
experience.‬
‭
A waffle buffet is laid out invitingly,‬
‭
with an array of toppings from fresh fruits to syrups enticing‬
‭
the attendees.‬
‭
The joy of choice is evident as each person‬
‭
prepares their plate, customizing their waffle to taste while‬
‭
engaging in light-hearted conversation and enjoying the‬
‭
camaraderie of the morning gathering.‬
‭

</‬
‭ p‭
‭ >
‬‬
</‬
‭ div‬
‭ >‬
‭
<!-- Image Section -->‬
‭
<‭
‭d‬iv‬‭
class‬
=‭
‭ "
‬col-md-6"‬
>‬
‭
<‭
‭i
‬mg‬‭
src‬
=‭
‭"‬img/food.jpg"‬‭
alt‬
=‭
‭"‬Resort‬‭
Paradise"‬
class‬
‭ =‭
‭"‬img-fluid"‬
>‬
‭
</‬
‭ div‬
‭ >‬
‭
</‬
‭ div‬
‭ >‬
‭
</‬
‭ div‬
‭ >‬
‭
</‬
‭ section‬
‭ >‬
‭
<!-- About Us Section -->‬
‭
<‬
‭ section‬‭
‭ class‬
=‭
‭ "
‬about-us-section py-5"‬
>‬
‭
<‬
‭ div‬‭
‭ class‬
=‭
‭ "
‬container"‬
>‬
‭
<‭
‭d‬iv‬‭
class‬
=‭
‭ "
‬row"‬
>‬
‭
<!-- Image Section -->‬
‭
<‭
‭d‬iv‬‭
class‬
=‭
‭ "
‬col-md-6"‬
>‬
‭
<‭
‭i
‬mg‬‭
src‬
=‭
‭"‬img/food2.jpg"‬‭
alt‬
=‭
‭"‬Resort‬‭
Paradise"‬
class‬
‭ =‭
‭"‬img-fluid custom-img-width"‬
>‬
‭
</‬
‭ div‬
‭ >‬
‭
<!-- Text Section -->‬
‭
<‭
‭d‬iv‬‭
class‬
=‭
‭ "
‬col-md-6"‬
>‬
‭
<‭
‭h
‬2‬
>Chefs Preparing Food</‬
‭ h2‬
‭ >‬
‭
<‭
‭p
‬‬>In the photo, a group of professional‬‭
‭ chefs,‬
dressed in traditional black chef uniforms and hats, are engaged‬
‭
in the careful preparation and arrangement of various dishes at‬
‭
a buffet.‬
‭
The focus of the scene is on a young chef in‬
‭
the foreground, who is attentively placing fresh greens onto a‬
‭
plate.‬
‭
His colleagues in the background are‬
‭
similarly occupied, ensuring the food is presented appealingly.‬
‭
The setting, likely a hotel or restaurant,‬
‭
features a modern and elegant interior,‬
‭
enhancing the upscale dining experience.‬
‭

</‬
‭ p‭
‭ >
‬‬
</‬
‭ div‬
‭ >‬
‭
</‬
‭ div‬
‭ >‬
‭
</‬
‭ div‬
‭ >‬
‭
</‬
‭ section‬
‭ >‬
‭

<‬
‭ script‬
‭
src‬
‭ =‭
‭"‬https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootst‬
rap.bundle.min.js"‬
‭ ></‬
‭ script‬
‭ >‬
‭
</‬
‭ body‬
‭ >‬
‭
</‬
‭ html‬
‭ >‬
‭
‭6.3 room.html‬
<!‬
‭ DOCTYPE‬‭
‭ html‬
>‬
‭
<‬
‭ html‬‭
‭ lang‬
=‭
‭ "
‬en"‬
>‬
‭
<‬
‭ head‬
‭ >‬
‭
<‬
‭ meta‬‭
‭ charset‬
=‬
‭ "UTF-8"‬
‭ >‬
‭
<‬
‭ meta‬‭
‭ name‬
=‭
‭"‬viewport"‬‭
content‬
=‬
‭ "width=device-width,‬
‭
initial-scale=1.0"‬
‭ >‬
‭
<‬
‭ title‬
‭ >About Us -
‭ Hasbin hotel</‬
title‬
‭ >‬
‭
<‬
‭ link‬
‭
href‬
‭ =‬
‭ "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/boot‬
‭
strap.min.css"‬‭
‭ rel‬
=‭
‭"‬stylesheet"‬
>‬
‭
<‬
‭ link‬‭
‭ rel‬
=‬
‭ "stylesheet"‬‭
‭ href‬
=‭
‭"‬room.css"‬
>‬
‭
</‬
‭ head‬
‭ >‬
‭
<‬
‭ body‬
‭ >‬
‭
<‬
‭ nav‬‭
‭ class‬
=‭
‭ "
‬navbar navbar-expand-lg"‬
style‬
‭ =‭
‭"‬background-image: linear-gradient(to right,‬‭
rgb(36 96‬
169), rgb(113, 163, 232));"‬
‭ >‬
‭
<‭
‭d‬iv‬‭
class‬
=‭
‭ "
‬container-fluid"‬
>‬
‭
<‭
‭a‬‬‭
class‬
=‭
‭"‬navbar-brand text-white"‬‭
href‬
=‭
‭"‬#"‬
>Luxe‬
‭
Stay Inn</‬
‭ a‭
‭ >
‬‬
<‭
‭b‬utton‬‭
class‬
=‬
‭ "navbar-toggler"‬‭
‭ type‬
=‭
‭"‬button"‬
data-bs-toggle‬
‭ =‭
‭ "
‬collapse"‬‭
data-bs-target‬
=‭
‭"‬#navbarNav"‬
aria-controls‬
‭ =‬
‭ "navbarNav"‬‭
‭ aria-expanded‬
=‭
‭"‬false"‬
aria-label‬
‭ =‭
‭ "
‬Toggle navigation"‬
>‬
‭
<‭
‭s
‬pan‬‭
class‬
=‭
‭"‬navbar-toggler-icon"‬
></‬
‭ span‬
‭ >‬
‭
</‬
‭ button‬
‭ >‬
‭
<‭
‭d‬iv‬‭
class‬
=‭
‭ "
‬collapse navbar-collapse"‬
id‬
‭ =‬
‭ "navbarNav"‬
‭ >‬
‭
<‭
‭u
‬l‬‭
class‬
=‬
‭ "navbar-nav ms-auto"‬
‭ >‬
‭
<‭
‭l‬i‬‭
class‬
=‬
‭ "nav-item"‬
‭ >‬
‭
<‭
‭a‬‬‭
class‬
=‭
‭"‬nav-link active‬‭
text-white"‬
aria-current‬
‭ =‭
‭"‬page"‬‭
href‬
=‭
‭"‬index.html"‬
>Home</‬
‭ a‭
‭>‬‬
 </‬
‭ li‬
‭ >‬
‭
<‭
‭l‬i‬‭
class‬
=‬
‭ "nav-item"‬
‭ >‬
‭
<‭
‭a‬‬‭
class‬
=‭
‭"‬nav-link text-white"‬
href‬
‭ =‬
‭ "about.html"‬
‭ >About Us</‬
‭ a‭
‭>‬‬
</‬
‭ li‬
‭ >‬
‭
<‭
‭l‬i‬‭
class‬
=‬
‭ "nav-item"‬
‭ >‬
‭
<‭
‭a‬‬‭
class‬
=‭
‭"‬nav-link text-white"‬
href‬
‭ =‬
‭ "contact.html"‬
‭ >Contact</‬
‭ a‬
‭ >‬
‭
</‬
‭ li‬
‭ >‬
‭
</‬
‭ ul‬
‭ >‬
‭
</‬
‭ div‬
‭ >‬
‭
</‬
‭ div‬
‭ >‬
‭
</‬
‭ nav‬
‭ >‬
‭

<!-- About Us Section -->‬

‭
<‬
‭ section‬‭
‭ class‬
=‭
‭ "
‬about-us-section py-5"‬
>‬
‭
<‬
‭ div‬‭
‭ class‬
=‭
‭ "
‬container"‬
>‬
‭
<‭
‭d‬iv‬‭
class‬
=‭
‭ "
‬row"‬
>‬
‭
<!-- Text Section -->‬
‭
<‭
‭d‬iv‬‭
class‬
=‭
‭ "
‬col-md-6"‬
>‬
‭
<‭
‭h
‬2‬
>Luxury Rooms</‬
‭ h2‬
‭ >‬
‭
<‭
‭p
‬‬>This image showcases a spacious‬‭
‭ and elegantly‬
designed hotel room bathed in natural light from the large‬
‭
windows.‬
‭
The room is tastefully decorated with‬
‭
neutral tones that create a serene and inviting atmosphere. A‬
‭
king-sized bed takes the center stage,‬
‭
adorned with pristine white bedding and‬
‭
flanked by symmetrical nightstands with warm lighting. Wall art‬
‭
adds a touch of sophistication to the space,‬
‭
while the seating area provides a cozy spot‬
‭
for relaxation. The meticulous attention to detail suggests a‬
‭
luxurious and comfortable stay for any guest.‬
‭
 </‬
‭ p‭
‭ >
‬‬
</‬
‭ div‬
‭ >‬
‭
<!-- Image Section -->‬
‭
<‭
‭d‬iv‬‭
class‬
=‭
‭ "
‬col-md-6"‬
>‬
‭
<‭
‭i
‬mg‬‭
src‬
=‭
‭"‬img/room.jpg"‬‭
alt‬
=‭
‭"‬Resort‬‭
Paradise"‬
class‬
‭ =‭
‭"‬img-fluid"‬
>‬
‭
</‬
‭ div‬
‭ >‬
‭
</‬
‭ div‬
‭ >‬
‭
</‬
‭ div‬
‭ >‬
‭
</‬
‭ section‬
‭ >‬
‭
<!-- About Us Section -->‬
‭
<‬
‭ section‬‭
‭ class‬
=‭
‭ "
‬about-us-section py-5"‬
>‬
‭
<‬
‭ div‬‭
‭ class‬
=‭
‭ "
‬container"‬
>‬
‭
<‭
‭d‬iv‬‭
class‬
=‭
‭ "
‬row"‬
>‬
‭
<!-- Image Section -->‬
‭
<‭
‭d‬iv‬‭
class‬
=‭
‭ "
‬col-md-6"‬
>‬
‭
<‭
‭i
‬mg‬‭
src‬
=‭
‭"‬img/bed.jpg"‬‭
alt‬
=‭
‭"‬Resort‬‭
Paradise"‬
class‬
‭ =‭
‭"‬img-fluid custom-img-width"‬
>‬
‭
</‬
‭ div‬
‭ >‬
‭
<!-- Text Section -->‬
‭
<‭
‭d‬iv‬‭
class‬
=‭
‭ "
‬col-md-6"‬
>‬
‭
<‭
‭h
‬2‬
>Luxury Rooms</‬
‭ h2‬
‭ >‬
‭
<‭
‭p
‬‬>As the city transitions from day‬‭
‭ to night, a‬
moment of serenity is captured within this urban sanctuary. A‬
‭
glass of red wine rests beside an uncorked bottle, both sharing‬
‭
the spotlight with a plate of delectable cheeses. The soft‬
‭
textures of the bed's linens complement the smoothness of the‬
‭
wine, inviting a sense of relaxation. Through the‬
‭
floor-to-ceiling window, the skyline stands majestically,‬
‭
crowned by the Empire State Building in the distance, all basked‬
‭
in the warm, golden hues of the setting sun. This picturesque‬
‭
scene embodies the perfect blend of comfort and elegance — an‬
‭
intimate escape high above the bustling streets.‬
‭

</‬
‭ p‭
‭ >
‬‬
</‬
‭ div‬
‭ >‬
‭
</‬
‭ div‬
‭ >‬
‭
</‬
‭ div‬
‭ >‬
‭
</‬
‭ section‬
‭ >‬
‭

<‬
‭ script‬
‭
src‬
‭ =‭
‭"‬https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootst‬
rap.bundle.min.js"‬
‭ ></‬
‭ script‬
‭ >‬
‭
</‬
‭ body‬
‭ >‬
‭
</‬
‭ html‬
‭ >‬
‭

room.css‬
‭

.custom-img-width‬‭
‭ {‬
width‬
‭ :‬‭
‭ 100‬
%‭
‭;‬‬
max-width‬
‭ :‬‭
‭ 100‬
%‭
‭;‬‬
height‬
‭ :‬‭
‭ 60‬
%‭
‭ ;
‬‬‭
/* Ensures responsiveness */‬
}‬
‭

‭6.4 spa.html‬
<!‬
‭ DOCTYPE‬‭
‭ html‬
>‬
‭
<‬
‭ html‬‭
‭ lang‬
=‭
‭ "
‬en"‬
>‬
‭
<‬
‭ head‬
‭ >‬
‭
 <‬
‭ meta‬‭
‭ charset‬
=‬
‭ "UTF-8"‬
‭ >‬
‭
<‬
‭ meta‬‭
‭ name‬
=‭
‭"‬viewport"‬‭
content‬
=‬
‭ "width=device-width,‬
‭
initial-scale=1.0"‬
‭ >‬
‭
<‬
‭ title‬
‭ >About Us -
‭ Hasbin hotel</‬
title‬
‭ >‬
‭
<‬
‭ link‬
‭
href‬
‭ =‬
‭ "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/boot‬
‭
strap.min.css"‬‭
‭ rel‬
=‭
‭"‬stylesheet"‬
>‬
‭
</‬
‭ head‬
‭ >‬
‭
<‬
‭ body‬
‭ >‬
‭
<‬
‭ nav‬‭
‭ class‬
=‭
‭ "
‬navbar navbar-expand-lg"‬
style‬
‭ =‭
‭"‬background-image: linear-gradient(to right,‬‭
rgb(36 96‬
169), rgb(113, 163, 232));"‬
‭ >‬
‭
<‭
‭d‬iv‬‭
class‬
=‭
‭ "
‬container-fluid"‬
>‬
‭
<‭
‭a‬‬‭
class‬
=‭
‭"‬navbar-brand text-white"‬‭
href‬
=‭
‭"‬#"‬
>Luxe‬
‭
Stay Inn</‬
‭ a‭
‭ >
‬‬
<‭
‭b‬utton‬‭
class‬
=‬
‭ "navbar-toggler"‬‭
‭ type‬
=‭
‭"‬button"‬
data-bs-toggle‬
‭ =‭
‭ "
‬collapse"‬‭
data-bs-target‬
=‭
‭"‬#navbarNav"‬
aria-controls‬
‭ =‬
‭ "navbarNav"‬‭
‭ aria-expanded‬
=‭
‭"‬false"‬
aria-label‬
‭ =‭
‭ "
‬Toggle navigation"‬
>‬
‭
<‭
‭s
‬pan‬‭
class‬
=‭
‭"‬navbar-toggler-icon"‬
></‬
‭ span‬
‭ >‬
‭
</‬
‭ button‬
‭ >‬
‭
<‭
‭d‬iv‬‭
class‬
=‭
‭ "
‬collapse navbar-collapse"‬
id‬
‭ =‬
‭ "navbarNav"‬
‭ >‬
‭
<‭
‭u
‬l‬‭
class‬
=‬
‭ "navbar-nav ms-auto"‬
‭ >‬
‭
<‭
‭l‬i‬‭
class‬
=‬
‭ "nav-item"‬
‭ >‬
‭
<‭
‭a‬‬‭
class‬
=‭
‭"‬nav-link active‬‭
text-white"‬
aria-current‬
‭ =‭
‭"‬page"‬‭
href‬
=‭
‭"‬index.html"‬
>Home</‬
‭ a‭
‭>‬‬
</‬
‭ li‬
‭ >‬
‭
<‭
‭l‬i‬‭
class‬
=‬
‭ "nav-item"‬
‭ >‬
‭
<‭
‭a‬‬‭
class‬
=‭
‭"‬nav-link text-white"‬
href‬
‭ =‬
‭ "about.html"‬
‭ >About Us</‬
‭ a‭
‭>‬‬
</‬
‭ li‬
‭ >‬
‭
<‭
‭l‬i‬‭
class‬
=‬
‭ "nav-item"‬
‭ >‬
‭
 <‭
‭a‬‬‭
class‬
=‭
‭"‬nav-link text-white"‬
href‬
‭ =‬
‭ "contact.html"‬
‭ >Contact</‬
‭ a‬
‭ >‬
‭
</‬
‭ li‬
‭ >‬
‭
</‬
‭ ul‬
‭ >‬
‭
</‬
‭ div‬
‭ >‬
‭
</‬
‭ div‬
‭ >‬
‭
</‬
‭ nav‬
‭ >‬
‭

<!-- About Us Section -->‬

‭
<‬
‭ section‬‭
‭ class‬
=‭
‭ "
‬about-us-section py-5"‬
>‬
‭
<‬
‭ div‬‭
‭ class‬
=‭
‭ "
‬container"‬
>‬
‭
<‭
‭d‬iv‬‭
class‬
=‭
‭ "
‬row"‬
>‬
‭
<!-- Text Section -->‬
‭
<‭
‭d‬iv‬‭
class‬
=‭
‭ "
‬col-md-6"‬
>‬
‭
<‭
‭h
‬2‬
>Serene Spa Ambiance</‬
‭ h2‬
‭ >‬
‭
<‭
‭p
‬‬>This image invites you to indulge‬‭
‭ in the‬
tranquil haven of a spa, where the soft glow of candles and the‬
‭
warm embrace of wooden tones create an atmosphere of serenity‬
‭
and quiet luxury. The large, inviting bathtub, framed by the‬
‭
elegant simplicity of a Japanese shoji screen, beckons for a‬
‭
moment of relaxation and rejuvenation. The thoughtful placement‬
‭
of towels and traditional bucket complement the meticulous‬
‭
design, ensuring that every element works together to provide an‬
‭
oasis of calm in the midst of a busy world.‬
‭

</‬
‭ p‭
‭ >
‬‬
</‬
‭ div‬
‭ >‬
‭
<!-- Image Section -->‬
‭
<‭
‭d‬iv‬‭
class‬
=‭
‭ "
‬col-md-6"‬
>‬
‭
<‭
‭i
‬mg‬‭
src‬
=‭
‭"‬img/spa1.jpg"‬‭
alt‬
=‭
‭"‬Resort‬‭
Paradise"‬
class‬
‭ =‭
‭"‬img-fluid"‬
>‬
‭
</‬
‭ div‬
‭ >‬
‭
</‬
‭ div‬
‭ >‬
‭
 </‬
‭ div‬
‭ >‬
‭
</‬
‭ section‬
‭ >‬
‭
<!-- About Us Section -->‬
‭
<‬
‭ section‬‭
‭ class‬
=‭
‭ "
‬about-us-section py-5"‬
>‬
‭
<‬
‭ div‬‭
‭ class‬
=‭
‭ "
‬container"‬
>‬
‭
<‭
‭d‬iv‬‭
class‬
=‭
‭ "
‬row"‬
>‬
‭
<!-- Image Section -->‬
‭
<‭
‭d‬iv‬‭
class‬
=‭
‭ "
‬col-md-6"‬
>‬
‭
<‭
‭i
‬mg‬‭
src‬
=‭
‭"‬img/spa.jpg"‬‭
alt‬
=‭
‭"‬Resort‬‭
Paradise"‬
class‬
‭ =‭
‭"‬img-fluid custom-img-width"‬
>‬
‭
</‬
‭ div‬
‭ >‬
‭
<!-- Text Section -->‬
‭
<‭
‭d‬iv‬‭
class‬
=‭
‭ "
‬col-md-6"‬
>‬
‭
<‭
‭h
‬2‬
>Serene Spa Essence</‬
‭ h2‬
‭ >‬
‭
<‭
‭p
‬‬>Bask in the tranquility of this‬‭
‭ serene spa‬
setting, where a beautifully crafted glass bottle, filled with‬
‭
golden essence, sits atop a perfectly folded white towel,‬
‭
embodying purity and relaxation. The natural backdrop,‬
‭
highlighted by the warm golden sunlight filtering through the‬
‭
palm fronds, creates an atmosphere of peace and rejuvenation.‬
‭
This picturesque moment captures the essence of a spa retreat‬
‭
where tranquility and luxury meet.‬
‭

</‬
‭ p‭
‭ >
‬‬
</‬
‭ div‬
‭ >‬
‭
</‬
‭ div‬
‭ >‬
‭
</‬
‭ div‬
‭ >‬
‭
</‬
‭ section‬
‭ >‬
‭

<‬
‭ script‬
‭
src‬
‭ =‭
‭"‬https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootst‬
rap.bundle.min.js"‬
‭ ></‬
‭ script‬
‭ >‬
‭
</‬
‭ body‬
‭ >‬
‭
</‬
‭ html‬
‭ >‬
‭

‭6.5 about.html‬
<!‬
‭ DOCTYPE‬‭
‭ html‬
>‬
‭
<‬
‭ html‬‭
‭ lang‬
=‭
‭ "
‬en"‬
>‬
‭
<‬
‭ head‬
‭ >‬
‭
<‬
‭ meta‬‭
‭ charset‬
=‬
‭ "UTF-8"‬
‭ >‬
‭
<‬
‭ meta‬‭
‭ name‬
=‭
‭"‬viewport"‬‭
content‬
=‬
‭ "width=device-width,‬
‭
initial-scale=1.0"‬
‭ >‬
‭
<‬
‭ title‬
‭ >About Us -
‭ Hasbin hotel</‬
title‬
‭ >‬
‭
<‬
‭ link‬
‭
href‬
‭ =‬
‭ "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/boot‬
‭
strap.min.css"‬‭
‭ rel‬
=‭
‭"‬stylesheet"‬
>‬
‭
<‬
‭ link‬‭
‭ rel‬
=‬
‭ "stylesheet"‬‭
‭ href‬
=‭
‭"‬index.css"‬
>‬
‭
</‬
‭ head‬
‭ >‬
‭
<‬
‭ body‬
‭ >‬
‭
<‬
‭ nav‬‭
‭ class‬
=‭
‭ "
‬navbar navbar-expand-lg"‬
style‬
‭ =‭
‭"‬background-image: linear-gradient(to right,‬‭
rgb(36 96‬
169), rgb(113, 163, 232));"‬
‭ >‬
‭
<‭
‭d‬iv‬‭
class‬
=‭
‭ "
‬container-fluid"‬
>‬
‭
<‭
‭a‬‬‭
class‬
=‭
‭"‬navbar-brand text-white"‬‭
href‬
=‭
‭"‬#"‬
>Luxe‬
‭
Stay Inn</‬
‭ a‭
‭ >
‬‬
<‭
‭b‬utton‬‭
class‬
=‬
‭ "navbar-toggler"‬‭
‭ type‬
=‭
‭"‬button"‬
data-bs-toggle‬
‭ =‭
‭ "
‬collapse"‬‭
data-bs-target‬
=‭
‭"‬#navbarNav"‬
aria-controls‬
‭ =‬
‭ "navbarNav"‬‭
‭ aria-expanded‬
=‭
‭"‬false"‬
aria-label‬
‭ =‭
‭ "
‬Toggle navigation"‬
>‬
‭
<‭
‭s
‬pan‬‭
class‬
=‭
‭"‬navbar-toggler-icon"‬
></‬
‭ span‬
‭ >‬
‭
</‬
‭ button‬
‭ >‬
‭
<‭
‭d‬iv‬‭
class‬
=‭
‭ "
‬collapse navbar-collapse"‬
id‬
‭ =‬
‭ "navbarNav"‬
‭ >‬
‭
<‭
‭u
‬l‬‭
class‬
=‬
‭ "navbar-nav ms-auto"‬
‭ >‬
‭
<‭
‭l‬i‬‭
class‬
=‬
‭ "nav-item"‬
‭ >‬
‭
<‭
‭a‬‬‭
class‬
=‭
‭"‬nav-link active text-white"‬
aria-current‬
‭ =‭
‭"‬page"‬‭
href‬
=‭
‭"‬index.html"‬
>Home</‬
‭ a‭
‭>‬‬
</‬
‭ li‬
‭ >‬
‭
<‭
‭l‬i‬‭
class‬
=‬
‭ "nav-item"‬
‭ >‬
‭
<‭
‭a‬‬‭
class‬
=‭
‭"‬nav-link text-white"‬
href‬
‭ =‬
‭ "about.html"‬
‭ >About Us</‬
‭ a‭
‭>‬‬
</‬
‭ li‬
‭ >‬
‭
<‭
‭l‬i‬‭
class‬
=‬
‭ "nav-item"‬
‭ >‬
‭
<‭
‭a‬‬‭
class‬
=‭
‭"‬nav-link text-white"‬
href‬
‭ =‬
‭ "contact.html"‬
‭ >Contact</‬
‭ a‬
‭ >‬
‭
</‬
‭ li‬
‭ >‬
‭
</‬
‭ ul‬
‭ >‬
‭
</‬
‭ div‬
‭ >‬
‭
</‬
‭ div‬
‭ >‬
‭
</‬
‭ nav‬
‭ >‬
‭
<‬
‭ h1‬
‭ >About Us</‬
‭ h1‬
‭ >‬
‭

<!-- About Us Section -->‬

‭
<‬
‭ section‬‭
‭ class‬
=‭
‭ "
‬about-us-section py-5"‬
>‬
‭
<‬
‭ div‬‭
‭ class‬
=‭
‭ "
‬container"‬
>‬
‭
<‭
‭d‬iv‬‭
class‬
=‭
‭ "
‬row"‬
>‬
‭
<!-- Image Section -->‬
‭
<‭
‭d‬iv‬‭
class‬
=‭
‭ "
‬col-md-6"‬
>‬
‭
<‭
‭i
‬mg‬‭
src‬
=‭
‭"‬img/about1.jpg"‬‭
alt‬
=‬
‭ "Resort‬‭
‭ Paradise"‬
class‬
‭ =‭
‭"‬img-fluid custom-img-width"‬
>‬
‭
</‬
‭ div‬
‭ >‬
‭
<!-- Text Section -->‬
‭
<‭
‭d‬iv‬‭
class‬
=‭
‭ "
‬col-md-6"‬
>‬
‭
<‭
‭h
‬2‬
>Luxury Rooms</‬
‭ h2‬
‭ >‬
‭
<‭
‭p
‬‬>This image showcases the grandeur‬‭
‭ of a‬
luxurious hotel lounge, beautifully designed to merge comfort‬
‭
with elegance.‬
‭
The room is illuminated by the soft light of‬
‭
magnificent chandeliers, which hang regally above the plush‬
‭
leather chairs and comfortable sofas.‬
‭
In the center stands a sleek grand piano,‬
‭
inviting guests to enjoy a musical interlude. The high ceilings‬
‭
add to the feeling of spaciousness,‬
‭
while the rich color palette and carefully‬
‭
selected decorations epitomize sophisticated interior design.‬
‭

</‬
‭ p‭
‭ >
‬‬
</‬
‭ div‬
‭ >‬
‭
</‬
‭ div‬
‭ >‬
‭
</‬
‭ div‬
‭ >‬
‭
</‬
‭ section‬
‭ >‬
‭

<!-- About Us Section -->‬

‭
<‭
‭s‬ection‬‭
class‬
=‭
‭"‬about-us-section py-5"‬
>‬
‭
<‬
‭ div‬‭
‭ class‬
=‭
‭ "
‬container"‬
>‬
‭
<‭
‭d‬iv‬‭
class‬
=‭
‭ "
‬row"‬
>‬
‭
<!-- Text Section -->‬
‭
<‭
‭d‬iv‬‭
class‬
=‭
‭ "
‬col-md-6"‬
>‬
‭
<‭
‭h
‬2‬
>Architect</‬
‭ h2‬
‭ >‬
‭
<‭
‭p
‬‬>Resort Paradise is your ultimate‬‭
‭ destination‬
for luxury and relaxation. Nestled in the heart of nature, our‬
‭
resort offers an unparalleled experience with world-class‬
‭
amenities, exquisite dining, and exceptional service. Whether‬
‭
you're looking for a peaceful retreat or an adventure-filled‬
‭
vacation, Resort Paradise has something for everyone.</‬
‭ p‭
‭>‬‬
</‬
‭ div‬
‭ >‬
‭
<!-- Image Section -->‬
‭
<‭
‭d‬iv‬‭
class‬
=‭
‭ "
‬col-md-6"‬
>‬
‭
 <‭
‭i
‬mg‬‭
src‬
=‭
‭"‬img/about.jpg"‬‭
alt‬
=‭
‭"‬Resort Paradise"‬
class‬
‭ =‭
‭"‬img-fluid"‬
>‬
‭
</‬
‭ div‬
‭ >‬
‭
</‬
‭ div‬
‭ >‬
‭
</‬
‭ div‬
‭ >‬
‭
</‬
‭ section‬
‭ >‬
‭

<!-- About Us Section -->‬

‭
<‬
‭ section‬‭
‭ class‬
=‭
‭ "
‬about-us-section py-5"‬
>‬
‭
<‬
‭ div‬‭
‭ class‬
=‭
‭ "
‬container"‬
>‬
‭
<‭
‭d‬iv‬‭
class‬
=‭
‭ "
‬row"‬
>‬
‭
<!-- Image Section -->‬
‭
<‭
‭d‬iv‬‭
class‬
=‭
‭ "
‬col-md-6"‬
>‬
‭
<‭
‭i
‬mg‬‭
src‬
=‭
‭"‬img/food2.jpg"‬‭
alt‬
=‭
‭"‬Resort‬‭
Paradise"‬
class‬
‭ =‭
‭"‬img-fluid custom-img-width"‬
>‬
‭
</‬
‭ div‬
‭ >‬
‭
<!-- Text Section -->‬
‭
<‭
‭d‬iv‬‭
class‬
=‭
‭ "
‬col-md-6"‬
>‬
‭
<‭
‭h
‬2‬
>Chefs Preparing Food</‬
‭ h2‬
‭ >‬
‭
<‭
‭p
‬‬>In the photo, a group of professional‬‭
‭ chefs,‬
dressed in traditional black chef uniforms and hats, are engaged‬
‭
in the careful preparation and arrangement of various dishes at‬
‭
a buffet.‬
‭
The focus of the scene is on a young chef‬
‭
in the foreground, who is attentively placing fresh greens onto‬
‭
a plate.‬
‭
His colleagues in the background are‬
‭
similarly occupied, ensuring the food is presented appealingly.‬
‭
The setting, likely a hotel or restaurant,‬
‭
features a modern and elegant interior,‬
‭
enhancing the upscale dining experience.‬
‭

</‬
‭ p‭
‭ >
‬‬
 </‬
‭ div‬
‭ >‬
‭
</‬
‭ div‬
‭ >‬
‭
</‬
‭ div‬
‭ >‬
‭
</‬
‭ section‬
‭ >‬
‭

<‬
‭ script‬
‭
src‬
‭ =‭
‭"‬https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootst‬
rap.bundle.min.js"‬
‭ ></‬
‭ script‬
‭ >‬
‭
</‬
‭ body‬
‭ >‬
‭
</‬
‭ html‬
‭ >‬
‭

about.css‬
‭
body‬
‭ {‬
‭
background-color‬
‭ :‬‭
‭ aliceblue‬
;‬
‭
width‬
‭ :‬‭
‭ 50‬
%‬
‭ ;‬
‭
height‬
‭ :‬‭
‭ 50‬
%‭
‭ ;
‬‬
}‬
‭

‭6.6 service.html‬
<!‬
‭ DOCTYPE‬‭
‭ html‬
>‬
‭
<‬
‭ html‬‭
‭ lang‬
=‭
‭ "
‬en"‬
>‬
‭
<‬
‭ head‬
‭ >‬
‭
<‬
‭ meta‬‭
‭ charset‬
=‬
‭ "UTF-8"‬
‭ >‬
‭
<‬
‭ meta‬‭
‭ name‬
=‭
‭"‬viewport"‬‭
content‬
=‬
‭ "width=device-width,‬
‭
initial-scale=1.0"‬
‭ >‬
‭
<‬
‭ title‬
‭ >Services - Hasbin hotel</‬
‭ title‬
‭ >‬
‭
<‬
‭ link‬
‭
href‬
‭ =‬
‭ "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/boot‬
‭
strap.min.css"‬‭
‭ rel‬
=‭
‭"‬stylesheet"‬
>‬
‭
<‬
‭ link‬‭
‭ rel‬
=‬
‭ "stylesheet"‬‭
‭ href‬
=‭
‭"‬styles.css"‬
>‬
‭
</‬
‭ head‬
‭ >‬
‭
<‬
‭ body‬
‭ >‬
‭
 <!-- Navigation -->‬
‭
<‬
‭ nav‬‭
‭ class‬
=‭
‭ "
‬navbar navbar-expand-lg navbar-light bg-light"‬
>‬
‭
<‭
‭d‬iv‬‭
class‬
=‭
‭ "
‬container-fluid"‬
>‬
‭
<‭
‭a‬‬‭
class‬
=‭
‭"‬navbar-brand"‬‭
href‬
=‭
‭"‬index.html"‬
>Resort‬
‭
Paradise</‬
‭ a‭
‭ >
‬‬
<‭
‭b‬utton‬‭
class‬
=‬
‭ "navbar-toggler"‬‭
‭ type‬
=‭
‭"‬button"‬
data-bs-toggle‬
‭ =‭
‭ "
‬collapse"‬‭
data-bs-target‬
=‭
‭"‬#navbarNav"‬
aria-controls‬
‭ =‬
‭ "navbarNav"‬‭
‭ aria-expanded‬
=‭
‭"‬false"‬
aria-label‬
‭ =‭
‭ "
‬Toggle navigation"‬
>‬
‭
<‭
‭s
‬pan‬‭
class‬
=‭
‭"‬navbar-toggler-icon"‬
></‬
‭ span‬
‭ >‬
‭
</‬
‭ button‬
‭ >‬
‭
<‭
‭d‬iv‬‭
class‬
=‭
‭ "
‬collapse navbar-collapse"‬
id‬
‭ =‬
‭ "navbarNav"‬
‭ >‬
‭
<‭
‭u
‬l‬‭
class‬
=‬
‭ "navbar-nav ms-auto"‬
‭ >‬
‭
<‭
‭l‬i‬‭
class‬
=‬
‭ "nav-item"‬
‭ >‬
‭
<‭
‭a‬‬‭
class‬
=‭
‭"‬nav-link"‬
href‬
‭ =‬
‭ "index.html"‬
‭ >Home</‬
‭ a‭
‭>‬‬
</‬
‭ li‬
‭ >‬
‭
<‭
‭l‬i‬‭
class‬
=‬
‭ "nav-item"‬
‭ >‬
‭
<‭
‭a‬‬‭
class‬
=‭
‭"‬nav-link"‬
href‬
‭ =‬
‭ "about.html"‬
‭ >About Us</‬
‭ a‭
‭>‬‬
</‬
‭ li‬
‭ >‬
‭
<‭
‭l‬i‬‭
class‬
=‬
‭ "nav-item"‬
‭ >‬
‭
<‭
‭a‬‬‭
class‬
=‭
‭"‬nav-link active"‬
aria-current‬
‭ =‭
‭"‬page"‬‭
href‬
=‭
‭"‬#"‬
>Services</‬
‭ a‭
‭>‬‬
</‬
‭ li‬
‭ >‬
‭
<‭
‭l‬i‬‭
class‬
=‬
‭ "nav-item"‬
‭ >‬
‭
<‭
‭a‬‬‭
class‬
=‭
‭"‬nav-link"‬
href‬
‭ =‬
‭ "contact.html"‬
‭ >Contact</‬
‭ a‬
‭ >‬
‭
</‬
‭ li‬
‭ >‬
‭
</‬
‭ ul‬
‭ >‬
‭
</‬
‭ div‬
‭ >‬
‭
</‬
‭ div‬
‭ >‬
‭
 </‬
‭ nav‬
‭ >‬
‭

<!-- Services Section -->‬

‭
<‬
‭ section‬‭
‭ class‬
=‭
‭ "
‬services-section py-5"‬
>‬
‭
<‭
‭d‬iv‬‭
class‬
=‭
‭ "
‬container"‬
>‬
‭
<‭
‭h‬2‬
>Our Services</‬
‭ h2‬
‭ >‬
‭
<‭
‭u‬l‬
>‬
‭
<‭
‭l
‬i‬
>Luxury Accommodation</‬
‭ li‬
‭ >‬
‭
<‭
‭l
‬i‬
>Gourmet Dining</‬
‭ li‬
‭ >‬
‭
<‭
‭l
‬i‬
>Spa and Wellness Treatments</‬
‭ li‬
‭ >‬
‭
<‭
‭l
‬i‬
>Outdoor Activities and Excursions</‬
‭ li‬
‭ >‬
‭
<‭
‭l
‬i‬
>Event Planning and Hosting</‬
‭ li‬
‭ >‬
‭
</‬
‭ ul‬
‭ >‬
‭
</‬
‭ div‬
‭ >‬
‭
</‬
‭ section‬
‭ >‬
‭

<!-- Footer -->‬

‭
<‬
‭ footer‬‭
‭ class‬
=‬
‭ "text-center py-4"‬
‭ >‬
‭
<‭
‭p‬‬
>‭
‭ &
‬copy;‬‭
2024 Resort Paradise. All rights‬‭
reserved.</‬
p‭
‭>‬‬
</‬
‭ footer‬
‭ >‬
‭

<‬
‭ script‬
‭
src‬
‭ =‭
‭"‬https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootst‬
rap.bundle.min.js"‬
‭ ></‬
‭ script‬
‭ >‬
‭
</‬
‭ body‬
‭ >‬
‭
</‬
‭ html‬
‭ >‬
‭

‭6.7 index.css‬
/* General Styles */‬
‭
html‬
‭ ,‬‭
‭ body‬‭
{‬
width‬
‭ :‬‭
‭ 100‬
%‭
‭;‬‬
margin‬
‭ :‬‭
‭ 0‭
;‬‬
 padding‬
‭ :‬‭
‭ 0‬;‬
‭
font-family‬
‭ :‬‭
‭ 'Playfair Display'‬
,‬‭
‭ serif‬
;‬
‭
}‬
‭

/* Background Image Container */‬

‭
.background-image-container‬‭
‭ {‬
background-image‬
‭ :‬‭
‭ url‬
(‬
‭ 'img/home.jpg'‬
‭ );‬
‭
background-size‬
‭ :‬‭
‭ cover‬
;‬
‭
background-position‬
‭ :‬‭
‭ center‬
;‬
‭
color‬
‭ :‬‭
‭ #fff‬
;‬
‭
padding‬
‭ :‬‭
‭ 300‬
px‬‭
‭ 0‭
;‬‬
text-align‬
‭ :‬‭
‭ center‬
;‬
‭
width‬
‭ :‬‭
‭ 100‬
%‭
‭;‬‬
}‬
‭

.background-image-container‬‭
‭ h2‬‭
{‬
margin-bottom‬
‭ :‬‭
‭ 200‬
px‬
‭ ;‬
‭
}‬
‭

.background-image-container‬‭
‭ p‬‭
{‬
margin-bottom‬
‭ :‬‭
‭ 100‬
px‬
‭ ;‬
‭
}‬
‭

/* Navigation */‬
‭
.navbar‬‭
‭ {‬
background-image‬
‭ :‬‭
‭ linear-gradient‬
(‬
‭ to‬‭
‭ right‬
,‬‭
‭ rgb‬
(‭
‭3‬6‬‭
96‬‭
169‬
),‬
‭
rgb‬
‭ (‭
‭1‬13‬
,‬‭
‭ 163‬
,‬‭
‭ 232‬
));‬
‭
}‬
‭
.navbar-brand‬‭
‭ {‬
font-size‬
‭ :‬‭
‭ 1.8‬
rem‬
‭ ;‬
‭
}‬
‭

.nav-link‬‭
‭ {‬
font-size‬
‭ :‬‭
‭ 1‭
r‬em‬
;‬
‭
}‬
‭

/* Footer */‬
‭
footer‬‭
‭ {‬
background-color‬
‭ :‬‭
‭ #f8f9fa‬
;‬
‭
width‬
‭ :‬‭
‭ 100‬
%‭
‭;‬‬
padding‬
‭ :‬‭
‭ 20‬
px‬‭
‭ 0‭
;‬‬
}‬
‭

footer‬‭
‭ p‬‭
{‬
margin‬
‭ :‬‭
‭ 0‭
;‬‬
color‬
‭ :‬‭
‭ #6c757d‬
;‬
‭
}‬
‭

/* Responsive Styles */‬

‭
@media‬‭
‭ (‭
m‬ax-width‬
:‬‭
‭ 768‬
px‬
‭ ) {‬
‭
.features-section‬‭
‭ .col-md-4‬‭
{‬
margin-bottom‬
‭ :‬‭
‭ 30‬
px‬
‭ ;‬
‭
}‬
‭
}‬
‭

.footer-custom‬‭
‭ {‬
background-color‬
‭ :‬‭
‭ #4173a7‬
;‬
‭
text-emphasis-color‬
‭ :‬‭
‭ white‬
;‬
‭
}‬
‭
‭7. Conclusion‬
‭The "Hasbin Hotel" website effectively utilizes HTML, CSS, and Bootstrap to create a‬
‭responsive and visually appealing online presence. The site is well-structured to highlight the‬
‭hotel's key offerings, ensuring a seamless user experience across all devices.‬