A MICRO PROJECT REPORT

ON

“ COLLAGE WEBSITE ”

SUBMITTED BY

Kurandale Chaitanya Laxaman

UNDER THE GUIDANCE OF

Prof. Pawar T.S.

In partial fulfillment for the award

Of

DIPLOMA IN COMPUTER ENGINEERING

Sanjivani Pratisthan’s

S. P. I. T. POLYTECHNIC, KURUND

2023 – 2024
 Sanjivani Pratisthan’s
S. P. I. T. POLYTECHNIC, KURUND

CERTIFICATE
This is to certify that a micro project work entitled

“ COLLAGE WEBSITE ”

is bonafide work carried out by following students

Name of Student Enrollment Number

Kurandale Chaitanya Laxaman 2211720159

in partial fulfillment for the award of “Diploma in Computer Engineering” during

the year 2023-24 as required by the Maharashtra State Board of Technical Education,
Mumbai. The micro project report has been approved as it satisfies the academic
requirements in respect of micro project work prescribed by MSBTE, Mumbai.

Place: Kurund, Ahmednagar.

Date: / / 2023

Project Guide Head of Department Principal

(Prof. Pawar T.S.) (Prof. Pawar T. S.) (Prof. Kapse S. D.)
ACKNOWLEDGEMENT
We express our sincere gratitude to Mrs. Pawar T.S. for their kind cooperation for
the Project implementation. A special thanks to Prof. Pawar T.S. for stimulating
suggestions and encouragement, which helped me to complete my Micro Project
especially in writing this report. I would also like to acknowledge with much
appreciation the crucial role of the staff of Computer Department, who gave the
permission to use all required resource and the necessary material to complete this
report.
 CERTIFICATE

This is to certify that Software Engineering project report entitled "

COLLAGE WEBSITE " is the work carried out Kurandale Chaitanya

Laxaman students of Diploma in Computer Engineering V Semester,

S.P.I.T.Polytechnic,kurund under the supervision of Prof. Pawar T.S.

This report has not been submitted to any other organization/institution

for the award any other degree/diploma.

 Abstract

In the present times Internet and automation is one of the vital things which we want
to adopt for efficiently. College website consists of many webpages and implement
different kinds of menus and scrollbars. In this we have implemented dynamic menus
and done the styling and validation part using JavaScript. Java Script is always one of
the languages which seems to be the best option for validation in webpages like form
validation, menu validation, events validations etc. A college management system
enables colleges and higher education to manage enrollment, admissions, students,
faculty, attendance, fees, scheduling, assignments, grades and library of the
institution. The College ERP allows you to manage the entire academic and
administrative processes hassle free. Each pages are interlinked to each other. When
we click on the particular menus it will redirect to corresponding pages according to
the specified destination.
 Introduction

Client-side scripting is changing interface behaviors within a specific web

page in response to mouse or keyboard actions, or at specified timing
events. In this case, the dynamic behavior occurs within the presentation.
The client- side content is generated on the user's local computer system.

Such web pages use presentation technology called rich interfaced pages.
Client-side scripting languages like JavaScript or Action Script, used for
Dynamic HTML (DHTML) and Flash technologies respectively, are
frequently used to orchestrate media types (sound, animations, changing
text, etc.) of the presentation. Client-side scripting also allows the use of
remote scripting, a technique by which the DHTML page requests
additional information from a server, using a hidden frame, XML Http
Requests, or a Web service.

In our project we have developed a website in which we have create few

pages for our Institute website in which we have created various web
pages of different functions. Main aspect of this website is to validate the
menu bars and redirect the pages according to the menus.

We have created pages like home, About, Facilities, Contact and Gallery.
Form validation normally used to occur at the server, after the client had
entered all the necessary data and then pressed the Submit button. If the
data entered by a client was incorrect or was simply missing, the server
would have to send all the data back to the client and request that the
form be resubmitted with correct information. This was really a lengthy
process which used to put a lot of burden on the server.

