GOVERNMENT POLYTECHNIC COLLEGE

EZHUKONE

PROJECT REPORT
On

CAR ADVERTISMENT

In partial fulfilment of the requirement for

DIPLOMA IN
COMPUTER HARDWARE ENGINEERING

Submitted by

SREERAJ RS

20150494

FIFTH SEMESTER DIPLOMA IN COMPUTER

HARDWARE ENGINEERING

2022-2023
 GOVERNMENT POLYTECHNIC COLLEGE
EZHUKONE

CERTIFICATE

This is to certify that this Seminar report entitled “CAR ADVERTISMENT”

presented by SREERAJ RS[20150494]
towards the particular fulfillment for the Award of Sixth Semester Computer
Hardware Engineering under the Directorate of Technical Education
Government of Kerala during the academic year 2022-2023.

ARUN KUMAR J.S

Lecturer, Dept of Computer
HardwareEngineering ,Government
Polytechnic College,Ezhukone

BHAMA DEVI N
HOD,Dept of of Computer Hardware
Engineering,Government Polytechnic
College,Ezhukone

Place:
Date:

Internal Examiner: External Examiner:

 ACKNOWLEDGEMENT

First of all,I humbly remember the grace and blessing

that God almighty bestowed on me, without which myattempt
would have been a success .

This seminar would not have been possible

without the sincere assistance of many eminent people.

I express my deep gratitude to our Principal Mr. V V RAY for

giving the wonderful oppurtunity to widen our knowledge
inthe field of computer hardware engineering.

I express my profound and sincere thanks to Ms.

BHAMADEVI N (Head of Department,Computer Hardware
Engineering) for her support,valuable suggestion,supervision
and glitter guidance.

I owe special thanks toward Mr. ARUNKUMAR

J.S(Lecturer,Computer Hardware Engineering) for the
correction,suggestion and sincere efforts to co-ordinate the
seminar.

I would also like all the faculty member of Department Of

Computer Hardware Engineering for their valuble guidance
and suggestion which Helped me in the progress of this
seminar.

I owe my in calculable debt to my parents,friends and all

the other suggestion and cooperation.

SREERAJ RS
PROJECT REPORT 2023 CAR ADVERTISMENT

ABSTRACT

The aim of this project was to build a Car Advertisement application using Java(ISP)
and MySql Server programming environment. The system provides functionality for
users, allowing them to know about newly available cars. It provides functionality for
the administrator. A perfect option for to bus shelter advertising, many firms use utilize
Car advertisements to make a presence, strong reach, impact and differentiate their
products or services from other advertisers. With beautifully wrapped Car ads set
against a single color surrounding, Car Advertisement grabs people's attention. The
website for building permit allowing them to log into the system and Add.view.update
the status of the application or delele existing ones. For this purpose, cach user is
provided a login account with login ID and password access. This web Application
makes use of network features, including web controls, html controls, customer web
controls, forms authentication, crror handling. The programming tasks Included
building the customer web controls and deploying these on the Apache webserver. The
system architecture is based on the three-tier enterprise architecture, comprised of a
data layer, business logic, and a presentation layer.

Dept of Computer Hardware Engineering 4 GPTC Ezhukone,Kollam

PROJECT REPORT 2023 CAR ADVERTISMENT

Dept of Computer Hardware Engineering 5 GPTC Ezhukone,Kollam

PROJECT REPORT 2023 CAR ADVERTISMENT

INTRODUCTION

In this globalization era, the use of language plays a very important role, particularly in
the business world. Hence, language becomes a tool for communication among the
people including the entrepreneurs through mass media. We can find language
creativity emerge through the advertisement in various mass media due to the effort in
drawing the consumers’ attention.This is very natural since the advertisers intend to
personally communicate with their audience attractively. Hairstone (1986:380) states
that,“The propaganda in advertisement is media to deliver what the advertisers want,
believe, or feel in relation to their products by touching the consumers’ emotion”. Each
can be illustrated in the following motor car advertisements: (1) BMW. The Ultimate
Driving Machine (2) Don’t dream it. Drive it! From the pragmatic point of view, the
message in ads [1] can be interpreted that the advertisers seem to be eager to introduce
their product by touching the consumers’ emotion”. Each can be illustrated in the
following
motor car advertisements:(1) BMW. The Ultimate Driving Machine (2) Don’t dream it.
Drive it! From the pragmatic point of view, the message in ads [1] can be interpreted
that the advertisers seem to be eager to introduce their products directly. They believe
that the audience will be obsessed by such messages. In this case, the advertisers are
trying to make the words fit the world. Meanwhile, the ads [2] expresses
directly what the advertisers want the audience to do. It can be seen from the imperative
sentence ‘Don’t dream it. Drive it!’. It seems that the advertisers are attempting to get
the audience to do something. In terms of pragmatics, the former is categorized
representatives while the latter is directives. According to Yule (1996:53)
representative is a kind of speech act that states what the speaker believes to be the case
or not. In other words the speaker makes words fit the world or refers to the things the
speakers believe and directives is another kind of speech act that the speakers use to get
someone else to do something. Therefore, the case above draws the writer’s interest in
conducting pragmatic study on the written messages in motor car advertisements by
classifying and describing the speech acts classification ofthe messages of motor car
advertisement text

Dept of Computer Hardware Engineering 6 GPTC Ezhukone,Kollam

PROJECT REPORT 2023 CAR ADVERTISMENT

SYSTEM ANALYSIS

System analysis work with users to identify goals and build systems to achieve them.
System analysis is the important phase of any system development process. The system
is studied to minutest details and analyzed The system analyst plays the role of an
interrogator and minutest details and analyzed. The system analyst play the role of an
interrogator and dwells deep into working of the present system. In analysis, a detailed
study of this operations performed by a system and their relationship with in and
outside of the system is done. A key question considered here is "what must to solve the
problem?" onc aspect analysis is defining the boundary of the system and determine
whether or not the candidate system should be considered. The system is viewed as a
whole and the output to the system are identified. The output from the system are traced
through the various data are collected on t available files, decision points, and
transactions held by the present system Based on analysis, a cost/benefit is considered.
The cost for the system is calculated on the basis of analysis made. The given solutions
are given as proposal. The proposal is then waited with the existing system analytically
and the best on is selected. The proposal is presented to the user request and suitable
changes is made. This is a loup that ends as soon as the user is satisfied with the
proposal. After all the proposal become a formal agreement that payes way for the
design implementation.

REQUIREMENT ANALYSIS

Requirement analysis is the process of understanding the use needs and expectation
from a proposed system or application and is a well-defined stage in the software
development lifecycle. Requirements are a description of a how a system should behave
or a description of a properties or attributes. It can be alternatively be a statement of
what an application expected to do.The
basis requirement for Car Advertisement is the study of newly released and most
popular cars.

Dept of Computer Hardware Engineering 7 GPTC Ezhukone,Kollam

PROJECT REPORT 2023 CAR ADVERTISMENT

EXISTING SYSTEM

Presently there is many websites that advertise cars. They will offers broad variety of
cars. Reduces the probability of fogging up the inside of the windscreen by
automatically sensing the moisture inside the windscreen. The

LIMITATIONS OF EXISTING SYSTEM

.Cost - One of the major disadvantages of advertising is the cost involved in the entire
process.
False claims - some ads make false promises and keep customers in the dark. ...

Price Impact - When a company uses various advertising channels, it adds costs to the
product.

PROPOSED SYSTEM

Vehicle wrap advertising is a very effective means of marketing but is often overlooked
and undervalued. It is one of the most effective and efficient ways to advertise outdoors
because of the fact that the ad can be viewed by 30,000 to 80,000 people daily.

ADVANTAGES OF PROPOSED SYSTEM

 Reach a larger audience more often. ...

 Your advertising dollars will go much farther. ...

 Generate a positive opinion. ...

 Create a buzz and increase awareness. ...

 Bypass restrictions and influence a lucrative market.

Dept of Computer Hardware Engineering 8 GPTC Ezhukone,Kollam

PROJECT REPORT 2023 CAR ADVERTISMENT

FEASIBILITY STUDY
The feasibility of the proposed system was studied carried to identify the potential
benefits of developing the proposed system. The study also helped to uncover problems
and limitations of the system. The feasibility study concerns with the considerations
made to verify whether the system fit to be developed in all terms.

TECHNICAL FEASIBILITY

Technical feasibility focuses on the possibility of doing the project with current
equipment, existing software technologies and available personnel. The assessment of
this feasibility must be based on the study of system requirement in terms of input,
programs, and procedures having identified an outline system It also includes the
possibility of expanding the system developed and the technical guarantees of accuracy,
reliability, case of access and also the data security. The website of the proposed system
is developed using html, css as front end and php and mysql as back end. So the
proposed system is technically feasible, as the software required for developing it and
the software and the hardware required for using it are easily available.

ECONOMICAL FEASIBILITY

A cost evaluation is weighed against the ultimate benefit derived from the proposed
system. The Car Advertisement Public Clouds must be justified by cost and benefit
criteria to ensure that effort is concentrated on project, which all give best returns at the
earliest.
The cost to conduct a full system implementation is very low. The Building Permit can
be developed with the existing resources. There is no need for any additional hardware
or software requirements for both developing and implementation. The cost of other
resources needed for development is minimal. The technologies to be used to develop
the system were so chosen to minimize cost. Hence the proposed system is
economically feasible.

