Scribd
Upload
3 views

Che Proper Notes

nothing eat five star and do nothing

Uploaded by

rajatthakurrt2345
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

Che Proper Notes

nothing eat five star and do nothing

Uploaded by

rajatthakurrt2345
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 26

HTML PROJECT REPORT BY RAJAT THAKUR

PROJECT REPORT (cars on rent)


Submitted by
RAJAT THAKUR
Class Assessment 3 (CA3)
of
Semester-1
BRANCH OF STUDY

BTECH- COMPUTER SCIENCE AND


ENGINEERING

Lovely Professional University, Punjab


ENROLLMENT NUMBER:12417186
Section: K24RB Roll No.: 06
Date:05 NOVEMBER 2024
Table of Contents
Chapter 1. Introduction
Chapter 2. Technologies used
Chapter 3. Snippets of Written Code
Chapter 4. Webpages Screenshot
Chapter 5. References
INTRODUCTION
Car rental services have become an essential part of modern
travel, offering flexibility and convenience for both business
and leisure trips. Renting a car provides individuals with the
freedom to explore new places at their own pace, without
the constraints of public transportation or the expense of
owning a vehicle. Whether for a day, a weekend, or an
extended period, car rental services cater to a wide range of
needs and preferences.

Car rental companies typically offer a variety of vehicles, from


compact cars ideal for city driving to spacious SUVs and
luxury vehicles for more comfortable travel. Many companies
also provide specialized vehicles, such as minivans,
convertibles, or electric cars, depending on the customer’s
requirements. Rental agencies often operate in convenient
locations, such as airports, train stations, and city centers,
making it easy for travelers to access a vehicle when they
arrive at their destination.

The process of renting a car is straightforward. Customers


typically need to provide a valid driver’s license, a credit card
for payment, and be of a minimum age, usually 21 or older,
with some additional requirements depending on the
company and location. Rental rates vary based on the type of
car, the duration of the rental, and the insurance coverage
selected. Many agencies offer optional extras, such as GPS
systems, child seats, and additional driver options, to further
enhance the customer experience.

Insurance is an important consideration when renting a car.


Most rental companies offer basic coverage, but customers
may choose to purchase additional protection, such as
collision damage waivers or theft protection. It’s essential for
renters to understand the terms of their insurance, as well as
any policies on fuel usage, mileage limits, and late returns, to
avoid unexpected charges.

For many people, renting a car offers a more cost-effective


and convenient solution than relying on taxis, rideshare
services, or public transit, especially in areas where
transportation options may be limited. Additionally, car
rentals are often the preferred choice for those who need a
vehicle for a short-term or one-off trip, as opposed to the
long-term commitment and expenses involved in car
ownership.

Overall, car rental services have become an integral part of


the global travel industry, providing travelers with a reliable
and affordable way to navigate new cities and regions.
Technologies Used
In the development of this website, we have used three
languages.
They are: • HTML • CSS
• HTML: HTML (Hypertext Markup Language) is the most
basic building block of the Web. It defines the meaning and
structure of web content. Other technologies besides HTML
are generally used to describe a web page's
appearance/presentation (CSS) or functionality/behaviour
(Java Script)
• "Hypertext" refers to links that connect web pages to one
another, either within a single website or between websites.
Links are a fundamental aspect of the Web. By uploading
content to the Internet and linking it to pages created by
other people, you become an active participant in the World
Wide Web.
• HTML uses "markup" to annotate text, images, and other
content for display in a Web browser. markup includes special
"elements" such as, <head>, <title>, <p>, <div> and many
more.
• An HTML element is set off from other text in a document
by "tags", which consist of the element name surrounded by
"<" and ">". The name of an element inside a tag is case
insensitive. That is, it can be written in uppercase, lowercase,
or a mixture.
• CSS: Cascading Style Sheets, fondly referred to as CSS, is a
simple design language intended to simplify the process of
making web pages presentable.
• CSS handles the look and feel part of a web page. Using
CSS, you can control the colour of the text, the style of fonts,
the spacing between paragraphs, how columns are sized and
laid out, what background images or colours are used, layout
designs, variations in display for different devices and screen
sizes as well as a variety of other effects.
• CSS is easy to learn and understand but it provides
powerful control over the presentation of an HTML
document. Most commonly, CSS is combined with the
markup languages HTML.

