“Employee leave Management ”

Project Report

Submitted in partial fulfillment of the requirement for the award of

Degree of

Master of Computer Applications

Submitted to

IIMT UNIVERSITY,MEERUT

Submitted by: - Under Guidance of: -

Mukul rajput Prof.Paresh Pathak

Omkar
Upendra Singh
 IIMT UNIVERSITY
Master of Computer Application
Session 2023-2025

DATE………………………

CERTIFICATE

This is to certify that the work embodies in this project

entitled,“Employee leave Management ”,being submitted by

Mukul,Omkar,Upendra in partial fulfillment of the requirement for the
award of “Master of Computer Applications” to IIMT UNIVERSITY, MEERUT

during the academic year 2023-25 is a record of bonafide piece of work,

carried out by him/her under our/my supervision and guidance in the
“Department of Computer Application”, IIMT UNIVERSITY, MEERUT.

Prof.Paresh Pathak Er. Rachna Chaudhary Prof.Preeti Mittal

Guidence ByHead of Department-ITAssistant Professor-IT

Page1|
 IIMT UNIVERSITY
Master of Computer Application
Session 2023-2025

Date………………………………

APPROVAL CERTIFICATE
The project report entitled “Employee leave Management”,being
submitted by Mukul,Omkar,Upendra has been examined by us and is
hereby approved for the award of degree “Master of Computer
Applications”, for which it has been submitted. It is understood that by
this approval the undersigned do not necessarily endorse or approve any
statement made, the opinion expressed or conclusion drawn therein, but
approve the project only for the purpose for which it has been submitted.

(Internal Examiner) (External Examiner)

Page2|
 IIMT UNIVERSITY
Master of Computer Application
Session 2023-2025

Date………………………………

DECLARATION

I,Mukul,Omkar,Upendra hereby declare that the work, which is being

presented in the project report entitled “Employee leave Management

System”,partial fulfillment of the requirements for the award of degree of

“Master of Computer Applications” submitted in the department of

Computer Science & Information Technology is an authentic record of

my own work carried under the joint guidance of PARESH PATHAK. .I

have not submitted the matter embodied in this report for the award of any

other degree.

Mukul Rajput

Omkar

Upendra singh

ACKNOWLEDGEMENT
Page3|
 “A journey is easier when you travel together. Interdependence is
certainly more valuable than independence.”

I would like to thanks, Mr.Paresh Pathakand Dr.Preeti Mitalfor providing

regular guidance and insight into my project work. I also thank them for all advice he
has given me in the past year, and for always having time for me, whenever I needed.

I give special thanks to Prof. Paresh Pathakand Prof. Preeti Mital for always being
willing to help find solutions to any problems I had with my work.

“The completion of any project depends upon the cooperation, coordination, and
combined efforts of several resources of knowledge, inspiration, and energy”.

I also extend my deepest gratitude to HOD, IIMT UNIVERSITY, MEERUT,

Prof.Rachna Chaudhary, Dean ,IIMT UNIVERSITY,MEERUT, Prof.Suraj mallickfor
providing all the necessary facilities and true encouraging environment to bring out the
best in my endeavours.

I express my gratitude and thanks to all the staff members of Computer Science
departments for their sincere cooperation in furnishing relevant information to
complete this Project well in time successfully.

I extend a special word to my friends, who have been a constant source of

inspiration throughout my project work.

Lastly but not least I must express my cordial thank to my parent and family
members who gave me the moral support without that it is impossible to complete my
project work. With this note, I thank everyone for the support.

Bhola Shankar Bandhu

Roll No:2366010014

Course: MCA 1styear

Session-2023-2025

CONTENTS
REPORT ...............................................................................................................1

INTRODUCTION................................................................................................ 2

Page4|
OBJECTIVE........................................................................................................... 3

PROJECT CATEGORY PYTHON(HTML,CSS,JS and DJANGO)......................4

ADVANTAGES OF DJANGO..............................................................................5

DATABASE………………………………………………………………………..…………………………6

TOOLS/PLATFORM REQURIED.......................................................................7

HARDWARE & SOFTWARE REQUIREMENTS................................................8

PROBLEM DEFINITION..................................................................................... 9

REQUIREMENT SPECIFICATIONS..................................................................10

PROJECT PLANNING & SCHEDULING...........................................................17

GANTT CHART.................................................................................................. 18

SYSTEMANALYSIS................................................................................................................13

IDENTIFICATION OF NEED ............................................................................................... 14

FEASIBILITY STUDY .............................................................................................................15

TECHNICAL FEASIBILITY: -................................................................................................16

ECONOMICAL FEASIBILITY: .......................................................................................17

OPERATIONAL FEASIBILITY: - .................................................................................. 18

ANALYSIS................................................................................................................................ 19

DFD ..................................................................................................................................... 20

ER DIAGRAM……………………………………………………………………………………………………………….21

MODULE DESCRIPTION .................................................................................................... 22

SCOPE AND FUTURE ENHANCEMENT .....................................................................23

IMPLEMENTATION METHODOLOGY ...........................................................................24

Page5|
TESTING.................................................................................................................................25

LIMITATIONSANDFURTHER ENHANCEMENTS ............................................................

26

SECURITY MECHANISM ..................................................................................................... 27

SNAPSHOTS ...........................................................................................................................28

Page6|
INTRODUCTION
The “EVENT MANAGEMENT SYSTEM” has been design with the help

of many powerful programming languages “HTML, CSS, JS” and

“DJANGO”. The “HTML, CSS and JAVASCRIPT” being in the foreground

and the “DJANGO and SQLITE3” in the background respectively.

Event management is a process of organizing a professional and focused

event, for a particular target audience. It involves visualizing concepts,

planning, budgeting, organizing, and executing events such as wedding,

musical concerts, corporate seminars, exhibitions, birthday

celebrations, theme parties, etc. Event Management is a multi-million-

dollar industry, growing rapidly, with events hosted regularly.

Surprisingly, there is no formalized research conducted to access the

growth of this industry. The industry includes fields such as the MICE

(Meetings, Incentives and Events), exhibitions, conferences, and

seminars as well as live music and sporting events. On the profession

side, event management is a glamorous and exciting profession that

demands a lot of hard work and dynamism. The logistics side of

the industry is paid less than the sales/sponsorship side, though

some may say that these are two different industries. Event

management is the application of project management to the creation

Page7|
and development of large-scale events. The process of planning and

coordinating the event is usually referred toas event planning and

which can include budgeting, scheduling, site selection, acquiring

necessary permits, coordinating transportation and parking,

arranging for speakers or entertainers, arranging decor, event

security, catering, coordinating with third party vendors, and

emergency plans. The events industry now includes events of all sizes

from the Olympics down to business breakfast meetings. Many

industries, charitable organizations, and interest groups hold events in

order to market themselves, build business relationships, raise money,

or celebrate achievement. An event refers to a social gathering

oractivity, such as a festival, (for example a musical festival), a

ceremony (for example a marriage) and a party(for example a birthday

party).

Page8|
OBJECTIVE

The motive of the project entitled “Event Management System” is

to make a user-friendly application that can let a user to plan a
decoration for an event. The project will help Clients to decorate for
an event and the cost required for decoration. No need to visit hotel
and decorators.

The objectives of this system:

• Maintain the information about Clients.

• Maintain the details of Event.

• Maintain the Software user details

• Record of the fee’s details.

• Maintain the back-up o of software.

• They can select the event and according to the event the
appropriate decoration can be made.

• Choice of decoration can be made from the list of panels.

• Client will also find out the cost for decoration and virtual
representation of that decoration.

Page9|
• The user gets all the resources at a single place instead of
wandering around for these.

• This system is effective and saves time and cost of the user.

P a g e 10 |
PROJECT CATEGORY (HTML, CSS, JS, and DJANGO)

HTML, CSS and JAVASCRIPT

HTML is a markup language and CSS is a styling language. JavaScript,

however, is a programming language. Hence, they are all web languages,
but they perform different jobs.While these three front end languages are
all used to design websites, they each have their own specific uses and
intricacies. For example, the main difference between HTML and CSS is
that HTML creates the document structure of a webpage while CSS
embellishes the webpage by adding formatting and style. JavaScript,
arguably the most complex of the three, is used to make websites more
interactive, and enables the development of more complex sitespop-up
boxes, buttons that change colours, and all the other dynamic aspects of
your favourite websites are likely enabled by JavaScript.

DJANGO

Django is a high-level Python web framework that enables rapid

development of secure and maintainable websites. Built by experienced
developers, Django takes care of much of the hassle of web development, so
you can focus on writing your app without needing to reinvent the wheel. It
is free and open source, has a thriving and active community, great
documentation, and many options for free and paid-for support.

Django was initially developed between 2003 and 2005 by a web team who
were responsible for creating and maintaining newspaper websites. After
creating a number of sites, the team began to factor out and reuse lots of
common code and design patterns. This common code evolved into a
generic web development framework, which was open-sourced as the
"Django" project in July 2005.

11 |
ADVANTAGES OF DJANGO

I. Complete:Django follows the "Batteries included" philosophy and

provides almost everything developers might want to do "out of the
box". Because everything you need is part of the one "product", it all
works seamlessly together, follows consistent design principles, and
has extensive and up-to-date documentation.
II. Versatile:Django can be (and has been) used to build almost any
type of websitefrom content management systems and wikis, through
to social networks and news sites. It can work with any client-side
framework, and can deliver content in almost any format (including
HTML, RSS feeds, JSON, and XML). Internally, while it provides
choices for almost any functionality you might want (e.g., several
popular databases, templating engines, etc.), it can also be extended
to use other components if needed.
III. Secure:Django helps developers avoid many common security
mistakes by providing a framework that has been engineered to "do
the right things" to protect the website automatically. For example,
Django provides a secure way to manage user accounts and
passwords, avoiding common mistakes like putting session
information in cookies where it is vulnerable (instead cookies just
contain a key, and the actual data is stored in the database) or
directly storing passwords rather than a password hash.
a. A password hash is a fixed-length value created by sending the
password through a cryptographic hash function. Django can
check if an entered password is correct by running it through
the hash function and comparing the output to the stored hash
value. However due to the "one-way" nature of the function,
even if a stored hash value is compromised it is hard for an
attacker to work out the original password.
b. Django enables protection against many vulnerabilities by
default, including SQL injection, cross-site scripting, cross-site
request forgery and clickjacking (see Website security for more
details of such attacks).

P a g e 12 |
IV. Scalable:Django uses a component-based "shared-nothing"
architecture (each part of the architecture is independent of the
others, and can hence be replaced or changed if needed). Having a
clear separation between the different parts means that it can scale
for increased traffic by adding hardware at any level: caching servers,
database servers, or application servers. Some of the busiest sites
have successfully scaled Django to meet their demands (e.g.,
Instagram and Disqus, to name just two).

V. Portable:Django is written in Python, which runs on many

platforms. That means that you are not tied to any server platform,
and can run your applications on many flavours of Linux, Windows,
and macOS. Furthermore, Django is well-supported by many web
hosting providers, who often provide specific infrastructure and
documentation for hosting Django sites.

VI. Maintainable: Django code is written using design principles and

patterns that encourage the creation of maintainable and reusable
code. It makes use of the Don't Repeat Yourself (DRY) principle so
there is no unnecessary duplication, reducing the amount of code.
Django also promotes the grouping of related functionality into
reusable "applications" and, at a lower level, groups related code into
modules (along the lines of the Model View Controller (MVC)
pattern).

P a g e 13 |
DATABASE

SQLite3 is a popular lightweight, serverless, and self-contained

relational database management system that supports a wide range of
applications. It is often used as an embedded database system within
applications to store and retrieve data, without requiring a separate
server process. Here are some key features of SQLite3:

 Cross-platform compatibility: SQLite3 is compatible with most popular

operating systems, including Windows, macOS, Linux, and Unix.

 Self-contained: SQLite3 is a self-contained database system that does

not require a separate server process or configuration. This makes it
easy to deploy and use in various contexts.

 Small footprint: SQLite3 has a small code footprint, making it ideal for
applications that have limited resources or run on devices with limited
storage capacity.

 ACID-compliant: SQLite3 is ACID-compliant, which ensures data

consistency and integrity, even in the event of power outages or other
system failures.

 SQL support: SQLite3 supports standard SQL syntax, including

SELECT, INSERT, UPDATE, DELETE, and JOIN statements. It also
supports a wide range of data types and features, including transactions,
triggers, and views.

 Extensibility: SQLite3 is designed to be extensible, allowing developers

to add custom functions, collations, and other features.

Overall, SQLite3 is a powerful and versatile database system that is

widely used in a variety of applications, from mobile apps to web
applications and desktop software.

P a g e 14 |
TOOLS/PLATFORM REQUIRED

Operating System

•All windows.

HARDWARE & SOFTWARE REQUIREMENTS

Hardware Requirements:

• Pentium IV Processor

• 4GB RAM

• 64 GB Hard Disk
Software Requirements:

• Visual Studio Code

• Any Web Browser

• Python and its library

asgiref==3.6.0 Pillow==9.4.0

Django==4.1.5sqlparse==0.4.3

python-decouple==3.7tzdata==2022.7

P a g e 15 |
PROBLEM DEFINATON

Problem- Every Organization, whether big or small, haschallenges to

overcome and managing every event.Solution- Management System has
different event needs,so, we design exclusive Event Management
System.This is designed to assist in strategic planning and it willhelp to
ensure that your organization is equipped with theright level of
information and details of your future goals.Also, for those busy executive
who are always on the go, our system come with remote access features,
which willallow you to manage your workforce anytime. Thesesystem will
ultimately allow you to better manageresources

P a g e 16 |
REQUIREMENT SPECIFICATIONS

A Software Requirements Specification (SRS) is a complete description of

the behaviour of the system to be developed. It includes a set of use
casesthat describe all the interactions the users will have with the
software. Use cases are also known as functional requirements. In addition
to use cases, the SRS also contains non-functional (or supplementary)
requirements. Non-functional requirementsare requirements which
impose constraints on the design or implementation (such as performance
engineeringrequirements, qualitystandards, or design constraints).

The general requirements of the project are:

 User Management: The system should allow users to create accounts, log
in, and manage their profiles. Users should be able to view events they
have registered for and update their information.
 Event Creation and Management: The system should allow event
organizers to create and manage events, including setting dates and times,
location, description, registration fees, and other details.
 Registration and Ticketing: The system should allow attendees to register
for events and purchase tickets. Attendees should be able to view event
details and select the number of tickets they want to purchase.
 Payment Integration: The system should support payment integration,
allowing attendees to pay for their tickets securely and easily.
 Event Promotion: The system should provide tools for event promotion,
including email campaigns, social media integration, and targeted
advertising.
 Analytics and Reporting: The system should provide analytics and
reporting tools that allow organizers to track attendance, ticket sales, and
other key metrics.
 Communication: The system should provide communication tools that
allow organizers to communicate with attendees before and after events, as
well as during events.
 Security: The system should be secure, with measures in place to protect
user data and prevent fraud.

P a g e 17 |
PROJECT PLANNING & SCHEDULING

Project planning is part of project management, which relates to the use of

schedulessuch as Gantt chartsto plan and subsequently report progress
within the project environment.

Initially, the project scopeis defined and the appropriate methods for
completing the project are determined. Following this step, thedurationsfor
the various tasksnecessary to complete the workare listed and grouped into
a work breakdown structure. The logical dependenciesbetween tasks are
defined using an activity network diagramthat enables identification of the
critical path.Floator slack time in the schedule can be calculated using
software. Then the necessary resourcescan be estimatedand costsfor each
activity can be allocated to each resource, giving the total project cost. At
this stage, the project planmay be optimized to achieve the appropriate
balance between resource usageand project duration to comply with the
project objectives. Once established and agreed, the plan becomes what is
known as the baseline. Progress will be measured against the baseline
throughout the life of the project. Analysing progress compared to the
baseline is known as earned value management.

The PROJECT SCHEDULE is a calendar that links the tasks to