We have used HTML (Hyper Text Markup Language) for our front end
design. For backup functions we have used PHP language and Java Script
for form validation. Why is this necessary to create this kind of website to
improve the experience the students and to improve the user experience
we have used or create or separate sections and in different sections we
have used different elements of java script?
Pull down menus is a kind of menu in which you have defined a menu in
which one menu and after that sub menu is created. In poll down menu
one is the main menu and the others are the sub menu. When we do
mouse over the menu tab then instantly it displays the sub menu items
just below the main menu. We have done validation in the menu like in
which we have validate the menu like one click and double click.

Dynamically changing the menu means the items present in the menu are
changing automatically. Following is a JavaScript example in which two
menus are placed – one for category of students in the class and other
names of facilities in the college website.

In this website we are solving a very common problem – The common

problem that user normally creates is – he/she forgets to select particular
item from the menu and if such item is required for processing further
then it creates severe problem.

We have developed different menu section like floating menu, pop up

menu, sliding menu etc.

The popup menu contains lower level menu items that are associated with
the top-level menu item. The pop menu appears as you move mouse over
each menu items. Sometimes there is limited space on the web page for
displaying all the menu options. Then in such case only limited menu
options are displayed and remaining options can be accessed by scrolling
left or right.
 Implementation
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>S.P.I.T.Polytechnic,kurund</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<meta content="Free HTML Templates" name="keywords" />
<meta content="Free HTML Templates" name="description" />

<!-- Favicon -->

<link href="img/favicon.ico" rel="icon" />

<!-- Google Web Fonts -->

<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=Handlee&family=Nunito&display=swap"
rel="stylesheet"/>

<!-- Font Awesome -->

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css"
rel="stylesheet" />

<!-- Flaticon Font -->

<link href="lib/flaticon/font/flaticon.css" rel="stylesheet" />

<!-- Libraries Stylesheet -->

<link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet" />
<link href="lib/lightbox/css/lightbox.min.css" rel="stylesheet" />

<!-- Customized Bootstrap Stylesheet -->

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

<body>
<!-- Navbar Start -->
<div class="container-fluid bg-light position-relative shadow">
<nav class="navbar navbar-expand-lg bg-light navbar-light py-3 py-lg-0 px-0 px-lg-5">
<a href="" class="navbar-brand font-weight-bold text-secondary"style="font-size: 50px">
<img src="C:\Users\asmit\OneDrive\Documents\ProAzure_CK\S.P.I.T.
College,Kurund\kidkinder-1.0.0\img\download.jpg "width="180" height="170">
<span class="text-primary">S.P.I.T.Polytechnic,kurund</span></a>
<button type="button"class="navbar-toggler"data-toggle="collapse"
data-target="#navbarCollapse" >
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-between"id="navbarCollapse" >
<div class="navbar-nav font-weight-bold mx-auto py-0">
<a href="index.html" class="nav-item nav-link active">Home</a>
<a href="about.html" class="nav-item nav-link">About</a>
<a href="department.html" class="nav-item nav-link">Department</a>
<a href="staff.html" class="nav-item nav-link">Staff</a>
<a href="admission.html" class="nav-item nav-link">Admission</a>
<a href="activity.html" class="nav-item nav-link">Activity</a>
<a href="contact.html" class="nav-item nav-link">Contact</a>
 </div>
</div>
</nav>
</div>
<!-- Navbar End -->

<!-- Header Start -->

<div class="container-fluid bg-primary px-0 px-md-5 mb-5">
<div class="row align-items-center px-3">
<div class="col-lg-6 text-center text-lg-left">
<h1 class="text-white mb-4 mt-5 mt-lg-0">Sanjivani Pratisthan's</h1>
<h1 class="display-3 font-weight-bold text-white">S.P.I.T. Polytechnic </h1>
<p class="text-white mb-4">
Shirur-Nighoj Road,At-Kurund,Post-Ralegan
Therpal,Tal-Parner,Dist-Ahmednagar,PIN-414306
Website:spitpolytechnic.com,E-mail:[email protected],Phone:02487-
212631,9420726405</p>
<a href="" class="btn btn-secondary mt-1 py-3 px-5"> More Information</a><br><br>
</div>
<div class="col-lg-6 text-center text-lg-right">
<img src="C:\Users\asmit\OneDrive\Documents\ProAzure_CK\S.P.I.T.
College,Kurund\kidkinder-1.0.0\img\download (1).jpg" width="700" height="300">
</div>
</div>
</div>
<!-- Header End -->