Dept of Computer Hardware Engineering 9 GPTC Ezhukone,Kollam

PROJECT REPORT 2023 CAR ADVERTISMENT

OPERATIONAL FEASIBILITY

The proposed project would be beneficial only if they can be turned into information
system that will meet the organization's operating requirements. One of the main
problem faced during the development of a new system is getting acceptance from user.
Proposed project is beneficial because they can be turned in to information systems that
will meet the user requirements. The test of operational feasibility asks if the system
will work when developed and installed.
The tools selected for developing the software are PHP, MYSQL. apacheServer,
Windows 8 and above which are all readily freely available in the market. It is coded in
such a way that not much change occurs while operations are cone The system is menu
driven and meaningful text are given as hyperlinks, it is user friendly and easy for the
users to operate.

Dept of Computer Hardware Engineering 10 GPTC Ezhukone,Kollam

 PROJECT REPORT 2023 CAR ADVERTISMENT

SOFTWARE REQUIREMENT SPECIFICATION

Software Requirement Specification is an important document prepared at the end of

the analysis activities. It is appropriate to think that the SRS document as a contact
between the development team proceeds to develop the product conforming to all the
requirements mentioned in the SRS documents .

FUNCTIONAL REQUIREMENTS

A modular design reduces complexity facilitates change and results in casier

implementation by encouraging parallel development of different parts of a system.
Software with effective modularity is easier to develop because function may be
compartmentalized and interfaces are simplified Software architecture embodies
modularity, that is software is divided into separately name and addressable
components called modules, which are integrated to satisfy problem requirements
modularity is the single attribute of software that allows a program to be intellectually
manageable Monolithic software cannot be easily grasped by reader .

HARDWARE SPECIFICATION

The minimum hardware configuration required for the proper Functioning of

the system can be outlined below
. • RAM: 2 GB with DDR1 DDR2 SDRAM
.
• Hard disk: 20 GB
BUILDING PERMIT

• Monitor Capable of displaying 300 by 600 resolutions or higher.

•
Keyboard PS/2, USB port
• Printer: Any printer (e.g. 1IP laser jet printer, ink Jet printer, Line
printer)

Dept of Computer Hardware Engineering 11 GPTC Ezhukone,Kollam

PROJECT REPORT 2023 CAR ADVERTISMENT

SOFTWARE SPECIFICATION

 Os:WindowsXP and above

 Front end:Html, css

 Back end: PHP, SQL

SOFTWARE REQUIREMENTS

The proposed system is user friendly with html, css, ps, bootsrap, jquery as front end,
nodels as back end and mongoDB as database.

HTML:

