Scribd
Upload
32 views42 pages

Mini Proj Print

Uploaded by

Brajul rajput
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
32 views42 pages

Mini Proj Print

Uploaded by

Brajul rajput
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 42

ALIGARH COLLEGE OF ENGINEERING AND TECHNOLOGY

BACHELOR OF TECHNOLOGY IN

COMPUTER SCIENCE AND ENGINEERING

APPROVED BY: AICTE & AFFILIATED TO : AKTU, LUCKNOW

(2023-24)

Mini Project Lab

SUBMITTED BY: Deepesh Upadhyay (2201090100016)

UNDER THE SUPERVISION OF

Mr. Rohit Yadav

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

HEAD OF DEPARTMENT SUBMITTED TO

Mr. Anand Sharma Mr. Rohit Yadav


CERTIFICATE

This is to certify that the project entitled "Travel Website" is work done by
"DEEPESH UPADHYAY" of BTECH III year, Session 2024-25 in the partial
fulfilment of AICTE examination and has been carried out under my direct
supervision guidance.

Supervised By-

Mr. Rohit Yadav


ACKNOWLEDGEMENT

I would like to express my special thanks of gratitude to my teacher MR. ROHIT


YADAV who gave me the golden opportunity to do this wonderful project on
"TRAVEL WEBSITE", Which also helped me in doing a lot of research and I came
to know about so many new things I am really thankful to them. Secondly, I
would also like to thank my parents and friends who helped me a lot in
finalizing this project within the limited time frame.

DEEPESH UPADHYAY

B.Tech CSE III year

Roll no.- 2201090100016


HTML (Hyper Text Markup Language)
HTML (Hypertext Markup Language) is the standard language used to create and structure
content on the web. It defines the structure and layout of a web page using elements, which
consist of tags. HTML is essential for creating the foundation of any webpage.

Basic Syntax of HTML

Here’s an explanation of the basic syntax and structure of HTML, along with an example:

1. HTML Document Structure:

An HTML document has a specific structure. Here’s a simple example:

html

Copy code

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>My Web Page</title>

</head>

<body>

<header>

<h1>Welcome to My Web Page</h1>

</header>

<main>

<p>This is a simple webpage created with HTML.</p>

</main>

<footer>

<p>&copy; 2024 My Web Page</p>


</footer>

</body>

</html>

Explanation of HTML Syntax:

1. DOCTYPE Declaration:

html

Copy code

<!DOCTYPE html>

 This tells the browser that the document is an HTML5 document. It is placed at the
very beginning of the document.

2. <html> Tag:

html

Copy code

<html lang="en">

 The <html> element is the root of an HTML document and contains all the content.
The lang="en" attribute specifies the language of the document (English, in this
case).

3. <head> Section:

html

Copy code

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>My Web Page</title>

</head>

 The <head> section contains metadata (information about the document that isn't
displayed directly on the page).
o <meta charset="UTF-8"> ensures that the document uses the UTF-8
character encoding, which includes most characters and symbols.

o <meta name="viewport" content="width=device-width, initial-scale=1.0">


helps with responsive design, making the page look good on all devices.

o <title> defines the title of the page that appears in the browser's tab or title
bar.

4. <body> Section:

html

Copy code

<body>

<header>

<h1>Welcome to My Web Page</h1>

</header>

<main>

<p>This is a simple webpage created with HTML.</p>

</main>

<footer>

<p>&copy; 2024 My Web Page</p>

</footer>

</body>

 The <body> section contains the content that is visible on the webpage.

5. Basic HTML Elements:

a. <header> Tag:

html

Copy code

<header>

<h1>Welcome to My Web Page</h1>


</header>

 The <header> element represents introductory content or navigational links. In this


case, it contains an <h1> tag, which defines a top-level heading.

b. <main> Tag:

html

Copy code

<main>

<p>This is a simple webpage created with HTML.</p>

</main>

 The <main> element is used for the primary content of the page. It should contain
content that is directly related to or expands on the central theme of the document.

c. <footer> Tag:

html

Copy code

<footer>

<p>&copy; 2024 My Web Page</p>

</footer>

 The <footer> element is typically used for the footer section of a page, containing
information like copyright statements, links, or contact details.