be done with the resources that will do them. Before a project schedule can
be created, the project manager must have a work breakdown structure
(WBS), an effort estimates for each task, and a resource list with availability
for each resource. If these are not yet available, it may be possible to create
something that looks like a schedule, but it will essentially be a work of
fiction. A project manager’s time is better spent on working with the team
to create a WBS and estimates (using a consensus-driven estimation
method like Wideband Delphi than on trying to build a project schedule
without them. The reason for this is that a schedule itself is an estimate:
each date in the schedule is estimated, and if those dates do not have the
buy-in of the people who are going to do the work, the schedule will almost
certainly be inaccurate.

P a g e 18 |
GANTT CHART

Gantt charts (developed by Henry L. Gantt) are a project control technique

that can be used for several purposes including scheduling, budgeting and
resource planning. A Gantt chart is a bar chart with each bar representing
an activity.

The bars are drawn against a time line. The length of each bar is
proportional to the length of time planned for the activity. Gantt chart can
take different phase depending on their intended use. The Gantt chart of
Event Management System is drawn for the time management. The
Gantt chart isdrawnbelow:

P a g e 19 |
SYSTEM ANALYSIS

IDENTIFICATION OF NEED

To Important Indication for software, we use the Principles of

Requirement Engineering. Requirement engineering provides the
appropriate mechanism for understanding what the customer wants,
analysing need, assessing feasibility, negotiating a reasonable solution,
specifying the solution unambiguously, validating the specification and
managing the requirement as they are transformed into an operational
system. The requirement engineering process can be described in five
distinct steps:

 Requirement elicitation.
 Requirement analysis & negotiation.
 Requirement specification.
 System Modelling.
 Requirement validation.
 Requirement Management.

In other words, we can say that requirement analysis is a software task

that bridges the gap between system level requirement engineering
and software design.

Requirement analysis allows the software engineering to refine

the software allocation and build models of the data, functional and
behavioural domains that will be treated by software. Requirement
analysis provides the software designer with a representation of
information, function and behaviour that can be translated into data,
architectural, interface and component level design; finally the

P a g e 20 |
requirement specification provides the developer and the customer
with the means to assess quality once software is built.

The most commonly used requirement elicitation technique is to

conduct a meeting or interview. The first meeting between a software
engineer and customer can be likened to the awareness of a first date
between to adolescents. Neither person knows what to

say or ask; Both are worried that what they do say will be
misinterpreted; both are thinking about where it might lead (Both
likely have radically different expectation here); Both want to get the
think over with, but at the same time, both want it to be a success.

Here according to this principle, the analyst starts by asking context-

free-questions. That is a set of question that will lead to a basic
understanding of the problem, the people who want a solution, the
nature of solution that is desired, and the effectiveness of the first
encounter itself. The first set of Context-free question focuses on the
customer, the overall goals, and the benefits. For example, the analyst
might ask: -

Who is behind the request for this Work?

Who will use the solution?

What will be economic benefit of a successful solution?

Is there another source for the solution that you need?

P a g e 21 |
 The next set of questions enables the software engineer to gain a
better Understanding of the problem and the customer to voice his or
her perceptions about a solution: -

How would you characterize “good” output that would be generated by a

successful solution?

What problem(s) will this solution address?

Can you show me (or describe) the environment in which the solution
will be used?

Will special performance issues or constraints affect the way the

solution is approached?

The final set of question focuses on the effectiveness of the meeting:

Are you the right person to answer these questions? Are your answers?
Official”?

Are my questions relevant to the problem that you have?

Am I asking too many questions?

Can anyone else provide additional information?

Should I be asking you anything else?

According to the above concepts I went to institution and met its

staffs, management, and some persons related with the organizational

P a g e 22 |
work, which advised me related with my project such as details of
agent, policy related information will be cater this system.

Preliminary Investigation: -

The first step in the system development life cycle is the preliminary
investigation to determine the feasibility of the System. The purpose of
the preliminary investigation is to evaluate project requests. It is not a
design study nor does it include the collection of details top describe
the business system in all respect. Rather, it is collecting of information
that helps committee members to evaluate the merits of the project
request and make an informed judgment about the feasibility of the
proposed project.

Here for the Ngo Management System, I have worked on the

preliminary investigation that accomplished the following objectives: -

Clarify and understand the project request.

Determine the size of the project.

Assess costs and benefits of alternative approaches.

Determine the technical and operational; feasibility of alternative

approaches.

Report the findings to management, with recommendation outlining

the acceptances or rejection of the proposal.

P a g e 23 |
Considering above criteria, I also keep in mind that the requirements
are clearly understandable when the clarification of project request is
enquired. The data of the Ngo Management System, which are
collected by me during preliminary investigation, are through
Reviewing organization Documents Onsite observation and
Conducting interviews.

P a g e 24 |
FEASIBILITY STUDY

Not everything imaginable is feasible, not even in software, even as

it may appear to outsiders. Feasibility is the determination of whether
a project is wrong doing. On the contrary, software feasibility has seven
solid dimensions as below: -

• Technical feasibility.
• Operational feasibility.
• Economic feasibility.
• Social feasibility.
• Management feasibility.
• Legal feasibility.
• Time feasibility.
The process followed in making this determination is called a
feasibility study. The type of study determines if a project can and should
be taken. Once it has been determined that a project is feasible, that
analyst can go ahead and prepare the project specification which finalizes
project requirements. Generally, feasibility studies are undertaken within
tight time constraints and normally culminate in a written and oral
feasibility report. The contents and recommendation of such a study will
be used as a sound basis for deciding whether to proceed, postpone or
cancel the project. Thus, since the feasibility study may lead to the
commitment of large resources, it becomes necessary that it should be
conducted competently and that no fundamental errors of judgment are
made.
In other words, we can say that a feasibility study is conducted to select
the best system that meets performance requirement. This contains

P a g e 25 |
and identification description, an evaluation of candidate system and
the
selection of best system for the job. The system required a statement
of constraints; the identification of specific system objective and a
description of outputs define performance.
TECHNICAL FEASIBILITY:

Technical feasibility is concerned with specifying equipment and

software that will successfully satisfy the user requirements. My
project is fit in technical feasibility because it requires neither too
much heavy configuration system for its run nor in its development.

Following hardware and software components are used in the

development of proposed system.

The same configuration system is also meeting all the requirements to

run or for implements to run or for implementation of the system.
Though I have also tested this software for those systems whose
configuration is lower than the above specified
ECONOMICAL FEASIBILITY:

Economic analysis is the most frequently used technique for

evaluation of the effectiveness of a proposed system. More commonly
known as Cost/Benefit analysis, the procedure is to determine the
benefits and saving that are expected from a proposed system and
compare them with costs. If benefits outweigh costs, a decision is
taken to design and implement the system. Other weight costs, a
decision is taken to design and implement the system. Otherwise,

P a g e 26 |
further justification or alternative in the proposed system will have to
be made if is to have a chance of being approved. This is an ongoing
effort that improves in accuracy at each phase of the system life cycle.

Before establishing Economical Feasibility so as to justify the expenses

that different organization working under this category has to bear for
this Software. It is crystal clear that the user or Customer of this
Software has no need to invest heavy amount for this software. As my
project has been written in such a language, which is a platform
Independent. It has also the feature of WORM. It means it possess the
technology of Write Once & Read Many.

There is no any heavy expense on the maintenance of this Software.

Also, there is no need to expense a heavy amount on the set of “Very
Expert Personals” because it is very easy and user-friendly software. It
is fully tightening protection of Secret Password and User Name for
unauthorized access of this Software.

For different types of Process or Operation, Reports or Query and

Output also, there is no need of heavy expenditure.
OPERATIONAL FEASIBILITY:

My project is also fit in Operational Feasibility Study. As I have

explained before this about Technical Feasibility and Economical
Feasibility, this Software is very easy and user-friendly.

P a g e 27 |
I have used a very easy menu system and also used some control
buttons in the easy way by which one can choose the options on his
desire.

Though this is fully protected with the security by word (Password

and user name), if both are matched only then one can get access of this
software.

Various Reports, Forms and Queries can be generated on the fingertips for
the user.

In nutshell we can say that it has following operational features:

1. It is User-Friendly.
2. It is having less paperwork.
3. Efficient tractability.
4. Query can be generated.
5. Various Reports and Forms can be generated.
6. Fully protected by Password and User name for unauthorized
access.

P a g e 28 |
ANALYSIS
System Analysis refers into the process of examining a situation
with the intent of improving it through better procedures and
methods. System Analysis is the process of planning a new System to
either replace or complement an existing system.

DFD

DFD stands for Data Flow Diagram. It is a graphical representation of

the flow of data through a system or process. A DFD shows the inputs,
outputs, and processing steps involved in a system or process, and how
they are interconnected.A DFD consists of a set of symbols and
notations, such as circles, rectangles, arrows, and lines, that represent
the various components of a system or process, and the data flows
between them. A DFD typically has several levels of detail, with each
level providing a more detailed view of the system or process than the
previous level.DFD are useful for analysing and designing complex
systems, as they provide a clear and concise way to understand how
data flows through a system or process.

10 |
ER DIAGRAM

ER diagram, also known as Entity-Relationship diagram, is a graphical

representation of the relationships between entities in a database. It
shows the entities, attributes, and relationships between them in a
clear and concise manner.

Entities represent objects or concepts that are of interest to the

organization, such as customers, orders, products, and employees.
Attributes are the properties or characteristics of the entities, such as
the name, address, and phone number of a customer. Relationships are
the associations between entities, such as a customer placing an order.

ER diagrams are useful for designing and understanding complex

databases, as they provide a visual representation of the relationships
between entities and attributes. They are commonly used in software
engineering and database design to help developers and designers
understand the requirements of a system and to ensure that the data is
organized and stored in an efficient and effective manner.

ER diagrams use various symbols, such as rectangles to represent

entities, ovals to represent attributes, and diamonds to represent
relationships. Lines are used to indicate the relationships between
entities. For example, a line with a diamond at one end and a rectangle
at the other end indicates a relationship between an entity and arelated
attribute

P a g e 11 |
12 |
MODULE DESCRIPTION

These are the following Modules in the project: -

USER MODULE

● In this module there are two types of user guest user and
register user.

● Guest user: This user can see only general information like
about us, event details.

● Contact details and our services.

● Register users: This user can do the following activity like

Book the events, update their profile, change password, also
cancel the booking which is not confirmed and recover their
password.

P a g e 13 |
 ADMIN MODULE

● Dashboard: In this section admin can see all details in brief

like total income, total hotels and total booked hotels.

● All Booked Rooms: In this section user can see the booked
rooms.

● Table: In this section user can see which date and rooms are
available or not.

● Add Room: In this section user can add and update the
rooms.

● Views all Rooms: In this section user can see all

rooms( Booked or not Booked).

● Add gallery Image: In this section user can add any image of
events, hotels and their services.

● Users: user can see all registered user details.

P a g e 14 |
SCOPE AND FUTURE ENHANCEMENT
There is always a scope of betterment and the
candidate system is not against perception.
The project uses very nearly the same calculations as Event
does; if clients want any other type of changes, it can also
be done because the project is upgradeable.

The project can be used as a sub-project for any other projects.

The main future scope is as follows: -

 To Store the large amount of data for future point of view.

Reducing manual efforts for maintain the system.

 Reducing the lead time.

IMPLEMENTATION METHODOLOGY

Implementation of a tested system is done on the actual

location with the actual hardware, Software and manpower
platforms or limitation. To implement of this software, the
followings are the necessary:

P a g e 15 |
 This project run on internet or intranet, so I have to
selected internet supportive software. For implementing
this software, a webserver is required. I have to install IIS
(internet information service). Know this project is web-
based so it will need a web-browser which will act as its
interface, so for this project install a web-browser capable
of providing proper interface to this project such as internet
Explorer/Mozilla Firefox/opera etc and many other browser
And for back-end operation, I have to install PYTHONand
its libraryand sqlite3 handle all the work related to database
query and updation as required by the software. In future
also use better databases.

✓ Create separate user for this application: A user

named as “admin” with the password “pass” is to be
created for storing the data in a separate place.
Storing data under separate user will protect the data.
✓ Create required tables: The structure of tables
required for this project (Detail given in the data base
design section) is to be created in the said user. The
SQL statement CREATE can be used for creating such
tables.

P a g e 16 |
 ✓ Create Distributable set of files: An installation
package of the software is to be built for
implementation of the project at desired location.

TESTING
Software testing consists of the following stages.

a) TEST PLAN DEVELOPMENT:-

The importance of software testing and its implications

need not be emphasized. Software testing is a critical
element of software quality assurance and represents the
ultimate review of specifications, design and coding. The
main objective of testing is to uncover a host of errors,
systematically, with minimum effort and time. It improves
the reliability of the software.

b) TESTING STRATEGY: -

A testing strategy explains how to conduct a test to uncover

all the errors with minimum possible time and effort. It
should be flexible enough to promote customization that
may be necessary in due course of development process.

c)UNIT TESTING: -

Unit testing focuses verification effort on the smallest unit

of software module using the detailed design criteria.
P a g e 17 |
Process specifications testing are done to uncover errors
within the boundaries of the module. All modules must be
successful in the unit test before start of the integration
testing. The software developed for e-banking is tested
module wise by giving normal values and extreme values as
input. All the bugs have been identified and removed. The
software designed is tested module wise. Before using the
software, an employee has to give organization name and
password.

In the next stage he has to provide division name, employee

ID and password. If any of this information is wrong, the
system gives an error message- “invalid user and password”

INTEGRATION TESTING: -

It is a systematic technique for constructing different

program module in to an integrated software structure.
This test uncovers the errors during integration process.
The integration aspect is tested after integrating all the
modules and validated.

VALIDATION TESTING: -

After the culmination of integration testing the software is

ready as per the specification. But it has to be validated as

P a g e 18 |
per the specification and to uncover the unexpected future
errors and to improve its reliability. The random value and
boundary values as input is fed to the software developed
and studied the software performance and validated

TEST CASE DESIGN

The techniques that are used in deriving the test cases are
explained below.

CONDITION TESTING: -

Condition testing is a test case design method that

exercises the logical conditions contained in the program.
The possible components in a condition statement are a
Boolean operator, Boolean variable, relational operator,
arithmetic expression and parenthesis.

BOUNDARY VALUE ANALYSIS: -

Boundary value analysis leads to the selection of test cases

that exercise the boundary conditions or boundary values.
It is observed that a large number of errors tend to appear
at the boundaries of the input domain than in the
centre.The boundary condition is tested by inserting values
beyond specification/availability of project allocations.

P a g e 19 |
E.g.,The software is tested by giving more amount of money
in the indent form than available in the budget. Under this
conciliation the software gives an error message stating
that insufficient fund.

EQUIVALENCE PARTITIONING: -

Equivalence portioning is a black box testing method that divides

the input domain of a program into classes of data from which test
cases can be derived. A typical test uncovers a class errors might
otherwise require many more test cases before the error is
observed. Equivalence classes for input determine the valid and
invalid inputs for the program

LIMITATIONSANDFURTHER ENHANCEMENTS
LIMITATIONS:

Despite tremendous growth potentialities continues with a

series of challenges and contradictions in its
implementations. The main shortcomings are mentioned
below.

• Easy transaction of money.

• Reliability of electronic payment system.
• Accounting, legal, taxation and security issues etc.

P a g e 20 |
RECOMMENDED AREAS FOR FURTHER RESEARCH

Considering the fact that has already gone ahead the

following areas needs to be further probed for improving
the system to meet the changing scenario.

1) There is a lot of scope for future research in the areas like

automatic component/material planning, automatic
advanced indenting, micro transactions, and customer
relationship management.

2) Components like electronic payment system, digital

certificates, electronic tokens, electronic cheques etc. are
still in an embryonic stage of development. This area
opens up a lot of scope for further research.

In the absence of universal standards for electronic

transactions, the organization should develop a standard
internal to it and that translate between its formats and
those supported by its trading partners. This approach
reduces dependence on industry schedules for adopting
standards, and avoids the pitfalls of an organization-
imposed solution.

P a g e 21 |
SECURITY MECHANISM
Implementation of security is a key issue in any
software development different application use different
kind of security mechanism according to their need.
InEvent Management System the implementation of
security has been confined up to the user level. The “Event
Management System” authenticates a user by its username
and password to a user. A user is able to work on the
software if s/he is an authorized user with user id and
password.

It is the system administrator who is responsible for

granting permission to any user. He can grant as well as
revoke permissions from any user. Another important
security level is data level. In the data level security defined
validation and constraints in the database. Due to this only
valid data can be entered in the tables.

All information and management forms are stored

within the system, and access to this sensitive information
is controlled through an effective authentication system:
one has to know the USER ID, and PASSWORD to gain
access to any of the information.

P a g e 22 |
 The management (administrator) can create new
user, while a normal user can’t do this. This system will
provide the facility to change the password according to the
user need. For security measure the ‘Password’ field will be
taken as ‘Varchar2’ data type, so that a user can use in this
field both integer and alphabets.

SNAPSHOTS

SNAPSHOTS

FORM (login.html)
{% extends 'base/base.html' %}

{% block body %}
{% include 'base/navbar.html' %}

P a g e 23 |
<divclass="section big-55-height over-hide z-
bigger"style="height: 153px;">

<divclass="parallax parallax-top"style="background-
image: url('img/gallery/10.jpg')"></div>
<divclass="dark-over-pages"></div>

</div>

<divclass="container ">
<divclass="row my-5">
<divclass="col-md-3"></div>
<divclass="col-md-6 ">
<divclass="section background-dark p-4">
<formaction=""method="post">
{% csrf_token %}
<divclass="row">
<divclass="col-12 pt-4">
{% include 'base/alert.html'
%}
</div>
<divclass="col-12 pt-4">

<inputtype="text"class="inputbox"placeholder="EMAIL
ID"name="email">
</div>
<divclass="col-12 pt-4">

<inputtype="password"class="inputbox"placeholder="PASSWORD
"name="password">
</div>

<divclass="col-12 pt-4">

P a g e 24 |
 <buttonclass="booking-
button">Login</button>
</div>
</div>
</form>
</div>
</div>
<divclass="col-md-3"></div>

</div>
</div>

{% include 'base/footer.html' %}

{% endblock body %}

Admin login:
{% extends 'base/base.html' %}

{% block body %}
{% include 'base/navbar.html' %}

<divclass="section big-55-height over-hide z-

bigger"style="height: 153px;">

<divclass="parallax parallax-top"style="background-
image: url('img/gallery/10.jpg')"></div>
<divclass="dark-over-pages"></div>

</div>

<divclass="container ">
<divclass="row my-5">

P a g e 25 |
 <divclass="col-md-3"></div>
<divclass="col-md-6 ">
<divclass="section background-dark p-4">
<divclass="text-center">
<h3style="color: aliceblue;">Admin
Login</h3>
</div>
<formaction=""method="post">
{% csrf_token %}
<divclass="row">
<divclass="col-12 pt-4">
{% include 'base/alert.html'
%}
</div>
<divclass="col-12 pt-4">

<inputtype="text"class="inputbox"placeholder="USERNAME"nam
e="username">
</div>
<divclass="col-12 pt-4">

<inputtype="password"class="inputbox"placeholder="PASSWORD
"name="password">
</div>
<divclass="col-12 pt-4">
<buttonclass="booking-
button">Login</button>
</div>
</div>
</form>
</div>
</div>
<divclass="col-md-3"></div>

P a g e 26 |
 </div>
</div>

{% include 'base/footer.html' %}

{% endblock body %}

P a g e 27 |
Admin Page

code :

{% extends 'base/base.html' %}

{% block body %}
{% include 'base/navbar.html' %}

<divclass="section big-55-height over-hide z-

bigger"style="height: 153px;">

<divclass="parallax parallax-top"style="background-
image: url('img/gallery/10.jpg')"></div>
<divclass="dark-over-pages"></div>

</div>

<divclass="container ">
<divclass="row my-5">
<divclass="col-md-3"></div>
<divclass="col-md-6 ">

P a g e 28 |
 <divclass="section background-dark p-4">
<divclass="text-center">
<h3style="color: aliceblue;">Admin
Login</h3>
</div>
<formaction=""method="post">
{% csrf_token %}
<divclass="row">
<divclass="col-12 pt-4">
{% include 'base/alert.html'
%}
</div>
<divclass="col-12 pt-4">

<inputtype="text"class="inputbox"placeholder="USERNAME"nam
e="username">
</div>
<divclass="col-12 pt-4">

<inputtype="password"class="inputbox"placeholder="PASSWORD
"name="password">
</div>
<divclass="col-12 pt-4">
<buttonclass="booking-
button">Login</button>
</div>
</div>
</form>
</div>
</div>
<divclass="col-md-3"></div>

</div>
</div>

P a g e 29 |
{% include 'base/footer.html' %}

{% endblock body %}
{% extends 'base/base.html' %}

{% block body %}
{% include 'base/navbar.html' %}

<divclass="section big-55-height over-hide z-

bigger"style="height: 153px;">

<divclass="parallax parallax-top"style="background-
image: url('img/gallery/10.jpg')"></div>
<divclass="dark-over-pages"></div>

</div>

<divclass="container my-5">
<divclass="row">
<divclass="col-md-2">
{% include 'accounts/clientsidebarmenu.html'
%}
</div>
<divclass="col-md-10 mt-1 ">

<tableclass="table table-striped table-dark">

<thead>
<tr>
<thscope="col">Sl No</th>
<thscope="col">Image</th>
<thscope="col">Title</th>

P a g e 30 |
 <thscope="col">Check In Date</th>
<thscope="col">Check Out Date</th>
<thscope="col">Adult</th>
<thscope="col">Children</th>
<thscope="col">Price</th>
<thscope="col">Status</th>

</tr>
</thead>
{% for orderinmyorder %}
<tbody>
<tr>

<thscope="row">{{forloop.counter}}</th>
<td><imgstyle="width: 40px;height:
40px;"src="{{order.rooms.roomimages.first.images.url}}"alt
=""></td>

<td>{{order.rooms.room_title}}</td>
<td>{{order.check_in_date}}</td>
<td>{{order.check_out_date}}</td>
<td>{{order.adults}}</td>
<td>{{order.childrens}}</td>
<td>{{order.rooms.pricing}}</td>
<td>Pending</td>
</tr>

{% empty %}
<h3>nothing booked</h3>
{% endfor %}
</tbody>
</table>

</div>

P a g e 31 |
 </div>
</div>

{% include 'base/footer.html' %}

{% endblock body %}
{% extends 'base/base.html' %}

{% block body %}
{% include 'base/navbar.html' %}

<divclass="section big-55-height over-hide z-

bigger"style="height: 153px;">

<divclass="parallax parallax-top"style="background-
image: url('img/gallery/10.jpg')"></div>
<divclass="dark-over-pages"></div>

</div>

<divclass="container my-5">
<divclass="row">
<divclass="col-md-2">
{% include 'accounts/clientsidebarmenu.html'
%}
</div>
<divclass="col-md-8 ">
<divclass="section background-dark p-4">
<formaction=""method="post">
{% csrf_token %}
<divclass="row">
<divclass="col-12 pt-4">

P a g e 32 |
 {% include 'base/alert.html'
%}
</div>
<divclass="col-12 pt-4">

<inputtype="password"class="inputbox"placeholder="OLD
PASSWORD"name="oldpassowrd"required>
</div>

<divclass="col-12 pt-4">

<inputtype="password"class="inputbox"placeholder="NEW
PASSWORD"name="newpassword"required>
</div>
<divclass="col-12 pt-4">

<inputtype="password"class="inputbox"placeholder="CONFORM
NEW PASSWORD"name="cnpassword"required>
</div>
<divclass="col-12 pt-4">
<buttonclass="booking-
button"href="search.html">Register</button>
</div>
</div>
</form>
</div>

</div>
</div>
</div>

{% include 'base/footer.html' %}

{% endblock body %}

P a g e 33 |
{% extends 'base/base.html' %}

{% block body %}
{% include 'base/navbar.html' %}

<divclass="section big-55-height over-hide z-

bigger"style="height: 153px;">

<divclass="parallax parallax-top"style="background-
image: url('img/gallery/10.jpg')"></div>
<divclass="dark-over-pages"></div>

</div>

<divclass="container my-5">
<divclass="row">
<divclass="col-md-2">
{% include 'accounts/clientsidebarmenu.html'
%}
</div>
<divclass="col-md-8 ">
<divclass="section background-dark p-4">
<formaction=""method="post">
{% csrf_token %}

<divclass="row">
<divclass="col-12 pt-4">
{% include 'base/alert.html'
%}
</div>
<divclass="col-12 pt-4">

<inputtype="text"class="inputbox"placeholder="FULL

P a g e 34 |
NAME"name="fullname"value="{{profile.user.first_name}}"req
uired>
</div>
<divclass="col-12 pt-4">

<inputtype="text"class="inputbox"placeholder="EMAIL
ID"name="email"value="{{profile.user.email}}"readonly>
</div>
<divclass="col-12 pt-4">

<inputtype="text"class="inputbox"placeholder="MOBILE
NO"name="mobile"value="{{profile.mobile}}"required>
</div>
<divclass="col-12 pt-4">

<inputtype="password"class="inputbox"placeholder="PASSWORD
"name="password" >
</div>
<divclass="col-12 pt-4">

<inputtype="password"class="inputbox"placeholder="CONFORM
PASSWORD"name="cpassword">
</div>
<divclass="col-12 pt-4">
<buttonclass="booking-
button"href="search.html">Login</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>

P a g e 35 |
{% include 'base/footer.html' %}

{% endblock body %}

Homepage:

code :

{% extends 'base/base.html' %}

{% block body %}

{% include 'base/navbar.html' %}

<divclass="section background-dark over-hide">

<divclass="hero-center-section">
<divclass="container">
<divclass="row justify-content-center">

P a g e 36 |
 <divclass="col-10 col-sm-8 parallax-fade-
top">
<divclass="hero-text">Organize Your
Event under the sky</div>
</div>
<divclass="col-12 mt-3 mb-5 parallax-fade-
top">
<divclass="hero-stars">
<iclass="fa fa-star-o"></i>
<iclass="fa fa-star-o"></i>
<iclass="fa fa-star-o"></i>
<iclass="fa fa-star-o"></i>
<iclass="fa fa-star-o"></i>
</div>
</div>
<divclass="col-12 mt-3 parallax-fade-top">
<divclass="booking-hero-wrap">
<divclass="row justify-content-
center">
<divclass="col-5 no-mob">
<divclass="input-daterange
input-group"id="flight-datepicker">
<divclass="row">
<divclass="col-6">

<divclass="form-item">

<spanclass="fontawesome-calendar"></span>

<inputclass="input-
sm"type="text"autocomplete="off"id="start-date-1"

name="start"placeholder="chech-in date"

P a g e 37 |
 data-
date-format="DD, MM d" />

<spanclass="date-text date-depart"></span>
</div>
</div>
<divclass="col-6">

<divclass="form-item">

<spanclass="fontawesome-calendar"></span>

<inputclass="input-
sm"type="text"autocomplete="off"id="end-date-1"

name="end"placeholder="check-out date"
data-
date-format="DD, MM d" />

<spanclass="date-text date-return"></span>
</div>
</div>
</div>
</div>
</div>
<divclass="col-5 no-mob">
<divclass="row">
<divclass="col-6">

<selectname="adults"class="wide">
<optiondata-
display="adults">adults</option>

<optionvalue="1">1</option>

P a g e 38 |
<optionvalue="2">2</option>

<optionvalue="3">3</option>

<optionvalue="4">4</option>

<optionvalue="5">5</option>
</select>
</div>
<divclass="col-6">