CODE:
First is index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
<title>Web Design Mastery | RentalX</title>
</head>
<body>
<header>
<nav>
<div class="nav__header">
<div class="nav__logo">
<a href="#">RentalX</a>
</div>
<div class="nav__menu__btn" id="menu-btn">
<i class="ri-menu-line"></i>
</div>
</div>
<ul class="nav__links" id="nav-links">
<li><a href="#home">Home</a></li>
<li><a href="#rent">Rent</a></li>
<li><a href="#service">Services</a></li>
<li><a href="#ride">Ride</a></li>
<li><a href="#contact">Contact</a></li>
<li class="nav__links__btn">
<button class="btn">Sign Up</button>
</li>
<li class="nav__links__btn">
<button class="btn">Sign In</button>
</li>
</ul>
<div class="nav__btns">
<button class="btn btn__primary">Sign Up</button>
<button class="btn btn__secondary">Sign In</button>
</div>
</nav>
<div class="section__container header__container" id="home">
<div class="header__image">
<img src="assets/header.png" alt="header" />
</div>
<div class="header__content">
<h1>Looking to save more on your rental car?</h1>
<p>
Discover RentalX car rental aoptions in India with Rent a Car
Select
from a range of car options and local specials.
</p>
<div class="header__links">
<a href="#">
<img src="assets/store.jpg" alt="app store" />
</a>
<a href="#">
<img src="assets/play.png" alt="play" />
</a>
</div>
</div>
</div>
</header>

<section class="section__container steps__container" id="rent">


<p class="section__subheader">HOW IT WORKS</p>
<h2 class="section__header">Rentgo following 3 working steps</h2>
<div class="steps__grid">
<div class="steps__card">
<span><i class="ri-map-pin-fill"></i></span>
<h4>Choose a location</h4>
<p>
Select your desired rental location from our extensive network of
car rental spots.
</p>
</div>
<div class="steps__card">
<span><i class="ri-calendar-check-fill"></i></span>
<h4>Pick-up date</h4>
<p>
Specify the date and time you wish to pick up your car with
flexible
scheduling options.
</p>
</div>
<div class="steps__card">
<span><i class="ri-bookmark-3-fill"></i></span>
<h4>Book your car</h4>
<p>
Browse through our wide range of vehicles and choose the one that
best suits your needs.
</p>
</div>
</div>
</section>

<section class="section__container service__container" id="service">


<div class="service__image">
<img src="assets/service.png" alt="service" />
</div>
<div class="service__content">
<p class="section__subheader">BEST SERVICES</p>
<h2 class="section__header">
Feel the best experience with our rental deals
</h2>
<ul class="service__list">
<li>
<span><i class="ri-price-tag-3-fill"></i></span>
<div>
<h4>Deals for every budget</h4>
<p>
From economy cars to luxury vehicles, we have something for
everyone, ensuring you get the best value for your money.
</p>
</div>
</li>
<li>
<span><i class="ri-wallet-fill"></i></span>
<div>
<h4>Best price guarantee</h4>
<p>
We ensure you get competitive rates in the market, so you can
book with confidence knowing you're getting the best deal.
</p>
</div>
</li>
<li>
<span><i class="ri-customer-service-fill"></i></span>
<div>
<h4>Support 24/7</h4>
<p>
Our dedicated team is available 24/7 to assist you with any
questions or concerns, ensuring a smooth rental experience.
</p>
</div>
</li>
</ul>
</div>
</section>

<section class="section__container experience__container" id="ride">


<p class="section__subheader">CUSTOMER EXPERIENCE</p>
<h2 class="section__header">
We are ensuring the best customer experience
</h2>
<div class="experience__content">
<div class="experience__card">
<span><i class="ri-price-tag-3-fill"></i></span>
<h4>Competitive pricing</h4>
</div>
<div class="experience__card">
<span><i class="ri-money-rupee-circle-fill"></i></span>
<h4>Easier Rent On Your Budget</h4>
</div>
<div class="experience__card">
<span><i class="ri-bank-card-fill"></i></span>
<h4>Most Felxible Payment Plans</h4>
</div>
<div class="experience__card">
<span><i class="ri-award-fill"></i></span>
<h4>The Best Extended Auto Warranties</h4>
</div>
<div class="experience__card">
<span><i class="ri-customer-service-2-fill"></i></span>
<h4>Roadside Assistance 24/7</h4>
</div>
<div class="experience__card">
<span><i class="ri-car-fill"></i></span>
<h4>Your Choice Of Mechanic</h4>
</div>
<img src="assets/experience.png" alt="experience" />
</div>
</section>