<!-- Facilities Start -->

<div class="container-fluid pt-5">
<div class="container pb-3">
<div class="row">
<div class="col-lg-4 col-md-6 pb-1">
<divclass="d-flex bg-light shadow-sm border-top rounded mb-4"style="padding: 50px">
<i class=".flaticon-028-kindergarten"></i>
<div class="pl-4">
<h4>S.P.I.T.College & Campus</h4>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 pb-1">
<div class="d-flex bg-light shadow-sm border-top rounded mb-4"style="padding: 50px">
<i class=".flaticon-028-kindergarten"></i>
<div class="pl-4">
<h4>Computer Lab & Workshop</h4>
<p class="m-0"></p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 pb-1">
<divclass="d-flex bg-light shadow-sm border-top rounded mb-4"style="padding: 50px">
<i class=""></i>
<div class="pl-4">
<h4>Sport & Cultural</h4>
<p class="m-0"></p>
</div>
</div>
</div>
</div>
</div>
</div>
 <!-- About Start -->
<div class="container-fluid py-5">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-5">
<img src="C:\Users\asmit\OneDrive\Documents\ProAzure_CK\S.P.I.T.
College,Kurund\kidkinder-1.0.0\img\download (2).jpg" width="450" height="250" />
</div>
<div class="col-lg-7">
<p class="section-title pr-5">
<span class="pr-2"></span>
</p>
<h1 class="mb-4">Best College For Your Student</h1>
<p>
From the 6th semester, students become eligible for campus placement. We recently visited
Infosys and tried for more if we got more opportunities we liked to go. The highest package in our
college is 20 lakh per Annum and at least 2 lakhs per annum. The percentage of students getting
placements is 60% but we expect this year more. I am planning for us after taking my degree.
</p>
<div class="row pt-2 pb-4">
<div class="col-6 col-md-4">
<img src="C:\Users\asmit\OneDrive\Documents\ProAzure_CK\S.P.I.T.
College,Kurund\kidkinder-1.0.0\img\download (3).jpg" width="220" height="170">
</div>
<div class="col-6 col-md-8">
<ul class="list-inline m-0">
<li class="py-2 border-top border-bottom">
<i class="fa fa-check text-primary mr-3"></i>Labore eos amet dolor amet diam</li>
<li class="py-2 border-bottom">
<i class="fa fa-check text-primary mr-3"></i>Etsea et sit dolor amet ipsum </li>
<li class="py-2 border-bottom">
<i class="fa fa-check text-primary mr-3"></i>Diam dolor diam elitripsum vero.</li>
</ul>
</div>
</div>
<a href="" class="btn btn-primary mt-2 py-2 px-4">More Information</a>
</div>
</div>
</div>
</div>
<!-- About End -->

<!-- Class Start -->

<div class="container-fluid pt-5">
<div class="container">
<div class="text-center pb-2">
<p class="section-title px-5">
<span class="px-2">Popular Deparment</span>
</p>
<h1 class="mb-4">Imformtion All Departments</h1>
</div>
<div class="row">
<div class="col-lg-4 mb-5">
<div class="card border-0 bg-light shadow-sm pb-2">
<img src="C:\Users\asmit\OneDrive\Documents\ProAzure_CK\S.P.I.T.
College,Kurund\kidkinder-1.0.0\img\civil.jpg">
<div class="card-body text-center">
<h4 class="card-title">Civil Engineering</h4>
<p class="card-text">
Justo ea diam stet diam ipsum no sit, ipsum vero et et diam
ipsum duo et no et, ipsum ipsum erat duo amet clita duo
 </p>
