‘A’

Project Report
On
“CAR SHOWROOM”

Submitted & Present in the fulfillment of the

requirement for the award of
Diploma In Information
Technology By

Mr. Sawant Vishal Sharad (2215230200)

Mr. Javir Suraj Dipak (2215230198)
Ms. Wavare Shradha Balu (2215230197)

Under the Guidance of

Ms.Jadhav C.P

DEPARTMENT OF COMPUTER ENGINEERING

NEW SATARA COLLEGE OF ENGINEERING & MANAGEMENT PO LY(2021-2022)

NEW SATARA COLLEGE OF ENGINEETING AND

MANAGEMENT KORTI-PANDARPUR
1
 Certificate

This is to certify that the project report “Carshowroom” has been presented
successfully and submitted by.
Name of the Student Exam Seat No.
Mr. Sawant Vishal Sharad ( )
Mr. Javir Suraj Dipak ( )
Ms. Wavare Shradha Balu ( )
Student of CSSL (Client Side Scripting Language) class in the filfullment For the
award of Diploma in Information Technology as per curriculum laid by Maharashtra
State Board Of Technical Education, Mumbai during the academic year 2023-2024.

Project Guide H.O.D Principal

(Prof. Jadhav C.P.) (Prof. Puri S.B.) (Prof. Londhe.V.H.)

2
 Declaration

We hereby declare that, Dissertation entitled “Carshowroom” is completed and

submitted by me for the award of diploma engineering in Computer Engineering branch,
NSCOEM, College, Korti, Pandarpur.
Has not been previously present and to the best of my knowledge for the award of
diploma engineering title of this or any other university or examination body.

PLACE- KORTI,
PANDARPUR DATE-

3
 Acknowledgement
I hereby declare that the work presented in this Mini project report
entitled, “CAR SHOWROOM” in partial fulfillment for the Diploma of “Computer
Engineering” in Computer Science & Engineering. Our extreme gratitude to
Ms.Jadhav C.P who guided us throughout the project. Without his willing
disposition, spirit of accommodation, frankness, timely clarification and above
all faith in us, this project could not have been completed in due time..

4
 *INDEX*
Sr.No. Contents Page
No.

1 Abstract 6

2 Introduction 7

3 Program code(HTML) 8

4 Program code(CSS) 12

5 Output 20

6 Refrence 21

7 Conclusion 22

5
 Abstract
The main aim of this project is to create an application that is helpful while selling cars.

In the existing System it is difficult to maintain the car information individually and to supply for
the customers who are eager to buy them. Customer has to face difficulty in order to know the
information of car like manufacturing year, car model and other valuable information in a single
domain. Our main idea is to develop a system where we can have all the required information
for the user in order to effectively interest him in the process of buying a car.

In the Proposed System, application can maintain car details like manufacturer, year of
manufacturing, price and model etc. We can also view all the car details which are kept for sale
effectively and we can search for our desired car. With this Customer can get the information
quickly like car details which have been entered clearly.

Admin Module: This module is purely for an administrator of the site. He can view the users
and dealers. He can upload different car details for which dealer can ask or user can ask.

User Module: User can view all the car details which is uploaded by the admin as well as by the
dealer. He can give the feedback to the admin as well as to the dealer. He can book the car.

Dealer Module: Dealer can view all the car details which are uploaded by the admin. He can view
the entire booking request done by the users. He can give the feedback to the admin as well as
to the user. He can ask for the car also from admin

6
 Introduction
Dealers know that just as important as how the dealership looks, is how the dealership works. Ask
yourself:

 How do my customers and staff use my dealership for day-to-day activities?

 Do my customers have clear routes to the service area / workshop?
 How large does the showroom need to be to accommodate the number of cars we want to display?
 Given our planning volume and service growth goals, how many service bays do we need in the
body shop? How many technicians?

In today’s brand-driven society, cars and lifestyle overlap – and your sales environment should reflect
your customers' preferences.
Remember that the scope of a car dealership scheme is not limited to sales. After-sales service is an
intrinsic element of the business model, so a service reception and a parts and workshop facility
are often located on a showroom site.
At prestige marque dealerships, customers may expect access to refreshments, and wireless or
internet connections in coffee bars or lounges.

7
Program code(HTML):

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

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

<title>How to design car template using HTML & CSS</title>

<meta content="" name="description">

<meta content="" name="keywords">

<link rel="stylesheet" type="text/css" href="style.css">

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/

font-awesome.min.css">

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css">

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-

theme.min.css">

</head>

<body>

<section class="header" id="header">

<div class="nav-bar">

<div class="logo">

<a href="#">Chevrolet<span>.</span></a>

</div>

<div class="menu">

<ul>

<li><a href="#" class="active">Cars<span>.</span></a></li>

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

8
 <li><a href="#">Technology</a></li>

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

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

</ul>

</div>

<div class="social-media">

<ul>

<li><a href="#"><i class="fa fa-facebook"></i></a></li>

<li><a href="#"><i class="fa fa-twitter"></i></a></li>

<li><a href="#"><i class="fa fa-instagram"></i></a></li>

</ul>

</div>

</div>

<div class="hero">

<div class="row">

<div class="left-sec">

<div class="content">

<h2><span>chevrolet</span><br>camro</h2>