<section class="section__container download__container" id="contact">


<div class="download__grid">
<div class="download__content">
<h2 class="section__header">Download the free RentalX app</h2>
<p>
Download the RentalX app to manage your bookings, find exclusive
deals, and access 24/7 support, all from your mobile device.
</p>
<div class="download__links">
<a href="#">
<img src="assets/store.jpg" alt="app store" />
</a>
<a href="#">
<img src="assets/play.png" alt="play" />
</a>
</div>
</div>
<div class="download__image">
<img src="assets/download.png" alt="download" />
</div>
</div>
</section>

<footer>
<div class="section__container footer__container">
<div class="footer__col">
<h4>Our Products</h4>
<ul class="footer__links">
<li><a href="#">Career</a></li>
<li><a href="#">Hotels</a></li>
<li><a href="#">Cars</a></li>
<li><a href="#">Packages</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Priceline</a></li>
</ul>
</div>
<div class="footer__col">
<h4>About RentalX</h4>
<ul class="footer__links">
<li><a href="#">Why RentalX</a></li>
<li><a href="#">Our Story</a></li>
<li><a href="#">Investors</a></li>
<li><a href="#">Press Centers</a></li>
<li><a href="#">Advertise</a></li>
</ul>
</div>
<div class="footer__col">
<h4>Resources</h4>
<ul class="footer__links">
<li><a href="#">Download</a></li>
<li><a href="#">Help Centers</a></li>
<li><a href="#">Guides</a></li>
<li><a href="#">Partner Network</a></li>
<li><a href="#">Mechanics</a></li>
<li><a href="#">Developer</a></li>
</ul>
</div>
<div class="footer__col">
<h4>Extras</h4>
<ul class="footer__links">
<li><a href="#">Rental Deal</a></li>
<li><a href="#">Repair Shop</a></li>
<li><a href="#">View Booking</a></li>
<li><a href="#">Hire Companies</a></li>
<li><a href="#">New Offers</a></li>
</ul>
</div>
</div>
<div class="section__container footer__bar">
<h4>RentalX</h4>
<p>Copyright © 2024 Web Design Mastery. All rights reserved.</p>
<ul class="footer__socials">
<li>
<a href="#"><i class="ri-facebook-fill"></i></a>
</li>
<li>
<a href="#"><i class="ri-twitter-fill"></i></a>
</li>
<li>
<a href="#"><i class="ri-google-fill"></i></a>
</li>
</ul>
</div>
</footer>

<script src="https://unpkg.com/scrollreveal"></script>
<script src="main.js"></script>
</body>
</html>

CSS CODE:
:root {
--primary-color: #fe5b3e;
--text-dark: #0f172a;
--text-light: #475569;
--extra-light: #f2f2f2;
--white: #ffffff;
--max-width: 1200px;
--gradient: linear-gradient(to bottom, #fe5c3c, #fc8023);
}

* {
padding: 0;
margin: 0;
box-sizing: border-box;
}

.section__container {
max-width: var(--max-width);
margin: auto;
padding: 5rem 1rem;
}

.section__subheader {
margin-bottom: 0.5rem;
font-size: 1rem;
font-weight: 600;
color: var(--text-light);
letter-spacing: 1px;
}
.section__header {
font-size: 2.5rem;
font-weight: 800;
color: var(--text-dark);
}

.btn {
padding: 0.75rem 1.5rem;
outline: none;
border: none;
font-size: 1rem;
color: var(--white);
background-color: #474fa0;
white-space: nowrap;
border-radius: 4px;
transition: 0.3s;
cursor: pointer;
}

.btn:hover {
background-color: #3c4286;
}

img {
display: flex;
width: 100%;
}

a {
text-decoration: none;
transition: 0.3s;
}

ul {
list-style: none;
}

html,
body {
scroll-behavior: smooth;
}

body {
font-family: "Mulish", sans-serif;
}

header {
position: relative;
}

header::before {
position: absolute;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0,
0.1));
z-index: -1;
}

nav {
position: fixed;
isolation: isolate;
width: 100%;
z-index: 9;
}

.nav__header {
padding: 1rem;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
background-color: var(--primary-color);
}

.nav__logo a {
font-size: 1.5rem;
font-weight: 700;
color: var(--white);
}