6. Text Elements:

a. Headings:

html

Copy code

<h1>This is a main heading</h1>

<h2>This is a secondary heading</h2>

<h3>This is a tertiary heading</h3>


 HTML has six levels of headings (<h1> to <h6>), with <h1> being the most important
and <h6> the least. Headings are used to structure content hierarchically.

b. Paragraphs:

html

Copy code

<p>This is a paragraph of text.</p>

 The <p> tag is used to define a paragraph.

7. Links:

html

Copy code

<a href="https://www.example.com">Visit Example</a>

 The <a> tag is used to create hyperlinks. The href attribute specifies the target URL,
and the link text appears between the opening and closing <a> tags.

8. Images:

html

Copy code

<img src="image.jpg" alt="Description of Image">

 The <img> tag is used to display images. The src attribute specifies the image file’s
location, and the alt attribute provides a description of the image for accessibility
purposes.

9. Lists:

 Unordered List (Bulleted List):

html

Copy code

<ul>

<li>Item 1</li>

<li>Item 2</li>
<li>Item 3</li>

</ul>

 The <ul> tag defines an unordered (bulleted) list, and each item in the list is wrapped
in an <li> tag.

 Ordered List (Numbered List):

html

Copy code

<ol>

<li>First item</li>

<li>Second item</li>

<li>Third item</li>

</ol>

 The <ol> tag defines an ordered (numbered) list.

10. Forms:

html

Copy code

<form action="/submit" method="POST">

<label for="name">Name:</label>

<input type="text" id="name" name="name" required>

<button type="submit">Submit</button>

</form>

 The <form> tag is used to create a form. The action attribute specifies where the
form data will be sent, and the method attribute defines the HTTP method to be
used (GET or POST).

 The <input> tag creates interactive controls in a form, such as text fields,
checkboxes, or buttons.

 The <label> tag is used to define a label for form elements.


Common HTML Tags and Their Use:

 <h1> to <h6>: Headings (used for titles and subtitles).

 <p>: Paragraph (used to create text blocks).

 <a>: Anchor (used for hyperlinks).

 <img>: Image (used to embed images).

 <ul>: Unordered list (bulleted list).

 <ol>: Ordered list (numbered list).

 <li>: List item (used inside <ul> or <ol>).

 <div>: Generic container (used for grouping content).

 <span>: Inline container (used for styling a section of text).

 <form>: Defines a form for user input.

Summary:

HTML is the backbone of web pages, providing structure and formatting for text, links,
images, and interactive elements. It uses elements that consist of opening and closing tags,
with attributes providing additional functionality. By mastering HTML, you can create well-
structured and functional websites.
CSS (Cascading Style Sheets)
CSS (Cascading Style Sheets) is used to style and format the visual presentation of a web
page. It controls how the HTML elements are displayed, such as layout, colors, fonts, and
spacing. CSS works by selecting HTML elements and applying styles to them.

Basic Syntax of CSS:

CSS is composed of rules that are applied to specific HTML elements. Each rule consists of a
selector and a declaration block.

General CSS Syntax:

css

Copy code