<selectname="children"class="wide">
<optiondata-
display="children">children</option>

<optionvalue="1">1</option>

<optionvalue="2">2</option>

<optionvalue="3">3</option>

<optionvalue="4">4</option>

<optionvalue="5">5</option>
</select>
</div>
</div>
</div>
<divclass="col-6 col-sm-4
col-lg-2">
<aclass="booking-
button"href="{% url 'search' %}">book now</a>
</div>

P a g e 39 |
 </div>
</div>
</div>
</div>
</div>
</div>

<divclass="slideshow">
<divclass="slide slide--current parallax-top">
<figureclass="slide__figure">
<divclass="slide__figure-inner">
<divclass="slide__figure-
img"style="background-image:
url(/static/img/1.jpg)"></div>
<divclass="slide__figure-
reveal"></div>
</div>
</figure>
</div>
<divclass="slide parallax-top">
<figureclass="slide__figure">
<divclass="slide__figure-inner">
<divclass="slide__figure-
img"style="background-image:
url(/static/img/2.jpg)"></div>
<divclass="slide__figure-
reveal"></div>
</div>
</figure>
</div>
<divclass="slide parallax-top">
<figureclass="slide__figure">
<divclass="slide__figure-inner">

P a g e 40 |
 <divclass="slide__figure-
img"style="background-image:
url(/static/img/3.jpg)"></div>
<divclass="slide__figure-
reveal"></div>
</div>
</figure>
</div>
<!-- revealer -->
<divclass="revealer">
<divclass="revealer__item revealer__item--
left"></div>
<divclass="revealer__item revealer__item--
right"></div>
</div>
<navclass="arrow-nav fade-top">
<buttonclass="arrow-nav__item arrow-
nav__item--prev">
<svgclass="icon icon--nav">
<usexlink:href="#icon-nav"></use>
</svg>
</button>
<buttonclass="arrow-nav__item arrow-
nav__item--next">
<svgclass="icon icon--nav">
<usexlink:href="#icon-nav"></use>
</svg>
</button>
</nav>
<!-- navigation -->
<navclass="nav fade-top">
<buttonclass="nav__button">
<spanclass="nav__button-text"></span>
</button>

P a g e 41 |
 <h2class="nav__chapter">Celebrate Your Party
With Us</h2>
<divclass="toc">
<aclass="toc__item"href="#entry-1">
<spanclass="toc__item-title">Marriage
Party</span>
</a>
<aclass="toc__item"href="#entry-2">
<spanclass="toc__item-title">Birthday
Party</span>
</a>
<aclass="toc__item"href="#entry-3">
<spanclass="toc__item-title">Any type
of Party</span>
</a>
</div>
</nav>
<!-- little sides -->
<divclass="slideshow__indicator"></div>
<divclass="slideshow__indicator"></div>
</div>
</div>

<divclass="section padding-top-bottom over-hide">

<divclass="container">
<divclass="row">
<divclass="col-md-6 align-self-center">
<divclass="row justify-content-center">
<divclass="col-10">

<h2class="text-center">Marriage
Hall</h2>
<pclass="text-center mt-
5">Marriage halls are venues specifically designed for

P a g e 42 |
hosting wedding ceremonies and receptions. They offer
indoor spaces that can accommodate a significant number of
guests and often have separate areas for the main
ceremony, reception, and dining. Rental costs can vary
widely depending on factors such as location, size, and
amenities. Marriage halls provide a dedicated space for
couples and their families to celebrate their special day.
</p>
</div>
</div>
</div>
<divclass="col-md-6 mt-4 mt-md-0">
<divclass="img-wrap">
<imgsrc="/static/img/mrg3.jpg"alt="">
</div>
</div>
</div>
</div>
</div>

<divclass="section background-grey over-hide">

<divclass="container-fluid px-0">
<divclass="row mx-0">
<divclass="col-xl-6 px-0">
<divclass="img-wrap"id="rev-1">

<imgsrc="static/img/birthdays.jpg"alt="">
<divclass="text-element-over">Birthday
Party</div>
</div>
</div>
<divclass="col-xl-6 px-0 mt-4 mt-xl-0 align-
self-center">
<divclass="row justify-content-center">

P a g e 43 |
 <divclass="col-10 col-xl-8 text-
center">
<h3class="text-center">Birthday
Halls</h3>
<pclass="text-center mt-4">A
birthday is not complete without having your favourite
meal. At the Inntel Hotels restaurants you can enjoy
Inntel Originals and local specialties. Would you like to
enjoy a Inntel Original Beef Burger on the sunny terrace
of Inntel Hotels Den Haag Marina Beach, or a Werkspoor G&T
at Inntel Hotels Amsterdam Landmark? Let our chefs and
bartenders surprise you with a festive dinner.</p>
<aclass="mt-5 btn btn-
primary"href="#">check availability</a>
</div>
</div>
</div>
</div>
<divclass="row mx-0">
<divclass="col-xl-6 px-0 mt-4 mt-xl-0 pb-5 pb-
xl-0 align-self-center">
<divclass="row justify-content-center">
<divclass="col-10 col-xl-8 text-
center">
<h3class="text-center">Other
Party</h3>
<pclass="text-center mt-4">You can
celebrate Your Marriage anniversery, dance party, etc.
</p>
<aclass="mt-5 btn btn-
primary"href="#">check availability</a>
</div>
</div>
</div>

P a g e 44 |
 <divclass="col-xl-6 px-0 order-first order-xl-
last mt-5 mt-xl-0">
<divclass="img-wrap"id="rev-2">
<imgsrc="static/img/oparty.jpg"alt="">
<divclass="text-element-over">sea view
suite</div>
</div>
</div>
</div>
</div>
</div>

<divclass="section background-dark over-hide">

<divclass="container-fluid py-4">
<divclass="row">
<divclass="col-sm-6 col-lg-3">
<ahref="services.html">
<divclass="img-wrap services-wrap">
<imgsrc="/static/img/ser-
1.jpg"alt="">
<divclass="services-text-
over">Hotels</div>
</div>
</a>
</div>
<divclass="col-sm-6 col-lg-3 pt-4 pt-sm-0">
<ahref="services.html">
<divclass="img-wrap services-wrap">
<imgsrc="/static/img/ser-
2.jpg"alt="">
<divclass="services-text-
over">restaurant</div>
</div>
</a>

P a g e 45 |
 </div>
<divclass="col-sm-6 col-lg-3 pt-4 pt-lg-0">
<ahref="services.html">
<divclass="img-wrap services-wrap">
<imgsrc="/static/img/ser-
3.jpg"alt="">
<divclass="services-text-
over">pool</div>
</div>
</a>
</div>
<divclass="col-sm-6 col-lg-3 pt-4 pt-lg-0">
<ahref="services.html">
<divclass="img-wrap services-wrap">
<imgsrc="/static/img/ser-
4.jpg"alt="">
<divclass="services-text-
over">activities</div>
</div>
</a>
</div>
</div>
</div>
</div>

<divclass="section padding-top-bottom over-hide">

<divclass="container">
<divclass="row justify-content-center">
<divclass="col-md-8 align-self-center">
<divclass="subtitle with-line text-center
mb-4">elegant suites</div>
<h3class="text-center padding-bottom-
small">Unpretentious luxury</h3>
</div>

P a g e 46 |
 <divclass="section clearfix"></div>
<divclass="col-sm-6 col-lg-4">
<divclass="services-box text-center">
<imgsrc="/static/img/1.svg"alt="">
<h5class="mt-2">smoking free</h5>
<pclass="mt-3">Smoking-free hotels
prohibit smoking in guest rooms, common areas, and outdoor
areas to promote a healthy and safe environment for
guests</p>
<aclass="mt-1 btn btn-
primary"href="#">read more</a>
</div>
</div>
<divclass="col-sm-6 col-lg-4 mt-5 mt-sm-0">
<divclass="services-box text-center">
<imgsrc="/static/img/2.svg"alt="">
<h5class="mt-2">king beds</h5>
<pclass="mt-3">King beds are larger
than queen beds, typically measuring 76 inches wide by 80
inches long, providing ample space for couples or
individuals to sleep comfortably.</p>
<aclass="mt-1 btn btn-
primary"href="#">read more</a>
</div>
</div>
<divclass="col-sm-6 col-lg-4 mt-5 mt-lg-0">
<divclass="services-box text-center">
<imgsrc="/static/img/3.svg"alt="">
<h5class="mt-2">Yacht rental</h5>
<pclass="mt-3">Yacht rental involves
renting a luxury watercraft for a specified period, often
with a captain and crew, for leisure, entertainment, or
business purposes.</p>

P a g e 47 |
 <aclass="mt-1 btn btn-
primary"href="#">read more</a>
</div>
</div>
<divclass="col-sm-6 col-lg-4 mt-5">
<divclass="services-box text-center">
<imgsrc="/static/img/4.svg"alt="">
<h5class="mt-2">welcome drink</h5>
<pclass="mt-3">A welcome drink is a
complimentary beverage offered to guests upon arrival at a
hotel, restaurant, or event to provide a warm reception
and refreshment.</p>
<aclass="mt-1 btn btn-
primary"href="#">read more</a>
</div>
</div>
<divclass="col-sm-6 col-lg-4 mt-5">
<divclass="services-box text-center">
<imgsrc="static/img/5.svg"alt="">
<h5class="mt-2">swimming pool</h5>
<pclass="mt-3">A swimming pool is a
man-made body of water designed for recreational or
competitive swimming, diving, or other aquatic activities,
often found in hotels, resorts, and recreational
facilities..</p>
<aclass="mt-1 btn btn-
primary"href="#">read more</a>
</div>
</div>
<divclass="col-sm-6 col-lg-4 mt-5">
<divclass="services-box text-center">
<imgsrc="static/img/6.svg"alt="">
<h5class="mt-2">food included</h5>

P a g e 48 |
 <pclass="mt-3">Food included refers to
meals or snacks that are provided at no additional cost,
often as part of a package or reservation, in hotels,
resorts, or other accommodations.</p>
<aclass="mt-1 btn btn-
primary"href="#">read more</a>
</div>
</div>
</div>
</div>
</div>

<divclass="section padding-top-bottom-big over-hide">

<divclass="parallax"style="background-image:
url('/static/img/4.jpg')"></div>
<divclass="section z-bigger">
<divclass="container">
<divclass="row">
<divclass="col-md-12">
<divclass="row justify-content-
center">
<divclass="col-md-6 col-xl-4 px-
sm-0">
<divclass="booking-sep-wrap">
<divclass="input-daterange
input-group"id="flight-datepicker-1">
<divclass="form-item">

<spanclass="fontawesome-calendar"></span>

<inputclass="input-
sm"type="text"autocomplete="off"id="start-date"

P a g e 49 |
name="start"placeholder="check-in"data-date-format="DD, MM
d" />
<spanclass="date-
text date-depart"></span>
</div>
<divclass="form-item">

<spanclass="fontawesome-calendar"></span>

<inputclass="input-
sm"type="text"autocomplete="off"id="end-date"name="end"

placeholder="check-out"data-date-format="DD, MM d" />

<spanclass="date-
text date-return"></span>
</div>
</div>
</div>
</div>
<divclass="col-md-3 col-xl-2 px-
sm-0">
<divclass="quantity">

<inputtype="number"min="1"max="9999"step="1"value="1">
</div>
</div>
<divclass="col-md-3 col-xl-2 px-
sm-0">
<aclass="booking-button-
big"href="#">check<br>availability</a>
</div>
</div>
</div>

P a g e 50 |
 </div>
</div>
</div>
</div>

<divclass="section padding-top-bottom over-hide

background-grey">
<divclass="container">
<divclass="row justify-content-center">
<divclass="col-md-8 align-self-center">
<divclass="subtitle with-line text-center
mb-4">luxury</div>
<h3class="text-center padding-bottom-
small">Our rooms</h3>
</div>
<divclass="section clearfix"></div>
<divclass="col-md-6">
<divclass="room-box background-white">
<divclass="room-name">suite
tanya</div>
<divclass="room-per">
<iclass="fa fa-star"></i>
<iclass="fa fa-star"></i>
<iclass="fa fa-star"></i>
<iclass="fa fa-star"></i>
<iclass="fa fa-star"></i>
</div>
<imgsrc="/static/img/room3.jpg"alt="">
<divclass="room-box-in">
<h5class="">pool suite</h5>
<pclass="mt-3">A pool suite is a
hotel room or villa that includes a private swimming pool
or plunge pool, often with additional luxury amenities and
personalized services.</p>

P a g e 51 |
 <aclass="mt-1 btn btn-
primary"href="#">book from 4000₹</a>
<divclass="room-icons mt-4 pt-4">

<imgsrc="/static/img/5.svg"alt="">

<imgsrc="/static/img/2.svg"alt="">

<imgsrc="/static/img/3.svg"alt="">

<imgsrc="/static/img/1.svg"alt="">
<ahref="#">full info</a>
</div>
</div>
</div>
</div>
<divclass="col-md-6 mt-4 mt-md-0">
<divclass="room-box background-white">
<divclass="room-name">suite
helen</div>
<divclass="room-per">
<iclass="fa fa-star"></i>
<iclass="fa fa-star"></i>
<iclass="fa fa-star"></i>
<iclass="fa fa-star"></i>
<iclass="fa fa-star-o"></i>
</div>
<imgsrc="/static/img/room4.jpg"alt="">
<divclass="room-box-in">
<h5class="">small room</h5>
<pclass="mt-3">A small room is a
compact hotel room with limited space and fewer amenities,
often designed for budget-conscious travelers or short
stays.</p>

P a g e 52 |
 <aclass="mt-1 btn btn-
primary"href="#">book from 8000 ₹</a>
<divclass="room-icons mt-4 pt-4">
<imgsrc="img/4.svg"alt="">
<imgsrc="img/2.svg"alt="">
<imgsrc="img/6.svg"alt="">
<imgsrc="img/3.svg"alt="">
<ahref="#">full info</a>
</div>
</div>
</div>
</div>
<divclass="col-md-6 mt-4">
<divclass="room-box background-white">
<divclass="room-name">suite
andrea</div>
<divclass="room-per">
<iclass="fa fa-star"></i>
<iclass="fa fa-star"></i>
<iclass="fa fa-star"></i>
<iclass="fa fa-star"></i>
<iclass="fa fa-star"></i>
</div>
<imgsrc="/static/img/room5.jpg"alt="">
<divclass="room-box-in">
<h5class="">Apartment</h5>
<pclass="mt-3">A small apartment
is a self-contained living space with limited square
footage, typically consisting of one or two rooms and
providing basic amenities for independent living.</p>
<aclass="mt-1 btn btn-
primary"href="#">book from 11000₹</a>
<divclass="room-icons mt-4 pt-4">
<imgsrc="img/5.svg"alt="">

P a g e 53 |
 <imgsrc="img/2.svg"alt="">
<imgsrc="img/3.svg"alt="">
<imgsrc="img/6.svg"alt="">
<ahref="#">full info</a>
</div>
</div>
</div>
</div>
<divclass="col-md-6 mt-4">
<divclass="room-box background-white">
<divclass="room-name">suite
diana</div>
<divclass="room-per">
<iclass="fa fa-star"></i>
<iclass="fa fa-star"></i>
<iclass="fa fa-star"></i>
<iclass="fa fa-star"></i>
<iclass="fa fa-star"></i>
</div>
<imgsrc="/static/img/room6.jpg"alt="">
<divclass="room-box-in">
<h5class="">big Apartment</h5>
<pclass="mt-3">A Big apartment is
a self-contained living space with limited square footage,
typically consisting of one or two rooms and providing
basic amenities for independent living.</p>
<aclass="mt-1 btn btn-
primary"href="#">book from 16000₹</a>
<divclass="room-icons mt-4 pt-4">
<imgsrc="img/5.svg"alt="">
<imgsrc="img/2.svg"alt="">
<imgsrc="img/3.svg"alt="">
<imgsrc="img/6.svg"alt="">
<ahref="#">full info</a>

P a g e 54 |
 </div>
</div>
</div>
</div>
</div>
</div>
</div>

<divclass="section padding-top-bottom-big over-hide">

<divclass="parallax"style="background-image:
url('/static/img/5.jpg')"></div>
<divclass="section z-bigger">
<divclass="container">
<divclass="row justify-content-center">
<divclass="col-md-8">
<divid="owl-sep-1"class="owl-carousel
owl-theme">
<divclass="item">
<divclass="quote-sep">
<h4>"Chilling out on the
bed in your hotel room watching television, while wearing
your
own pajamas, is
sometimes the best part of a vacation."</h4>
<h6>Jason Salvatore</h6>
</div>
</div>
<divclass="item">
<divclass="quote-sep">
<h4>"Every good day starts
off with a cappuccino, and there's no place better to
enjoy
some frothy caffeine
than at the Thalia Hotel."</h4>

P a g e 55 |
 <h6>Terry Mitchell</h6>
</div>
</div>
<divclass="item">
<divclass="quote-sep">
<h4>"I still enjoy
traveling a lot. I mean, it amazes me that I still get
excited in
hotel rooms just to
see what kind of shampoo they've left me."<irthda/h4>
<h6>Michael Brighton</h6>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<divclass="section padding-top-bottom-small background-

dark-2 over-hide">
<divclass="container">
<divclass="row">
<divclass="col-md-12 text-center">
<h5class="color-grey">A new dimension of
luxury.</h5>

</div>
</div>
</div>
</div>

P a g e 56 |
<divclass="section padding-top-bottom background-grey
over-hide">
<divclass="container">
<divclass="row justify-content-center">
<divclass="col-md-8 align-self-center">
<divclass="subtitle with-line text-center
mb-4">Excellent restaurant</div>
<h3class="text-center padding-bottom-
small">Dining &amp; Bars</h3>
</div>
<divclass="section clearfix"></div>
</div>
<divclass="row background-white p-0 m-0">
<divclass="col-xl-6 p-0">
<divclass="img-wrap"id="rev-3">
<imgsrc="/static/img/rest-
1.jpg"alt="">
</div>
</div>
<divclass="col-xl-6 p-0 align-self-center">
<divclass="row justify-content-center">
<divclass="col-9 pt-4 pt-xl-0 pb-5 pb-
xl-0 text-center">
<h5class="">beach restaurant</h5>
<pclass="mt-3">A beach restaurant
is a dining establishment located on or near a beach,
offering a range of cuisine and often featuring outdoor
seating with scenic views of the ocean.</p>
<aclass="mt-1 btn btn-
primary"href="beach_resturant.html">explore</a>
</div>
</div>
</div>
</div>

P a g e 57 |
 <divclass="row background-white p-0 m-0">
<divclass="col-xl-6 p-0 align-self-center">
<divclass="row justify-content-center">
<divclass="col-9 pt-4 pt-xl-0 pb-5 pb-
xl-0 text-center">
<h5class="">pool restaurant</h5>
<pclass="mt-3">A pool restaurant
is a dining establishment located near a swimming pool,
often offering a menu of light meals, snacks, and
beverages to poolside guests.</p>
<aclass="mt-1 btn btn-
primary"href="#">explore</a>
</div>
</div>
</div>
<divclass="col-xl-6 order-first order-xl-last
p-0">
<divclass="img-wrap"id="rev-4">
<imgsrc="/static/img/rest-
2.jpg"alt="">
</div>
</div>
</div>
</div>
</div>

<divclass="section padding-top z-bigger">

<divclass="container">
<divclass="row justify-content-center padding-
bottom-smaller">
<divclass="col-md-8">
<divclass="subtitle with-line text-center
mb-4">get in touch</div>

P a g e 58 |
 <h3class="text-center padding-bottom-
small">drop us a line</h3>
</div>
<divclass="section clearfix"></div>
<divclass="col-md-6 col-lg-4">
<divclass="address">
<divclass="address-in text-left">
<pclass="color-black">Address:</p>
</div>
<divclass="address-in text-right">
<p>Avenue Str. 328</p>
</div>
</div>
<divclass="address">
<divclass="address-in text-left">
<pclass="color-black">City:</p>
</div>
<divclass="address-in text-right">
<p>Thessaloniki</p>
</div>
</div>
<divclass="address">
<divclass="address-in text-left">
<pclass="color-black">Check-
In:</p>
</div>
<divclass="address-in text-right">
<p>14:00 pm</p>
</div>
</div>
</div>
<divclass="col-md-6 col-lg-4">
<divclass="address">
<divclass="address-in text-left">

P a g e 59 |
 <pclass="color-black">Phone:</p>
</div>
<divclass="address-in text-right">
<p>+21 60 374 7537</p>
</div>
</div>
<divclass="address">
<divclass="address-in text-left">
<pclass="color-black">Email:</p>
</div>
<divclass="address-in text-right">
<p>info@hotel.com</p>
</div>
</div>
<divclass="address">
<divclass="address-in text-left">
<pclass="color-black">Check-
Out:</p>
</div>
<divclass="address-in text-right">
<p>11:00 am</p>
</div>
</div>
</div>
<divclass="section clearfix"></div>
<divclass="col-md-8 text-center mt-5"data-
scroll-reveal="enter bottom move 50px over 0.7s after
0.2s">
<pclass="mb-0"><em>available at: 8am -
10pm</em></p>
<h2class="text-opacity">+91
9155887270</h2>
</div>
</div>

P a g e 60 |
 <divclass="row justify-content-center">
<divclass="col-md-8">
<formaction="{% url 'subscribe'
%}"method="post">
<divclass="subscribe-home">
{% csrf_token %}
<inputtype="text"placeholder="your
email here"name="email"required/>
<buttondata-
lang="en"type="submit">subscribe</button>
</div>
</form>
</div>
</div>
</div>
</div>

{% include 'base/footerslider.html' %}
{% include 'base/footer.html' %}
{% endblock body %}
{% extends 'base/base.html' %}

{% block body %}

{% include 'base/navbar.html' %}