.nav__menu__btn {
font-size: 1.5rem;
color: var(--white);
cursor: pointer;
}

.nav__links {
position: absolute;
top: 100%;
left: 0;
width: 100%;
padding: 2rem;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 2rem;
background-color: var(--primary-color);
transition: 0.5s;
z-index: -1;
transform: translateY(-100%);
}

.nav__links.open {
transform: translateY(0);
}

.nav__links a {
font-weight: 700;
color: var(--white);
}

.nav__links .btn {
padding: 0;
background-color: transparent;
}

.nav__btns {
display: none;
}

.header__container {
display: grid;
gap: 2rem 0;
position: relative;
isolation: isolate;
overflow: hidden;
}

.header__container::before {
position: absolute;
content: "";
top: 0;
right: 0;
width: 100%;
height: 50%;
background: var(--gradient);
border-radius: 1rem 1rem 0.5rem 0.5rem;
z-index: -1;
}
.header__content h1 {
position: relative;
isolation: isolate;
margin-bottom: 2rem;
font-size: 2.75rem;
font-weight: 800;
color: var(--text-dark);
line-height: 3.25rem;
}

.header__content h1::before {
position: absolute;
content: "";
left: 0;
bottom: -1rem;
height: 4px;
width: 2rem;
background-color: var(--primary-color);
}

.header__content p {
margin-bottom: 2rem;
font-weight: 500;
color: var(--text-dark);
line-height: 1.75rem;
}

.header__links {
display: flex;
align-items: center;
gap: 1rem;
}

.header__links img {
max-width: 125px;
border-radius: 5px;
box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1);
}

.steps__container :is(.section__subheader, .section__header) {


text-align: center;
}

.steps__grid {
margin-top: 4rem;
display: grid;
gap: 2rem;
}

.steps__card {
text-align: center;
}

.steps__card span {
display: inline-block;
margin-bottom: 2rem;
padding: 10px 17px;
font-size: 1.75rem;
color: var(--primary-color);
border-radius: 5px;
background-color: var(--extra-light);
border: 4px solid var(--white);
box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1);
}

.steps__card:hover span {
padding: 14px 21px;
background: var(--gradient);
color: var(--white);
border: none;
}

.steps__card h4 {
margin-bottom: 1rem;
font-size: 1.25rem;
font-weight: 800;
color: var(--text-dark);
}

.steps__card p {
color: var(--text-light);
line-height: 1.75rem;
}

.service__container {
display: grid;
gap: 2rem;
overflow: hidden;
}

.service__list {
margin-top: 2rem;
display: grid;
gap: 2rem;
}
.service__list li {
display: flex;
align-items: flex-start;
gap: 1rem;
}

.service__list li span {
padding: 12px 15px;
font-size: 1.5rem;
color: var(--primary-color);
background-color: var(--extra-light);
border: 4px solid var(--white);
border-radius: 5px;
box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1);
}

.service__list h4 {
margin-bottom: 0.5rem;
font-size: 1.2rem;
font-weight: 700;
color: var(--text-dark);
}

.service__list p {
color: var(--text-light);
line-height: 1.75rem;
}

.experience__container :is(.section__subheader, .section__header) {


text-align: center;
max-width: 600px;
margin-inline: auto;
}

.experience__content {
max-width: 1024px;
margin-inline: auto;
margin-top: 4rem;
position: relative;
isolation: isolate;
}

.experience__content img {
max-width: 300px;
margin-inline: auto;
opacity: 0.5;
}
.experience__card {
position: absolute;
max-width: 200px;
}

.experience__card span {
display: inline-block;
margin-bottom: 0.5rem;
padding: 10px 13px;
font-size: 1.5rem;
color: var(--primary-color);
background-color: var(--extra-light);
border: 4px solid var(--white);
border-radius: 5px;
box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1);
}

.experience__card h4 {
font-size: 1rem;
font-weight: 700;
color: var(--text-dark);
}

.experience__card:nth-child(1) {
top: 5rem;
left: 1rem;
}

.experience__card:nth-child(2) {
top: 50%;
left: 1rem;
transform: translateY(-50%);
}

.experience__card:nth-child(3) {
bottom: 5rem;
left: 1rem;
}

.experience__card:nth-child(4) {
top: 5rem;
right: 1rem;
text-align: right;
}