HyperText Markup Language (HTML) as the set of markup symbols or codes inserted
into a file intended for display on the Internet. The markup tells web browsers how to
display a web page's words and images.
Each individual picce markup code (which would fall between " and "" characters) is
referred to as an element, though many people also refer to it as a tag. Some elements
come in pairs that indicate when some display effect is to begin and when it is to end

CSS:

Cascading Style Sheets, fondly referred to as CS5, 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 color
of the text, the style of fonts, the spacing between paragraphs, how columns are sized
and fad out, what background images or

Dept of Computer Hardware Engineering 12 GPTC Ezhukone,Kollam

PROJECT REPORT 2023 CAR ADVERTISMENT

PHP:

PHP started out as a small open source project that evolved as more and more people
found out how useful it was. Rasmus Lerdorf unleashed the first version of PHP way
back in 1994 PHP is a recursive acronym for "PHP: Hypertext Preprocessor PHP is a
server side scripting language that is embedded in HTML It is used to manage dynamic
content, databases.

LARAVEL

Laravel is an open-source platform. In fact, Laravel has emerged as the most well-
known and widely used PHP framework since its release in 2011. Despite the fact that
there are numerous PHP frameworks, including CakePHP and CodeIgniter, the Laravel
framework is strongly preferred.

The majority of developers and business owners are drawn to it by its incredible
features and functionalities. The clean and expressive syntax of the Laravel framework
is one of its best qualities. It is also created in a way that streamlines and speeds up the
entire web development process.

In addition to these, it has access to pre-loaded in-built features like user authentication,
routing, and session management, which makes it easier for developers to work on the
PHP Laravel framework

Dept of Computer Hardware Engineering 13 GPTC Ezhukone,Kollam

PROJECT REPORT 2023 CAR ADVERTISMENT

DATA FLOW DIAGRAM

Analysis model helps us to understand the relationship between different components in

the system design. Analysis model shows the user clearly how
a system will function; This is the first technical representation of a system.
com will
The analysis modeling must achieve three primary objectives.
1. To establish a basis for creation of software design.
2. To describe what the user requires
3. To define set of requirements that can be validated once the software is built.

A dataflow diagram is a graphical technique that depicts information and transforms

that are applied as data move from input to output. The DFD is used to represent
increasing information flow and functional details. A level0 DFD is also called a
fundamental system model represents the entire software elements as a single hible with
input and output indicated by incoming and outgoing arrows respectively .

Additional process and information flow parts are represented in the next level, Le..
level DFD Each of the process represented at level 1 are sub functions of overall system
depicted in the context model. Any processes that are complex in level I level will be
farther represented into sub functions in the next level, ie, level 2.

Dept of Computer Hardware Engineering 14 GPTC Ezhukone,Kollam

PROJECT REPORT 2023 CAR ADVERTISMENT

COMPONENTS OF DATA FLOW DIAGRAM

There are only four symbols that are used in the drawing of data flow diagrams. These
are explained below together with the rules that apply to them .

EXTERNAL ENTITIES

External entities represent the sources of data that enter the system or the recipients of
data that leave the system.

PROCESS

Processes represent activities in which data is manipulated by being stored or retrieved

or transformed in some way.

Dept of Computer Hardware Engineering 15 GPTC Ezhukone,Kollam

PROJECT REPORT 2023 CAR ADVERTISMENT

DATA STORES

Data stores represent stores of data within the system.

DATA FLOW

A data flow shows the flow of information from its source to its destination A line
represents a data flow, with arrowheads showing the direction of flow .

DATA FLOW DIAGRAM (DFD)

REQUEST RESPONSE
USER USER
DB
RESPONSE REQUEST

Dept of Computer Hardware Engineering 16 GPTC Ezhukone,Kollam

PROJECT REPORT 2023 CAR ADVERTISMENT

FLOW CHART
ADMIN LEVEL

Start

Login

If
admin

Add list Remove list View list

Log out

Stop

Dept of Computer Hardware Engineering 17 GPTC Ezhukone,Kollam

PROJECT REPORT 2023 CAR ADVERTISMENT

E-R DIAGRAM

The Entity-Relationship (E-R) data model defines the conceptual view of a database. It
works around real world entities and the associations among them At view level, the E-
R model is considered a good option for designing
databases.

ENTITY

An entity can be a real-world object, either animate or inanimate, that can be easily
identifiable An entity set is a collection of similar types of entities. An entity set may
contain entities with attribute sharing similar values.

Entities are represented by means of their properties, called attributes have values.
There exists a domain or range of values that can be assigned to attributes.

TYPES OF ATTRIBUTES

 Simple attribute-simple attribute ure atomic values, which cannot be divided

further. For example, student's phone number is an atomic value of 10 digit
 Composite attribute-Composite attributes are made of more than one simple
attribute .
 Derived attribute-Derived attributes are the attributes that do not exist in the
physical database, but their values are derived from other attributes present in the
database.
 Single-value attribute-single-value attributes contain single value.

 Multi-value attribute-multi-value attributes may contain more than one

value.

Dept of Computer Hardware Engineering 18 GPTC Ezhukone,Kollam

PROJECT REPORT 2023 CAR ADVERTISMENT

RELATIONSHIP

The association among entities is called a relationship. A set of relationship of similar

type is called a relationship set Like entities relationship too can have attributes. These
attributes are called descriptive attribute.

Dept of Computer Hardware Engineering 19 GPTC Ezhukone,Kollam

PROJECT REPORT 2023 CAR ADVERTISMENT

ER DIAGRAM USER

User id

User Apply Application PWD

Mail ID
Action

User id

Login

(PWD)
password

Dept of Computer Hardware Engineering 20 GPTC Ezhukone,Kollam

PROJECT REPORT 2023 CAR ADVERTISMENT

ER DIAGRAM ADMIN

Admin

Action

Admin home

Action

Add list Delete list View list Logout

View View View

Add
Delete

Dept of Computer Hardware Engineering 21 GPTC Ezhukone,Kollam

PROJECT REPORT 2023 CAR ADVERTISMENT

SYSTEM DESIGN

System design translates the system requirements into ways of operationalizing them.
The design is a solution, a "how to approach", a compared to analysis, a "what is
orientation". The emphasis is on translating performance specifications into design
specifications. System design covers. the following:

.Reviews the current physical system

• Prepares output specifications
• Prepares input specifications
.Prepares edit, security and control specifications .
• Prepare the implementation plan

• Prepare a logical design walk through of the information flow, output. input, controls
and implementation plan.

DATA DESIGN

All relational databases can be used to manage transaction-oriented applications

(OLTP), and most non-relational databases that are in the categories Document stores
and Column stores can also be used for OLTP, adding to the confusion. Of TP
databases can be thought of as "Operational" databases, characterized by frequent, short
transactions that include updates - and that touch a small amount of data and where
concurrency of thousands of transactions is very important (examples including
banking applications and online reservations). Integrity of data is very important so
they support ACID transactions (Atomicity, Consistency, Isolation, Durability). This is
opposed to data warehouses, which are considered "Analytical" databases characterized
by long, complex queries that touch a large amount of data and
require a lot of resources. Updates are infrequent. An example is analysis of saler over
the past year.
Relational databases usually work with structured data, while non-relational databases
usually work with semi-structured data (ie XML, JSON) .

Dept of Computer Hardware Engineering 22 GPTC Ezhukone,Kollam

PROJECT REPORT 2023 CAR ADVERTISMENT

NORMALIZATION

Normalization When you normalize your data, you are dividing your data into multiple
collections with references between those collections. Each piece of data will be in a
collection, but multiple documents will reference at This means, to change your data,
you only need to update one document, because that data is only defined once.
However, MongoDB doesn't have any join facilities, like SQL does. Therefore, if you
need data from several collections, you will need to perform several queries .

.To structure the data so that there is no repetition of data, this helps in
saving space.
.To permit simple retrieval of data in response to query and report request
• To simplify the maintenance of the data through updates, insertions and deletions.

.To reduce the need to restructure or reorganize data which new application
requirements arise.

Primary key is assigned for this purpose. The primary key fields in almost all the tables
help to case the search and improve efficiency. The proposed system is using the
second normal form as it is found most suitable.
In second normal form each row must contain associated field that describes and
attributes of the entry that the table describes. In a relational database. every single table
must have at least one column or combination of columns that have a unique value.
This is the primary key of that table. The PK allows
other tables to reference one specific record in that first table unambiguously. Those
references to the PK's in other ables are called foreign keys-columns. that point to the
PK of another table.

DATA NORMALIZATION

Normalization is the process of decomposing the attributes in an application. which

results ma sut of tables with very simple structure. The purpose of normalization is to
take tahles as simple as possible.

Dept of Computer Hardware Engineering 23 GPTC Ezhukone,Kollam

PROJECT REPORT 2023 CAR ADVERTISMENT

FIRST NORMAL FORM:

If a relation is said to be in First Normal Form (INF) if and only if every entry of the
relation has af most a single value.If all relations of a database are in INI In this system
they can provides a unique entry of details in the database.

SECOND NORMAL FORM:

A relations in Second Normal Form (2NF) if and only if the two conditions are satisfied,
the first one is that the relation is already mn First Normal Form and second one is no
prime attribute is partially depending on any key or each nonprime attribute in a
relation is fully depended upon every key.

THIRD NORMAL FORM

A relation is in Third Normal Form (3NF) if and only if it satisfies the conditions. The
relation is already in 2NF and nonprime attribute is transitively depending on the key.
In another way of expressing the conditions of 3NF are the relation is already in 2NF
and nonprime attribute functionally determines any other nonprime attribute. The
apartment Management system is normalized in Third normal form

Dept of Computer Hardware Engineering 24 GPTC Ezhukone,Kollam

PROJECT REPORT 2023 CAR ADVERTISMENT

TABLE DESING

USER TABLE

FIELD ID DATA TYPE WIDTH CONSTRAITS

ID INT 11 PRIMARY KEY

IMAGE INT 200 NOT SET

BRAND NAME VARCHAR 200 NOT SET

PRICE INT 100 NOT SET

ENGIN TYPE VARCHAR 500 NOT SET

SEATING INT 50 NOT SET

CAPACITY

Dept of Computer Hardware Engineering 25 GPTC Ezhukone,Kollam

PROJECT REPORT 2023 CAR ADVERTISMENT

ADMIN TABLE

FIELD NAME DATA TYPE WIDTH CONSTRAINS

USER NAME VARCHAR 255 NOT SET

PASSWORD VARCHAR 255 NOT SET

USER TABLE

FELD NAME DATA TYPE WIDTH CONSTRAINTS

PASSWORD VARCHAR 255 NOT SET

USER NAME VARCHAR 255 NOT SET

MAIL ID VARCHAR 255 NOT SET

Dept of Computer Hardware Engineering 26 GPTC Ezhukone,Kollam

PROJECT REPORT 2023 CAR ADVERTISMENT

Dept of Computer Hardware Engineering 27 GPTC Ezhukone,Kollam

PROJECT REPORT 2023 CAR ADVERTISMENT

ARCHITECTURAL DESIGN

Architectural Design comprise of the design and effective integration of various

components of the software. The design includes both client side and also server side
design. The primary objective of the Architecture Design is to develop modular
structural elements of the program. This design represents the model of frame work of
the computer program can be derived from the analysis model and the iteration of
subsystem defined within the analysis model. The primary objective of the architectural
design is to develop a modular program structure and represents the control relationship
between modules. In addition architectural design needs program structure, define
interface that enables data to flow throughout the program.

PROCEDURAL DESIGN

Procedural Design occurs after data, architectural and interface design has been
established. The intent is to translate the design model into operational software, design
establishes the algorithmic detail require to manipulate and structures, communication
between software components via their interface and implement the processing
algorithms allocated to each component.

 Admin has overall control over the site.

 Admin can login as superuser
 Admin can verify the documents
 Admin can accept or reject the application from the pending list.
 Admin can search for an application.
 Admin can view the rejected and accepted applications.

User

 User can view the landing page.

 User can apply for a new connection.
 User can view the application status.

Dept of Computer Hardware Engineering 28 GPTC Ezhukone,Kollam

PROJECT REPORT 2023 CAR ADVERTISMENT

INTERFACE DESIGN

When applied to computer software, User Interface Design is also known as Computer
Interaction or HCL While people often think of Interface Design in term computers. It
also refers to many products where the users interact with control or displays.
Optimized user Interaction Design requires a systematic approach to the design process
But, to ensure performance, usually testing is required This empirical testing permits
naive users to provide data about what does work as anticipated and what does not
work Only after the resulting repairs are made can a product be deemed to have a user
optimized interface. The importance of the good user Interface Design can be
difference between product acceptance and rejection in the market place. If end users
feel it is not easy to learn, not easy to use, or too cumbersome, an otherwise excellent
product could fail. Good user interface design can make a product easy to understand
and use, which results in greater user acceptan Designing the user interface is a key part
in the development of any computer system. The designer needs to ensure that the
system has adequate usabilityit must do what is required and be easy to use. Good user
interfree design facilitates drawing unnecessary attention to it. Graphical design may be
utilized support its usability, the design process must balance technical functionality
create a system is not only operational but also usable adaptable to changing user needs.
Interface design is involved in a wide range of product from computer system to cast to
commercial plains. All of these projects involved much of the same besic human
interaction yet also requires some unique skill and in knowledge.

Dept of Computer Hardware Engineering 29 GPTC Ezhukone,Kollam

PROJECT REPORT 2023 CAR ADVERTISMENT

INPUT DESIGN

Once the outputs have been decided upon, the next step is to find out what inputs are
needed to produce these outputs. For this the sources of data must be identified first.
The next step is to find the way to collect these data (data capture) Then into machine
readable form (data entry). Finally, these data are to the memory for processing with the
help of a computer program or data input. The reliability of the output produced by a
system depends largely on the degree of accuracy of data entering the system. So, much
effort has to be made to reduce the possibility of errors at this stage. This can be
achieved by reducing the human intervention. For this, OMR(Optical Mark Reader)
sheets, Magnetic Ink Character Reader (MICR), Bar codes etc. In some cases, the data
capture, data entry and data input can be campaigned to reduce errors at each stage
Input design is a part of the overall system design, which requires carefully attention. If
the data going into the system is incorrect, then the processing and output will magnify
these errors The proposed system satisfies the following input design objectives.

.An effective cost of input method.

.The highest possible level of accuracy.
.The put is acceptable and understandable by the user

OUTPUT DESIGN

Output is a must for communicating the result of processing to users, system is judged
to be a success or failure depending upon whether its products are useful or not. So it is
important that we are specifying what is required from a system. After that, the
requirements to produce this output are to be specified. This can be achieved only
through close discussion between the analyst and user. The medium of output is to be
selected according to the need. Video display can be used for temporary output.
Printout can be taken if the output is to be stored permanently. For storing files,
magnetic disk or tape can he used. Microfilms are used if the amount of data is very
large. Factors like usage, quality and cost must be considered. Output can be divided
into two
groups internal and external. According to usage Internal usage refers to the use by
employees within the organization whereas external usage is intended for the public In

Dept of Computer Hardware Engineering 30 GPTC Ezhukone,Kollam

PROJECT REPORT 2023 CAR ADVERTISMENT

axternal copies, formatting, print quality, are not important. But, since external
documents determine the public image of a company, they me be attractive and
presented in a useful manner .

Dept of Computer Hardware Engineering 31 GPTC Ezhukone,Kollam

PROJECT REPORT 2023 CAR ADVERTISMENT

SYSTEM COADING
ADMIN LOGIN

<html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Log in</title>

<!-- Google Font: Source Sans Pro -->

<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&di
splay=fallback">
<!-- Font Awesome -->
<link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css">
<!-- icheck bootstrap -->
<link rel="stylesheet" href="plugins/icheck-bootstrap/icheck-bootstrap.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="dist/css/adminlte.min.css">
</head>
<body class="hold-transition login-page">
<div class="login-box">
<div class="login-logo">
<a href="../../index2.html"><b>Admin</b></a>
</div>
<!-- /.login-logo -->
<div class="card">
<div class="card-body login-card-body">

<form action="admincheck" method="post">

@csrf

Dept of Computer Hardware Engineering 32 GPTC Ezhukone,Kollam

PROJECT REPORT 2023 CAR ADVERTISMENT

<div class="input-group mb-3">

<input type="password" class="form-control" name="pwd"
placeholder="Password">
<div class="input-group-append">
<div class="input-group-text">
<span class="fas fa-lock"></span>
</div>
</div>
</div>
<div class="input-group mb-3">
<input type="username" class="form-control" name="uid"
placeholder="Username">
<div class="input-group-append">
<div class="input-group-text">
<span class="fas fa-lock"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-8">
<div class="icheck-primary">
<input type="checkbox" id="remember">
<label for="remember">
Remember Me
</label>
</div>
</div>
<!-- /.col -->
<div class="col-4">
<button type="submit" class="btn btn-primary btn-block">Sign In</button>
</div>
<!-- /.col -->
</div>
</form>
Dept of Computer Hardware Engineering 33 GPTC Ezhukone,Kollam
PROJECT REPORT 2023 CAR ADVERTISMENT

<div class="social-auth-links text-center mb-3">

</div>
<!-- /.social-auth-links -->

<p class="mb-1">
<a href="forgot-password.html">I forgot my password</a>
</p>
<p class="mb-0">
<a href="register.html" class="text-center">Register a new membership</a>
</p>
</div>
<!-- /.login-card-body -->
</div>
</div>
<!-- /.login-box -->

<!-- jQuery -->

<script src="plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE App -->
<script src="dist/js/adminlte.min.js"></script>
</body>
</html>

Dept of Computer Hardware Engineering 34 GPTC Ezhukone,Kollam

PROJECT REPORT 2023 CAR ADVERTISMENT

User login

<html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Log in</title>

<!-- Google Font: Source Sans Pro -->

<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&di
splay=fallback">
<!-- Font Awesome -->
<link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css">
<!-- icheck bootstrap -->
<link rel="stylesheet" href="plugins/icheck-bootstrap/icheck-bootstrap.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="dist/css/adminlte.min.css">
</head>
<body class="hold-transition login-page">
<div class="login-box">
<div class="login-logo">
<a href="../../index2.html"><b>User</b></a>
</div>
<!-- /.login-logo -->
<div class="card">
<div class="card-body login-card-body">
<p class="login-box-msg">Sign in to start</p>
<form action="usercheck" method="post">
@csrf
Dept of Computer Hardware Engineering 35 GPTC Ezhukone,Kollam
PROJECT REPORT 2023 CAR ADVERTISMENT

<div class="input-group mb-3">

<input type="email" name="email" class="form-control" placeholder="Email">
<div class="input-group-append">
<div class="input-group-text">
<span class="fas fa-envelope"></span>
</div>
</div>
</div>
<div class="input-group mb-3">
<input type="username" name="uid" class="form-control"
placeholder="Username">
<div class="input-group-append">
<div class="input-group-text">
<span class="fas fa-lock"></span>
</div>
</div>
</div>
<div class="input-group mb-3">
<input type="password" name="pwd" class="form-control"
placeholder="Password">
<div class="input-group-append">
<div class="input-group-text">
<span class="fas fa-lock"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-8">
<div class="icheck-primary">
<input type="checkbox" id="remember">
<label for="remember">
Remember Me
</label>
</div>
Dept of Computer Hardware Engineering 36 GPTC Ezhukone,Kollam
PROJECT REPORT 2023 CAR ADVERTISMENT

</div>
<!-- /.col -->
<div class="col-4">
<button type="submit" class="btn btn-primary btn-block">Sign In</button>
</div>
<!-- /.col -->
</div>
</form>

<div class="social-auth-links text-center mb-3">

<p> OR </p>
<a href="#" class="btn btn-block btn-primary">
<i class="fab fa-facebook mr-2"></i> Sign in using Facebook
</a>
<a href="#" class="btn btn-block btn-danger">
<i class="fab fa-google-plus mr-2"></i> Sign in using Google+
</a>
</div>
<!-- /.social-auth-links -->

<p class="mb-1">
<a href="forgot-password.html">I forgot my password</a>
</p>
<p class="mb-0">
<a href="register.html" class="text-center">Register a new membership</a>
</p>
</div>
<!-- /.login-card-body -->
</div>
</div>
<!-- /.login-box -->

<!-- jQuery -->

<script src="plugins/jquery/jquery.min.js"></script>
Dept of Computer Hardware Engineering 37 GPTC Ezhukone,Kollam
PROJECT REPORT 2023 CAR ADVERTISMENT

<!-- Bootstrap 4 -->

<script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE App -->
<script src="dist/js/adminlte.min.js"></script>
</body>
</html>

Dept of Computer Hardware Engineering 38 GPTC Ezhukone,Kollam

PROJECT REPORT 2023 CAR ADVERTISMENT

Car code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CARHUB</title>

<!-- Google Font: Source Sans Pro -->

<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&di
splay=fallback">
<!-- Font Awesome -->
<link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="dist/css/adminlte.min.css">
</head>
<body class="hold-transition sidebar-mini">
<div class="wrapper">
<!-- Main Sidebar Container -->
<aside class="main-sidebar sidebar-dark-primary elevation-4">
<!-- Brand Logo -->
<a href="../../index3.html" class="brand-link">
<img src="http://localhost/img/img2/automatelogoo.jpg" alt="CAR-HUB"
class="brand-image img-circle elevation-3" style="opacity: .8">
<span class="brand-text font-weight-light"><b>CAR</b>HUB</span>
</a>

<!-- Sidebar -->

<div class="sidebar">
<!-- Sidebar user (optional) -->

Dept of Computer Hardware Engineering 39 GPTC Ezhukone,Kollam

PROJECT REPORT 2023 CAR ADVERTISMENT

<!-- SidebarSearch Form -->

<div class="form-inline">
<div class="input-group" data-widget="sidebar-search">
<input class="form-control form-control-sidebar" type="search"
placeholder="Search" aria-label="Search">
<div class="input-group-append">
<button class="btn btn-sidebar">
<i class="fas fa-search fa-fw"></i>
</button>
</div>
</div>
</div>

<!-- Sidebar Menu -->

<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview"
role="menu" data-accordion="false">
<!-- Add icons to the links using the .nav-icon class
with font-awesome or any other icon font library -->
<li class="nav-item">
<a href="home" class="nav-link">
<i class="nav-icon fas fa-tachometer-alt"></i>
<p>
Admin Home
<i class="right fas fa-angle-left"></i>
</p>
</a>

</li>
<li class="nav-item">
<a href="allbook" class="nav-link">
<i class="nav-icon fas fa-th"></i>
<p>
Home
Dept of Computer Hardware Engineering 40 GPTC Ezhukone,Kollam
PROJECT REPORT 2023 CAR ADVERTISMENT

</p>
</a>
</li>
<li class="nav-item">
<a href="logout" class="nav-link">
<i class="nav-icon fas fa-th"></i>
<p>
Logout

</p>
</a>
</li>
</ul>
</nav>
<!-- /.sidebar-menu -->
</div>
<!-- /.sidebar -->
</aside>

<!-- Content Wrapper. Contains page content -->

<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<h1><center>CARHUB</center></h1>
</div>
<div class="col-sm-6">
<ol class="breadcrumb float-sm-right">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active">Cars</li>
Dept of Computer Hardware Engineering 41 GPTC Ezhukone,Kollam
PROJECT REPORT 2023 CAR ADVERTISMENT

</ol>
</div>
</div>
</div><!-- /.container-fluid -->
</section>

<!-- Main content -->

<section class="content">
<div class="container-fluid">
<div class="row">
<!-- left column -->
<div class="col-md-12">
<!-- general form elements -->
<div class="card card-primary">
<div class="card-header">
<h3 class="card-title">Enter detais of the Cars</h3>
</div>
<!-- /.card-header -->`
<!-- form start -->
<form action="addca" method="post" enctype="multipart/form-data">
@csrf
<div class="card-body">
<div class="form-group">
<label for="exampleInputText">BrandName</label>
<input type="text" class="form-control" name="name"
id="exampleInputText" placeholder="Enter">
</div>
<div class="form-group">
<label for="exampleInputText">Price</label>
<input type="text" class="form-control" name="price"
id="exampleInputText" placeholder="Enter">
</div>
<div class="form-group">
<label for="exampleInputText">Engine Type</label>
Dept of Computer Hardware Engineering 42 GPTC Ezhukone,Kollam
PROJECT REPORT 2023 CAR ADVERTISMENT

<input type="text" class="form-control" name="engine"

id="exampleInputText" placeholder="Enter">
</div>
<div class="form-group">
<label for="exampleInputText">Seating Capacity</label>
<input type="text" class="form-control" name="capacity"
id="exampleInputText" placeholder="Enter">
</div>

<div class="form-group">
<label for="exampleInputFile">img</label>
<div class="input-group">
<div class="custom-file">
<input type="file" class="custom-file-input" name="file1"
id="exampleInputFile">
<label class="custom-file-label" for="exampleInputFile">Choose
file</label>
</div>
<div class="input-group-append">
<span class="input-group-text">Upload</span>
</div>
</div>
</div>

<!-- /.card-body -->

<div class="card-footer">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
</body>
</html>
Dept of Computer Hardware Engineering 43 GPTC Ezhukone,Kollam
PROJECT REPORT 2023 CAR ADVERTISMENT

ADD.BLADE

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AdminLTE 3 | DataTables</title>

<!-- Google Font: Source Sans Pro -->

<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&di
splay=fallback">
<!-- Font Awesome -->
<link rel="stylesheet" href="../../plugins/fontawesome-free/css/all.min.css">
<!-- DataTables -->
<link rel="stylesheet" href="../../plugins/datatables-
bs4/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="../../plugins/datatables-
responsive/css/responsive.bootstrap4.min.css">
<link rel="stylesheet" href="../../plugins/datatables-
buttons/css/buttons.bootstrap4.min.css">
<!-- Theme style -->
<link rel="styleshedata
<!-- /.sidebar-menu -->
</div>
<!-- /.sidebar -->
</aside>

<!-- Content Wrapper. Contains page content -->

<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<div class="container-fluid">
Dept of Computer Hardware Engineering 44 GPTC Ezhukone,Kollam
PROJECT REPORT 2023 CAR ADVERTISMENT

<div class="row mb-2">

<div class="col-sm-6">

</div>

</div>
</div><!-- /.container-fluid -->
</section>

<!-- Main content -->

<section class="content">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h3 class="card-title">Adding Images and Features</h3>
</div>
<!-- /.card-header -->
<div class="card-body">
<table id="example2" class="table table-bordered table-hover">
<thead>
<tr>
<th>Image</th>
<th>Descrption</th>
<th>Add</th>

</tr>
</thead>
<tbody>
<tr>
<td>img1</td>
<td>Name<br>
features
Dept of Computer Hardware Engineering 45 GPTC Ezhukone,Kollam
PROJECT REPORT 2023 CAR ADVERTISMENT

</td>
<td>Add</td>

</tr>
<tr>
<td>img2</td>
<td>Name<br>
features
</td>
<td>Add</td>

</tr>
<tr>
<td>img3</td>
<td>Name<br>
features
</td>
<td>Add</td>

</tr>
<tr>
<td>img4</td>
<td>Name<br>
features
</td>
<td>Add</td>

</tr>
<tr>
<td>img5</td>
<td>Name<br>
features</td>
<td>Add</td>

Dept of Computer Hardware Engineering 46 GPTC Ezhukone,Kollam

PROJECT REPORT 2023 CAR ADVERTISMENT

</tr>

</tbody>
<tfoot>

</tbody>
<tfoot>
<tr>

</tr>
</tfoot>
</table>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
</div>
<!-- /.container-fluid -->
</section>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
<footer class="main-footer">
<div class="float-right d-none d-sm-block">

</div>

</footer>
Dept of Computer Hardware Engineering 47 GPTC Ezhukone,Kollam
PROJECT REPORT 2023 CAR ADVERTISMENT

<!-- Control Sidebar -->

<aside class="control-sidebar control-sidebar-dark">
<!-- Control sidebar content goes here -->
</aside>
<!-- /.control-sidebar -->
</div>
<!-- ./wrapper -->

<!-- jQuery -->

<script src="../../plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="../../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- DataTables & Plugins -->
<script src="../../plugins/datatables/jquery.dataTables.min.js"></script>
<script src="../../plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
<script src="../../plugins/datatables-
responsive/js/dataTables.responsive.min.js"></script>
<script src="../../plugins/datatables-
responsive/js/responsive.bootstrap4.min.js"></script>
<script src="../../plugins/datatables-buttons/js/dataTables.buttons.min.js"></script>
<script src="../../plugins/datatables-buttons/js/buttons.bootstrap4.min.js"></script>
<script src="../../plugins/jszip/jszip.min.js"></script>
<script src="../../plugins/pdfmake/pdfmake.min.js"></script>
<script src="../../plugins/pdfmake/vfs_fonts.js"></script>
<script src="../../plugins/datatables-buttons/js/buttons.html5.min.js"></script>
<script src="../../plugins/datatables-buttons/js/buttons.print.min.js"></script>
<script src="../../plugins/datatables-buttons/js/buttons.colVis.min.js"></script>
<!-- AdminLTE App -->
<script src="../../dist/js/adminlte.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="../../dist/js/demo.js"></script>
<!-- Page specific script -->
<script>
Dept of Computer Hardware Engineering 48 GPTC Ezhukone,Kollam
PROJECT REPORT 2023 CAR ADVERTISMENT

$(function () {
$("#example1").DataTable({
"responsive": true, "lengthChange": false, "autoWidth": false,
"buttons": ["copy", "csv", "excel", "pdf", "print", "colvis"]
}).buttons().container().appendTo('#example1_wrapper .col-md-6:eq(0)');
$('#example2').DataTable({
"paging": true,
"lengthChange": false,
"searching": false,
"ordering": true,
"info": true,
"autoWidth": false,
"responsive": true,
});
});
</script>
</body>
</html>

Dept of Computer Hardware Engineering 49 GPTC Ezhukone,Kollam

PROJECT REPORT 2023 CAR ADVERTISMENT

Dept of Computer Hardware Engineering 50 GPTC Ezhukone,Kollam

PROJECT REPORT 2023 CAR ADVERTISMENT

REGISTR BLADE

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AdminLTE 3 | Registration Page</title>

<!-- Google Font: Source Sans Pro -->

<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&di
splay=fallback">
<!-- Font Awesome -->
<link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css">
<!-- icheck bootstrap -->
<link rel="stylesheet" href="plugins/icheck-bootstrap/icheck-bootstrap.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="dist/css/adminlte.min.css">
</head>
<body class="hold-transition register-page">
<div class="register-box">
<div class="register-logo">
<a href="../../index2.html"><b>CARHUB</b></a>
</div>

<div class="card">
<div class="card-body register-card-body">
<p class="login-box-msg">Register a new membership</p>

<form action="addad" method="post">

@csrf
<div class="input-group mb-3">
Dept of Computer Hardware Engineering 51 GPTC Ezhukone,Kollam
PROJECT REPORT 2023 CAR ADVERTISMENT

<input type="text" class="form-control" name="name"

placeholder="Username">
<div class="input-group-append">
<div class="input-group-text">
<span class="fas fa-lock"></span>
</div>
</div>
</div>
<div class="input-group mb-3">
<input type="email" class="form-control" name="email" placeholder="Email">
<div class="input-group-append">
<div class="input-group-text">
<span class="fas fa-envelope"></span>
</div>
</div>
</div>
<div class="input-group mb-3">
<input type="password" class="form-control" name="pwd"
placeholder="Password">
<div class="input-group-append">
<div class="input-group-text">
<span class="fas fa-lock"></span>
</div>
</div>
</div>
<div class="input-group mb-3">
<input type="password" class="form-control" placeholder="Reenter password">
<div class="input-group-append">
<div class="input-group-text">
<span class="fas fa-lock"></span>
</div>
</div>
</div>
<div class="row">
Dept of Computer Hardware Engineering 52 GPTC Ezhukone,Kollam
PROJECT REPORT 2023 CAR ADVERTISMENT

<div class="col-8">

</div>
<!-- /.col -->
<div class="col-4">
<button type="submit" class="btn btn-primary btn-block">Register</button>
</div>
<!-- /.col -->
</div>
</form>

<a href="login.html" class="text-center">I already have a membership</a>

</div>
<!-- /.form-box -->
</div><!-- /.card -->
</div>
<!-- /.register-box -->

<!-- jQuery -->

<script src="plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE App -->
<script src="dist/js/adminlte.min.js"></script>
</body>
</html>

Dept of Computer Hardware Engineering 53 GPTC Ezhukone,Kollam

PROJECT REPORT 2023 CAR ADVERTISMENT

Dept of Computer Hardware Engineering 54 GPTC Ezhukone,Kollam

PROJECT REPORT 2023 CAR ADVERTISMENT

Home.blade

html lang="en"><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>Automate</title>
<link rel="icon" href="automatelogoo.jpg" type="image/gif" sizes="16x16">
<link rel="stylesheet" href="index.css" type="text/css">
</head>
<body>
<div class="container">
<div class="header">
<div class="auto-logo">
<img class="image" src="http://localhost/img/img2/automatelogoo.jpg"
alt="">
</div>
<div class="auto-name">
<a class="automate" href="index.html">CARHUB</a>
</div>

<div class="insta-face">
<a
href="https://www.instagram.com/invites/contact/?i=f3sma48hlchn&amp;utm_content
=ou0034q"><img class="insta-image" src="http://localhost/img/img2/insta+.png"
alt=""></a>
<a href="https://www.facebook.com/Automate-official-
100955986023157/"><img class="face-image"
src="http://localhost/img/img2/face+.png" alt=""></a>
<a
href="https://youtube.com/channel/UCsIGQvIYWSYOAFe97MvH1yQ"><img
class="you-tube" src="http://localhost/img/img2/youtube%20(1).png" alt=""></a>

Dept of Computer Hardware Engineering 55 GPTC Ezhukone,Kollam

PROJECT REPORT 2023 CAR ADVERTISMENT

</div>
</div>

</div>
<div id="title-bar">

<div class="cars">
<a class="carsp" href="logos.html">CARS</a>
</div>

</div>
<img class="front-image" src="http://localhost/img/img2/carfrontimagee.jpg"
alt="">
<div class="below-news-page">
<div class="full-left">
<div class="left">
<p class="newsh">NEW CARS</p>
@php
$i=0;
@endphp
@foreach($cars as $car)
@if($i%4==0)
<img class="brezzanew" src="cars/{{$car->id}}.jpg" alt="">
<p class="brezzanewpara">The new {{$car->brandname}} is powered by a
{{$car->enginetype}} seating {{$car->seatingcapacity}} Price {{$car->price}}</p>
@endif
@php
$i=$i+1;
@endphp
@endforeach
</div>
<div class="second-left">
@php
Dept of Computer Hardware Engineering 56 GPTC Ezhukone,Kollam
PROJECT REPORT 2023 CAR ADVERTISMENT

$i=0;
@endphp
@foreach($cars as $car)
@if($i%4==1)
<img class="brezzanew" src="cars/{{$car->id}}.jpg" alt="">
<p class="brezzanewpara">The new {{$car->brandname}} is powered by a
{{$car->enginetype}} seating {{$car->seatingcapacity}} Price {{$car->price}}</p>
@endif
@php
$i=$i+1;
@endphp
@endforeach
</div>
</div>
<div class="full-right">
<div class="first-right">
@php
$i=0;
@endphp
@foreach($cars as $car)
@if($i%4==2)
<img class="brezzanew" src="cars/{{$car->id}}.jpg" alt="">
<p class="brezzanewpara">The new {{$car->brandname}} is powered by a
{{$car->enginetype}} seating {{$car->seatingcapacity}} Price {{$car->price}}</p>
@endif
@php
$i=$i+1;
@endphp
@endforeach
</div>
<div class="second-right">
@php
$i=0;
@endphp
Dept of Computer Hardware Engineering 57 GPTC Ezhukone,Kollam
PROJECT REPORT 2023 CAR ADVERTISMENT

@foreach($cars as $car)
@if($i%4==3)
<img class="brezzanew" src="cars/{{$car->id}}.jpg" alt="">
<p class="brezzanewpara">The new {{$car->brandname}} is powered by a
{{$car->enginetype}} seating {{$car->seatingcapacity}} Price {{$car->price}}</p>
@endif
@php
$i=$i+1;
@endphp
@endforeach
</div>
</div>
</div>
<div class="footer">
<div class="footer-left">
<p class="leftfooter-para">There are no speed limits on road of success</p>
</div>
<div class="footer-middle">
<a class="about" href="about.html">*ABOUT</a>
<p class="contact">*CONTACT</p>
<p class="automotive-content">Automotive and content</p>
<p class="vidhya">SREERAJ R.S <br>
ASWATHY RAJU<br>
MAHIMA.M<br>
JITHIN FRANCIS<br>
NANDHU.B<br>
SARATH MOHAN<br>
MAHESH.M<br>
ADVAITH P.S<br>
KIRAN BABU<br>
UNNIKANNAN
</p>
<a class="vidhya-mail" href="mailto:sreeraj [email protected]">sreeraj
[email protected]</a>
Dept of Computer Hardware Engineering 58 GPTC Ezhukone,Kollam
PROJECT REPORT 2023 CAR ADVERTISMENT

<p class="designing">Car Advertisement</p>

<p class="christo">Christo Edison :</p>
<a class="christo-mail"
href="mailto:[email protected]">[email protected]</a>
</div>
<div class="footer-right">

<p class="carso">*Cars</p>

</div>
</div>
<div class="copy-right">
<p class="copyright">Copyright © 2022 Automate. All Rights Reserved.</p>
</div>
<script>
window.onscroll = function() {myFunction()};

var navbar = document.getElementById("title-bar");

var sticky = navbar.offsetTop;

function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
</script>
<style>
.header{
width: 1240px;
height: 85px;
margin-top: 0px;
background-color: black;
Dept of Computer Hardware Engineering 59 GPTC Ezhukone,Kollam
PROJECT REPORT 2023 CAR ADVERTISMENT

display: flex;
position: sticky;
}
.body{
width: 100%;
height: 100%;
margin: 0px;
flex-wrap: nowrap;
padding: 0px;
overflow-x: hidden;
}
.html,body{
margin-right: 0px;
margin-left: 0px;
margin-top: 0px;
padding: 0;
overflow-x: hidden;
width: 100%;
height: 100%;
}
.image{
width: 70px;
height: 70px;
}
.auto-logo{
width:90px;
margin-top: 10px;
height: 70px;
margin-left: 30px;

}
.automate{
font-size: 35px;
Dept of Computer Hardware Engineering 60 GPTC Ezhukone,Kollam
PROJECT REPORT 2023 CAR ADVERTISMENT

color: white;
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-weight: bold;
text-decoration: wavy;

}
.auto-name{
width:130px;
margin-top:23px;
height: 50px;
margin-left:0px;
padding-right: 100px;

}
.front-image{
width: 1240px;
height: 600px;
}
.below-news-page{
background-color: black;
width: 1240px;
height: 1300px;
flex-wrap: wrap;
}
.copy-right{
width: 1240px;
height: 30px;
background-color: rgb(36, 35, 35);
padding-top: 0px;
margin: 0px;
flex-direction: column;
}
.copyright{
font-size: 18px;
Dept of Computer Hardware Engineering 61 GPTC Ezhukone,Kollam
PROJECT REPORT 2023 CAR ADVERTISMENT

color:grey;
margin-left: 400px;
margin-top: 0px;
margin-bottom: 0px;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.newsh{
color: white;
font-size: 25px;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
margin-left: 8px;

}
.brezzanew{
width: 98%;
height: 205px;
}
.brezzanewpara{
color:white;
font-size: 16px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-weight: normal;
}
.venue2022{
width: 98%;
height: 205px;
}
.venue2022para{
color:white;
font-size: 16px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-weight: normal;
Dept of Computer Hardware Engineering 62 GPTC Ezhukone,Kollam
PROJECT REPORT 2023 CAR ADVERTISMENT

}
.scorpio{
width: 98%;
height: 205px;
}
.scorpiopara{
color:white;
font-size: 16px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-weight: normal;
}
.xl6{
width: 98%;
height: 205px;
}
.xl6para{
color:white;
font-size: 16px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-weight: normal;

}
.yezdi-roadster{
width: 98%;
height: 205px;
}
.yezdiroadsterpara{
color: white;
font-size: 16px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

Dept of Computer Hardware Engineering 63 GPTC Ezhukone,Kollam

PROJECT REPORT 2023 CAR ADVERTISMENT

}
.rolls-royce{
width: 98%;
height: 205px;
}
.rollsroycepara{
color: white;
font-size: 16px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

}
.re-scram{
width: 98%;
height: 205px;
}
.rescrampara{
color: white;
font-size: 16px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
margin-right: 3px;
}
.new-baleno{
width: 98%;
height: 205px;
}
.newbalenopara{
color: white;
font-size: 16px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

}
Dept of Computer Hardware Engineering 64 GPTC Ezhukone,Kollam
PROJECT REPORT 2023 CAR ADVERTISMENT

.yamaha-aerox{
width: 98%;
height: 205px;
}
.yamahaaeroxpara{
color: white;
font-size: 16px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
margin-right: 3px;
}
.kia-carens{
width: 98%;
height: 205px;
}
.kiacarenspara{
color: white;
font-size: 16px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.skoda-slavia{
width: 98%;
height: 205px;
}
.skodaslaviapara{
color: white;
font-size: 16px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.mgzs-ev{
width: 98%;
height: 205px;
Dept of Computer Hardware Engineering 65 GPTC Ezhukone,Kollam
PROJECT REPORT 2023 CAR ADVERTISMENT

}
.mgzsevpara{
color: white;
font-size: 16px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
margin-right: 5px;
}
.mt-15{
width: 98%;
height: 205px;
}
.mt15para{
color: white;
font-size: 16px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

}
.revolt-rv400{
width: 98%;
height: 205px;
}
.revoltrv400para{
color: white;
font-size: 16px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

}
.kia-ev6{
width: 98%;
height: 205px;
}
Dept of Computer Hardware Engineering 66 GPTC Ezhukone,Kollam
PROJECT REPORT 2023 CAR ADVERTISMENT

.kiaev6para{
color: white;
font-size: 16px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
margin-left: 3px;
}
.search-bardiv{
width: 450px;
margin-top:20px;

}
.search-bar{
width: 450px;
}
.search{
width: 450px;
}
.search-bbar{
width:430px;
}
.search-sign{
width:40px;
height:40px;
margin-top: 20px;

}
.insta-face{
width: 100px;
height: 50px;
margin-left: 580px;
padding-left: 0px;
margin-top: 27px;
display: flex;
Dept of Computer Hardware Engineering 67 GPTC Ezhukone,Kollam
PROJECT REPORT 2023 CAR ADVERTISMENT

}
.you-tube{
width: 25px;
height: 21px;
padding-left: 5px;
padding-top: 2px;

}
.search-image{
width: 25px;
height: 25px;
}
.insta-image{
width: 25px;
height: 25px;
}
.face-image{
width: 25px;
height: 25px;
padding-left: 5px;
}
#title-bar{
width:1240px;
height:45px;
background-color: black;
margin-top: 2px;
position: sticky;
}
.sticky {
position: fixed;
top: 0;
width: 1240px;
}
Dept of Computer Hardware Engineering 68 GPTC Ezhukone,Kollam
PROJECT REPORT 2023 CAR ADVERTISMENT

#title-bar.sticky{
background-color: rgb(36, 35, 35) ;
}
.news{
width:50px;
height:35px;
display: inline-block;
margin-left:5px;

}
.cars{
width:50px;
height:35px;
display: inline-block;

}
.bike{
width:50px;
height:35px;
display: inline-block;

}
.comparision{
width:120px;
height:35px;
display: inline-block;
}
.newsp{
width:50px;
height:50px;
margin-top: 5px;
display: inline-block;
color: white;
text-decoration: wavy;
Dept of Computer Hardware Engineering 69 GPTC Ezhukone,Kollam
PROJECT REPORT 2023 CAR ADVERTISMENT

font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,

Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.carsp{
width:50px;
height:50px;
display: inline-block;
text-decoration: wavy;
color: white;font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.bikep{
width:50px;
height:50px;
display: inline-block;
text-decoration: wavy;
color: white;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.comparisonsp{
width:120px;
height:50px;
display: inline-block;
text-decoration: wavy;
color: white;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.left{
width: 320px;
height: 900px;
background-color:black;
float: left;
Dept of Computer Hardware Engineering 70 GPTC Ezhukone,Kollam
PROJECT REPORT 2023 CAR ADVERTISMENT

padding-left: 5px;
}

.second-left{
width:320px ;
height:900px;
background-color: black;
margin-top: 63px;

.first-right{
width: 320px;
height:900px;
background-color: black;
margin-top: 63px;

.second-right{
width:320px;
height:900px;
background-color:black;
float: right;
margin-top: 63px;
}

.full-left{
float:left;
width: 50%;
height:1000px;
background-color:black;
display: flex;

Dept of Computer Hardware Engineering 71 GPTC Ezhukone,Kollam

PROJECT REPORT 2023 CAR ADVERTISMENT

}
.full-right{
float:right;
width: 50%;
height:1000px;
background-color:black;
display: flex;

}
.newsh{
font-size: 20px;
font-weight: bold;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.footer{
background-color: rgb(117, 110, 110);
width: 1240px;
height:400px;
display: flex;

}
.footer-left{
width: 500px;
height:300px;
margin-left: 10px;
}
.footer-middle{
width:500px ;
height: 300px;
}
.footer-right{
width: 300px;
height: 300px;
}
Dept of Computer Hardware Engineering 72 GPTC Ezhukone,Kollam
PROJECT REPORT 2023 CAR ADVERTISMENT

.leftfooter-para{
color:black;
font-size:19px;
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

}
.about{
color: black;
text-decoration: wavy;
font-size: 18px;
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif ;
}
.contact{
color: black;
font-size: 18px;
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif ;
}
.automotive-content{
color: white;
font-size: 22px;
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif ;
}
.vidhya{
color: white;
font-size: 21px;
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif ;
}
.vidhya-mail{
color:black;
font-size: 18px;
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif ;
text-decoration: wavy;
}
.designing{
Dept of Computer Hardware Engineering 73 GPTC Ezhukone,Kollam
PROJECT REPORT 2023 CAR ADVERTISMENT

color: white;
font-size: 22px;
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif ;
}
.christo{
color: white;
font-size: 21px;
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif ;
}
.christo-mail{
color: black;
font-size: 18px;
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif ;
text-decoration: wavy;
}
.footer-cars{
color: black;
font-size: 20px;
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif ;
}
.footer-bikes{
color: black;
font-size: 20px;
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif ;
}
.comparisions{
color: black;
font-size: 20px;
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif ;
}
.carso{
color: black;
font-size: 20px;
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif ;
Dept of Computer Hardware Engineering 74 GPTC Ezhukone,Kollam
PROJECT REPORT 2023 CAR ADVERTISMENT

}
.bikeso{
color: black;
font-size: 20px;
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif ;
}
.news:hover{
background-color:rgb(61, 61, 61);
}
.cars:hover{
background-color:rgb(61, 61, 61);
}
.bike:hover{
background-color:rgb(61, 61, 61);
}
.comparision:hover{
background-color:rgb(61, 61, 61);
}
.vidhya-mail:hover{
background-color:rgb(61, 61, 61);
}
.christo-mail:hover{
background-color:rgb(61, 61, 61);
}
@media only screen and (max-width: 540px){
html,body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
}
.front-image{
width: 100%;
Dept of Computer Hardware Engineering 75 GPTC Ezhukone,Kollam
PROJECT REPORT 2023 CAR ADVERTISMENT

height: 200px;
}
.brezzanew{
width: 99%;
}
.brezzanewpara{
font-size: 12px;
}
.venue2022{
width: 99%;
}
.venue2022para{
font-size: 12px;
}
.scorpio{
width: 99%;
}
.scorpiopara{
font-size: 12px;
}
.xl6{
width:99%;
}
.xl6para{
font-size: 12px;
}
.yezdi-roadster{
width: 99%;
}
.yezdiroadsterpara{
font-size: 12px;
}
.rolls-royce{
width: 99%;
Dept of Computer Hardware Engineering 76 GPTC Ezhukone,Kollam
PROJECT REPORT 2023 CAR ADVERTISMENT

}
.rollsroycepara{
font-size: 12px;
}
.re-scram{
width: 99%;
}
.rescrampara{
font-size: 12px;
}
.new-baleno{
width: 99%;
}
.newbalenopara{
font-size: 12px;
}
.yamaha-aerox{
width: 99%;
}
.yamahaaeroxpara{
font-size: 12px;
}
.kia-carens{
width: 99%;
}
.kiacarenspara{
font-size: 12px;
}
.skoda-slavia{
width: 99%;
}
.skodaslaviapara{
font-size: 12px;
}
Dept of Computer Hardware Engineering 77 GPTC Ezhukone,Kollam
PROJECT REPORT 2023 CAR ADVERTISMENT

.mgzs-ev{
width: 99%;
}
.mgzsevpara{
font-size: 12px;
}
.mt-15{
width: 99%;
}
.mt15para{
font-size: 12px;
}
.revolt-rv400{
width: 99%;
}
.revoltrv400para{
font-size: 12px;
}
.kia-ev6{
width: 99%;
}
.kiaev6para{
font-size: 12px;
}
.xl6para{
width: 99%;
}
.below-news-page{
height: 2550px;
width:100%;
justify-content: center;
}
.full-right{
flex-wrap: wrap;
Dept of Computer Hardware Engineering 78 GPTC Ezhukone,Kollam
PROJECT REPORT 2023 CAR ADVERTISMENT

height: 2550px;
}
.full-left{
flex-wrap: wrap;
height: 2550px;
}
.left{
width: 100%;
overflow-x: hidden;
height: 1250px;
}
.second-left{
width: 100%;
margin-left: 5px;
margin-top: 0px;
overflow-x: hidden;
height: 1300px;
}
.first-right{
width: 100%;
margin-left: 5px;
margin-right: 5px;
overflow-x: hidden;
height: 1200px;
}
.second-right{
width: 100%;
margin-left: 5px;
margin-right: 5px;
overflow-x: hidden;
height: 1200px;
margin-top: 0px;
}
.header{
Dept of Computer Hardware Engineering 79 GPTC Ezhukone,Kollam
PROJECT REPORT 2023 CAR ADVERTISMENT

width:100%;
height: 50px;
}
.auto-logo{
width: 55px;
margin-top: 5px;
height: 45px;
margin-left: 10px;
}
.image{
width: 45px;
height: 45px;
}
.auto-name{
width: 50px;
height: 45px;
margin-top: 15px;
}
.automate{
font-size: 20px;
}
.insta-face{
width: 70px;
height: 35px;
margin-top: 18px;
}
.insta-image{
width: 15px;
height: 15px;
}
.face-image{
width: 15px;
height: 15px;
}
Dept of Computer Hardware Engineering 80 GPTC Ezhukone,Kollam
PROJECT REPORT 2023 CAR ADVERTISMENT

.you-tube{
width: 15px;
height: 13px;
}
.below-news-page{
width: 100%;
}
.title-bar{
width: 100%;
}
.insta-face{
margin-left: 60px;
}
.footer-left{
width:60%;
height: 300px;

}
.footer-middle{
width:40% ;
height: 300px;
margin-left: 0px;
margin-right: 10px;

}
.footer-right{
display: none;
}
.footer{
height: 400px;
width: 100%;
}
.leftfooter-para{
font-size: 12px;
Dept of Computer Hardware Engineering 81 GPTC Ezhukone,Kollam
PROJECT REPORT 2023 CAR ADVERTISMENT

}
.about{
font-size: 15px;
}
.contact{
font-size: 15px;
}
.automotive-content{
font-size: 15px;
}
.vidhya{
font-size: 15px;
}
.vidhya-mail{
font-size: 12px;
}
.designing{
font-size: 15px;
}
.christo{
font-size: 15px;
}
.christo-mail{
font-size: 12px;
}
.footer-cars{
font-size: 15px;
}
.footer-bikes{
font-size: 15px;
}
.comparisions{
font-size: 15px;
}
Dept of Computer Hardware Engineering 82 GPTC Ezhukone,Kollam
PROJECT REPORT 2023 CAR ADVERTISMENT

.carso{
font-size: 15px;
}
.bikeso{
font-size: 15px;
}
.copyright{
margin-left: 0%;
font-size: 15px;
margin-left: 20px;
}
}
@media only screen and (min-width: 1240px){
html,body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
}
.footer{
width: 100%;
height: 400px;
}
.copy-right{
width: 100%;
}
.header{
width: 100%;
}
#title-bar{
width: 100%;
}
.below-news-page{
Dept of Computer Hardware Engineering 83 GPTC Ezhukone,Kollam
PROJECT REPORT 2023 CAR ADVERTISMENT

height: 1300px;
width:100%;
justify-content: center;
}
.front-image{
width: 100%;
}
}
@media only screen and (min-width: 1241px){
.footer{
width: 100%;
height: 400px;
}
.copy-right{
width: 100%;
}
.header{
width: 100%;
}
#title-bar{
width: 100%;
}
.below-news-page{
height: 1300px;
width:100%;
justify-content: center;
}
.front-image{
width: 100%;
}
}
@media only screen and (min-width: 1350px){
.footer{
width: 100%;
Dept of Computer Hardware Engineering 84 GPTC Ezhukone,Kollam
PROJECT REPORT 2023 CAR ADVERTISMENT

height: 400px;
}
.copy-right{
width: 100%;
}
.header{
width: 100%;
height: 95px;
}
#title-bar{
width: 100%;
}
.cayenne{
width:99%;
height: 250px;
}
.cayennepara{
overflow-wrap: break-word;
font-size: 22px;
}
.macan{
width: 99%;
height: 250px;
}
.macanpara{
font-size: 22px;
}
.porsche911{
width: 99%;
height: 250px;
}
.porsche911para{
font-size: 22px;
}
Dept of Computer Hardware Engineering 85 GPTC Ezhukone,Kollam
PROJECT REPORT 2023 CAR ADVERTISMENT

.porsche718{
width: 99%;
height: 250px;
}
.porsche718para{
font-size: 22px;
}
.taycan{
width: 99%;
height: 250px;
}
.taycanpara{
font-size: 22px;
}
.panamera{
width: 99%;
height: 250px;
}
.panamerapara{
font-size: 22px;
}
.taycancrossturismo{
width: 99%;
height: 250px;
}
.taycancrossturismopara{
font-size: 22px;
}
.cayennecoupe{
width: 99%;
height: 250px;
}
.cayennecoupepara{
font-size: 22px;
Dept of Computer Hardware Engineering 86 GPTC Ezhukone,Kollam
PROJECT REPORT 2023 CAR ADVERTISMENT

}
.insta-face{
margin-left: 750px;
}
.below-news-page{
height: 1300px;
width:100%;
justify-content: center;
}
.left{
width: 100%;
height:1150px;
}
.second-left{
width: 100%;
margin-left: 5px;
margin-top:63px;
height: 1000px;
}
.first-right{
width: 100%;
margin-left: 5px;
margin-right: 5px;
height: 1000px;
}
.second-right{
width: 100%;
margin-top:78px ;
margin-left: 5px;
margin-right: 5px;
height: 1000px;
}
.full-left{
height: 1150px;
Dept of Computer Hardware Engineering 87 GPTC Ezhukone,Kollam
PROJECT REPORT 2023 CAR ADVERTISMENT

}
.full-right{
height: 1150px;
}
.automate{
font-size:45px;
}
.image{
width: 75px;
height: 75px;
}
.insta-image{
width: 30px;
height: 30px;
}
.face-image{
width: 30px;
height: 30px;

}
.you-tube{
width: 30px;
height: 26px;
}
@media only screen and (min-width: 1800px){
.insta-face{
margin-left: 1000px;
}
.cayenne{
width:99%;
height: 250px;
}
.cayennepara{
overflow-wrap: break-word;
Dept of Computer Hardware Engineering 88 GPTC Ezhukone,Kollam
PROJECT REPORT 2023 CAR ADVERTISMENT

font-size: 22px;
}
.macan{
width: 99%;
height: 250px;
}
.macanpara{
font-size: 22px;
}
.porsche911{
width: 99%;
height: 250px;
}
.porsche911para{
font-size: 22px;
}
.porsche718{
width: 99%;
height: 250px;
}
.porsche718para{
font-size: 22px;
}
.taycan{
width: 99%;
height: 250px;
}
.taycanpara{
font-size: 22px;
}
.panamera{
width: 99%;
height: 250px;
}
Dept of Computer Hardware Engineering 89 GPTC Ezhukone,Kollam
PROJECT REPORT 2023 CAR ADVERTISMENT

.panamerapara{
font-size: 22px;
}
.taycancrossturismo{
width: 99%;
height: 250px;
}
.taycancrossturismopara{
font-size: 22px;
}
.cayennecoupe{
width: 99%;
height: 250px;
}
.cayennecoupepara{
font-size: 22px;
}
.header{
height: 100px;
}
.image{
width: 80px;
height: 80px;
}
.automate{
font-size: 45px;
}
.full-left{
height: 1150px;
}
.full-right{
height: 1150px;
}
}
Dept of Computer Hardware Engineering 90 GPTC Ezhukone,Kollam
PROJECT REPORT 2023 CAR ADVERTISMENT

@media only screen and (min-width: 2200px){

.insta-face{
margin-left: 1300px;
}
.cayenne{
width:99%;
height: 250px;
}
.cayennepara{
overflow-wrap: break-word;
font-size: 22px;
}
.macan{
width: 99%;
height: 280px;
}
.macanpara{
font-size: 22px;
}
.porsche911{
width: 99%;
height: 280px;
}
.porsche911para{
font-size: 22px;
}
.porsche718{
width: 99%;
height: 280px;
}
.porsche718para{
font-size: 22px;
}
.taycan{
Dept of Computer Hardware Engineering 91 GPTC Ezhukone,Kollam
PROJECT REPORT 2023 CAR ADVERTISMENT

width: 99%;
height: 280px;
}
.taycanpara{
font-size: 22px;
}
.panamera{
width: 99%;
height: 250px;
}
.panamerapara{
font-size: 22px;
}
.taycancrossturismo{
width: 99%;
height: 250px;
}
.taycancrossturismopara{
font-size: 22px;
}
.cayennecoupe{
width: 99%;
height: 250px;
}
.cayennecoupepara{
font-size: 22px;
}
}
@media only screen and (min-width: 2500px){
.insta-face{
margin-left: 1500px;
}
.cayenne{
width:99%;
Dept of Computer Hardware Engineering 92 GPTC Ezhukone,Kollam
PROJECT REPORT 2023 CAR ADVERTISMENT

height: 300px;
}
.cayennepara{
overflow-wrap: break-word;
font-size: 22px;
}
.macan{
width: 99%;
height: 300px;
}
.macanpara{
font-size: 22px;
}
.porsche911{
width: 99%;
height: 300px;
}
.porsche911para{
font-size: 22px;
}
.porsche718{
width: 99%;
height: 300px;
}
.porsche718para{
font-size: 22px;
}
.taycan{
width: 99%;
height: 300px;
}
.taycanpara{
font-size: 22px;
}
Dept of Computer Hardware Engineering 93 GPTC Ezhukone,Kollam
PROJECT REPORT 2023 CAR ADVERTISMENT

.panamera{
width: 99%;
height: 300px;
}
.panamerapara{
font-size: 22px;
}
.taycancrossturismo{
width: 99%;
height: 300px;
}
.taycancrossturismopara{
font-size: 22px;
}
.cayennecoupe{
width: 99%;
height: 300px;
}
.cayennecoupepara{
font-size: 22px;
}
}
</style>

</body></html>

Dept of Computer Hardware Engineering 94 GPTC Ezhukone,Kollam