<divclass="section background-dark over-hide">

<divclass="hero-center-section">
<divclass="container">
<divclass="row justify-content-center">
<divclass="col-10 col-sm-8 parallax-fade-
top">

P a g e 61 |
 <divclass="hero-text">Organize Your
Event under the sky</div>
</div>
<divclass="col-12 mt-3 mb-5 parallax-fade-
top">
<divclass="hero-stars">
<iclass="fa fa-star-o"></i>
<iclass="fa fa-star-o"></i>
<iclass="fa fa-star-o"></i>
<iclass="fa fa-star-o"></i>
<iclass="fa fa-star-o"></i>
</div>
</div>
<divclass="col-12 mt-3 parallax-fade-top">
<divclass="booking-hero-wrap">
<divclass="row justify-content-
center">
<divclass="col-5 no-mob">
<divclass="input-daterange
input-group"id="flight-datepicker">
<divclass="row">
<divclass="col-6">

<divclass="form-item">

<spanclass="fontawesome-calendar"></span>

<inputclass="input-
sm"type="text"autocomplete="off"id="start-date-1"

name="start"placeholder="chech-in date"
data-
date-format="DD, MM d" />

P a g e 62 |
<spanclass="date-text date-depart"></span>
</div>
</div>
<divclass="col-6">

<divclass="form-item">

<spanclass="fontawesome-calendar"></span>

<inputclass="input-
sm"type="text"autocomplete="off"id="end-date-1"

name="end"placeholder="check-out date"
data-
date-format="DD, MM d" />

<spanclass="date-text date-return"></span>
</div>
</div>
</div>
</div>
</div>
<divclass="col-5 no-mob">
<divclass="row">
<divclass="col-6">

<selectname="adults"class="wide">
<optiondata-
display="adults">adults</option>

<optionvalue="1">1</option>

<optionvalue="2">2</option>

P a g e 63 |
<optionvalue="3">3</option>

<optionvalue="4">4</option>

<optionvalue="5">5</option>
</select>
</div>
<divclass="col-6">

<selectname="children"class="wide">
<optiondata-
display="children">children</option>

<optionvalue="1">1</option>

<optionvalue="2">2</option>

<optionvalue="3">3</option>

<optionvalue="4">4</option>

<optionvalue="5">5</option>
</select>
</div>
</div>
</div>
<divclass="col-6 col-sm-4
col-lg-2">
<aclass="booking-
button"href="{% url 'search' %}">book now</a>
</div>
</div>
</div>

P a g e 64 |
 </div>
</div>
</div>
</div>

<divclass="slideshow">
<divclass="slide slide--current parallax-top">
<figureclass="slide__figure">
<divclass="slide__figure-inner">
<divclass="slide__figure-
img"style="background-image:
url(/static/img/1.jpg)"></div>
<divclass="slide__figure-
reveal"></div>
</div>
</figure>
</div>
<divclass="slide parallax-top">
<figureclass="slide__figure">
<divclass="slide__figure-inner">
<divclass="slide__figure-
img"style="background-image:
url(/static/img/2.jpg)"></div>
<divclass="slide__figure-
reveal"></div>
</div>
</figure>
</div>
<divclass="slide parallax-top">
<figureclass="slide__figure">
<divclass="slide__figure-inner">
<divclass="slide__figure-
img"style="background-image:
url(/static/img/3.jpg)"></div>

P a g e 65 |
 <divclass="slide__figure-
reveal"></div>
</div>
</figure>
</div>
<!-- revealer -->
<divclass="revealer">
<divclass="revealer__item revealer__item--
left"></div>
<divclass="revealer__item revealer__item--
right"></div>
</div>
<navclass="arrow-nav fade-top">
<buttonclass="arrow-nav__item arrow-
nav__item--prev">
<svgclass="icon icon--nav">
<usexlink:href="#icon-nav"></use>
</svg>
</button>
<buttonclass="arrow-nav__item arrow-
nav__item--next">
<svgclass="icon icon--nav">
<usexlink:href="#icon-nav"></use>
</svg>
</button>
</nav>
<!-- navigation -->
<navclass="nav fade-top">
<buttonclass="nav__button">
<spanclass="nav__button-text"></span>
</button>
<h2class="nav__chapter">Celebrate Your Party
With Us</h2>
<divclass="toc">

P a g e 66 |
 <aclass="toc__item"href="#entry-1">
<spanclass="toc__item-title">Marriage
Party</span>
</a>
<aclass="toc__item"href="#entry-2">
<spanclass="toc__item-title">Birthday
Party</span>
</a>
<aclass="toc__item"href="#entry-3">
<spanclass="toc__item-title">Any type
of Party</span>
</a>
</div>
</nav>
<!-- little sides -->
<divclass="slideshow__indicator"></div>
<divclass="slideshow__indicator"></div>
</div>
</div>

<divclass="section padding-top-bottom over-hide">

<divclass="container">
<divclass="row">
<divclass="col-md-6 align-self-center">
<divclass="row justify-content-center">
<divclass="col-10">

<h2class="text-center">Marriage
Hall</h2>
<pclass="text-center mt-
5">Marriage halls are venues specifically designed for
hosting wedding ceremonies and receptions. They offer
indoor spaces that can accommodate a significant number of
guests and often have separate areas for the main

P a g e 67 |
ceremony, reception, and dining. Rental costs can vary
widely depending on factors such as location, size, and
amenities. Marriage halls provide a dedicated space for
couples and their families to celebrate their special day.
</p>
</div>
</div>
</div>
<divclass="col-md-6 mt-4 mt-md-0">
<divclass="img-wrap">
<imgsrc="/static/img/mrg3.jpg"alt="">
</div>
</div>
</div>
</div>
</div>

<divclass="section background-grey over-hide">

<divclass="container-fluid px-0">
<divclass="row mx-0">
<divclass="col-xl-6 px-0">
<divclass="img-wrap"id="rev-1">

<imgsrc="static/img/birthdays.jpg"alt="">
<divclass="text-element-over">Birthday
Party</div>
</div>
</div>
<divclass="col-xl-6 px-0 mt-4 mt-xl-0 align-
self-center">
<divclass="row justify-content-center">
<divclass="col-10 col-xl-8 text-
center">

P a g e 68 |
 <h3class="text-center">Birthday
Halls</h3>
<pclass="text-center mt-4">A
birthday is not complete without having your favourite
meal. At the Inntel Hotels restaurants you can enjoy
Inntel Originals and local specialties. Would you like to
enjoy a Inntel Original Beef Burger on the sunny terrace
of Inntel Hotels Den Haag Marina Beach, or a Werkspoor G&T
at Inntel Hotels Amsterdam Landmark? Let our chefs and
bartenders surprise you with a festive dinner.</p>
<aclass="mt-5 btn btn-
primary"href="#">check availability</a>
</div>
</div>
</div>
</div>
<divclass="row mx-0">
<divclass="col-xl-6 px-0 mt-4 mt-xl-0 pb-5 pb-
xl-0 align-self-center">
<divclass="row justify-content-center">
<divclass="col-10 col-xl-8 text-
center">
<h3class="text-center">Other
Party</h3>
<pclass="text-center mt-4">You can
celebrate Your Marriage anniversery, dance party, etc.
</p>
<aclass="mt-5 btn btn-
primary"href="#">check availability</a>
</div>
</div>
</div>
<divclass="col-xl-6 px-0 order-first order-xl-
last mt-5 mt-xl-0">

P a g e 69 |
 <divclass="img-wrap"id="rev-2">
<imgsrc="static/img/oparty.jpg"alt="">
<divclass="text-element-over">sea view
suite</div>
</div>
</div>
</div>
</div>
</div>

<divclass="section background-dark over-hide">

<divclass="container-fluid py-4">
<divclass="row">
<divclass="col-sm-6 col-lg-3">
<ahref="services.html">
<divclass="img-wrap services-wrap">
<imgsrc="/static/img/ser-
1.jpg"alt="">
<divclass="services-text-
over">Hotels</div>
</div>
</a>
</div>
<divclass="col-sm-6 col-lg-3 pt-4 pt-sm-0">
<ahref="services.html">
<divclass="img-wrap services-wrap">
<imgsrc="/static/img/ser-
2.jpg"alt="">
<divclass="services-text-
over">restaurant</div>
</div>
</a>
</div>
<divclass="col-sm-6 col-lg-3 pt-4 pt-lg-0">

P a g e 70 |
 <ahref="services.html">
<divclass="img-wrap services-wrap">
<imgsrc="/static/img/ser-
3.jpg"alt="">
<divclass="services-text-
over">pool</div>
</div>
</a>
</div>
<divclass="col-sm-6 col-lg-3 pt-4 pt-lg-0">
<ahref="services.html">
<divclass="img-wrap services-wrap">
<imgsrc="/static/img/ser-
4.jpg"alt="">
<divclass="services-text-
over">activities</div>
</div>
</a>
</div>
</div>
</div>
</div>

<divclass="section padding-top-bottom over-hide">

<divclass="container">
<divclass="row justify-content-center">
<divclass="col-md-8 align-self-center">
<divclass="subtitle with-line text-center
mb-4">elegant suites</div>
<h3class="text-center padding-bottom-
small">Unpretentious luxury</h3>
</div>
<divclass="section clearfix"></div>
<divclass="col-sm-6 col-lg-4">

P a g e 71 |
 <divclass="services-box text-center">
<imgsrc="/static/img/1.svg"alt="">
<h5class="mt-2">smoking free</h5>
<pclass="mt-3">Smoking-free hotels
prohibit smoking in guest rooms, common areas, and outdoor
areas to promote a healthy and safe environment for
guests</p>
<aclass="mt-1 btn btn-
primary"href="#">read more</a>
</div>
</div>
<divclass="col-sm-6 col-lg-4 mt-5 mt-sm-0">
<divclass="services-box text-center">
<imgsrc="/static/img/2.svg"alt="">
<h5class="mt-2">king beds</h5>
<pclass="mt-3">King beds are larger
than queen beds, typically measuring 76 inches wide by 80
inches long, providing ample space for couples or
individuals to sleep comfortably.</p>
<aclass="mt-1 btn btn-
primary"href="#">read more</a>
</div>
</div>
<divclass="col-sm-6 col-lg-4 mt-5 mt-lg-0">
<divclass="services-box text-center">
<imgsrc="/static/img/3.svg"alt="">
<h5class="mt-2">Yacht rental</h5>
<pclass="mt-3">Yacht rental involves
renting a luxury watercraft for a specified period, often
with a captain and crew, for leisure, entertainment, or
business purposes.</p>
<aclass="mt-1 btn btn-
primary"href="#">read more</a>
</div>

P a g e 72 |
 </div>
<divclass="col-sm-6 col-lg-4 mt-5">
<divclass="services-box text-center">
<imgsrc="/static/img/4.svg"alt="">
<h5class="mt-2">welcome drink</h5>
<pclass="mt-3">A welcome drink is a
complimentary beverage offered to guests upon arrival at a
hotel, restaurant, or event to provide a warm reception
and refreshment.</p>
<aclass="mt-1 btn btn-
primary"href="#">read more</a>
</div>
</div>
<divclass="col-sm-6 col-lg-4 mt-5">
<divclass="services-box text-center">
<imgsrc="static/img/5.svg"alt="">
<h5class="mt-2">swimming pool</h5>
<pclass="mt-3">A swimming pool is a
man-made body of water designed for recreational or
competitive swimming, diving, or other aquatic activities,
often found in hotels, resorts, and recreational
facilities..</p>
<aclass="mt-1 btn btn-
primary"href="#">read more</a>
</div>
</div>
<divclass="col-sm-6 col-lg-4 mt-5">
<divclass="services-box text-center">
<imgsrc="static/img/6.svg"alt="">
<h5class="mt-2">food included</h5>
<pclass="mt-3">Food included refers to
meals or snacks that are provided at no additional cost,
often as part of a package or reservation, in hotels,
resorts, or other accommodations.</p>

P a g e 73 |
 <aclass="mt-1 btn btn-
primary"href="#">read more</a>
</div>
</div>
</div>
</div>
</div>

<divclass="section padding-top-bottom-big over-hide">

<divclass="parallax"style="background-image:
url('/static/img/4.jpg')"></div>
<divclass="section z-bigger">
<divclass="container">
<divclass="row">
<divclass="col-md-12">
<divclass="row justify-content-
center">
<divclass="col-md-6 col-xl-4 px-
sm-0">
<divclass="booking-sep-wrap">
<divclass="input-daterange
input-group"id="flight-datepicker-1">
<divclass="form-item">

<spanclass="fontawesome-calendar"></span>

<inputclass="input-
sm"type="text"autocomplete="off"id="start-date"

name="start"placeholder="check-in"data-date-format="DD, MM
d" />
<spanclass="date-
text date-depart"></span>
</div>

P a g e 74 |
 <divclass="form-item">

<spanclass="fontawesome-calendar"></span>

<inputclass="input-
sm"type="text"autocomplete="off"id="end-date"name="end"

placeholder="check-out"data-date-format="DD, MM d" />

<spanclass="date-
text date-return"></span>
</div>
</div>
</div>
</div>
<divclass="col-md-3 col-xl-2 px-
sm-0">
<divclass="quantity">

<inputtype="number"min="1"max="9999"step="1"value="1">
</div>
</div>
<divclass="col-md-3 col-xl-2 px-
sm-0">
<aclass="booking-button-
big"href="#">check<br>availability</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

P a g e 75 |
<divclass="section padding-top-bottom over-hide
background-grey">
<divclass="container">
<divclass="row justify-content-center">
<divclass="col-md-8 align-self-center">
<divclass="subtitle with-line text-center
mb-4">luxury</div>
<h3class="text-center padding-bottom-
small">Our rooms</h3>
</div>
<divclass="section clearfix"></div>
<divclass="col-md-6">
<divclass="room-box background-white">
<divclass="room-name">suite
tanya</div>
<divclass="room-per">
<iclass="fa fa-star"></i>
<iclass="fa fa-star"></i>
<iclass="fa fa-star"></i>
<iclass="fa fa-star"></i>
<iclass="fa fa-star"></i>
</div>
<imgsrc="/static/img/room3.jpg"alt="">
<divclass="room-box-in">
<h5class="">pool suite</h5>
<pclass="mt-3">A pool suite is a
hotel room or villa that includes a private swimming pool
or plunge pool, often with additional luxury amenities and
personalized services.</p>
<aclass="mt-1 btn btn-
primary"href="#">book from 4000₹</a>
<divclass="room-icons mt-4 pt-4">

<imgsrc="/static/img/5.svg"alt="">

P a g e 76 |
<imgsrc="/static/img/2.svg"alt="">

<imgsrc="/static/img/3.svg"alt="">

<imgsrc="/static/img/1.svg"alt="">
<ahref="#">full info</a>
</div>
</div>
</div>
</div>
<divclass="col-md-6 mt-4 mt-md-0">
<divclass="room-box background-white">
<divclass="room-name">suite
helen</div>
<divclass="room-per">
<iclass="fa fa-star"></i>
<iclass="fa fa-star"></i>
<iclass="fa fa-star"></i>
<iclass="fa fa-star"></i>
<iclass="fa fa-star-o"></i>
</div>
<imgsrc="/static/img/room4.jpg"alt="">
<divclass="room-box-in">
<h5class="">small room</h5>
<pclass="mt-3">A small room is a
compact hotel room with limited space and fewer amenities,
often designed for budget-conscious travelers or short
stays.</p>
<aclass="mt-1 btn btn-
primary"href="#">book from 8000 ₹</a>
<divclass="room-icons mt-4 pt-4">
<imgsrc="img/4.svg"alt="">
<imgsrc="img/2.svg"alt="">

P a g e 77 |
 <imgsrc="img/6.svg"alt="">
<imgsrc="img/3.svg"alt="">
<ahref="#">full info</a>
</div>
</div>
</div>
</div>
<divclass="col-md-6 mt-4">
<divclass="room-box background-white">
<divclass="room-name">suite
andrea</div>
<divclass="room-per">
<iclass="fa fa-star"></i>
<iclass="fa fa-star"></i>
<iclass="fa fa-star"></i>
<iclass="fa fa-star"></i>
<iclass="fa fa-star"></i>
</div>
<imgsrc="/static/img/room5.jpg"alt="">
<divclass="room-box-in">
<h5class="">Apartment</h5>
<pclass="mt-3">A small apartment
is a self-contained living space with limited square
footage, typically consisting of one or two rooms and
providing basic amenities for independent living.</p>
<aclass="mt-1 btn btn-
primary"href="#">book from 11000₹</a>
<divclass="room-icons mt-4 pt-4">
<imgsrc="img/5.svg"alt="">
<imgsrc="img/2.svg"alt="">
<imgsrc="img/3.svg"alt="">
<imgsrc="img/6.svg"alt="">
<ahref="#">full info</a>
</div>

P a g e 78 |
 </div>
</div>
</div>
<divclass="col-md-6 mt-4">
<divclass="room-box background-white">
<divclass="room-name">suite
diana</div>
<divclass="room-per">
<iclass="fa fa-star"></i>
<iclass="fa fa-star"></i>
<iclass="fa fa-star"></i>
<iclass="fa fa-star"></i>
<iclass="fa fa-star"></i>
</div>
<imgsrc="/static/img/room6.jpg"alt="">
<divclass="room-box-in">
<h5class="">big Apartment</h5>
<pclass="mt-3">A Big apartment is
a self-contained living space with limited square footage,
typically consisting of one or two rooms and providing
basic amenities for independent living.</p>
<aclass="mt-1 btn btn-
primary"href="#">book from 16000₹</a>
<divclass="room-icons mt-4 pt-4">
<imgsrc="img/5.svg"alt="">
<imgsrc="img/2.svg"alt="">
<imgsrc="img/3.svg"alt="">
<imgsrc="img/6.svg"alt="">
<ahref="#">full info</a>
</div>
</div>
</div>
</div>
</div>

P a g e 79 |
 </div>
</div>

<divclass="section padding-top-bottom-big over-hide">

<divclass="parallax"style="background-image:
url('/static/img/5.jpg')"></div>
<divclass="section z-bigger">
<divclass="container">
<divclass="row justify-content-center">
<divclass="col-md-8">
<divid="owl-sep-1"class="owl-carousel
owl-theme">
<divclass="item">
<divclass="quote-sep">
<h4>"Chilling out on the
bed in your hotel room watching television, while wearing
your
own pajamas, is
sometimes the best part of a vacation."</h4>
<h6>Jason Salvatore</h6>
</div>
</div>
<divclass="item">
<divclass="quote-sep">
<h4>"Every good day starts
off with a cappuccino, and there's no place better to
enjoy
some frothy caffeine
than at the Thalia Hotel."</h4>
<h6>Terry Mitchell</h6>
</div>
</div>
<divclass="item">
<divclass="quote-sep">

P a g e 80 |
 <h4>"I still enjoy
traveling a lot. I mean, it amazes me that I still get
excited in
hotel rooms just to
see what kind of shampoo they've left me."<irthda/h4>
<h6>Michael Brighton</h6>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<divclass="section padding-top-bottom-small background-

dark-2 over-hide">
<divclass="container">
<divclass="row">
<divclass="col-md-12 text-center">
<h5class="color-grey">A new dimension of
luxury.</h5>

</div>
</div>
</div>
</div>

<divclass="section padding-top-bottom background-grey

over-hide">
<divclass="container">
<divclass="row justify-content-center">
<divclass="col-md-8 align-self-center">

P a g e 81 |
 <divclass="subtitle with-line text-center
mb-4">Excellent restaurant</div>
<h3class="text-center padding-bottom-
small">Dining &amp; Bars</h3>
</div>
<divclass="section clearfix"></div>
</div>
<divclass="row background-white p-0 m-0">
<divclass="col-xl-6 p-0">
<divclass="img-wrap"id="rev-3">
<imgsrc="/static/img/rest-
1.jpg"alt="">
</div>
</div>
<divclass="col-xl-6 p-0 align-self-center">
<divclass="row justify-content-center">
<divclass="col-9 pt-4 pt-xl-0 pb-5 pb-
xl-0 text-center">
<h5class="">beach restaurant</h5>
<pclass="mt-3">A beach restaurant
is a dining establishment located on or near a beach,
offering a range of cuisine and often featuring outdoor
seating with scenic views of the ocean.</p>
<aclass="mt-1 btn btn-
primary"href="beach_resturant.html">explore</a>
</div>
</div>
</div>
</div>
<divclass="row background-white p-0 m-0">
<divclass="col-xl-6 p-0 align-self-center">
<divclass="row justify-content-center">
<divclass="col-9 pt-4 pt-xl-0 pb-5 pb-
xl-0 text-center">

P a g e 82 |
 <h5class="">pool restaurant</h5>
<pclass="mt-3">A pool restaurant
is a dining establishment located near a swimming pool,
often offering a menu of light meals, snacks, and
beverages to poolside guests.</p>
<aclass="mt-1 btn btn-
primary"href="#">explore</a>
</div>
</div>
</div>
<divclass="col-xl-6 order-first order-xl-last
p-0">
<divclass="img-wrap"id="rev-4">
<imgsrc="/static/img/rest-
2.jpg"alt="">
</div>
</div>
</div>
</div>
</div>

<divclass="section padding-top z-bigger">

<divclass="container">
<divclass="row justify-content-center padding-
bottom-smaller">
<divclass="col-md-8">
<divclass="subtitle with-line text-center
mb-4">get in touch</div>
<h3class="text-center padding-bottom-
small">drop us a line</h3>
</div>
<divclass="section clearfix"></div>
<divclass="col-md-6 col-lg-4">
<divclass="address">

P a g e 83 |
 <divclass="address-in text-left">