</div>
<div class="card-footer bg-transparent py-4 px-5">
<div class="row border-bottom">
<div class="col-6 py-1 text-right border-right">
<strong>Age of Student</strong>
</div>
<div class="col-6 py-1">15-23 Years</div>
</div>
<div class="row border-bottom">
<div class="col-6 py-1 text-right border-right">
<strong>Total Seats</strong>
</div>
<div class="col-6 py-1">64 Seats</div>
</div>
<div class="row border-bottom">
<div class="col-6 py-1 text-right border-right">
<strong>College Time</strong>
</div>
<div class="col-6 py-1">09:30 - 4:30</div>
</div>
<div class="row">
<div class="col-6 py-1 text-right border-right">
<strong>College Fee</strong>
</div>
<div class="col-6 py-1">Rupee 20000/Years</div>
</div>
</div>
<a href="" class="btn btn-primary px-4 mx-auto mb-4">Join Now</a>
</div>
</div>
<div class="col-lg-4 mb-5">
<div class="card border-0 bg-light shadow-sm pb-2">
<img src="C:\Users\asmit\OneDrive\Documents\ProAzure_CK\S.P.I.T.
College,Kurund\kidkinder-1.0.0\img\computer.jpg"/>
<div class="card-body text-center">
<h4 class="card-title">Computer Engineering</h4>
<p class="card-text">
Justo ea diam stet diam ipsum no sit, ipsum vero et et diam
ipsum duo et no et, ipsum ipsum erat duo amet clita duo
</p>
</div>
<div class="card-footer bg-transparent py-4 px-5">
<div class="row border-bottom">
<div class="col-6 py-1 text-right border-right">
<strong>Age of Student</strong>
</div>
<div class="col-6 py-1">15-23 Years</div>
</div>
<div class="row border-bottom">
<div class="col-6 py-1 text-right border-right">
<strong>Total Seats</strong>
</div>
<div class="col-6 py-1">64 Seats</div>
</div>
<div class="row border-bottom">
<div class="col-6 py-1 text-right border-right">
<strong>College Time</strong>
</div>
<div class="col-6 py-1">9:30 - 4:30</div>
</div>
 <div class="row">
<div class="col-6 py-1 text-right border-right">
<strong>College Fee</strong>
</div>
<div class="col-6 py-1">Rupee 20000/Years</div>
</div>
</div>
<a href="" class="btn btn-primary px-4 mx-auto mb-4">Join Now</a>
</div>
</div>
<div class="col-lg-4 mb-5">
<div class="card border-0 bg-light shadow-sm pb-2">
<img class="card-img-top mb-2"
src="C:\Users\asmit\OneDrive\Documents\ProAzure_CK\S.P.I.T. College,Kurund\kidkinder-
1.0.0\img\mm1.jpg" alt="" />
<div class="card-body text-center">
<h4 class="card-title">Machanical Engineering</h4>
<p class="card-text">
Justo ea diam stet diam ipsum no sit, ipsum vero et et diam
ipsum duo et no et, ipsum ipsum erat duo amet clita duo
</p>
</div>
<div class="card-footer bg-transparent py-4 px-5">
<div class="row border-bottom">
<div class="col-6 py-1 text-right border-right">
<strong>Age of Student</strong>
</div>
<div class="col-6 py-1">15 - 23 Years</div>
</div>
<div class="row border-bottom">
<div class="col-6 py-1 text-right border-right">
<strong>Total Seats</strong>
</div>
<div class="col-6 py-1">64 Seats</div>
</div>
<div class="row border-bottom">
<div class="col-6 py-1 text-right border-right">
<strong>College Time</strong>
</div>
<div class="col-6 py-1">9:30 - 4:30</div>
</div>
<div class="row">
<div class="col-6 py-1 text-right border-right">
<strong>College Fee</strong>
</div>
<div class="col-6 py-1">Rupee 20000/Years</div>
</div>
</div>
<a href="" class="btn btn-primary px-4 mx-auto mb-4">Join Now</a>
</div>
</div>
<div class="col-lg-4 mb-5">
<div class="card border-0 bg-light shadow-sm pb-2">
<img class="card-img-top mb-2"
src="C:\Users\asmit\OneDrive\Documents\ProAzure_CK\S.P.I.T. College,Kurund\kidkinder-
1.0.0\img\EN1.jpg" alt="" />
<div class="card-body text-center">
<h4 class="card-title">Eletrical Engineering</h4>
<p class="card-text">
Justo ea diam stet diam ipsum no sit, ipsum vero et et diam
ipsum duo et no et, ipsum ipsum erat duo amet clita duo
 </p>