.experience__card:nth-child(5) {
top: 50%;
right: 1rem;
transform: translateY(-50%);
text-align: right;
}

.experience__card:nth-child(6) {
bottom: 5rem;
right: 1rem;
text-align: right;
}

.download__container {
overflow: hidden;
}

.download__grid {
display: grid;
padding: 5rem 1rem;
background: var(--gradient);
border-radius: 1rem;
}

.download__image {
display: none;
}

.download__content .section__header {
margin-bottom: 1rem;
color: var(--white);
}

.download__content p {
margin-bottom: 2rem;
color: var(--extra-light);
line-height: 1.75rem;
}

.download__links {
display: flex;
align-items: center;
gap: 1rem;
}

.download__links img {
max-width: 125px;
border-radius: 5px;
box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1);
}
.footer__container {
display: grid;
gap: 4rem 2rem;
border-bottom: 1px solid var(--text-light);
}

.footer__col h4 {
margin-bottom: 2rem;
font-size: 1.25rem;
font-weight: 700;
color: var(--text-dark);
}

.footer__links {
display: grid;
gap: 1rem;
}

.footer__links a {
font-weight: 600;
color: var(--text-light);
}

.footer__links a:hover {
color: var(--primary-color);
}

.footer__bar {
padding-block: 2rem;
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: column;
gap: 1rem;
flex-wrap: wrap;
}

.footer__bar h4 {
font-size: 1.5rem;
font-weight: 700;
color: var(--text-dark);
}

.footer__bar p {
font-weight: 500;
color: var(--text-light);
text-align: center;
}

.footer__socials {
display: flex;
align-items: center;
gap: 1rem;
}

.footer__socials a {
display: inline-block;
padding: 8px 10px;
font-size: 1rem;
color: var(--text-dark);
border-radius: 100%;
box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1);
}

.footer__socials a:hover {
color: var(--white);
background: var(--gradient);
}

@media (width > 540px) {


.steps__grid {
grid-template-columns: repeat(2, 1fr);
}

.footer__container {
grid-template-columns: repeat(2, 1fr);
}
}

@media (width > 768px) {


header::before {
height: calc(100% - 4rem);
}

nav {
position: static;
padding-block: 2rem;
padding-inline: 1rem;
max-width: var(--max-width);
margin-inline: auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
}
.nav__header {
flex: 1;
padding: 0;
background-color: transparent;
}

.nav__logo a {
font-weight: 800;
color: var(--text-dark);
}

.nav__menu__btn {
display: none;
}

.nav__links {
position: static;
padding: 0;
width: fit-content;
flex-direction: row;
background-color: transparent;
transform: none;
}

.nav__links a {
padding-block: 5px;
color: var(--text-dark);
border-bottom: 2px solid transparent;
}

.nav__links a:hover {
border-color: var(--primary-color);
}

.nav__links__btn {
display: none;
}

.nav__btns {
display: flex;
flex: 1;
align-items: center;
justify-content: flex-end;
}

.nav__btns .btn__primary {
color: var(--text-dark);
background-color: transparent;
}

.header__container {
grid-template-columns: repeat(5, 1fr);
align-items: center;
}

.header__container::before {
right: 5rem;
width: calc(50% - 4rem);
height: 100%;
}

.header__image {
grid-column: 3/6;
}

.header__content {
grid-area: 1/1/2/3;
}

.steps__grid {
grid-template-columns: repeat(3, 1fr);
}

.service__container {
grid-template-columns: repeat(2, 1fr);
align-items: center;
}

.experience__content img {
opacity: 1;
}

.experience__card:nth-child(1) {
left: 5rem;
}

.experience__card:nth-child(3) {
left: 5rem;
}

.experience__card:nth-child(4) {
right: 5rem;
}

.experience__card:nth-child(6) {
right: 5rem;
}

.download__grid {
margin-block: 4rem;
padding-inline: 2rem;
grid-template-columns: repeat(2, 1fr);
align-items: center;
}

.download__image {
display: flex;
position: relative;
isolation: isolate;
}

.download__image img {
position: absolute;
max-width: 300px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.2));
}

.footer__container {
grid-template-columns: repeat(4, 1fr);
}

.footer__bar {
flex-direction: row;
}

.footer__bar :is(h4, .footer__socials) {


flex: 1;
}

.footer__socials {
justify-content: flex-end;
}
}
www.w3schools.com
www.wikipedia.com
www.youtube.com

Thank You

You might also like