Part Meaning

<meta Defines metadata about the HTML document (information about the page, not
shown to users).
charset Specifies the character encoding for the document.
"utf-8" Universal character encoding supporting most languages and symbols.
name Attribute that defines the type of metadata (e.g., viewport settings).
"viewport" Indicates settings for how the page should be displayed on different screen sizes.
content Attribute that defines the actual metadata value.
"width=device-width, Makes the page responsive: sets width to device’s screen and initial zoom level to
initial-scale=1" 1.
<title> Specifies the title of the HTML document shown in the browser tab.
Travel Agency Landing
Page The title text displayed in the browser tab.

Bootstrap CSS A comment describing that the following link is for Bootstrap CSS (not executed
code).
<link Used to link an external resource to the HTML document.
href Attribute that provides the URL of the linked resource.
"https://
cdn.jsdelivr.net/npm/
bootstrap@5.0.2/dist/ URL of the Bootstrap 5 CSS file from CDN.
css/bootstrap.min.css"
rel Describes the relationship between the document and the linked file.
"stylesheet" Indicates that the linked file is a CSS stylesheet.
"https://
fonts.googleapis.com/
css2?
family=Volkhov:wght@70 Link to Google Fonts specifying Volkhov and Poppins fonts with various weights.
0&family=Poppins:wght@
400;500;600&display=sw
ap"
Part / Selector Meaning
<style> Starts a section for internal CSS styling.
body Applies styles to the entire page body.
font-family:
'Poppins', sans-serif; Uses "Poppins" font; if not available, uses any sans-serif font.
.navbar Targets HTML elements with the class navbar.
position: absolute; Positions element relative to its nearest positioned ancestor.
top: 24px; left:
118px; right: 20px; Sets offsets from top, left, and right.
z-index: 1; Places element above elements with lower z-index.
background-color:
transparent; Makes the background transparent.
.nav-link Styles for navigation links.
color: #000; Text color is black.
margin-left, margin-
right: 10px; Adds space to the left and right of element.
.nav-link:hover Styles applied when nav link is hovered.
color: #ff5733; Changes color to orange on hover.
.card-title Styles the title inside cards.
color: #DF6951; Sets the title color.
font-size: 20px; Sets the font size.
.hero-heading Styles large main heading.
font-family:
'Volkhov', serif; Uses Volkhov font; serif as fallback.
font-size: 75px; Large font size for emphasis.
font-weight: bold; Makes text bold.
.find-btn Styles a specific button.
text-align: center; Centers the button text.
width: 140px; height:
45px; Sets button dimensions.
border-radius: 15px; Rounds the corners of the button.
background-color:
#F1A501; Yellow-orange background color.
box-shadow: ... Adds soft shadow around the button / element.
.play-link Styles a link with underline and spacing.
text-decoration:
underline; Underlines the link.
margin-left: 40px; Adds left spacing.
color: #686D77; Sets text color.
.play-link:hover Hover effect that keeps the same color.
.play-link img Styles images inside .play-link.
width: 40px; height:
40px; Sets image size.
margin-right: 15px; Adds spacing to the right of the image.
.travel_img1 Targets a specific image.
width: 120%; Makes image larger than its container.
height: auto; Keeps aspect ratio.
.hero_text Applies margin from the left for hero text.
.custom-card-img Styles image inside a custom card.
height: 100px;
padding: 20px 25px; Image height and padding inside the card.
object-fit: contain; Prevents image distortion / Ensures image fits without cropping.
margin-left/right:
auto; Centers the image horizontally.
.custom-card:hover Hover effect on a card.
transform:
translateY(-10px); Moves card up slightly.
border-radius: 30px; Rounds the corners.
.custom-card1 Base design for card.
background-color:
#fff; White background color.
border, box-shadow Thin border and light shadow.
.custom-card1:hover Enlarges shadow when hovered.
.section-top-
selling .custom-card- Styles image in top-selling section.
img1
width: 100%; height:
350px; Full width and fixed height.
object-fit: cover; Crops image to fill container.
border-top-left/right- Rounds top corners of image.
radius: 30px;
.logo-card Minimal styling for logos.
border: none; box-
shadow: none; No border or shadow.
transition: 0.3s; Smooth transition effect.
border-radius: 10px; Rounded corners.
.logo-card:hover Adds shadow and white background on hover.
.logo-container Sets the size of logo area.
.logo-img Styles for logo image.
.subscribe-section Container for newsletter/email section.
background-color: ... Light purple transparent background.
border-radius: 10px Rounds all corners.
border-top-left-
radius: 80px; Extra round on top-left corner.
padding: 100px; Adds internal spacing.
width: 1100px; height:
300px; Sets section size.
margin: 80px auto; Centers section with vertical margin.
.custom-btn General custom button style.
background-color:
#FF946D; Coral background color.
border-radius: 20px; Rounded button shape.
padding: 12px 35px; Adds spacing inside button.
color: white; White text.
.custom-btn:hover Darker coral on hover.
.text-footer Text style for footer.
color: #5E6282; Soft steel blue text.
.text-footer:hover Same color on hover.
.social-icon Styles for social icons.
width/height: 40px; Sets size of icon.
border-radius: 50%; Makes icons circular.
.text-steel Text color is steel blue.
.book-icon Styles a book icon.
width: 50px; height:
50px; Fixed icon size.
Part / Selector Meaning
<!-- Navbar --> Comment indicating the start of the navbar section.
<nav class="navbar"> Creates a navigation bar with the class navbar.
<div class="container-
fluid d-flex justify- Bootstrap container with flexbox layout; spaces items out and centers them
content-between align- vertically.
items-center">
<a class="jadoologo"
href="#"> Logo link with class jadoologo, redirects to the top (#).
<img src="Jadoo.png"
alt="Jadoo Logo" Displays the logo image named "Jadoo.png" with a width of 110px.
width="110">
<ul class="navbar-nav
flex-row"> Unordered list with Bootstrap classes for horizontal nav layout.
<li class="nav- Navigation item linking to "Destinations".
item"><a class="nav-
link"
href="#">Destinations<
/a></li>
<li class="nav-
item"><a class="nav-
link" Navigation item linking to "Hotels".
href="#">Hotels</a></l
i>
<li class="nav-
item"><a class="nav-
link" Navigation item linking to "Flights".
href="#">Flights</a></
li>
<li class="nav-
item"><a class="nav-
link" Navigation item linking to "Bookings".
href="#">Bookings</a><
/li>
<li class="nav-
item"><a class="nav-
link" Navigation item for user login.
href="#">Login</a></li
>
<li class="nav-
item"><a class="btn
btn-outline-dark" Navigation item styled as a button for user signup.
href="#">Sign
Up</a></li>
<li class="nav-item
dropdown"> Dropdown item in the navbar.
<a class="nav-link
dropdown-toggle"
href="#"
id="langDropdown" Dropdown trigger displaying "EN" (English), uses Bootstrap's dropdown behavior.
role="button" data-bs-
toggle="dropdown">EN</
a>
<ul class="dropdown-
menu"> Dropdown menu that appears on clicking "EN".
<li><a
class="dropdown-item" Dropdown option for Bengali language.
href="#">BN</a></li>
<li><a
class="dropdown-item" Dropdown option for Hindi language.
href="#">HI</a></li>
<li><a
class="dropdown-item" Dropdown option for Arabic language.
href="#">AR</a></li>
Part / Selector Meaning
<!-- Hero Section --> Comment indicating the start of the Hero Section.
<div class="container Bootstrap container for layout with bottom margin (mb-5). Has a class hero-
hero-section mb-5"> section for custom styling.
<div class="row align-
items-center"> Creates a row with vertically centered columns.
<!-- Text Column --> Comment for clarity.
<div class="col-lg-5 5-column wide (on large screens) column for text; hero_text likely applies left
hero_text"> margin or styling.
<h5 class="card-
title">Best
Destinations around Small heading using the .card-title class with styled color and size.
the world</h5>
<h1 class="hero-
heading">Travel,
enjoy<br>and live a Large main heading with line breaks; styled by .hero-heading (big font, bold,
new<br>and full custom font).
life</h1>
<p>Built Wicket longer
admire... for the.</p> Paragraph describing the section.
<a href="#" class="btn
find-btn">Find out A button styled with Bootstrap and .find-btn class (yellow-orange, shadow,
more</a> rounded).
<a href="#"
class="play-link"> Link styled like a play button or demo trigger.
<img src="PlayBtn.png"
alt="Play Button"> Play icon image inside the link.
Play Demo Text displayed beside the play icon.
<!-- Image Column --> Comment for clarity.
<div class="col-lg-6"> 6-column wide (on large screens) column for image.
<img <img src="travel_img1.png" alt="Travel Image" class= "travel_img1">
src="travel_img1.png"
alt="Travel Image"
class="travel_img1">