<p> It is a long established fact that a set reader will distracted by the readable content of a page when looking at its
layout technology.</p>

</div>

<button class="discover-btn">

<a href="#">discover</a><span><i class="fa fa-arrow-circle-o-right"></i></span>

</button>

<div class="information">

<div class="production">

<p>Production</p>

<h2>1966-2020</h2>

9
 </div>

<div class="production">

<p>Designer</p>

<h2>Sudarshan</h2>

</div>

</div>

</div>

<div class="right-sec">

<div class="my-car">

<div><img src="img1.png"></div>

<div><img src="img2.png"></div>

<div><img src="img3.png"></div>

<div><img src="img4.png"></div>

<div><img src="img5.png"></div>

</div>

</div>

</section>

<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$(".my-car").slick({

autoplay:true,

dots:true,

speed:1000,

customPaging:function(slider,i){

var thumb=$(slider.$slides[i]).data();

10
 return '<a>'+(i+1)+'</a>';

},

})

});

</script>

</body>

</html>

11
Program code(CSS):

*{

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: 'Montserrat', sans-serif;

a, a:hover{

text-decoration: none;

color: #fff;

ul{

list-style: none;

li{

display: inline-block;

.header{ widt

h: 100%;

height: 130vh;

background-color: #26284a;

.header .nav-bar{

width: 90%;

height: 80px;

margin: auto;

12
 color: #fff;

display: flex;

justify-content: space-

between; align-items: center;

padding-top: 80px;

.header .nav-

bar .logo{ margin-

left: 50px;

.header .nav-bar .logo

a{ font-size: 30px;

font-weight: 700;

text-transform: uppercase;

.header .nav-bar .logo

span{ font-size: 35px;

color: #d43242;

margin: 5px;

.header .nav-bar .menu ul

li{ margin-right:30px;

.header .nav-bar .menu ul li

a{ font-size: 19px;

letter-spacing: 2px;

padding: 10px;

13
border-radius:

5px;

14
 text-transform: capitalize;

transition: all 0.5s;

opacity: 0.6;

.header .nav-bar .menu ul li a.active{

opacity: 1;

.header .nav-bar .menu ul li span{

position: absolute;

top: 0;

color:

#d43242; font-

size: 75px;

.header .nav-bar .menu ul li a:hover{

opacity: 1;

.header .nav-bar .social-media ul li i{

width: 45px;

height: 45px;

line-height: 45px;

margin-right: 5px;

border-radius:

50px; text-align:

center; align-items:

center; font-size:

19px;

15
background-color: #cac5c542;

transition:all 0.3s ease-in-out;

16
}

.header .nav-bar .social-media ul li

i:hover{ background-color:rgb(255 0 0 /

0.9);

.hero{

width: 100%;

.hero .row{ wi

dth: 90%;

display: flex;

justify-content: space-

between; align-items: center;

padding-top: 50px;

margin: auto;

.hero .row.left-sec{

width: 30%;

margin-top:

100px; margin-left:

50px;

.hero .row.left-sec

h2{ font-size: 85px;

color: #fff;

text-transform: capitalize;

17
.hero .row .left-sec h2 span{

color: #d43242;

18
}

.hero .row .left-sec p{

margin: 20px 0;

color: #fff;

line-height: 28px;

padding-right:

150px;

.hero .row .left-sec .discover-btn{

display: flex;

align-items: center;

outline: none;

border-radius:

50px; cursor:

pointer; margin-top:

50px; padding: 0

25px;

border:3px solid #ffa938;

background-color:

#d43242;

box-shadow: 5px 7px 20px #000;

.hero .row .left-sec .discover-btn a{

color: #fff;

font-size: 25px;

letter-spacing: 2px;

margin-right:

19
 15px;

text-transform: capitalize;

.hero .row .left-sec .discover-btn span{

20
 color: #fff;

font-size: 45px;

.hero .information{

width: 100%;

display: flex;

margin-top:

100px;

.hero .information .production

{ margin-right: 20px;

letter-spacing: 1px;

.hero .information .production

h2{ font-size: 20px;

letter-spacing: 1px;

.hero .information .production

p{ padding-right: 0;

letter-spacing: 1px;

.hero .right-sec{

width: 70%;

padding-top:

100px;

.hero .right-sec img{

21
width: 950px;

height: 550px;

22
 margin: auto;

float: right;

.slick-next, .slick-prev{

top: 110% !

important;

z-index: 999;

.slick-prev{

position: absolute;

left: 810px !important;

.slick-next{

position:

absolute;

right: 70px !important;

.slick-next:before, .slick-prev:before{

font-size: 35px !important;

.slick-dots {

padding-left: 450px !important;

margin-bottom: -50px !

important;

.slick-dots li{

margin-right: 15px !important;

23
}

.slick-dots li.slick-active:after{

position: absolute;

24
content: '';

bottom: -15px;

left: 6px;

opacity: 1;

color: red;

font-size: 36px;

25
Output:

26
 Conclusion:
It has been a great pleasure for me to work on this exciting and challenging project. This project
proved good for me as it provided practical knowledge of not only programming in ASP.NET web
based application and no some extent Windows Application and SQLServer, but also about all
handling procedure related with “Vehicle showroom management System ”.

27
Refrence:

 https://www.freeprojectz.com
 https://projectsgeek.com
 http://phpgurukul.com

28