</div>
<div class="card-footer bg-transparent py-4 px-5">
<div class="row border-bottom">
<div class="col-6 py-1 text-right border-right">
<strong>Age of Student</strong>
</div>
<div class="col-6 py-1">15 - 23 Years</div>
</div>
<div class="row border-bottom">
<div class="col-6 py-1 text-right border-right">
<strong>Total Seats</strong>
</div>
<div class="col-6 py-1">64 Seats</div>
</div>
<div class="row border-bottom">
<div class="col-6 py-1 text-right border-right">
<strong>College Time</strong>
</div>
<div class="col-6 py-1">9:30 - 4:30</div>
</div>
<div class="row">
<div class="col-6 py-1 text-right border-right">
<strong>college Fee</strong>
</div>
<div class="col-6 py-1">Rupee 20000/Years</div>
</div>
</div>
<a href="" class="btn btn-primary px-4 mx-auto mb-4">Join Now</a>
</div>
</div>
</div>
</div>
</div>
<!-- Class End -->

<!-- Registration Start -->

<div class="container-fluid py-5">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-7 mb-5 mb-lg-0">
<p class="section-title pr-5">
<span class="pr-2">Registration</span>
</p>
<h1 class="mb-4">Register Now</h1>
<p>

<div class="col-lg-5">
<div class="card border-0">
<div class="card-header bg-secondary text-center p-4">
<h1 class="text-white m-0">Registration</h1>
</div>
<div class="card-body rounded-bottom bg-primary p-5">
<form>
<div class="form-group">
<input type="text"class="form-control border-0 p-4"placeholder="Your Fullname"
required="required" />
</div>
<div class="form-group">
<input type="email" class="form-control border-0 p-4"placeholder="Your Email"
required="required"/>
 </div>
<div class="form-group">
<input class="form-control border-0 p-4"placeholder="Phone No."required="required"/>
</div>
<div class="form-group">
<select class="custom-select border-0 px-4"style="height: 48px";>
<option selected>Select A Department</option>
<option value="1">Civil Engineering</option>
<option value="2">Computer Engineering</option>
<option value="3">Machanical Engineering</option>
<option value="4">Eletrical Engineering</option>
</select>
</div>
<div>
<button class="btn btn-secondary btn-block border-0 py-3" type="submit">Register
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Registration End -->

<!-- Team Start -->

<div class="container-fluid pt-5">
<div class="container">
<div class="text-center pb-2">
<p class="section-title px-5">
<span class="px-2">Our Staff</span>
</p>
<h1 class="mb-4">Meet Our Staff</h1>
</div>
<div class="row">
<div class="col-md-6 col-lg-3 text-center team mb-5">
<div class="position-relative overflow-hidden mb-4"style="border-radius: 100%" >
<img src="C:\Users\asmit\OneDrive\Documents\ProAzure_CK\S.P.I.T.
College,Kurund\kidkinder-1.0.0\img\HOD_COM (1).jpg" height="300" width="250" />
div class="team-social d-flex align-items-center justify-content-center w-100 h-100 position-
absolute">
<a class="btn btn-outline-light text-center mr-2 px-0" style="width: 38px; height: 38px"
href="#"><i class="fab fa-twitter"></i></a>
<a class="btn btn-outline-light text-center mr-2 px-0"style="width: 38px; height: 38px"
href="#"><i class="fab fa-facebook-f"></i></a>
<a class="btn btn-outline-light text-center px-0"style="width: 38px; height: 38px"
href="#"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
<h4>P.A.Pawar</h4>
<i>HOD Of Computre Engineering</i>
</div>
<div class="col-md-6 col-lg-3 text-center team mb-5">
<div class="position-relative overflow-hidden mb-4"style="border-radius: 100%">
<img src="C:\Users\asmit\OneDrive\Documents\ProAzure_CK\S.P.I.T.
College,Kurund\kidkinder-1.0.0\img\IMG_1945 (1).jpg" height="300" width="250" />
<div class="team-social d-flex align-items-center justify-content-center w-100 h-100 position-
absolute">
<a class="btn btn-outline-light text-center mr-2 px-0"style="width: 38px; height: 38px"
href="#"><i class="fab fa-twitter"></i></a>
 <a class="btn btn-outline-light text-center mr-2 px-0"style="width: 38px; height: 38px"