Part / Selector Meaning

<!-- Category Section
--> Comment marking the start of the category section.
<div class="section-
category text-center Main container for category section; centers text, adds vertical padding (py-5) and
py-5 mb-5"> bottom margin (mb-5).
<div class="title"> Container wrapping the title elements.
<p
class="Category_text1" Small heading or label styled by Category_text1.
>Category</p>
<h1
class="Category_text2
section-title">We Main section heading styled with Category_text2 and section-title.
Offer Best
Services</h1>
<!-- Card Row --> Comment indicating the start of the card row.
<div class="container
mt-4"> Bootstrap container with a top margin (mt-4).
<div class="row
justify-content- Bootstrap row that horizontally centers its content.
center">
<div class="col-md-3 Column: 3 grid units on medium+ screens, 6 on small screens, with bottom margin
col-sm-6 mb-4"> (mb-4).
<div class="custom-
card position-relative Card container with relative positioning, centered text, and padding.
text-center p-4">
<img src="card1.png"
class="custom-card-img Card image with bottom margin (mb-3).
mb-3">
<h5 class="card-title
fw-bold">Calculated Card title styled bold.
Weather</h5>
<p class="card-
text">Built Wicket
longer admire do Card description text.
barton vanity itself
do in it.</p>
Part / Selector Meaning
<!-- Top Selling
Section --> Comment marking the start of the top selling section.
<div class="section-
top-selling text- Main container for the section; centers text and adds vertical padding.
center py-5">
<div class="title"> Container for the section’s title elements.
<p
class="Category_text1" Small section label styled by Category_text1.
>Top Selling</p>
<h1
class="Category_text2
section-title">Top Main heading styled with Category_text2 and section-title.
Destinations</h1>
<!-- Card Row --> Comment indicating the start of the cards row.
<div class="container
mt-4"> Bootstrap container with a top margin.
<div class="row
justify-content-center Bootstrap row, horizontally centered, with gutters for spacing.
g-4">
<div class="col-md-4 Column that spans 4 units on medium+ screens, 6 units on small, with bottom
col-sm-6 mb-4"> margin.
<a href="#"
class="text-
decoration-none text- Link wrapping the card; removes underline and uses dark text.
dark">
<div class="custom-
card1 position- Card container with relative positioning and centered text.
relative text-center">
<img src="topX.png" Card image with styling class (X = 1, 2, 3).
alt="Top Product X"
class="custom-card-
img1">
<div class="p-4"> Padding container inside card.
<div class="d-flex
justify-content- Flex container to space child elements evenly.
between">
<u>Location</u> Underlined text showing location (e.g., Rome, Italy; London, UK; Macedonia).
<u>$Price</u> Underlined text showing price (e.g., $5200, $4200, $15000).
<div class="text-
start"> Left-aligned text container.
<img
src="location.png" Location icon image.
alt="Location Logo">
<u>Trip duration</u> Underlined text showing trip duration (e.g., 10 days trip, 12 days trip, 28 days
trip).
Part / Selector Meaning
<!-- Book Your Trip
Section --> Comment marking the start of the booking section.
<div class="book-
section"> Main container for the book trip section.
<div
class="container"> Bootstrap container for responsive layout.
<div class="row align-
items-center"> Bootstrap row with vertically centered content.
<div class="col-md-6"> Left column taking half width on medium+ screens.
<p class="text-
uppercase fw-bold mb-2
text-steel">Easy and Uppercase bold subtitle with bottom margin and steel-colored text.
Fast</p>
<h1 class="fw-bold mb-
4 section-title">Book
your Next Trip<br>in 3 Main heading with bold font, bottom margin, and line break.
Easy Steps</h1>
<div class="mb-4 d-
flex align-items- Step container with bottom margin and flex layout aligned at start (used for each
start"> step).
<img src="bookX.png"
alt="book logo"
class="me-3 book- Step icon image with right margin and fixed size (X = 1, 2, 3).
icon">
<div> Container for step text.
<h5 class="fw-bold mb-
1 text-steel">Step Step title, bold, steel color, small bottom margin.
Title</h5>
<p class="text-muted
mb-0 text-steel">Step Step description, muted and steel color, no bottom margin.
description text.</p>
<div class="col-md-6
mb-4 mb-md-0"> Right column with image, half width on medium+, bottom margin on small only.
<img src="trip.png"
alt="Book Trip"
class="img-fluid w-100 Responsive, full width, rounded corner image.
rounded">
Part / Selector Meaning
<!-- Testimonials
Section --> Comment marking the start of the testimonials section.
<div class="book- Main container with vertical padding (py-5). Shares the book-section class for
section py-5"> common styles.
<div
class="container"> Bootstrap container for responsive fixed width layout.
<div class="row align-
items-center"> Bootstrap row with vertically centered content.
<div class="col-md-6"> Left column occupying half the width on medium+ screens.
<p class="text-
uppercase fw-bold mb-2
testimonial- Uppercase, bold subtitle with bottom margin and custom testimonial-title styling.
title">Testimonials</p
>
<h1 class="fw-bold mb-
4 section-title">What
People Say<br> About Main heading, bold with bottom margin and a line break for emphasis.
Us</h1>
Part / Selector Purpose / Description
<!-- Logo Section --> Comment indicating the start of the Logo section.
<div class="container
py-5"> Bootstrap container with vertical padding (py-5). Wraps the entire logo area.
<div class="row
justify-content- Bootstrap row that centers its column items horizontally.
center">
<div class="col-md-2
col-6 mb-3"> (Repeated Each logo placed inside a Bootstrap column with responsive widths: 2/12 on
5 times) medium+ screens, 6/12 on small screens, and bottom margin.
<a href="#">...</a> Wraps each logo in a clickable link (currently a placeholder "#").
<div class="logo-card
logo-container d-flex
align-items-center Card container for the logo using custom classes and Flexbox to center the logo
justify-content- vertically and horizontally.
center">
<img src="logoX.png"
alt="Image X" The logo image with source path, alt text for accessibility, and likely custom
class="logo-img"> styling via logo-img class.
Part / Selector Meaning
<!-- Subscribe Section
--> Comment marking the start of the Subscribe section.
<div class="container
text-center py-5 Main container with Bootstrap fixed-width layout, centered text, vertical padding,
subscribe-section"> and custom styling via subscribe-section class.
<div class="title mb-4
text-steel"> Wrapper for text content with bottom margin and steel-colored text.
<p
class="Category_text1 Paragraph with custom font styling (Category_text1) and font size 5 (fs-5).
fs-5"> Contains subscription encouragement text with line breaks.
<form class="row
justify-content- Form wrapped in a Bootstrap row and horizontally centered.
center">
<div class="col-md-6 Column spanning 6/12 width on medium screens and 8/12 on small screens,
col-sm-8"> centering input and button.
<div class="input-
group"> Bootstrap input group aligning the input field and button inline.
<input type="email"
class="form-control
border-start-0" Email input field with Bootstrap styling, no left border, placeholder text, and
placeholder="Enter required validation.
your email" required>
<button class="btn
custom-btn ms-2
rounded-3" Subscribe button styled with Bootstrap button, custom class, left margin, rounded
type="submit">Subscrib corners, submitting the form.
e</button>
Part / Selector Meaning
<!-- Footer Section --
> HTML comment indicating the start of the footer section.
<div class="container
ps-5"> Bootstrap container with left padding (ps-5) for spacing and alignment.
<div class="row text-
start"> Bootstrap row with left-aligned (text-start) content.
<div class="col-md-3
col-sm-6 mb-3"> First column: spans 3/12 on medium, 6/12 on small screens, with bottom margin.
<h4 class="fw-bold
footer- Company name styled bold with a custom footer-title class.
title">Jadoo.</h4>
<h6 class="footer-
subtitle">...</h6> Subtitle under brand name with custom styling.
<div class="col-md-2 Second column: "Company" section, 2/12 width on medium, 6/12 on small
col-sm-6 mb-3"> screens.
<h5 class="fw-
bold">Company</h5> Section heading “Company” styled bold.
<ul class="list-
unstyled"> Unstyled unordered list (no bullets).
<li><a href="#"
class="text- Link to About page, styled with custom text-footer class.
footer">About</a></li>
(...other list items
similar) Other company links like Careers, Mobile, etc.
<div class="col-md-2
col-sm-6 mb-3"> Third column: "Contact" section, same grid setup.
<h5 class="fw-
bold">Contact</h5> Section heading “Contact” styled bold.
<ul class="list-
unstyled"> Unstyled list of contact links.
<li><a href="#"
class="text-
footer">Help / Help/FAQ link styled similarly.
FAQ</a></li>
<div class="col-md-2
col-sm-6 mb-3"> Fourth column: "More" section, same grid layout.
<h5 class="fw-
bold">More</h5> Section heading “More” styled bold.
<ul class="list-
unstyled"> Unstyled list of additional links.
<li><a href="#"
class="text-
footer">Airline Airline fees link.
fees</a></li>
<div class="col-md-3
mb-3 text-center"> Fifth column: social icons and app download section, text centered.
<a
href="https://www.face Facebook icon link with right margin and no underline.
book.com" ...>
<img src="fb.png"
alt="facebook" Facebook icon image styled via social-icon class.
class="social-icon">
<a
href="https://www.inst Instagram icon link.
agram.com" ...>
<img src="insta.png"
alt="instagram" Instagram icon image styled similarly.
class="social-icon">
<a
href="https://twitter. X/Twitter icon link.
com" ...>
<img src="x.png"
alt="x-twitter" Twitter icon image styled similarly.
class="social-icon">
<h5 class="fw-bold
footer-
discover">Discover our Bold heading encouraging app downloads.
app</h5>
<img
src="playstore.png"
alt="Google Play" Google Play store badge image with custom styling.
class="appstore-img">
<img
src="appstore.png"
alt="Apple Play" Apple App Store badge image.
class="appstore-img">
<div class="text-
center mt-4 pt-3
border-top border- Bottom footer bar with top border, margin, padding, and centered text.
light mb-5">
<p class="mb-0 footer- Copyright text with no bottom margin.
copyright">All rights
reserved@jadoo.co</p>