<pclass="color-black">Address:</p>
</div>
<divclass="address-in text-right">
<p>Avenue Str. 328</p>
</div>
</div>
<divclass="address">
<divclass="address-in text-left">
<pclass="color-black">City:</p>
</div>
<divclass="address-in text-right">
<p>Thessaloniki</p>
</div>
</div>
<divclass="address">
<divclass="address-in text-left">
<pclass="color-black">Check-
In:</p>
</div>
<divclass="address-in text-right">
<p>14:00 pm</p>
</div>
</div>
</div>
<divclass="col-md-6 col-lg-4">
<divclass="address">
<divclass="address-in text-left">
<pclass="color-black">Phone:</p>
</div>
<divclass="address-in text-right">
<p>+21 60 374 7537</p>
</div>
</div>

P a g e 84 |
 <divclass="address">
<divclass="address-in text-left">
<pclass="color-black">Email:</p>
</div>
<divclass="address-in text-right">
<p>info@hotel.com</p>
</div>
</div>
<divclass="address">
<divclass="address-in text-left">
<pclass="color-black">Check-
Out:</p>
</div>
<divclass="address-in text-right">
<p>11:00 am</p>
</div>
</div>
</div>
<divclass="section clearfix"></div>
<divclass="col-md-8 text-center mt-5"data-
scroll-reveal="enter bottom move 50px over 0.7s after
0.2s">
<pclass="mb-0"><em>available at: 8am -
10pm</em></p>
<h2class="text-opacity">+91
9155887270</h2>
</div>
</div>
<divclass="row justify-content-center">
<divclass="col-md-8">
<formaction="{% url 'subscribe'
%}"method="post">
<divclass="subscribe-home">
{% csrf_token %}

P a g e 85 |
 <inputtype="text"placeholder="your
email here"name="email"required/>
<buttondata-
lang="en"type="submit">subscribe</button>
</div>
</form>
</div>
</div>
</div>
</div>

{% include 'base/footerslider.html' %}
{% include 'base/footer.html' %}
{% endblock body %}

Css of our page

/* #Primary
================================================== */

body{
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 15px;
line-height: 1.7;
color: #878787;
overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6{
font-family: 'Poppins', sans-serif;
font-weight: 300;
margin-bottom: 0;
line-height: 1.25;
color: #363636;
}
h1, .h1 {
font-size: 4rem;
font-weight: 200;
}
h2, .h2 {

P a g e 86 |
font-size: 3.4rem;
font-weight: 300;
}
h3, .h3 {
font-size: 2.7rem;
text-transform: capitalize;
}
h4, .h4 {
font-size: 2.2rem;
}
h5, .h5 {
font-size: 1.6rem;
font-weight: 400;
color: #444;
text-transform: capitalize;
}
h6, .h6 {
font-size: 1rem;
text-transform: uppercase;
font-weight:400;
letter-spacing: 2px;
}
::selection {
color: #fff;
}
::-moz-selection {
color: #fff;
}
mark{
color:#fff;
}

/* #Preload
================================================== */

.loader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
z-index: 9999999999;
}

P a g e 87 |
.loader__figure {
position: absolute;
top: 50%;
left: 50%;
margin-left: -18px;
margin-top: -18px;
height: 36px;
width: 36px;
box-sizing: border-box;
border-radius: 50%;
opacity: .4;
animation: loaderAnim 0.7s linear infinite alternate forwards;
}
@keyframes loaderAnim {
to {
opacity: 1;
transform: scale3d(0.5,0.5,1);
}
}

/* #Primary style
================================================== */

.section {
position: relative;
width: 100%;
display: block;
}
.subtitle{
position: relative;
text-transform: uppercase;
color:#999;
display: block;
font-weight: 300;
letter-spacing: 3px;
font-size: 14px;
}
.subtitle.with-line:after{
position: absolute;
content: '';
width: 50px;
height: 1px;
z-index: 3;
bottom: -15px;
left: 50%;

P a g e 88 |
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.relative {
position: relative;
}
.over-hide{
overflow: hidden;
}
.over-y-scroll{
overflow-y: scroll;
z-index: 2099;
}
.full-height {
height: 100vh;
}
.hero-full-height {
height: calc(100vh - 140px);
}
.half-height {
height: 50vh;
}
.big-55-height {
height: 55vh;
}
.big-60-height {
height: 60vh;
}
.big-65-height {
height: 65vh;
}
.big-70-height {
height: 70vh;
}
.big-75-height {
height: 75vh;
}
.big-80-height {
height: 80vh;
}
.max-width-80 {
max-width: 80%;
}
.background-white {
background-color: #ffffff;

P a g e 89 |
}
.background-grey {
background-color: #fbfbfb;
}
.background-grey-1 {
background-color: #f9f9f9;
}
.background-dark {
background-color: #181818;
}
.background-dark-1 {
background-color: #242424;
}
.background-dark-2 {
background-color: #1b1b1b;
}
.background-black {
background-color: #000000;
}
.color-black {
color: #000000;
}
.color-white {
color: #ffffff;
}
.color-grey {
color: #e1e1e1;
}
.img-wrap {
position:relative;
width:100%;
display:block;
}
.img-wrap img {
width:100%;
height: auto;
display:block;
}
.z-bigger {
z-index:10;
}
.z-too-big {
z-index:11000;
}
.padding-page-top {

P a g e 90 |
padding-top: 180px;
}
.padding-top-bottom {
padding-top: 100px;
padding-bottom: 100px;
}
.padding-top {
padding-top: 100px;
}
.padding-bottom {
padding-bottom: 100px;
}
.padding-top-bottom-big {
padding-top: 130px;
padding-bottom: 130px;
}
.padding-top-big {
padding-top: 130px;
}
.padding-bottom-big {
padding-bottom: 130px;
}
.padding-top-bottom-small {
padding-top: 70px;
padding-bottom: 70px;
}
.padding-top-small {
padding-top: 70px;
}
.padding-bottom-small {
padding-bottom: 70px;
}
.padding-top-bottom-smaller {
padding-top: 50px;
padding-bottom: 50px;
}
.padding-top-smaller {
padding-top: 50px;
}
.padding-bottom-smaller {
padding-bottom: 50px;
}
.btn {
padding: 10px 18px;
text-transform: uppercase;

P a g e 91 |
color: #fff;
border: 0;
border-radius: 0;
font-size: 12px;
line-height: 1;
letter-spacing: 1px;
-webkit-transition: all 200ms linear;
transition: all 200ms linear;
}
.btn.btn-primary {
background-color: #242424;
}
.btn:active,
.btn:focus{
border: 0;
outline: 0;
}
.scroll-to-top{
position: fixed;
bottom: 20px;
right: 20px;
display: none;
background-color: #070707;
width: 35px;
height: 35px;
z-index: 100000;
background-repeat: no-repeat;
background-position: center center;
background-size: 30px 30px;
cursor: pointer;
background-image: url('../img/arrow-up.svg');
-webkit-transition: all 200ms linear;
transition: all 200ms linear;
}

.sep-line {
position: relative;
width: 100%;
display: block;
height: 1px;
background-color: rgba(0,0,0,.1);
}

/* #Navigation
================================================== */

P a g e 92 |
#menu-wrap{
position: fixed;
width: 100%;
z-index: 20000;
margin: 0 auto;
top: 0;
left: 0;
}
#menu-wrap .container .columns {
margin-top: 0;
margin-bottom: 0;
}
.menu-back{
background: rgba(21,21,21,0);
-webkit-transition : all 0.3s ease-out;
-moz-transition : all 0.3s ease-out;
-o-transition :all 0.3s ease-out;
transition : all 0.3s ease-out;
}
.cbp-af-header {
margin-top: 20px;
-webkit-transition : all 0.3s ease-out;
-moz-transition : all 0.3s ease-out;
-o-transition :all 0.3s ease-out;
transition : all 0.3s ease-out;
}
.cbp-af-header.cbp-af-header-shrink {
margin-top: 0;
-webkit-transform: translateY(-52px);
-ms-transform: translateY(-52px);
transform: translateY(-52px);
background: rgba(21,21,21,.92);
-webkit-transition : all 0.3s ease-out;
-moz-transition : all 0.3s ease-out;
-o-transition :all 0.3s ease-out;
transition : all 0.3s ease-out;
}
.cbp-af-header.cbp-af-header-shrink .logo{
height: 50px;
top: 15px;
-webkit-transition : all 0.3s ease-out;
-moz-transition : all 0.3s ease-out;
-o-transition :all 0.3s ease-out;
transition : all 0.3s ease-out;

P a g e 93 |
}
.cbp-af-header.cbp-af-header-shrink .menu > ul > li a {
padding: 30px 0;
color:#fff;
-webkit-transition : all 0.3s ease-out;
-moz-transition : all 0.3s ease-out;
-o-transition :all 0.3s ease-out;
transition : all 0.3s ease-out;
}
.cbp-af-header.cbp-af-header-shrink .menu > ul > li {
margin: 0 12px;
-webkit-transition : all 0.3s ease-out;
-moz-transition : all 0.3s ease-out;
-o-transition :all 0.3s ease-out;
transition : all 0.3s ease-out;
}
.cbp-af-header.cbp-af-header-shrink .menu > ul > li:last-child {
margin-right:0;
}
.cbp-af-header.cbp-af-header-shrink .menu > ul > li > ul > li a {
padding:0;
margin-left: 10px;
margin-right: 10px;
color:#fff;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 13px;
line-height:13px;
letter-spacing: 1px;
width: calc(100% - 20px);
display: block;
}
.cbp-af-header.cbp-af-header-shrink .menu > ul > li > ul.normal-sub {
width: 240px;
left: auto;
padding: 10px 20px;
}
.cbp-af-header.cbp-af-header-shrink .menu > ul > li > ul.normal-sub > li {
width: 100%;
}
.cbp-af-header.cbp-af-header-shrink .menu > ul > li > ul.normal-sub > li a {
border: 0;
padding: 1em 0;
}
.cbp-af-header.cbp-af-header-shrink .menu-top{

P a g e 94 |
 -webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-transition : all 0.3s ease-out;
-moz-transition : all 0.3s ease-out;
-o-transition :all 0.3s ease-out;
transition : all 0.3s ease-out;
}
.menu-top{
position:relative;
width: 100%;
margin: 0 auto;
z-index: 4;
-webkit-transition : all 0.3s ease-out;
-moz-transition : all 0.3s ease-out;
-o-transition :all 0.3s ease-out;
transition : all 0.3s ease-out;
}
.menu-top p{
color: #f1f1f1;
font-size: 12px;
line-height: 20px;
text-transform: uppercase;
letter-spacing: 1px;
margin: 0;
padding: 0;
}
.lang-wrap{
position: relative;
display: inline-block;
margin-right: 5px;
margin-left: 5px;
padding: 0 10px;
color: #fff;
line-height: 20px;
font-weight:400;
font-size: 12px;
letter-spacing: 1px;
cursor: pointer;
z-index: 10;
text-transform: uppercase;
-webkit-transition : all 0.3s ease-out;
-moz-transition : all 0.3s ease-out;
-o-transition :all 0.3s ease-out;
transition : all 0.3s ease-out;

P a g e 95 |
}
.lang-wrap ul{
position: absolute;
left: 0;
top: 35px;
width: 100%;
z-index: 10;
padding: 0;
margin: 0;
box-shadow: 0px 5px 6px 0px rgba(0, 0, 0, 0.1);
opacity: 0;
visibility: hidden;
-webkit-transition: all 200ms linear;
-moz-transition: all 200ms linear;
-o-transition: all 200ms linear;
-ms-transition: all 200ms linear;
transition: all 200ms linear;
-webkit-transform: translate3d(0, -15px, 0);
-moz-transform: translate3d(0, -15px, 0);
-o-transform: translate3d(0, -15px, 0);
-ms-transform: translate3d(0, -15px, 0);
transform: translate3d(0, -15px, 0);
}
.lang-wrap.clicked ul{
opacity: 1;
visibility: visible;
-webkit-transform: translate3d(0, 0px, 0);
-moz-transform: translate3d(0, 0px, 0);
-o-transform: translate3d(0, 0px, 0);
-ms-transform: translate3d(0, 0px, 0);
transform: translate3d(0, 0px, 0);
}
.lang-wrap ul a{
text-decoration: none;
color: #212121;
padding-top: 7px;
padding-bottom: 7px;
width: 100%;
position: relative;
display: block;
}
.lang-wrap ul li{
position: relative;
background-color: #fff;
width: 100%;

P a g e 96 |
display: block;
margin: 0;
line-height: 12px;
text-align: center;
font-weight:500;
font-size: 11px;
cursor: pointer;
text-transform: uppercase;
border-bottom: 1px solid rgba(0, 0, 0, 0.07);
transition: all 250ms linear;
}
.lang-wrap ul a:hover{
color: #fff;
}
.social-top{
color: #fff;
font-size: 12px;
line-height: 20px;
text-transform: uppercase;
letter-spacing: 1px;
margin: 0;
padding: 0 10px;
border-right: 1px solid rgba(255,255,255,.2);
transition: all 250ms linear;
}
.social-top:hover{
text-decoration: none;
}
.call-top{
color: #fff;
font-size: 12px;
line-height: 20px;
text-transform: uppercase;
letter-spacing: 1px;
margin: 0;
padding: 0;
transition: all 250ms linear;
}
.call-top:hover{
text-decoration: none;
}
span.call-top:hover{
color: #fff;
}

P a g e 97 |
.logo{
position:absolute;
height: 64px;
z-index:10000;
top: 18px;
-webkit-transition : all 0.3s ease-out;
-moz-transition : all 0.3s ease-out;
-o-transition :all 0.3s ease-out;
transition : all 0.3s ease-out;
}
.logo img{
height: 100%;
width: auto;
display: block;
-webkit-transition : all 0.3s ease-out;
-moz-transition : all 0.3s ease-out;
-o-transition :all 0.3s ease-out;
transition : all 0.3s ease-out;
}
.menu-mobile {
display: none;
padding-top:40px;
padding-bottom:40px;
}
.menu-mobile:after {
content: "\f394";
font-family: "Ionicons";
font-size: 30px;
height:40px;
line-height:40px;
padding: 0;
float: right;
position: relative;
top: 0;
color:#fff;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.menu-dropdown-icon:before {
content: "\f489";
font-family: "Ionicons";
display: none;
cursor: pointer;

P a g e 98 |
 float: right;
padding: 8px 12px;
background: #212121;
color: #fff;
}
.menu {
position:relative;
width:calc(100% - 60px);
margin:0 auto;
max-width:1110px;
z-index:3;
}
.menu > ul {
margin: 0 auto;
width: auto;
float:right;
list-style: none;
padding: 0;
/* IF .menu position=relative -> ul = container width, ELSE ul = 100% width */
box-sizing: border-box;
}
.menu > ul:before,
.menu > ul:after {
content: "";
display: table;
}
.menu > ul:after {
clear: both;
}
.menu > ul > li {
float: left;
padding: 0;
margin: 0 14px;
-webkit-transition : all 0.3s ease-out;
-moz-transition : all 0.3s ease-out;
-o-transition :all 0.3s ease-out;
transition : all 0.3s ease-out;
}
.menu > ul > li a {
text-decoration: none;
padding: 40px 0;
display: block;
font-family: 'Roboto', sans-serif;
font-weight: 400;
font-size: 13px;

P a g e 99 |
text-transform: uppercase;
vertical-align: bottom;
line-height:20px;
letter-spacing: 2px;
color: #fff;
-webkit-transition : all 0.3s ease-out;
-moz-transition : all 0.3s ease-out;
-o-transition :all 0.3s ease-out;
transition : all 0.3s ease-out;
}
.menu > ul > li:hover > ul {
}
.menu > ul > li > ul {
display: none;
width: 100%;
background: #111;
padding: 60px 50px;
position: absolute;
z-index: 99999;
left: 0;
margin: 0;
list-style: none;
box-sizing: border-box;
}
.menu > ul > li > ul:before,
.menu > ul > li > ul:after {
content: "";
display: table;
padding: 5px;
}
.menu > ul > li > ul:after {
clear: both;
}
.menu > ul > li > ul > li {
margin: 3px 0;
padding-bottom: 0;
list-style: none;
width: 25%;
background: none;
float: left;
}
.menu > ul > li > ul > li p {
padding: 0;
padding-bottom:10px;
margin-left:10px;

P a g e 100 |
margin-right:10px;
color:#fff;
font-family: 'Roboto', sans-serif;
font-weight: 400;
font-size: 12px;
line-height:18px;
letter-spacing:2px;
text-transform:uppercase;
width: calc(100% - 20px);
display: block;
border-bottom: 1px solid rgba(255,255,255,.2);
}
.menu > ul > li > ul > li p span {
vertical-align: super;
font-size: 9px;
line-height:9px;
font-weight:500;
}
.menu > ul > li > ul > li a {
padding: 9px 0 !important;
margin-left:10px;
margin-right:10px;
color: #fff;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 13px;
line-height: 13px;
text-transform: none;
letter-spacing: 1px;
width: calc(100% - 20px);
display: block;
}
.menu > ul > li a span {
color: #fff;
font-weight: 400;
font-size: 11px;
line-height: 11px;
padding: 8px 16px;
box-shadow: 0 6px 3px -3px rgba(0, 0, 0, 0.1);
-webkit-transition: all 200ms linear;
transition: all 200ms linear;
}
.menu > ul > li a:hover span {
background-color: #323232;
color: #fff;

P a g e 101 |
}
.menu > ul > li > ul > li a:hover {
}
.menu > ul > li > ul > li > ul {
display: block;
padding: 0;
margin: 10px 0 0;
list-style: none;
box-sizing: border-box;
}
.menu > ul > li > ul > li > ul:before,
.menu > ul > li > ul > li > ul:after {
content: "";
display: table;
}
.menu > ul > li > ul > li > ul:after {
clear: both;
}
.menu > ul > li > ul > li > ul > li {
float: left;
width: 100%;
padding: 10px 0;
margin: 0;
font-size: .8em;
}
.menu > ul > li > ul > li > ul > li a {
border: 0;
}
.menu > ul > li > ul.normal-sub {
width: 240px;
left: auto;
padding: 10px 20px;
}
.menu > ul > li > ul.normal-sub > li {
width: 100%;
}
.menu > ul > li > ul.normal-sub > li a {
border: 0;
padding: 1em 0;
}

/* ––––––––––––––––––––––––––––––––––––––––––––––––––
Mobile style's
–––––––––––––––––––––––––––––––––––––––––––––––––– */

P a g e 102 |
@media only screen and (max-width: 1170px) {

.menu-back{
background: rgba(0,0,0,.93);
-webkit-transition : all 0.3s ease-out;
-moz-transition : all 0.3s ease-out;
-o-transition :all 0.3s ease-out;
transition : all 0.3s ease-out;
}
.cbp-af-header.cbp-af-header-shrink {
background: rgba(0,0,0,.93);
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
-webkit-transition : all 0.3s ease-out;
-moz-transition : all 0.3s ease-out;
-o-transition :all 0.3s ease-out;
transition : all 0.3s ease-out;
}
.cbp-af-header.cbp-af-header-shrink .logo{
height: 50px;
top: 15px;
-webkit-transition : all 0.3s ease-out;
-moz-transition : all 0.3s ease-out;
-o-transition :all 0.3s ease-out;
transition : all 0.3s ease-out;
}
.cbp-af-header.cbp-af-header-shrink .menu-top{
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
-webkit-transition : all 0.3s ease-out;
-moz-transition : all 0.3s ease-out;
-o-transition :all 0.3s ease-out;
transition : all 0.3s ease-out;
}
.logo{
height: 50px;
top: 15px;
-webkit-transition : all 0.3s ease-out;
-moz-transition : all 0.3s ease-out;
-o-transition :all 0.3s ease-out;
transition : all 0.3s ease-out;
}

P a g e 103 |
#menu-wrap{
position: relative;
}
.cbp-af-header.cbp-af-header-shrink .menu > ul > li a {
padding: 10px 0;
color:#fff;
-webkit-transition : all 0.3s ease-out;
-moz-transition : all 0.3s ease-out;
-o-transition :all 0.3s ease-out;
transition : all 0.3s ease-out;
}
.cbp-af-header.cbp-af-header-shrink .menu > ul > li > ul > li a {
padding:0;
margin-left:10px;
margin-right:10px;
color:#fff;
font-size: 10px;
line-height:18px;
letter-spacing:2px;
text-transform:uppercase;
width: calc(100% - 20px);
display: block;
}
.cbp-af-header.cbp-af-header-shrink .menu > ul {
padding-top: 40px;
padding-bottom: 40px;
-webkit-transition : all 0.3s ease-out;
-moz-transition : all 0.3s ease-out;
-o-transition :all 0.3s ease-out;
transition : all 0.3s ease-out;
}
.menu > ul {
padding-top: 40px;
padding-bottom: 40px;
-webkit-transition : all 0.3s ease-out;
-moz-transition : all 0.3s ease-out;
-o-transition :all 0.3s ease-out;
transition : all 0.3s ease-out;
}
.menu > ul > li a {
padding: 10px 0;
color:#fff;
-webkit-transition : all 0.3s ease-out;
-moz-transition : all 0.3s ease-out;
-o-transition :all 0.3s ease-out;

P a g e 104 |
transition : all 0.3s ease-out;
}
.menu > ul > li > ul > li a {
padding:0;
margin-left:10px;
margin-right:10px;
color:#ffffff;
font-size: 10px;
line-height:18px;
letter-spacing:2px;
text-transform:uppercase;
width: calc(100% - 20px);
display: block;
}
.menu-container {
width: 100%;
}
.menu-mobile {
display: block;
}
.menu-dropdown-icon:before {
display: block;
}
.menu > ul > li > ul {
padding: 20px 0;
}
.menu > ul {
width: 100%;
float:none;
position:relative;
display: none;
}
.cbp-af-header.cbp-af-header-shrink .menu > ul > li {
width: 100%;
float: none;
display: block;
margin: 3px 0;
}
.menu > ul > li {
width: 100%;
float: none;
display: block;
margin: 3px 0;
}
.menu > ul > li a {

P a g e 105 |
 width: 100%;
display: block;
}
.menu > ul > li > ul {
position: relative;
}
.menu > ul > li > ul.normal-sub {
width: 100%;
padding: 0;
}
.cbp-af-header.cbp-af-header-shrink .menu > ul > li > ul.normal-sub {
width: 100%;
padding: 0;
}
.cbp-af-header.cbp-af-header-shrink .menu > ul > li > ul.normal-sub > li a {
border: 0;
padding: 10px 0;
}
.menu > ul > li > ul > li {
float: none;
width: 100%;
padding-bottom:0;
}
.menu > ul > li > ul > li:first-child {
margin: 0;
}
.menu > ul > li > ul > li > ul {
position: relative;
}
.menu > ul > li > ul > li > ul > li {
float: none;
}
.menu .show-on-mobile {
display: block;
}
}