href="#"><i class="fab fa-facebook-f"></i></a>
<a class="btn btn-outline-light text-center px-0"style="width: 38px; height: 38px"
href="#"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
<h4>Jhon Doe</h4>
<i>HOD Of Civil Engineering</i>
</div>
<div class="col-md-6 col-lg-3 text-center team mb-5">
<div class="position-relative overflow-hidden mb-4"style="border-radius: 100%">
<img src="C:\Users\asmit\OneDrive\Documents\ProAzure_CK\S.P.I.T.
College,Kurund\kidkinder-1.0.0\img\IMG_1950 (2).jpg" height="300" width="250" />
<div class="team-social d-flex align-items-center justify-content-center w-100 h-100 position-
absolute">
<a class="btn btn-outline-light text-center mr-2 px-0"style="width: 38px; height: 38px"
href="#" ><i class="fab fa-twitter"></i ></a>
<a class="btn btn-outline-light text-center mr-2 px-0"style="width: 38px; height: 38px"
href="#"><i class="fab fa-facebook-f"></i></a>
<a class="btn btn-outline-light text-center px-0"style="width: 38px; height: 38px"
href="#" ><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
<h4>Mollie Ross</h4>
<i>HOD Of Machanical Engineering</i>
</div>
<div class="col-md-6 col-lg-3 text-center team mb-5">
<div class="position-relative overflow-hidden mb-4"style="border-radius: 100%">
<img src="C:\Users\asmit\OneDrive\Documents\ProAzure_CK\S.P.I.T.
College,Kurund\kidkinder-1.0.0\img\HOD_EG.jpg" height="300" width="250" />
<div class="team-social d-flex align-items-center justify-content-center w-100 h-100 position-
absolute">
<a class="btn btn-outline-light text-center mr-2 px-0"style="width: 38px; height: 38px"
href="#"><i class="fab fa-twitter"></i></a>
<a class="btn btn-outline-light text-center mr-2 px-0"style="width: 38px; height: 38px"
href="#"><i class="fab fa-facebook-f"></i></a>
<a class="btn btn-outline-light text-center px-0"style="width: 38px; height: 38px"
href="#"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
<h4>Donald John</h4>
<i>HOD Of Eletrical Engineering</i>
</div>
</div>
</div>
</div>
<!-- Team End -->

<!-- Footer Start -->

<div class="container-fluid bg-secondary text-white mt-5 py-5 px-sm-3 px-md-5">
<div class="row pt-5">
<div class="col-lg-3 col-md-6 mb-5">
<a href=""class="navbar-brand font-weight-bold text-secondary"style="font-size: 30px">
<img src="C:\Users\asmit\OneDrive\Documents\ProAzure_CK\S.P.I.T.
College,Kurund\kidkinder-1.0.0\img\download.jpg "width="100" height="80">
<span class="text-primary">S.P.I.T.Polytechnic</span>
</a>
<p>
Labore dolor amet ipsum ea, erat sit ipsum duo eos. Volup amet ea
dolor et magna dolor, elitr rebum duo est sed diam elitr. Stet elitr
stet diam duo eos rebum ipsum diam ipsum elitr.
 </p>