selector {

property: value;

 Selector: Identifies which HTML element(s) the style rule will apply to.

 Property: The style property you want to modify (e.g., color, font-size).

 Value: The value assigned to the property (e.g., blue, 16px).

Example:

css

Copy code

h1 {

color: blue;

font-size: 2rem;

 This CSS rule will change the color of all <h1> headings to blue and set their font size
to 2rem.

1. CSS Selectors:
Selectors are used to target HTML elements to apply styles. Some common types of
selectors are:

a. Universal Selector (*)

css

Copy code

*{

margin: 0;

padding: 0;

 The * selector applies the styles to all elements on the page.

b. Element Selector (Type Selector)

css

Copy code

p{

color: red;

 This targets all <p> (paragraph) elements and changes their text color to red.

c. Class Selector (.)

css

Copy code

.button {

background-color: green;

color: white;

 The class selector targets elements with a specific class. In this case, it selects all
elements with the class="button" and sets their background color to green and text
color to white.
d. ID Selector (#)

css

Copy code

#header {

text-align: center;

 The ID selector targets a specific element with a unique ID. In this case, it styles the
element with the ID header by centering the text.

e. Descendant Selector

css

Copy code

div p {

font-size: 1.2rem;

 This targets all <p> elements inside a <div> element, setting their font size to 1.2rem.

f. Child Selector (>)

css

Copy code

ul > li {

margin-left: 10px;

 This applies styles to <li> elements that are direct children of a <ul>.

g. Attribute Selector

css

Copy code

input[type="text"] {
border: 1px solid #ccc;

 This targets all <input> elements with type="text", applying a border style.

2. CSS Properties and Values:

a. Color and Background:

 color: Changes the text color of an element.

css

Copy code

p{

color: blue;

 background-color: Sets the background color of an element.

css

Copy code

body {

background-color: lightgray;

 background-image: Sets an image as the background.

css

Copy code

div {

background-image: url('background.jpg');

b. Text Styles:

 font-family: Specifies the font type.


css

Copy code

h1 {

font-family: Arial, sans-serif;

 font-size: Sets the size of the text.

css

Copy code

p{

font-size: 16px;

 font-weight: Controls the thickness of the text.

css

Copy code

strong {

font-weight: bold;

 text-align: Aligns the text (left, right, center).

css

Copy code

h2 {

text-align: center;

c. Spacing and Layout:

 margin: Sets the space around an element.

css
Copy code

div {

margin: 20px;

 padding: Sets the space between an element's content and its border.

css

Copy code

button {

padding: 10px 20px;

 width and height: Defines the size of an element.

css

Copy code

img {

width: 100%;

height: auto;

 border: Sets a border around an element.

css

Copy code

div {

border: 1px solid black;

d. Positioning:

 position: Specifies the positioning method (static, relative, absolute, fixed).

css
Copy code

div {

position: relative;

top: 20px;

 top, right, bottom, left: These properties position elements when the position
property is set to relative, absolute, or fixed.

e. Display and Visibility:

 display: Specifies the display behavior of an element.

css

Copy code

p{

display: block;

 visibility: Controls whether an element is visible or hidden, but it still takes up space
in the layout.

css

Copy code

div {

visibility: hidden;

f. Flexbox (For Layouts):

Flexbox is a powerful layout tool in CSS for aligning items in one-dimensional space (row or
column).

css

Copy code

.container {
display: flex;

justify-content: center;

align-items: center;

 display: flex enables flexbox on the container.

 justify-content: Aligns items horizontally (e.g., center, space-between).

 align-items: Aligns items vertically (e.g., center, stretch).

3. CSS Box Model:

The CSS box model describes how the size of an element is determined and how spacing
around elements works. It consists of:

 Content: The actual content of the element (text, images).

 Padding: The space between the content and the border.

 Border: A line surrounding the element.

 Margin: The space outside the border, creating space between elements.

css

Copy code

div {

margin: 20px;

padding: 10px;

border: 5px solid black;

4. CSS Specificity:

CSS rules may overlap, so specificity determines which rule takes precedence. It is based on
the following:

 Inline styles have the highest specificity.


 ID selectors are more specific than class selectors.

 Class selectors are more specific than element selectors.

Example:

css

Copy code

#header {

background-color: blue; /* More specific */

.header {

background-color: green; /* Less specific */

If both rules target the same element, the one with the higher specificity (ID selector) will be
applied.

5. CSS Comments:

You can add comments in your CSS code using /* */. Comments are ignored by the browser.

css

Copy code

/* This is a comment */

p{

color: red; /* This is another comment */

PROJECT CODE EXPLANATION


This HTML code defines the structure of a Travel Website with various sections including a
header, main content (hero section, destinations, hotels, activities, about, contact), and a
footer. Below is a breakdown of the HTML structure and its key elements:

1. Doctype Declaration and HTML Tag:

html

Copy code

<!DOCTYPE html>

<html>

 <!DOCTYPE html>: Specifies the document type and version of HTML. In this case, it
indicates that the document uses HTML5.

 <html>: The root element that wraps all the content on the webpage.

2. Head Section:

html

Copy code

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width,initial-scale=1.0">

<title>Travel Website</title>

<link rel="stylesheet" href="style.css">

</head>

 <meta charset="UTF-8">: Specifies the character encoding for the document,


ensuring proper text rendering.

 <meta http-equiv="X-UA-Compatible" content="IE=edge">: Ensures that the page


is displayed correctly in Internet Explorer.

 <meta name="viewport" content="width=device-width,initial-scale=1.0">: Makes


the webpage responsive on mobile devices by setting the viewport width to the
device's width.
 <title>: Sets the title of the webpage, which appears on the browser tab.

 <link rel="stylesheet" href="style.css">: Links the external CSS file (style.css) to style
the page.

3. Body Section:

The body contains all the visible content of the webpage.

a. Header:

html

Copy code

<header>

<div class="logo">

<a href="#"><img src="C:\project file\logo image.jpg" alt="logo"></a>

</div>

<nav class="nav-menu">

<ul>

<li><a href="#">Home</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Destinations</a></li>

<li><a href="#">Hotels</a></li>

<li><a href="#">Contact</a></li>

</ul>

</nav>

</header>

 <header>: Defines the header of the webpage. It contains the website's logo and
navigation menu.

 <div class="logo">: Contains the logo image with a link (href="#") that can be clicked
to return to the homepage.
 <nav class="nav-menu">: Contains an unordered list (<ul>) with list items (<li>) that
represent the main navigation menu (Home, About, Destinations, Hotels, Contact).

b. Main Content:

html

Copy code

<main>

<section class="hero">

<div class="hero-image">

<img src="C:\project file\hero.jpg" alt="hero image">

</div>

<div class="Hero-content">

<h1>welcome to Our Travel Website</h1>

<p>Discover amazing destinations and book your next trip with us.</p>

<a href="#" class="hero-button">Book now</a>

</div>

</section>

 <main>: Wraps the main content of the page.

 <section class="hero">: The hero section that showcases a large background image
with a welcome message and a "Book now" button.

c. Destinations, Hotels, and Activities Sections:

Each of these sections uses the same pattern of structure:

html

Copy code

<section class="destinations">

<h2>Popular Destinations</h2>

<div class="destination-grid">

<div class="destination-item">
<img src="C:\project file\destination-1.jpg" alt="">

<h3>New York City</h3>

<p>Visit the city that never sleeps...</p>

</div>

<!-- Other destination items follow the same structure -->

</div>

</section>

 <section class="destinations">: Each section represents different types of content,


such as "Popular Destinations", "Featured Hotels", and "Featured Activities".

 <h2>: Defines a heading for each section.

 <div class="destination-grid">: A container for a grid of destination items, which are


represented by multiple <div class="destination-item"> elements.

 <img src="...">: Displays an image for each destination, hotel, or activity.

 <h3> and <p>: Define titles and descriptions for each destination or activity.

d. About Us Section:

html

Copy code

<section class="about">

<h3>About Us</h3>

<p> Our company is dedicated to providing the best travel experience...</p>

<div class="team-members">

<h3>Meet Our Team</h3>

<div class="team-member">

<img src="C:\project file\team-member-1.jpg" alt="">

<h4>John Smith</h4>

<p>Founder & CEO</p>

</div>
<!-- Other team members follow the same structure -->

</div>

</section>

 <section class="about">: Provides information about the company and introduces


the team members.

 <h3> and <p>: The section's title and description.

 <div class="team-members">: Contains a list of team members, each defined by a


<div class="team-member"> with an image and a brief description.

e. Contact Section:

html

Copy code

<section class="contact">

<h3>Contact Us</h3>

<div class="contact-info">

<p>If you have any questions or would like to book a trip...</p>

<ul>

<li><i class="fas fa-map-marker-alt"></i>123 Main St, Anytown USA</li>

<li><i class="fas fa-envelope"></i><a


href="mailto:[email protected]">[email protected]</a></li>

<li><i class="fas fa-phone-alt"></i><a href="tel:555-123-4567">555-123-


4567</a></li>

</ul>

</div>

<form action="#" class="form">

<div class="form-group">

<input type="text" name="name" id="name" placeholder="Enter Your Name"/>

</div>
<!-- Other form fields follow the same structure -->

<button type="Submit">Send Message</button>

</form>

</section>

 <section class="contact">: Contains a form for users to contact the website.

 <ul>: Lists contact information, including address, email, and phone number.

 <form class="form">: A form where users can enter their name, email, and message
to contact the company.

f. Footer:

html

Copy code

<footer>

<div class="social-icons">

<a href="https://www.facebook.com/" target="_blank"><i class="fab fa-


facebook"></i></a>

<a href="https://www.twitter.com/" target="_blank"><i class="fab fa-twitter"></i></a>

<a href="https://www.instagram.com/" target="_blank"><i class="fab fa-


instagram"></i></a>

</div>

</footer>

 <footer>: The footer of the page, containing social media icons with links to
Facebook, Twitter, and Instagram.

4. Script Tag (Font Awesome for Icons):

html

Copy code

<script>
src="https://kit.fontawesome.com/6558443b63.js"

crossorigin="anonymous"

</script>

 This <script> tag includes Font Awesome icons, which are used in the footer and
other sections (e.g., the social media icons).

Key Points:

 Images: Images are referenced using absolute file paths (C:\project file\...), but it is
recommended to use relative paths or URLs for better portability.

 Navigation Menu: A typical horizontal navigation menu with links to various sections
of the site.

 Responsive Design: The webpage appears to be designed with responsiveness in


mind, though the associated CSS is missing here.

In summary, this is a template for a Travel Website, featuring multiple sections like
"Destinations", "Hotels", "Activities", "Contact", and more. The website allows users to
explore various travel options, book trips, and learn more about the company.

The provided code is a CSS stylesheet that defines the layout and styling for a webpage.
Here's a breakdown of the key sections:

1. Global Styles:

css

Copy code

*{

margin: 0;

padding: 0;

scroll-behavior: smooth;

 Universal selector (*): Resets the margin and padding for all elements to 0, ensuring
a consistent layout across browsers.

 scroll-behavior: smooth: Enables smooth scrolling when navigating within the page.
2. Font Definitions (via @font-face):

css

Copy code

@font-face {

font-family: "Dongle-light";

src: url("Dongle/Dongle-light.ttf");

@font-face {

font-family: "Dongle-regular";

src: url("Dongle/Dongle-regular.ttf");

@font-face {

font-family: "Dongle-bold";

src: url("Dongle/Dongle-bold.ttf");

 These rules define custom fonts (light, regular, and bold) named Dongle-light,
Dongle-regular, and Dongle-bold. The .ttf files (TrueType Fonts) are loaded from the
specified paths.

3. Header Styles:

css

Copy code

header {

display: flex;

padding: 10px;

background-color: #fff;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

align-items: center;
}

 Flexbox layout: header uses display: flex to align its children in a row.

 Styling: The background is white (#fff), and there's a subtle shadow (box-shadow) for
a soft, elevated effect.

4. Logo and Navigation Styles:

css

Copy code

.logo img {

max-width: 15%;

.nav-menu ul {

display: flex;

.nav-menu li {

list-style: none;

margin-right: 18px;

.nav-menu a {

text-decoration: none;

font-family: "Dongle-bold";

font-size: 1.0rem;

color: #333;

transition: all ease 0.3s;


}

.nav-menu a:hover {

color: #ff7f50;

 The logo image has a maximum width of 15% of its parent container.

 The navigation menu is styled using flexbox for horizontal alignment (ul), and each li
has a margin of 18px.

 Links (a) have no underlines (text-decoration: none), use the bold Dongle font, and
transition smoothly when hovered, changing the text color to #ff7f50 (a shade of
orange).

5. Hero Section:

css

Copy code

.hero {

position: relative;

height: 500px;

overflow: hidden;

.hero-image img {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

object-fit: cover;

z-index: -1;

}
.hero-content {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

text-align: center;

color: #fff;

 Hero Section: The .hero section is styled with a height of 500px and hidden overflow,
ensuring that its child elements fit the container.

 The background image is positioned absolutely, stretched to cover the entire .hero
area while maintaining the aspect ratio (object-fit: cover).

 Text content is centered using the transform: translate(-50%, -50%) method, and the
text color is white (#fff).

6. Destinations Section (with Grid Layout):

css

Copy code

.destinations {

font-size: 1.5rem;

font-family: "Dongle-bold";

margin: 40px 80px;

text-align: center;

.destination-grid {

display: grid;

grid-template-columns: repeat(3, 1fr);


grid-gap: 40px;

 The destinations section uses a grid layout with three equal-width columns (grid-
template-columns: repeat(3, 1fr)) and a gap of 40px between items.

 Each destination item (within .destination-item) will display its image and text in a
grid, with the image covering 100% width of the grid item.

7. About Section:

css

Copy code

.about {

text-align: center;

padding: 80px;

.about h3 {

font-family: "Dongle-bold";

font-size: 2rem;

.about p {

font-family: "Dongle-regular";

font-size: 1.4rem;

line-height: 1;

margin-bottom: 40px;

 The about section uses center alignment for text, with large padding around it.

 The h3 and p elements use the Dongle fonts (bold for the heading and regular for the
paragraph) with specified font sizes.

8. Team Members Section:


css

Copy code

.team-members {

display: flex;

flex-wrap: wrap;

justify-content: center;

.team-member img {

width: 200px;

height: 200px;

margin: 15px;

object-fit: cover;

.team-member h4 {

font-family: "Dongle-bold";

font-size: 2rem;

 The team section uses flexbox to wrap team member images and names in a
centered layout.

 Each member's image is set to a fixed size of 200px by 200px with rounded
appearance (object-fit: cover).

9. Contact Section:

css

Copy code

.contact {

padding: 80px;

text-align: center;
background-color: #F7F7F7;

.contact h3 {

font-family: "Dongle-bold";

font-size: 3rem;

.contact-info p {

font-family: "Dongle-regular";

font-size: 1.4rem;

margin-bottom: 20px;

.contact-info ul {

display: flex;

justify-content: center;

align-items: center;

 Contact section: Styled with padding and a light background color (#F7F7F7).

 The contact heading uses a bold font (Dongle-bold) and is quite large (3rem). Contact
info (p) and the list of contact methods (ul) are aligned using flexbox.

10. Forms:

css

Copy code

input, textarea {

width: 70%;

padding: 10px;

border-radius: 5px;
font-family: "Dongle-regular";

.form button {

display: inline-block;

color: #fff;

background-color: #ff7f50;

padding: 12px 30px;

border-radius: 50px;

font-family: "Dongle-light";

font-size: 1.6rem;

border: none;

transition: all ease 0.3s;

.form button:hover {

background-color: #333;

 Form inputs: Set to 70% width, with padding, rounded corners, and using the
Dongle-regular font.

 Submit button: Styled with a rounded shape, orange background color, and a
smooth hover effect that changes the background color to dark gray.
CODE
HTML
<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Comptible" content="IE=edge">

<meta name="viewport" content="width=device-width=device-width,initial-scale=1.0">

<title>Travel Website</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<header>

<header>

<div class="logo">

<a href="#"><img src="C:\project file\logo image.jpg" alt="logo"></a>

</div>

<nav class="nav-menu">

<ul>

<li><a href="#">Home</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Destinations</a></li>

<li><a href="#">Hotels</a></li>

<li><a href="#">Contact</a></li>
</ul>

</nav>

</header>

</header>

<main>

<section class="hero">

<div class="hero-image">

<img src="C:\project file\hero.jpg" alt="hero image">

</div>

<div class="Hero-content">

<h1>welcome to Our Travel Website</h1>

<p>Discover amaging destination and book your next trip with us.</p>

<a href="#" class="hero-button">Book now</a>

</div>

</section>

<!--Destination-->

<section class="destinations">

<h2>Popular Destinations</h2>

<div class="destination-grid">

<div class="destination-item">

<img src="C:\project file\destination-1.jpg" alt="">

<h3>New York City</h3>

<p>Visit the city that never sleeps and discover its iconic landmarks,

world-class museums,and diverse neighborhoods. </p>

</div>

<div class="destination-item">
<img src="C:\project file\destination-2.jpg" alt="">

<h3>Paris</h3>

<p>Experience the romance and culture of the city of lights from the Eiffel

Tower to the Louvre Museum.</p>

</div>

<div class="destination-item">

<img src="c:\project file\destination-3.jpg" alt="">

<h3>Tokyo</h3>

<p>Explore the vibrant city of tokyo and immerce yourself in its unique blend

of ancient traditions and modern technology.</p>

</div>

</section>

<section class="destinations">

<h2>Featured Hotels</h2>

<div class="destination-grid">

<div class="destination-item">

<img src="C:\project file\hotel-1.jpg" alt="">

<h3>The Ritz Carlton</h3>

<p>Experience luxury accommodation and impeccable service at the Ritz

Carlton,located in the heart of the city.</p>

</div>

<div class="destination-item">

<img src="C:\project file\hotel-2.jpg" alt="">

<h3>The Four Seasons</h3>

<p>Realx in style at the Four Seasons, featuring breathtaking views, an

award-winning spa,and gourmet dining options. </p>


</div>

<div class="destination-item">

<img src="C:\project file\hotel-3.jpg" alt="">

<h3>Waldorf Astoria</h3>

<p>Indulge in luxury at the Wwaldorf Astoria, a historic landmark hotel

renowned for its elegance and sophistication. </p>

</div>

</section>

<section class="destinations">

<h2>Featured Activities</h2>

<div class="destination-grid">

<div class="destination-item">

<img src="C:\project file\activity-1.jpg" alt="">

<h3>Hiking the Grand Canyon</h3>

<p>Explore the breathtaking beauty of the "Grand Canyon" on a guided hiking

tour.</p>

</div>

<div class="destination-item">

<img src="C:\project file\activity-2.jpg" alt="">

<h3>Whale Watching in Alaska </h3>

<p>Experience the thrill of seeing majestic whales up close on a scanic boot

tour in Alaska. </p>

</div>

<div class="destination-item">

<img src="C:\project file\activity-3.jpg" alt="">

<h3>Snorkeling in Hawaii</h3>
<p>Discover the vibrant underwater worid of howaii on a guided snorkeling

execusion. </p>

</div>

</section>

<section class="about">

<h3>About Us</h3>

<p> Our company is dedicated to providing the best travel experience to

our customer. We specialize in creating custom <br>itineraries that cater

to each individual's intersts and preferences.

</p>

<div class="team-members">

<h3>Meet Our Team</h3>

<div class="team-member">

<img src="C:\project file\team-member-1.jpg" alt="">

<h4>John Smith</h4>

<p>Founder & CEO</p>

</div>

<div class="team-member">

<img src="C:\project file\team-member-2.jpg" alt="">

<h4>Jane Doe</h4>

<p>Head of Operations</p>

</div>

<div class="team-member">

<img src="C:\project file\team-member-3.jpg" alt="">

<h4>David Lee</h4>

<p>Marketing Director</p>
</div>

</div>

</section>

<section class="contact">

<h3>Contact Us</h3>

<div class="contact-info">

<p>

If you have any questions or would like to book a trip,

please fill out the form below or contact using the

information provided.

</p>

<ul>

<li>

<i class="fas fa-map-market-alt"></i>123 Main St,Anytown USA

</li>

<li>

<i class="fas fa-envelope"></i>

<a href="mailto:[email protected]">

[email protected]</a>

</li>

<li>

<i class="fas fa-phone-aly"></i>

<a href="tel:555-123-4567">555-123-4567</a>

</li>

</ul>
</div>

<form action="#" class="form">

<div class="form-group">

<input type="text" name="name" id="name"placeholder="Enter Your Name"/>

</div>

<div class="form-group">

<input type="email" name="email" id="email"placeholder="Enter Your Email"/>

</div>

<div class="form-group">

<textarea name="textarea" id="textarea"cols="30" rows="10"


placeholder="Message"></textarea>

</div>

<button type="Submit"> Send Message</button>

</form>

</section>

<footer>

<div class="social-icons">

<a href="https://www.facebook.com/" target="_blank"><i class="fab fa-


facebook"></i></a>

<a href="https://www.twitter.com/" target="_blank"><i class="fab fa-


twitter"></i></a>

<a href="https://www.instagram.com/" target="_blank"><i class="fab fa-


instagram"></i></a>

</div>

</footer>

</main>

</body>
<script>

src="https://kit.fontawesome.com/6558443b63.js"

crossorigin="anonymous"

</script>

</html>

You might also like