/* #Hero center section

================================================== */

.hero-center-section{
position: absolute;
top: 50%;
left: 0;
width: 100%;

P a g e 106 |
margin-top: -50px;
z-index: 10000;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.hero-center-section.ver-2{
margin-top: 20px;
}
.hero-center-section.pages{
margin-top: 40px;
}
.booking-hero-wrap{
position: relative;
background-color: rgba(0,0,0,.85);
padding: 15px;
display: block;
width: 100%;
}
.hero-text{
color: #fff;
text-align: center;
font-size: 62px;
line-height: 1.25;
font-weight: 300;
font-family: 'Poppins', sans-serif;
}
.hero-text-ver-2{
color: #fff;
text-align: center;
font-size: 5.5vw;
line-height: 1.1;
font-weight: 300;
font-family: 'Poppins', sans-serif;
}
.hero-small-text{
color: #fff;
text-align: center;
font-size: 12px;
line-height: 1.25;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 2px;
}
.hero-stars{
position: relative;

P a g e 107 |
color: #fff;
text-align: center;
margin: 0 auto;
display: block;
font-size: 12px;
}
.hero-stars .fa{
margin-left: 3px;
margin-right: 3px;
}
.booking-button{
position: relative;
color: #fff;
display: block;
width: 100%;
font-size: 13px;
text-transform: uppercase;
line-height: 1.2;
font-weight: 300;
letter-spacing: 1px;
outline: none;
text-align: center;
padding-top: 13px;
padding-bottom: 13px;
-webkit-transition: all 200ms linear;
transition: all 200ms linear;
}
.booking-button:hover{
background-color: #343434;
color: #fff;
}

/* #Hero flip slider

================================================== */

a:hover {
text-decoration: none;
}
button:focus,
a:focus {
outline: none;
}
.hidden {
position: absolute;
overflow: hidden;

P a g e 108 |
width: 0;
height: 0;
pointer-events: none;
}
/* Icons */
.icon {
display: block;
width: 45px;
height: 45px;
margin: 0 auto;
fill: currentColor;
}
.slideshow {
width: 100%;
height: 100vh;
position: relative;
overflow: hidden;
}
.slide {
position: absolute;
top: 0;
left: 0;
pointer-events: none;
display: grid;
grid-area: 2 / 1 / 3 / 2;
padding: 100px 0;
padding-top: 0;
--gridgap: 1vw;
--gridwidth: 100%;
--gridheight: 100%;
display: grid;
width: var(--gridwidth);
height: var(--gridheight);
grid-template-rows: repeat(20,calc(var(--gridheight) / 20 - var(--gridgap)));
grid-template-columns: repeat(20,calc(var(--gridwidth) / 20 - var(--gridgap)));
grid-gap: var(--gridgap);
align-content: center;
justify-content: center;
}
.slide__figure {
grid-area: 1 / 1 / 22 / 22;
}
.slide--current {
pointer-events: auto;
z-index: 100;

P a g e 109 |
}
.slide__figure {
position: relative;
display: flex;
flex-direction: column;
width: auto;
height: auto;
max-width: none;
margin: 0;
will-change: transform;
perspective: 1000px;
}
.slide__figure-inner {
position: relative;
flex: 1;
overflow: hidden;
transform: rotate3d(0,1,0,0deg);
will-change: transform;
}
.slide__figure-img {
position: relative;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
z-index: 10;
opacity: 1;
will-change: transform;
}
.slide__figure-reveal {
position: absolute;
top: -1px;
left: -1px;
width: calc(100% + 2px);
height: calc(100% + 2px);
background: #242424;
z-index: 20;
will-change: transform;
}
.js .slide__figure-reveal {
transform: translate3d(0,0,0);
}
.js .slide--current .slide__figure-reveal {
transform: translate3d(100%,0,0);

P a g e 110 |
}
.revealer {
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
top: 0;
left: 0;
display: flex;
z-index: 5000;
}
.revealer__item {
width: 50%;
height: 100%;
position: relative;
overflow: hidden;
}
.revealer__item-inner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
transform: translate3d(100%,0,0);
}
.nav {
display: block;
position: absolute;
bottom: 43px;
left: 50%;
margin: 0 auto;
text-align: center;
z-index: 4000;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
-webkit-transition: all 200ms linear;
transition: all 200ms linear;
}
.nav__button {
position: relative;
border: 0;
margin: 0 auto;
text-align: center;
padding: 0;

P a g e 111 |
line-height: 1;
background: none;
z-index: 6000;
}
.nav__button:focus {
outline: none;
}
.nav__button:hover {
}
.nav__button-text {
position: relative;
margin: 0 auto;
padding: 0;
text-align: center;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: rgba(35,35,35,.8);
display: block;
z-index: 6000;
cursor: pointer;
}
.nav__button-text::after,
.nav__button-text::before {
content: '';
position: absolute;
height: 1px;
top: 20px;
width: 15px;
right: 13px;
background: #fff;
-webkit-transition: all 200ms linear;
transition: all 200ms linear;
}
.nav__button-text::after {
transition: opacity 0.2s, transform 0.2s;
}
.nav--open .nav__button-text::after {
transform: rotate(90deg);
opacity: 0;
}
.nav__button-text::before {
transform: rotate(90deg);
transition: transform 0.2s;
}

P a g e 112 |
.nav--open .nav__button-text::before {
transform: rotate(0deg);
}
.toc {
position: absolute;
top: calc(-100% - 40px);
left: 50%;
padding: 20px;
padding-bottom: 30px;
border-radius: 5px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
opacity: 0;
background-color: rgba(0,0,0,.9);
-webkit-transition: all 200ms linear;
transition: all 200ms linear;
}
.nav--open .toc {
opacity: 1;
}
.toc__item {
pointer-events: none;
opacity: 0;
display: block;
min-width: 200px;
margin: 0.15rem 0;
opacity: 0;
}
.nav--open .toc__item {
pointer-events: auto;
}
.toc__item-title {
pointer-events: none;
color: #fff;
text-transform: uppercase;
font-weight: 300;
font-size: 13px;
-webkit-transition: all 200ms linear;
transition: all 200ms linear;
}
.toc__item:hover .toc__item-title {
color: #999;
}
.arrow-nav {
display: block;

P a g e 113 |
position: absolute;
width: 100%;
height: 100px;
bottom: 0;
left: 0;
pointer-events: none;
display: flex;
align-items: center;
justify-content: space-between;
z-index: 4000;
padding: 1.25rem;
}
.arrow-nav__item {
pointer-events: auto;
border: 0;
padding: 0;
margin: 0;
cursor: pointer;
background: none;
color: #fff;
-webkit-transition: all 200ms linear;
transition: all 200ms linear;
}
.arrow-nav__item--prev {
visibility: hidden;
}
.arrow-nav__item--prev .icon {
transform: rotate(180deg);
}
.icon--nav {
pointer-events: none;
transition: transform 0.2s;
}
.arrow-nav__item--next:hover .icon--nav {
transform: translate3d(-2px,0,0);
}
.arrow-nav__item--prev:hover .icon--nav {
transform: rotate(180deg) translate3d(-2px,0,0);
}
.nav__chapter {
font-size: inherit;
font-weight: normal;
margin-top: 12px;
display: block;
font-size: 18px;

P a g e 114 |
font-weight: 300;
letter-spacing: 2px;
color: #e6e6e6;
line-height: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-transition: all 300ms linear;
transition: all 300ms linear;
}
.nav__chapter:after {
position: absolute;
content: '';
width: 40px;
height: 1px;
bottom: -15px;
left: 50%;
margin-left: -20px;
z-index: 2;
}
.nav--open .nav__chapter {
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}

/* #Home HTML Video

================================================== */

#poster_background {
position: absolute;
bottom: 0;
left: 0;
top:0;
right:0;
background:url('../img/home-video.jpg')no-repeat center center;
background-size:cover;
width: 100%;
height: 100%;
z-index: 1;
overflow: hidden;
}
#poster_background-res {
position: absolute;
bottom: 0;
left: 0;
top:0;

P a g e 115 |
right:0;
background:url('../img/video-res.jpg')no-repeat center center;
background-size:cover;
width: 100%;
height: 100%;
z-index: 1;
overflow: hidden;
}
#poster_background-explore {
position: absolute;
bottom: 0;
left: 0;
top:0;
right:0;
background:url('../img/video-explore.jpg')no-repeat center center;
background-size:cover;
width: 100%;
height: 100%;
z-index: 1;
overflow: hidden;
}
#poster_background-about {
position: absolute;
bottom: 0;
left: 0;
top:0;
right:0;
background:url('../img/video-about.jpg')no-repeat center center;
background-size:cover;
width: 100%;
height: 100%;
z-index: 1;
overflow: hidden;
}
video#video_background {
position: absolute;
top:50%;
left:50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: 2;
overflow: hidden;
-webkit-transform: translateX(-50%) translateY(-50%);

P a g e 116 |
 -moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
#video-wrap{
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
z-index: 2;
overflow: hidden;
}
.dark-over-video{
position:absolute;
background: linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,.5));
width:100%;
height:100%;
overflow:hidden;
z-index:2;
top:0;
left:0;
}
.dark-over-pages{
position:absolute;
background: linear-gradient(180deg, rgba(0,0,0,.7), rgba(0,0,0,.4));
width:100%;
height:100%;
overflow:hidden;
z-index:2;
top:0;
left:0;
}

.home-translate{
-webkit-transform: translateY(-70px);
transform: translateY(-70px);
}
.home-shadow{
box-shadow: 0px 6px 25px 0px rgba(0, 0, 0, 0.6);
}

/* #Home moving image

P a g e 117 |
================================================== */

.home-moving-image {
background: url('../img/move-img.jpg') repeat fixed;
background-size: cover;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
width:100%;
}

/* #Reveal effect
================================================== */

.block-revealer__element {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
pointer-events: none;
opacity: 0;
}

.text-element-over {
position: absolute;
bottom: 20px;
left: 20px;
color: #ccc;
font-size: 13px;
font-weight: 400;
line-height: 1;
text-transform: uppercase;
letter-spacing: 1px;
background-color: rgba(0,0,0,.9);
padding: 14px 6px;
-webkit-writing-mode: vertical-lr;
writing-mode: vertical-lr;
z-index: 10;

P a g e 118 |
}

/* #Nice select
================================================== */

.form{
background-color: transparent;
width: 100%;
outline: none;
box-shadow: none;
border: 2px solid #dbdddc;
padding: 15px;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
}
.form-textarea{
height: 150px;
}
select.form {
padding: 15px 10px;
color: #323232;
}
.filter-select .nice-select {
padding-top: 14px;
padding-bottom: 14px;
font-size: 13px;
line-height: 1.4;
border: solid 3px #dbdddc;
}
.filter-select .nice-select:after {
right: 20px;
}
.filter-select .nice-select .list {
border: solid 3px #dbdddc;
width: calc(100% + 6px);
margin-left: -3px;
}
.filter-select .nice-select .option {
min-height: auto;
font-size: 13px;
padding-top: 13px;
padding-bottom: 13px;

P a g e 119 |
 padding-left: 20px;
padding-right: 20px;
text-transform: lowercase;
}
.nice-select {
-webkit-tap-highlight-color: transparent;
background-color: transparent;
border: solid 1px rgba(255,255,255,.1);
box-sizing: border-box;
clear: both;
cursor: pointer;
display: block;
color: #fff;
float: left;
overflow: hidden;
font-family: inherit;
font-size: 13px;
text-transform: uppercase;
line-height: 1.2;
font-weight: 300;
letter-spacing: 1px;
outline: none;
padding-top: 12px;
padding-bottom: 12px;
padding-left: 15px;
padding-right: 30px;
position: relative;
text-align: left !important;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
white-space: nowrap;
width: auto;
}
.nice-select.open {
overflow: visible;
}
.nice-select:hover {
border-color: rgba(255,255,255,.3);
}
.nice-select:after {
border-bottom: 1px solid #fff;

P a g e 120 |
 border-right: 1px solid #fff;
content: '';
display: block;
height: 8px;
margin-top: -4px;
pointer-events: none;
position: absolute;
right: 15px;
top: 50%;
-webkit-transform-origin: 66% 66%;
-ms-transform-origin: 66% 66%;
transform-origin: 66% 66%;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all 0.15s ease-in-out;
transition: all 0.15s ease-in-out;
width: 8px;
}
.nice-select.open:after {
-webkit-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.nice-select.open .list {
opacity: 1;
pointer-events: auto;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
.nice-select.disabled {
border-color: #ededed;
color: #999;
pointer-events: none;
}
.nice-select.disabled:after {
border-color: #cccccc;
}
.nice-select.wide {
width: 100%;
}
.nice-select.wide .list {
left: 0 !important;
right: 0 !important;

P a g e 121 |
}
.nice-select.right {
float: right;
}
.nice-select.right .list {
left: auto;
right: 0;
}
.nice-select.small {
font-size: 12px;
height: 36px;
line-height: 34px;
}
.nice-select.small:after {
height: 4px;
width: 4px;
}
.nice-select.small .option {
line-height: 34px;
min-height: 34px;
}
.nice-select .list {
background-color: rgba(0, 0, 0, 0.9);
border-radius: 3px;
box-sizing: border-box;
margin-top: 4px;
opacity: 0;
overflow: hidden;
padding: 0;
pointer-events: none;
position: absolute;
width: calc(100% + 4px);
box-shadow: 0 10px 6px -6px rgba(0, 0, 0, 0.4);
left: 0;
margin-left: -2px;
top: 100%;
-webkit-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-transform: translateY(-15px);
-ms-transform: translateY(-15px);
transform: translateY(-15px);
-webkit-transition: all 0.3s linear, opacity 0.15s ease-out;
transition: all 0.3s linear, opacity 0.15s ease-out;
z-index: 9;

P a g e 122 |
}
.nice-select .list:hover .option:not(:hover) {
}
.nice-select .option {
cursor: pointer;
font-weight: 300;
list-style: none;
font-size: 12px;
padding-top: 11px;
padding-bottom: 11px;
outline: none;
padding-left: 15px;
padding-right: 15px;
text-align: left;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
.nice-select .option.focus, .nice-select .option.selected.focus {
background-color: #212121;
}
.nice-select .option:hover {
color: #fff;
}
.nice-select .option.selected {
font-weight: 300 !important;
}
.nice-select .option.disabled {
background-color: transparent;
color: #999;
cursor: default;
}
.no-csspointerevents .nice-select .list {
display: none;
}
.no-csspointerevents .nice-select.open .list {
display: block;
}

/* #Date Picker

================================================== */
#flight-datepicker,
#flight-datepicker-1 {
position: relative;
display: block;

P a g e 123 |
width: 100%;
}
#flight-datepicker .form-item,
#flight-datepicker-1 .form-item {
position: relative;
}
#flight-datepicker label,
#flight-datepicker-1 label {
display: block;
color: white;
}
#flight-datepicker input,
#flight-datepicker-1 input {
position: relative;
display: block;
margin: 0;
padding: 0;
padding-left: 15px;
padding-top: 12px;
padding-bottom: 12px;
width: 100%;
font-family: 'Poppins', sans-serif;
font-size: 13px;
line-height: 1.2;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 300;
text-align: left;
color: #fff;
border: solid 1px rgba(255,255,255,.1);
outline: none;
cursor: pointer;
background-color: transparent;
transition: border-color .2s ease-out;
}
#flight-datepicker input:hover,
#flight-datepicker-1 input:hover {
border-color: rgba(255,255,255,.3);
}
#flight-datepicker input:hover,
#flight-datepicker input:active,
#flight-datepicker input:focus,
#flight-datepicker-1 input:hover,
#flight-datepicker-1 input:active,
#flight-datepicker-1 input:focus {

P a g e 124 |
outline: none;
box-shadow: none;
}
#flight-datepicker input:first-child,
#flight-datepicker input:last-child,
#flight-datepicker-1 input:first-child,
#flight-datepicker-1 input:last-child {
border-radius: 0;
}
#flight-datepicker input::-webkit-input-placeholder,
#flight-datepicker-1 input::-webkit-input-placeholder {
color: #fff;
font-size: 13px;
line-height: 1.2;
letter-spacing: 1px;
transition: color .2s .2s ease-out;
}
#flight-datepicker input:-moz-placeholder,
#flight-datepicker-1 input:-moz-placeholder {
color: #fff;
font-size: 13px;
line-height: 1.2;
letter-spacing: 1px;
transition: color .2s .2s ease-out;
}
#flight-datepicker input::-moz-placeholder,
#flight-datepicker-1 input::-moz-placeholder {
color: #fff;
font-size: 13px;
line-height: 1.2;
letter-spacing: 1px;
transition: color .2s .2s ease-out;
}
#flight-datepicker input:-ms-input-placeholder,
#flight-datepicker-1 input:-ms-input-placeholder {
color: #fff;
font-size: 13px;
line-height: 1.2;
letter-spacing: 1px;
transition: color .2s .2s ease-out;
}
#flight-datepicker input:focus::-webkit-input-placeholder,
#flight-datepicker-1 input:focus::-webkit-input-placeholder {
color: transparent;
transition: color .2s ease-out;

P a g e 125 |
}
#flight-datepicker input:focus:-moz-placeholder,
#flight-datepicker-1 input:focus:-moz-placeholder {
color: transparent;
transition: color .2s ease-out;
}
#flight-datepicker input:focus::-moz-placeholder,
#flight-datepicker-1 input:focus::-moz-placeholder {
color: transparent;
transition: color .2s ease-out;
}
#flight-datepicker input:focus:-ms-input-placeholder,
#flight-datepicker-1 input:focus:-ms-input-placeholder {
color: transparent;
transition: color .2s ease-out;
}
#flight-datepicker .date-text,
#flight-datepicker-1 .date-text {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
top: calc(100% + 6px);
font-size: 12px;
color: white;
}
.datepicker-dropdown:after {
border-bottom: 6px solid rgba(0,0,0,.9);
}
.datepicker-dropdown.datepicker-orient-top:after {
border-top: 6px solid rgba(0,0,0,.9);
}
.datepicker.dropdown-menu {
padding: 0;
background-clip: border-box;
border: none;
background-color: rgba(0,0,0,.9);
border-radius: 0;
box-shadow: 0 10px 6px -6px rgba(0, 0, 0, 0.4);
-webkit-animation: popup .2s ease-out forwards;
animation: popup .2s ease-out forwards;
}
.datepicker.dropdown-menu.datepicker-orient-top {

P a g e 126 |
margin-top: -30px;
}
.datepicker.dropdown-menu.datepicker-orient-bottom {
margin-top: 30px;
}
.datepicker.dropdown-menu table {
background-color: transparent;
}
.datepicker.dropdown-menu table thead {
background-color: rgba(0,0,0,.3);
}
.datepicker.dropdown-menu table thead tr {
border-top: 0;
}
.datepicker.dropdown-menu table tbody {
background-color: transparent;
}
.datepicker.dropdown-menu table tr {
border-top: 1px solid rgba(0,0,0,.3);
}
.datepicker.dropdown-menu table tr td, .datepicker.dropdown-menu table tr th {
width: auto;
height: 24px;
padding: 6px;
font-size: 14px;
color: #fff;
background-color: transparent;
border-radius: 0;
transition: background-color .6s ease-out;
}
.datepicker.dropdown-menu table tr td:hover, .datepicker.dropdown-menu table tr
td.active:hover, .datepicker.dropdown-menu table tr
td:active:hover, .datepicker.dropdown-menu table tr th:hover, .datepicker.dropdown-menu
table tr th.active:hover, .datepicker.dropdown-menu table tr th:active:hover {
border-radius: 0;
transition: background-color .2s ease-out;
color: #fff;
}
.datepicker.dropdown-menu table tr td.focused, .datepicker.dropdown-menu table tr
td.selected, .datepicker.dropdown-menu table tr th.focused, .datepicker.dropdown-menu
table tr th.selected {
border-color: rgba(0,0,0,.3);
border-radius: 0;
color: #fff;
}