<div class="d-flex justify-content-start mt-4">
<a class="btn btn-outline-primary rounded-circle text-center mr-2 px-0"style="width: 38px;
height: 38px"href="#"><i class="fab fa-twitter"></i></a>
<a class="btn btn-outline-primary rounded-circle text-center mr-2 px-0"style="width: 38px;
height: 38px"href="#"><i class="fab fa-facebook-f"></i></a>
<a class="btn btn-outline-primary rounded-circle text-center mr-2 px-0"style="width: 38px;
height: 38px"href="#"><i class="fab fa-linkedin-in"></i></a>
<a class="btn btn-outline-primary rounded-circle text-center mr-2 px-0"style="width: 38px;
height: 38px"href="#"><i class="fab fa-instagram"></i></a>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-5">
<h3 class="text-primary mb-4">Get In Touch</h3>
<div class="d-flex">
<h4 class="fa fa-map-marker-alt text-primary"></h4>
<div class="pl-3">
<h5 class="text-white">Address</h5>
<p> Shirur-Nighoj Road,At-Kurund,Post-Ralegan Therpal,Tal-Parner,Dist-Ahmednagar,PIN-
414306</p>
</div>
</div>
<div class="d-flex">
<h4 class="fa fa-envelope text-primary"></h4>
<div class="pl-3">
<h5 class="text-white">Email</h5>
<p>[email protected]</p>
</div>
</div>
<div class="d-flex">
<h4 class="fa fa-phone-alt text-primary"></h4>
<div class="pl-3">
<h5 class="text-white">Phone</h5>
<p>02487-212631,9420726405</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-5">
<h3 class="text-primary mb-4">Quick Links</h3>
<div class="d-flex flex-column justify-content-start">
<a class="text-white mb-2" href="#"><i class="fa fa-angle-right mr-2"></i>Home</a>
<a class="text-white mb-2" href="#"><i class="fa fa-angle-right mr-2"></i>About Us</a>
<a class="text-white mb-2" href="#"><i class="fa fa-angle-right mr-2"></i>Department</a>
<a class="text-white mb-2" href="#"><i class="fa fa-angle-right mr-2"></i>Staff</a>
<a class="text-white mb-2" href="#"><i class="fa fa-angle-right mr-2"></i>Admission</a>
<a class="text-white mb-2" href="#"><i class="fa fa-angle-right mr-2"></i>Activity</a>
<a class="text-white" href="#"><i class="fa fa-angle-right mr-2"></i>Contact Us</a>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-5">
<h3 class="text-primary mb-4">Newsletter</h3>
<form action="">
<div class="form-group">
<input type="text"class="form-control border-0 py-4"placeholder="Your
Name"required="required"/>
</div>
<div class="form-group">
<input type="email"class="form-control border-0 py-4"placeholder="Your
Email"required="required"/>
</div>
<div>
 <button class="btn btn-primary btn-block border-0 py-3"type="submit">Submit Now
</button>
</div>
</form>
</div>
</div>
<div class="container-fluid pt-5"style="border-top: 1px solid rgba(23, 162, 184, 0.2) ;">
<p class="m-0 text-center text-white">
&copy;
<a class="text-primary font-weight-bold" href="#">Your Site Name</a>.
All Rights Reserved.

<!--/*** This template is free as long as you keep the footer author’s credit link/attribution
link/backlink. If you'd like to use the template without the footer author’s credit link/attribution
link/backlink, you can purchase the Credit Removal License from "https://htmlcodex.com/credit-
removal". Thank you for your support. ***/-->
Designed by
<a class="text-primary font-weight-bold" href="https://htmlcodex.com">HTML Codex</a>
<br />Distributed By:
<a href="https://themewagon.com" target="_blank">ThemeWagon</a>
</p>
</div>
</div>
<!-- Footer End -->

<!-- Back to Top -->

<a href="#" class="btn btn-primary p-3 back-to-top"><i class="fa fa-angle-double-up"></i></a>

<!-- JavaScript Libraries -->

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<scriptsrc="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
<script src="lib/easing/easing.min.js"></script>
<script src="lib/owlcarousel/owl.carousel.min.js"></script>
<script src="lib/isotope/isotope.pkgd.min.js"></script>
<script src="lib/lightbox/js/lightbox.min.js"></script>

<!-- Contact Javascript File -->

<script src="mail/jqBootstrapValidation.min.js"></script>
<script src="mail/contact.js"></script>

<!-- Template Javascript -->

<script src="js/main.js"></script>
</body>
</html>
OUTPUT:
 Conclusion

We have concluded that we have created a college website in which we have

developed different sections in which we have used different menu elements and form
and done form validation with the use of Java Script. We have created students
information menus in which all the recent event is mentioned. We have developed a
list down menu to select the department like computer department, civil department,
and mechanical department and so on.