P a g e 127 |
.datepicker.dropdown-menu table tr td.active, .datepicker.dropdown-menu table tr
td.active:focus, .datepicker.dropdown-menu table tr
td.active.active:hover, .datepicker.dropdown-menu table tr
td:active:focus, .datepicker.dropdown-menu table tr td.highlighted, .datepicker.dropdown-
menu table tr th.active, .datepicker.dropdown-menu table tr
th.active:focus, .datepicker.dropdown-menu table tr
th.active.active:hover, .datepicker.dropdown-menu table tr
th:active:focus, .datepicker.dropdown-menu table tr th.highlighted {
border-color: rgba(0,0,0,.3);
color: #fff;
}
.datepicker.dropdown-menu table tr th.datepicker-switch {
font-size: 12px;
font-weight: 400;
line-height: 2;
text-transform: uppercase;
letter-spacing: .05em;
color: #ffffff;
background-color: inherit;
border-radius: 0;
}
.datepicker.dropdown-menu table tr th.prev,
.datepicker.dropdown-menu table tr th.next {
color: #ffffff;
background-color: rgba(0,0,0,0);
border-radius: 0;
font-weight: 300;
font-size: 15px;
}
.datepicker.dropdown-menu table tr th.dow {
padding: 2px 12px;
font-size: 12px;
font-weight: 400;
line-height: 2;
color: #ffffff;
background-color: rgba(0,0,0,0);
border-top: 1px solid rgba(0,0,0,.7);
border-radius: 0;
}
.datepicker.dropdown-menu table tr td.day {
width: 24px;
border-right: 1px solid rgba(0,0,0,.3);
}
.datepicker.dropdown-menu .old:hover {
background-color: transparent !important;

P a g e 128 |
}
.datepicker.dropdown-menu table tr td.day:last-child {
border-right-width: 0;
}
.datepicker.dropdown-menu table tr td.range {
background-color: rgba(0,0,0,0);
}
.datepicker.dropdown-menu .new,
.datepicker.dropdown-menu .old,
.datepicker.dropdown-menu .disabled,
.datepicker.dropdown-menu .disabled:hover {
color: #888;
}
[class*="fontawesome-"]:before {
font-family: 'FontAwesome', sans-serif;
}
.fontawesome-calendar {
position: absolute;
top: 26px;
right: 0;
font-size: 24px;
z-index: -99;
}
@-webkit-keyframes popup {
from {
opacity: 0;
-webkit-transform: translateY(12px);
transform: translateY(12px);
}
to {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes popup {
from {
opacity: 0;
-webkit-transform: translateY(12px);
transform: translateY(12px);
}
to {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);

P a g e 129 |
}
}

/* #Rooms
================================================== */

.room-box {
position: relative;
width: 100%;
display: block;
box-shadow: 0 10px 6px -6px rgba(0, 0, 0, 0.1);
}
.room-name {
position: absolute;
top: 20px;
left: 20px;
color: #fff;
font-weight: 600;
text-transform: uppercase;
font-size: 13px;
letter-spacing: 2px;
z-index: 3;
}
.room-per{
position: absolute;
top: 20px;
right: 20px;
color: #fff;
padding: 7px;
background-color: rgba(0,0,0,.7);
font-weight: 300;
font-size: 10px;
line-height: 1;
letter-spacing: 2px;
z-index: 3;
}
.room-box img {
width: 100%;
height: auto;
display: block;
}
.room-box-in {
position: relative;
display: block;
padding: 30px;

P a g e 130 |
}
.room-icons {
position: relative;
display: block;
width: 100%;
border-top: 1px solid rgba(0,0,0,.07);
}
.room-icons::after {
display: block;
clear: both;
content: "";
}
.room-icons img{
display: inline-block;
width: 23px;
height: auto;
float: left;
margin-right: 20px;
opacity: 0.5;
}
.room-icons a{
display: inline-block;
float: right;
color: #999;
text-transform: uppercase;
font-size: 13px;
letter-spacing: 2px;
-webkit-transition: all 200ms linear;
transition: all 200ms linear;
}

/* #Services
================================================== */

.services-wrap {
overflow: hidden;
}
.services-wrap img{
-webkit-transition: all 300ms linear;
transition: all 300ms linear;
}
.services-wrap:hover img{
transform: rotate(-2deg) scale(1.1);
}
.services-text-over{

P a g e 131 |
position: absolute;
top: 50%;
left: 50%;
z-index: 3;
padding: 8px 18px;
color: #fff;
font-size: 14px;
line-height: 14px;
letter-spacing: 1px;
margin-top: -16px;
font-weight: 400;
text-transform: uppercase;
background-color: rgba(0,0,0,.8);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
-webkit-transition: all 200ms linear;
transition: all 200ms linear;
}
.services-box {
position: relative;
width: 100%;
display: block;
}
.services-box img{
width: 36px;
height: auto;
display: block;
margin: 0 auto;
}

/* #Parallax
================================================== */

.parallax {
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
width:100%;
}

P a g e 132 |
.booking-sep-wrap{
position: relative;
display: block;
width: 100%;
}
#flight-datepicker-1 input {
margin: 0;
padding: 0;
padding-left: 0;
padding-top: 0;
padding-bottom: 0;
font-family: 'Roboto', sans-serif;
background-color: rgba(32,32,32,.9);
font-size: 40px;
line-height: 140px;
width: 100%;
height: 140px;
text-transform: none;
letter-spacing: 1px;
font-weight: 200;
text-align: center;
color: #e6e6e6;
border: 1px solid rgba(0,0,0,.3);
-webkit-transition: all 200ms linear;
transition: all 200ms linear;
}
#flight-datepicker-1 input:focus,
#flight-datepicker-1 input:active,
#flight-datepicker-1 input:hover {
border-width: 5px;
}
#flight-datepicker-1 .form-item {
display: inline-block;
width: 50%;
float: left;
}
#flight-datepicker-1 input::-webkit-input-placeholder {
color: #e6e6e6;
font-size: 20px;
line-height: 140px;
text-transform: uppercase;
font-weight: 300;
-webkit-transform: translateY(-5px);
transform: translateY(-5px);

P a g e 133 |
}
#flight-datepicker-1 input:-moz-placeholder {
color: #e6e6e6;
font-size: 20px;
line-height: 140px;
text-transform: uppercase;
font-weight: 300;
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
}
#flight-datepicker-1 input::-moz-placeholder {
color: #e6e6e6;
font-size: 20px;
line-height: 140px;
text-transform: uppercase;
font-weight: 300;
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
}
#flight-datepicker-1 input:-ms-input-placeholder {
color: #e6e6e6;
font-size: 20px;
line-height: 140px;
text-transform: uppercase;
font-weight: 300;
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
}

.booking-button-big{
position: relative;
color: #fff;
display: inline-block;
width: 100%;
font-size: 13px;
text-transform: uppercase;
line-height: 18px;
font-weight: 300;
letter-spacing: 1px;
outline: none;
text-align: center;
padding-top: 52px;
padding-bottom: 52px;
margin: 0;
background-color: #060606;

P a g e 134 |
-webkit-transition: all 200ms linear;
transition: all 200ms linear;
}
.booking-button-big:hover{
color: #fff;
}

.quantity {
position: relative;
}
.quantity input[type=number]::-webkit-inner-spin-button,
.quantity input[type=number]::-webkit-outer-spin-button{
-webkit-appearance: none;
margin: 0;
}
.quantity input[type=number]{
-moz-appearance: textfield;
}
.quantity input {
width: 100%;
height: 140px;
font-weight: 300;
font-size: 40px;
line-height: 140px;
display: block;
color: #e6e6e6;
padding: 0;
margin: 0;
margin: 0;
text-align: center;
border: 1px solid rgba(0,0,0,.3);
background-color: rgba(32,32,32,.9);
background-image: url('../img/user.png');
background-position: center center;
background-repeat: no-repeat;
background-size: 80px 80px;
}
.quantity input:focus {
outline: 0;
}
.quantity-nav {
position: absolute;
top: 20px;
right: 0;
z-index: 20;

P a g e 135 |
}
.quantity-button {
position: relative;
cursor: pointer;
width: 20px;
height: 50px;
display: block;
background-repeat: no-repeat;
background-size: 15px 15px;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.quantity-button.quantity-up {
background-image: url('../img/up.svg');
background-position: top center;
}
.quantity-button.quantity-down {
background-image: url('../img/down.svg');
background-position: bottom center;
}

/* #Quotes
================================================== */

#owl-sep-1 {
position:relative;
width:100%;
margin:0 auto;
display:block;
}
#owl-sep-1 .item{
position:relative;
width:100%;
margin:0 auto;
z-index:2;
display:block;
}
.quote-sep{
position:relative;
margin:0 auto;

P a g e 136 |
width:100%;
text-align:center;
overflow:hidden;
display:block;
padding-top:30px;
padding-bottom:50px;
background-image:url('../img/qu.png');
background-repeat:no-repeat;
background-position: top center;
}
.quote-sep h4{
text-align:center;
margin:0 auto;
color:#fff;
font-weight: 300;
font-style: italic;
font-size: 19px;
line-height: 34px;
width:100%;
max-width:830px;
}
.quote-sep h6{
text-align:center;
margin:0 auto;
color:#fff;
padding-top:40px;
width:100%;
}
#owl-sep-1.owl-theme .owl-controls{
position:absolute;
left:0;
text-align: center;
bottom:0;
margin:0 auto;
z-index:100;
width:100%;
z-index:20;
}
#owl-sep-1.owl-theme .owl-controls .owl-page span{
background-color:rgba(255,255,255,.3);
text-align: center;
width:35px;
height:2px;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;

P a g e 137 |
 -o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
}
#owl-sep-1.owl-theme .owl-controls .owl-page span:hover{
}
#owl-sep-1.owl-theme .owl-controls .owl-page.active span {
}

/* #Gallery
================================================== */

#owl-sep-2 {
position:relative;
width:100%;
margin:0 auto;
display:block;
}
#owl-sep-2 .item{
position:relative;
width:100%;
margin:0 auto;
z-index:2;
display:block;
}
.gallery-small:before,
.gallery-small:after{
position:absolute;
content: '';
width:100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
display:block;
-webkit-transition: all 200ms linear;
transition: all 200ms linear;
}
.gallery-small:before{
z-index:2;
background: linear-gradient(45deg, rgba(0,0,0,.6), rgba(0,0,0,.9));
}
.gallery-small:after{
z-index:3;
background-repeat: no-repeat;

P a g e 138 |
background-position: center center;
background-size: 50px 50px;
background-image: url('../img/plus.png');
}
.gallery-small:hover:before,
.gallery-small:hover:after{
opacity: 1;
}

/* #Video
================================================== */

.video-button{
position: relative;
display: inline-block;
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
font-size: 10px;
color: #fff;
background-color: #000;
border-radius: 50%;
box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0);
-webkit-transition: all 200ms linear;
transition: all 200ms linear;
}
.video-button:hover{
color: #fff;
box-shadow: 0px 6px 15px 0px rgba(0, 0, 0, 0.5);
}
.video-button:before{
position: absolute;
content: '';
display: block;
top: -5px;
left: -5px;
width: 60px;
height: 60px;
background-color: rgba(255,255,255,.03);
border-radius: 50%;
-webkit-transition: all 200ms linear;
transition: all 200ms linear;
}
.video-button:hover:before{

P a g e 139 |
top: -55px;
left: -55px;
width: 160px;
height: 160px;
background-color: rgba(255,255,255,0);
}

/* Video Hover Image */

.video-section {
position: relative;
width:100%;
margin:0 auto;
max-width:800px;
}
.video-wrapper, figure.vimeo, figure.youtube {
margin:0;
position: relative;
padding-bottom: 56.25%;
padding-top: 0;
height: 0;
overflow: hidden;
}
.video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
figure.youtube a img, figure.vimeo a img {
position: absolute;
top: 0;
left: 0;
width: auto;
height: 100%;
max-width:none;
}
figure.vimeo a:after, figure.youtube a:after {
content:"";
width:60px;
height:60px;
background: #212121;
z-index:9;
position:absolute;

P a g e 140 |
top:50%;
left:50%;
margin:-30px 0 0 -30px;
border-radius:50%;
box-shadow: 0px 0px 0px 10px rgba(0,0,0,0.15);
-webkit-transition: all 300ms linear;
transition: all 300ms linear;
}
figure.vimeo:hover a:after, figure.youtube:hover a:after {
box-shadow: 0px 0px 0px 1000px rgba(0,0,0,0.1);
}
figure.vimeo a:before, figure.youtube a:before {
content:"";
width: 0;
height: 0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
z-index:10;
position:absolute;
top:50%;
left:50%;
margin-left: -3px;
margin-top: -5px;
display:block;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
}
figure.vimeo:hover a:before, figure.youtube:hover a:before {
border-left: 8px solid #fff;
}
figure.vimeo a:hover img, figure.youtube a:hover img {
-webkit-transition: all 0.4s;
transition: all 0.4s;
}
figure.vimeo a img, figure.youtube a img {
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
a -webkit-transform: scale(1);
transform: scale(1);

P a g e 141 |
}

/* #Rooms
================================================== */

.amenities{
position: relative;
text-align: center;
margin: 0 auto;
}
.amenities img{
width: 36px;
height: auto;
display: block;
text-align: center;
margin: 0 auto;
}
.amenities p{
margin: 0;
padding: 0;
margin-top: 15px;
color: #f8f8f8;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1px;
}

#rooms-sync1 .item{
position: relative;
width: 100%;
}
#rooms-sync1 .item img{
width: 100%;
height: auto;
display: block;
}
#rooms-sync2 .item{
position: relative;
margin-top: 5px;
}
#rooms-sync2 .item img{
width: 100%;
height: auto;
display: block;
}

P a g e 142 |
.customNavigation.rooms-sinc-1-2{
position:absolute;
top: 50%;
left: 0;
width: 100%;
height: 30px;
z-index: 1000;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition : all 0.2s ease-out;
-moz-transition : all 0.2s ease-out;
-o-transition :all 0.2s ease-out;
transition : all 0.2s ease-out;
}
.next-rooms-sync-1,
.prev-rooms-sync-1 {
position:absolute;
cursor: pointer;
width: 30px;
height: 30px;
text-align: center;
z-index: 1002;
background-color: rgba(0,0,0,.5);
background-size: 14px 14px;
background-repeat: no-repeat;
background-position: center center;
-webkit-transition : all 0.2s ease-out;
transition : all 0.2s ease-out;
}
.next-rooms-sync-1:hover,
.prev-rooms-sync-1:hover {
background-color: rgba(0,0,0,.95);
}
.next-rooms-sync-1 {
left: 10px;
background-image: url('../img/arrow-left.svg');
}
.prev-rooms-sync-1 {
right: 10px;
background-image: url('../img/arrow-right.svg');
}

/* #Search
================================================== */

P a g e 143 |
.valeurPrix {
position: absolute;
top: -40px;
right: 0;
}
.range-slider {
position: relative;
width: 100%;
float: left;
margin-right: 5px;
}
.range-slider .input-range {
-webkit-appearance: none;
width: 100%;
height: 5px;
border-radius: 5px;
background: #ccc;
outline: none;
}
.range-slider .input-range::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
cursor: pointer;
-webkit-transition: background .15s ease-in-out;
transition: background .15s ease-in-out;
}
.range-slider .input-range::-moz-range-thumb {
width: 20px;
height: 20px;
border: 0;
border-radius: 50%;
cursor: pointer;
-webkit-transition: background .15s ease-in-out;
transition: background .15s ease-in-out;
}
.range-slider .range-value {
font-size: 1rem;
text-transform: uppercase;
font-weight:400;
letter-spacing: 2px;
font-family: 'Poppins', sans-serif;
color: #fff;

P a g e 144 |
text-align: right;
}
.selecteurPrix::-moz-range-track {
background: #ccc;
border: 0;
}
.selecteurPrix input::-moz-focus-inner {
border: 0;
}

.list {
margin: 0;
padding: 0;
}
.list__item {
margin: 0 0 .5rem 0;
padding: 0;
list-style: none;
}
.list__item:last-child {
margin: 0;
}
.label--checkbox {
position: relative;
line-height: 135%;
cursor: pointer;
background: transparent;
color: #f2f2f2;
letter-spacing: 1px;
}
.checkbox {
position: relative;
top: -0.8rem;
margin: 0 2rem 0 0;
cursor: pointer;
background: transparent;
width: 0 !important;
height: 0 !important;
-webkit-appearance: none;
-moz-appearance: none;
}
.checkbox:active,
.checkbox:focus{

P a g e 145 |
border: none;
outline: none;
}
.checkbox:before {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
content: "";
position: absolute;
left: 0;
z-index: 1;
width: 1rem;
height: 1rem;
border: 2px solid rgba(255,255,255,.4);
background: transparent;
}
.checkbox:checked:before {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
height: .5rem;
border-top-style: none;
border-right-style: none;
background: transparent;
}
.checkbox:after {
content: "";
position: absolute;
top: -0.125rem;
left: 0;
width: 1.1rem;
height: 1.1rem;
background: transparent;
cursor: pointer;
}

/* #accordion
================================================== */

.card{
border-radius: 0;
padding: 0;
margin: 0;

P a g e 146 |
border: none;
background-color: transparent;
}
.card-header{
border-radius: 0;
padding: 0;
margin: 0;
background-color: transparent;
border: none;
}
.card-header .btn-link{
position: realtive;
font-size: 14px;
line-height: 22px;
font-weight: 400;
border-radius: 0;
padding: 20px;
margin: 0;
width: 100%;
text-align: left;
background-color: transparent;
border: 1px solid rgba(0,0,0,.1);
border-bottom: none;
-webkit-transition : all 0.2s ease-out;
transition : all 0.2s ease-out;
color: #545454;
}
.card-header .btn-link:after{
position: absolute;
content: '';
width: 21px;
height: 1px;
right: 20px;
top: 31px;
background-color: #545454;
z-index: 2;
}
.card-header .btn-link:before{
position: absolute;
content: '';
width: 1px;
height: 21px;
right: 30px;
top: 21px;
background-color: #545454;

P a g e 147 |
z-index: 2;
-webkit-transition : all 0.2s ease-out;
transition : all 0.2s ease-out;
}
.card-header .btn-link[aria-expanded="true"]:before{
transform: rotate(90deg);
}
.card-header .btn-link:active,
.card-header .btn-link:focus,
.card-header .btn-link:hover{
text-decoration: none;
}
.card-header .btn-link.last{
border-bottom: 1px solid rgba(0,0,0,.1);
}
.card-body{
border: 1px solid rgba(0,0,0,.1);
border-bottom: none;
margin: 0;
padding: 20px;
}
.card-body.last{
border-bottom: 1px solid rgba(0,0,0,.1);
border-top: none;
}

/* #restaurant
================================================== */

.services-box.restaurant{
padding: 30px;
border: 1px solid rgba(0,0,0,.1);
}
.services-box.restaurant img{
width: 42px;
height: 42px;
display: block;
}
.restaurant-box{
position: relative;
display: block;
width: 100%;
}
.restaurant-box img{
display: block;

P a g e 148 |
width: 70%;
height: auto;
}
.restaurant-box h6{
position: absolute;
z-index: 2;
font-weight: 500;
top: 50%;
right: 0;
margin-top: -35px;
}
.restaurant-box h6 span{
background-color: rgba(255,255,255,.95);
padding: 5px 15px;
box-shadow: 0px 3px 12px 0px rgba(0, 0, 0, 0.1);
}
.restaurant-box p{
position: absolute;
z-index: 2;
top: 50%;
right: 0;
margin-top: 5px;
margin: 0;
font-style: italic;
letter-spacing: 1px;
color: #212121;
font-size: 14px;
}
.restaurant-box p span{
background-color: rgba(255,255,255,.95);
padding: 5px 15px;
box-shadow: 0px 3px 12px 0px rgba(0, 0, 0, 0.1);
}
.restaurant-box h5{
position: absolute;
z-index: 2;
bottom: 20px;
left: 10px;
font-weight: 200;
color: #fff;
font-style: italic;
font-family: 'Roboto', sans-serif;
}
.restaurant-box h5 span{
background-color: rgba(0,0,0,.75);

P a g e 149 |
padding: 10px;
box-shadow: 0px 3px 12px 0px rgba(0, 0, 0, 0.1);
}

/* #testimonials
================================================== */

.services-box.restaurant.testimonials img{
width: 60px;
height: 60px;
border-radius: 50%;
}
.services-box.restaurant.testimonials .img-down img{
width: auto;
height: 18px;
border-radius: 0;
}

/* #news
================================================== */

.room-icons.news-tags a{
position: relative;
display: inline-block;
float: left;
color: #999;
font-size: 12px;
letter-spacing: 1px;
font-weight: 400;
margin-right: 25px;
}
.room-icons.news-tags a:after{
position: absolute;
content: '-';
top: 0;
right: -14px;
z-index: 2;
}
.room-icons.news-tags a:last-child:after{
display: none;
}

/* #Project nav
================================================== */

P a g e 150 |
.project-nav-wrap {
position:relative;
display:block;
margin:0 auto;
text-align:center;
background-repeat:no-repeat;
background-position:center center;
background-image:url('../img/line-nav.png');
background-size:23px 80px;
}
.project-nav-wrap .left-nav {
position:relative;
display:inline-block;
margin-right:30px;
width:220px;
height:120px;
letter-spacing:2px;
text-align:right;
font-size: 50px;
line-height:80px;
vertical-align: text-top;
color:#999;
-webkit-transition: all 250ms linear;
-moz-transition: all 250ms linear;
-o-transition: all 250ms linear;
-ms-transition: all 250ms linear;
transition: all 250ms linear;
}
.project-nav-wrap .left-nav:hover {
color:#000;
}
.project-nav-wrap .right-nav {
position:relative;
display:inline-block;
margin-left:30px;
width:220px;
height:120px;
font-size: 50px;
line-height:160px;
vertical-align: text-bottom;
letter-spacing:2px;
text-align:left;
color:#999;
-webkit-transition: all 250ms linear;
-moz-transition: all 250ms linear;

P a g e 151 |
 -o-transition: all 250ms linear;
-ms-transition: all 250ms linear;
transition: all 250ms linear;
}
.project-nav-wrap .right-nav:hover {
color:#000;
}
.project-nav-wrap .left-nav .text-on-hover,
.project-nav-wrap .right-nav .text-on-hover {
position:absolute;
z-index:2;
width:100%;
opacity:0;
font-family: 'Poppins', sans-serif;
font-weight:400;
font-size: 13px;
line-height:20px;
color:#000;
-webkit-transition: all 250ms linear;
-moz-transition: all 250ms linear;
-o-transition: all 250ms linear;
-ms-transition: all 250ms linear;
transition: all 250ms linear;
}
.project-nav-wrap .left-nav .text-on-hover{
text-align:right;
padding-right:50px;
right:0;
bottom:130px;
}
.project-nav-wrap .left-nav .text-on-hover:before{
font-family: FontAwesome;
padding-right:10px;
font-size: 15px;
content: "\f104";
}
.project-nav-wrap .left-nav:hover .text-on-hover{
opacity:1;
bottom:110px;
}
.project-nav-wrap .right-nav .text-on-hover{
text-align:left;
padding-left:50px;
left:0;
top:130px;

P a g e 152 |
}
.project-nav-wrap .right-nav .text-on-hover:after{
font-family: FontAwesome;
padding-left:10px;
font-size: 15px;
content: "\f105";
}
.project-nav-wrap .right-nav:hover .text-on-hover{
opacity:1;
top:110px;
}

/* #Post Page
================================================== */

.post-box{
position: relative;
width: 100%;
display: block;
padding: 0;
padding-bottom: 2.5rem;
border-radius: 0.35rem;
}
.drop-shadow{
box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.06);
}
.post-box img.blog-home-img{
width: 100%;
height: auto;
display: block;
border-radius: 0;
margin-right: 0;
}
.post-box .padding-in{
padding-left: 2.5rem;
padding-right: 2.5rem;
}
.blockquote{
padding-top: 1.4rem;
padding-bottom: 1.4rem;
padding-left: 1.4rem;
padding-right: 0;
}
.blockquote-footer::before {
padding-right:10px;

P a g e 153 |
}
.blockquote.blockquote-reverse{
border-left: none;
padding-right: 1.4rem;
padding-left: 0;
}
.blockquote-reverse .blockquote-footer::before {
padding-right:0;
}
.blockquote-reverse .blockquote-footer::after {
padding-left:10px;
}
.separator-wrap{
width:100%;
min-height: 1px;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
flex-wrap: no-wrap;
webkit-box-align: center;
align-items: center;
margin-left: auto;
margin-right: auto;
}
.separator-wrap p{
margin-bottom: 0;
padding-left: 1rem;
padding-right: 1rem;
}
.separator{
position: relative;
-webkit-box-flex: 1;
flex: 1 1 auto;
min-width: 10%;
}
.separator-line{
position: relative;
height: 1px;
display: block;
top: 1px;
width: 100%;
border-top: 1px solid #e3e3e3;
}
.opacity-40{

P a g e 154 |
opacity: 0.4;
}
.separator-line.med{
border-top-width: 3px;
}
.separator-line.big{
border-top-width: 8px;
border-radius:2px;
}
.separator-line.dashed{
border-top-style: dashed;
outline: none;
}
.post-box .btn-primary{
background-color: #212121;
border: none;
outline: none;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.post-box .btn-primary:hover span{
-webkit-transform: translateZ(10px);
transform: translateZ(10px);
}
.post-box .btn-primary:focus,
.post-box .btn-primary:active {
border:none;
outline:none;
box-shadow: none;
}
.post-box .btn-primary span{
position: relative;
display: block;
-webkit-transition: all 250ms linear;
-moz-transition: all 250ms linear;
-o-transition: all 250ms linear;
-ms-transition: all 250ms linear;
transition: all 250ms linear;
}
.post-box .btn-primary:hover{
box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
}
.author-wrap{
position: relative;
width: 100%;

P a g e 155 |
display: block;
}
.author-wrap p{
display: inline-block;
font-size: 0.84rem;
}
.author-wrap p a{
color: #888;
-webkit-transition: all 200ms linear;
-moz-transition: all 200ms linear;
-o-transition: all 200ms linear;
-ms-transition: all 200ms linear;
transition: all 200ms linear;
}
.author-wrap img{
width: 60px;
height: 60px;
display: inline-block;
border-radius: 50%;
margin-right: 10px;
}
.post-comm-box{
position: relative;
width: 100%;
display: block;
padding: 2.5rem;
}
.post-comm-box img{
width: 40px;
height: 40px;
display: inline-block;
border-radius: 50%;
margin-right: 20px;
}
.post-comm-box h6{
display: inline-block;
}
.post-comm-box h6 small{
text-transform: none;
font-family: 'Poppins', sans-serif;
font-weight:400;
font-size: .7rem;
font-style: italic;
margin-left: 10px;
}

P a g e 156 |
.subscribe-box{
position: relative;
width: 100%;
display: block;
}
.subscribe-box input{
padding-top: 15px;
padding-bottom: 15px;
}
.form-control {
font-family: 'Poppins', sans-serif;
font-weight:400;
padding: 0.8rem 0.75rem;
font-size: .8rem;
line-height: 1.25;
color: #464a4c;
background-color: transparent;
border: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 0;
}
.form-control::-ms-expand {
background-color: transparent;
border: 0;
}
.form-control:active,
.form-control:focus {
background-color: transparent;
box-shadow: none;
}
.form-control::-webkit-input-placeholder {
color: #999;
opacity: 1;
}
.form-control::-moz-placeholder {
color: #999;
opacity: 1;
}
.form-control:-ms-input-placeholder {
color: #999;
opacity: 1;
}
.form-control::placeholder {
color: #999;
opacity: 1;

P a g e 157 |
}
.for-textarea{
min-height: 180px;
}
.subscribe-box .btn.subscribe-1{
position: absolute;
top:0;
right:0;
z-index: 1;
}
.sidebar-box{
position: relative;
width: 100%;
display: block;
padding: 2.5rem;
}
.sidebar-box h6{
}
.list-style {
margin: 0;
list-style: none;
}
.list-style li{
margin-top: 0.5rem;
margin-bottom: 0.5rem;
font-size: 0.8rem;
line-height: 1.1rem;
}
.list-style li:first-child{
margin-top: 0;
}
.list-style li:last-child{
margin-bottom: 0;
}
.list-style.square li:before,
.list-style.circle-o li:before,
.list-style.circle li:before{
font-family:'FontAwesome';
font-size: 0.5rem;
margin-right: 15px;
display:inline-block;
line-height: 1.1rem;
height: 1.1rem;
vertical-align: middle;
text-rendering:auto;

P a g e 158 |
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale
}
.list-style.circle li:before{
content: '\f111';
}
.list-style.circle-o li:before{
content: '\f10c';
}
.list-style.square li:before{
content: '\f0c8';
}
.list-style li i{
font-size: 0.8rem;
line-height: 1.1rem;
height: 1.1rem;
width:20px;
text-align:left;
margin-right: 10px;
}
.list-style a.btn-link {
background-color: transparent;
color: #212121;
-webkit-transition: all 200ms linear;
-moz-transition: all 200ms linear;
-o-transition: all 200ms linear;
-ms-transition: all 200ms linear;
transition: all 200ms linear;
}
.list-style a.btn-link:hover{
text-decoration: none;
background-color: transparent;
box-shadow: none;
}

/* #contact
================================================== */

.ajax-form input{
position:relative;
width: 100%;
padding-left:20px;
padding-right:20px;
font-weight:400;

P a g e 159 |
letter-spacing:1px;
font-size: 13px;
line-height:24px;
padding-bottom: 15px;
background:transparent;
border:none;
color: #737373;
text-align: center;
-webkit-transition: border-bottom 0.3s, color 0.3s;
transition: border-bottom 0.3s, color 0.3s;
}
.ajax-form textarea {
width: 100%;
padding-left:20px;
padding-right:20px;
font-weight:400;
letter-spacing:1px;
font-size: 13px;
line-height:24px;
text-align: center;
background:transparent;
height:100px;
border:none;
color: #737373;
-webkit-transition: border-bottom 0.3s, color 0.3s;
transition: border-bottom 0.3s, color 0.3s;
}
.ajax-form textarea,
.ajax-form input {
border-bottom:1px solid rgba(200,200,200,.7);
}
.ajax-form textarea:active,
.ajax-form input:active {
color: #101010;
}
.ajax-form textarea:active,
.ajax-form input:hover {
color: #101010;
}
.ajax-form textarea:focus,
.ajax-form input:focus {
outline: none !important;
}
.ajax-form input:-ms-input-placeholder {
font-size: 12px;

P a g e 160 |
letter-spacing:1px;
color:#999999;
}
.ajax-form input::-moz-placeholder {
font-size: 12px;
letter-spacing:1px;
color:#999999;
}
.ajax-form input:-moz-placeholder {
font-size: 12px;
letter-spacing:1px;
color:#999999;
}
.ajax-form input::-webkit-input-placeholder {
font-size: 12px;
letter-spacing:1px;
color:#999999;
}
.ajax-form textarea:-ms-input-placeholder {
font-size: 12px;
letter-spacing:1px;
color:#999999;
}
.ajax-form textarea::-moz-placeholder {
font-size: 12px;
letter-spacing:1px;
color:#999999;
}
.ajax-form textarea:-moz-placeholder {
font-size: 12px;
letter-spacing:1px;
color:#999999;
}
.ajax-form textarea::-webkit-input-placeholder {
font-size: 12px;
letter-spacing:1px;
color:#999999;
}
.ajax-form button {
color:#fff;
cursor: pointer;
font-size: 12px;
padding: 10px 20px;
text-transform: uppercase;
letter-spacing: 2px;

P a g e 161 |
background-color: #212121;
border:none;
outline:none;
margin: 0 auto;
text-align: center;
-webkit-transition: all 250ms linear;
-moz-transition: all 250ms linear;
-o-transition: all 250ms linear;
-ms-transition: all 250ms linear;
transition: all 250ms linear;
}
.ajax-form button:focus,
.ajax-form button:active {
border:none;
outline:none;
}
.ajax-form button span{
position: relative;
display: block;
-webkit-transition: all 250ms linear;
-moz-transition: all 250ms linear;
-o-transition: all 250ms linear;
-ms-transition: all 250ms linear;
transition: all 250ms linear;
}
.ajax-form button:hover{
box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
}

.ajax-checkbox .list {
margin: 0 auto;
padding: 0;
text-align: center;
}
.ajax-checkbox .list__item {
margin: 0 0 .5rem 0;
padding: 0;
list-style: none;
}
.ajax-checkbox .list__item:last-child {
margin: 0;
}
.ajax-checkbox .label--checkbox {
position: relative;
line-height: 135%;

P a g e 162 |
cursor: pointer;
background: transparent;
color: rgba(0,0,0,.5);
letter-spacing: 1px;
font-size: 13px;
font-weight: 400;
padding-bottom: 0 !important;
}
.ajax-checkbox .checkbox {
position: relative;
top: -0.8rem;
margin: 0 2rem 0 0;
cursor: pointer;
background: transparent;
width: 0 !important;
height: 0 !important;
-webkit-appearance: none;
-moz-appearance: none;
padding-bottom: 0 !important;
}
.ajax-checkbox .checkbox:active,
.ajax-checkbox .checkbox:focus{
border: none;
outline: none;
}
.ajax-checkbox .checkbox:before {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
content: "";
position: absolute;
left: 0;
z-index: 1;
width: 1rem;
height: 1rem;
border: 2px solid rgba(0,0,0,.2);
background: transparent;
}
.ajax-checkbox .checkbox:checked:before {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
height: .5rem;

P a g e 163 |
border-top-style: none;
border-right-style: none;
background: transparent;
}
.ajax-checkbox .checkbox:after {
content: "";
position: absolute;
top: -0.125rem;
left: 0;
width: 1.1rem;
height: 1.1rem;
background: transparent;
cursor: pointer;
}

.address{
position: relative;
border-bottom: 1px solid rgba(0,0,0,.1);
width: 100%;
display: block;
margin-top: 1rem;
}
.address:last-child{
border-bottom: 1px solid rgba(0,0,0,0);
}
.address::after {
display: block;
clear: both;
content: "";
}
.address-in{
position: relative;
width: 50%;
display: inline-block;
float: left;
}
.address-in .color-black{
font-weight: 500;
}
.text-opacity{
opacity: .5;
}
.subscribe-home{
position:relative;
width: 100%;

P a g e 164 |
display:block;
box-shadow: 0px 6px 25px 0px rgba(0, 0, 0, 0.6);
-webkit-transform: translateY(50px);
transform: translateY(50px);
}
.subscribe-home input{
position:relative;
width: 100%;
padding-left: 30px;
padding-right: 30px;
font-weight: 200;
letter-spacing: 1px;
font-size: 26px;
line-height: 100px;
height: 100px;
background-color: #212121;
text-align: left;
border:none;
color: #fff;
-webkit-transition: all 200ms linear;
transition: all 200ms linear;
}
.subscribe-home input {
}
.subscribe-home input:focus {
outline: none !important;
}
.subscribe-home input:focus {
outline: none !important;
}
.subscribe-home input:-ms-input-placeholder {
font-size: 26px;
line-height: 100px;
color: #d5d5d5;
}
.subscribe-home input::-moz-placeholder {
font-size: 26px;
line-height: 100px;
color: #d5d5d5;
}
.subscribe-home input:-moz-placeholder {
font-size: 26px;
line-height: 100px;
color: #d5d5d5;
}

P a g e 165 |
.subscribe-home input::-webkit-input-placeholder {
font-size: 26px;
line-height: 100px;
color: #d5d5d5;
}
.subscribe-home button{
position:absolute;
right:0;
top:0;
font-size: 12px;
text-transform: uppercase;
line-height: 12px;
font-weight: 300;
letter-spacing: 2px;
text-align:center;
background-color: #000;
padding: 44px 25px;
margin:0;
border:none;
cursor:pointer;
color: #fff;
z-index:2;
-webkit-transition: all 200ms linear;
transition: all 200ms linear;
}
.subscribe-home button:hover{
}
.subscribe-home button:focus,
.subscribe-home button:active {
border:none;
outline:none;
}

/* #Footer
================================================== */

.footer img{
height: 45px;
width: auto;
display: inline-block;
}
.footer a{
color: #ccc;
display: block;
-webkit-transition: all 200ms linear;

P a g e 166 |
 transition: all 200ms linear;
}
.footer a:hover{
text-decoration: none;
}
.footer .logos-footer img{
height: 18px;
width: auto;
display: inline-block;
margin-right: 25px;
}
.footer-bottom p{
color: #ccc;
font-size: 13px;
line-height: 20px;
font-weight: 300;
letter-spacing: 1px;
margin: 0;
}
.social-footer-bottom{
color: #ccc;
font-size: 13px;
line-height: 20px;
font-weight: 300;
letter-spacing: 1px;
margin: 0;
padding: 0 10px;
border-right: 1px solid rgba(255,255,255,.2);
transition: all 250ms linear;
}
.social-footer-bottom:last-child{
border-right: 1px solid rgba(255,255,255,0);
}
.social-footer-bottom:hover{
text-decoration: none;
}

/* custom css start from here */

.inputbox{
-webkit-tap-highlight-color: transparent;
background-color: transparent;
border: solid 1px rgba(255,255,255,.1);
box-sizing: border-box;

P a g e 167 |
 clear: both;
cursor: pointer;
display: block;
color: #fff;
float: left;
overflow: hidden;
font-family: inherit;
font-size: 13px;
line-height: 1.2;
font-weight: 300;
letter-spacing: 1px;
outline: none;
padding-top: 12px;
padding-bottom: 12px;
padding-left: 15px;
padding-right: 30px;
position: relative;
text-align: left !important;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
white-space: nowrap;
width: 100% ;
}

/* #Media
================================================== */

@media (max-width: 1500px) {

}

@media (max-width: 1300px) {

}

@media (max-width: 1199px) {

.hero-text{
font-size: 40px;
}
}

@media (max-width: 1170px) {

.slide {

P a g e 168 |
padding-top: 0;
}
.slideshow {
height: calc(100vh - 132px);
}
.hero-full-height {
height: calc(100vh - 210px);
}
h1, .h1 {
font-size: 3rem;
}
h2, .h2 {
font-size: 2.3rem;
}
h3, .h3 {
font-size: 2rem;
}
h4, .h4 {
font-size: 1.7rem;
}
h5, .h5 {
font-size: 1.2rem;
}
h6, .h6 {
font-size: 0.9rem;
}
}

@media (max-width: 991px) {

.hero-text{
font-size: 30px;
}
.booking-hero-wrap .no-mob,
.nav__button {
display: none;
}
.booking-hero-wrap{
background-color: rgba(0,0,0,0);
padding: 0;
}
.hero-text-ver-2{
font-size: 7vw;
}
.project-nav-wrap {
background-image:none;

P a g e 169 |
}
.project-nav-wrap .left-nav {
margin-right:0;
width:50%;
float:left;
height:40px;
text-align:left;
font-size: 30px;
line-height:40px;
vertical-align: middle;
}
.project-nav-wrap .right-nav {
margin-left:0;
width:50%;
float:right;
height:40px;
font-size: 30px;
line-height:40px;
vertical-align: middle;
text-align:right;
}
.project-nav-wrap .left-nav .text-on-hover,
.project-nav-wrap .right-nav .text-on-hover {
display:none;
}
}

@media (max-width: 767px) {

.footer .logos-footer img{
margin-right: 5;
margin-left: 5;
}
.hero-text{
font-size: 24px;
line-height: 1.4;
}
.subscribe-home{
box-shadow: 0px 6px 25px 0px rgba(0, 0, 0, 0.4);
-webkit-transform: translateY(35px);
transform: translateY(35px);
}
.subscribe-home input{
padding-left: 20px;
padding-right: 20px;
font-size: 17px;

P a g e 170 |
line-height: 70px;
height: 70px;
}
.subscribe-home input:-ms-input-placeholder {
font-size: 17px;
line-height: 70px;
}
.subscribe-home input::-moz-placeholder {
font-size: 17px;
line-height: 70px;
}
.subscribe-home input:-moz-placeholder {
font-size: 17px;
line-height: 70px;
}
.subscribe-home input::-webkit-input-placeholder {
font-size: 17px;
line-height: 70px;
}
.subscribe-home button{
font-size: 11px;
line-height: 12px;
padding: 29px 15px;
}
.card-header .btn-link{
font-size: 11px;
}
}

@media (max-width: 575px) {

.card-header .btn-link{
letter-spacing: 0;
}
}

Student Details form:

P a g e 171 |
Code :
"""
Django settings for resort project.

Generated by 'django-admin startproject' using Django

4.1.5.

For more information on this file, see

https://docs.djangoproject.com/en/4.1/topics/settings/

For the full list of settings and their values, see

https://docs.djangoproject.com/en/4.1/ref/settings/
"""
import os
from pathlib importPath

# Build paths inside the project like this: BASE_DIR /

'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent

P a g e 172 |
# Quick-start development settings - unsuitable for
production
# See
https://docs.djangoproject.com/en/4.1/howto/deployment/che
cklist/

# SECURITY WARNING: keep the secret key used in production

secret!
from decouple import config
SECRET_KEY = config('SECRET_KEY')
# SECURITY WARNING: don't run with debug turned on in
production!
DEBUG = True

ALLOWED_HOSTS = []

# Application definition

INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'home',
'accounts',
]

MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',

'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',

P a g e 173 |
 'django.middleware.csrf.CsrfViewMiddleware',

'django.contrib.auth.middleware.AuthenticationMiddleware',

'django.contrib.messages.middleware.MessageMiddleware',

'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

ROOT_URLCONF = 'resort.urls'

TEMPLATES = [
{
'BACKEND':
'django.template.backends.django.DjangoTemplates',
'DIRS': [BASE_DIR,'templates'],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [

'django.template.context_processors.debug',

'django.template.context_processors.request',

'django.contrib.auth.context_processors.auth',

'django.contrib.messages.context_processors.messages',
],
},
},
]

WSGI_APPLICATION = 'resort.wsgi.application'

P a g e 174 |
# Database
#
https://docs.djangoproject.com/en/4.1/ref/settings/#databa
ses

DATABASES = {
'default': {
'ENGINE': 'django.db.backends.sqlite3',
'NAME': BASE_DIR / 'db.sqlite3',
}
}

# Password validation
#
https://docs.djangoproject.com/en/4.1/ref/settings/#auth-
password-validators

AUTH_PASSWORD_VALIDATORS = [
{
'NAME':
'django.contrib.auth.password_validation.UserAttributeSimi
larityValidator',
},
{
'NAME':
'django.contrib.auth.password_validation.MinimumLengthVali
dator',
},
{
'NAME':
'django.contrib.auth.password_validation.CommonPasswordVal
idator',
},
{

P a g e 175 |
 'NAME':
'django.contrib.auth.password_validation.NumericPasswordVa
lidator',
},
]

# Internationalization
# https://docs.djangoproject.com/en/4.1/topics/i18n/

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_TZ = True

# Static files (CSS, JavaScript, Images)

# https://docs.djangoproject.com/en/4.1/howto/static-
files/

STATIC_URL = 'static/'

STATICFILES_DIRS = [
BASE_DIR / "static"
]
# Default primary key field type
#
https://docs.djangoproject.com/en/4.1/ref/settings/#defaul
t-auto-field

DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'

P a g e 176 |
MEDIA_URL = "/media/"
MEDIA_ROOT = BASE_DIR / "media"

from django.contrib.messages import constants as messages

MESSAGE_TAGS = {
messages.ERROR: 'danger'
}

Booked Hotels Show:

Code :

Rooms :

P a g e 177 |
Code :
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'home',
'accounts',
]

MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',

'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',

'django.contrib.auth.middleware.AuthenticationMiddleware',

'django.contrib.messages.middleware.MessageMiddleware',

P a g e 178 |
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

ROOT_URLCONF = 'resort.urls'

TEMPLATES = [
{
'BACKEND':
'django.template.backends.django.DjangoTemplates',
'DIRS': [BASE_DIR,'templates'],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [

'django.template.context_processors.debug',
'django

P a g e 179 |
Total Snapshots:

P a g e 180 |
P a g e 181 |
P a g e 182 |
P a g e 183 |