Scribd
Upload
0 views25 pages

CSS microproject

The document certifies the completion of a project titled 'College Management System' by students of Bharti Vidyapeeth Institute of Technology, under the guidance of Mrs. Asmita Jagatap, as part of their Diploma in Information Technology. The College Management System aims to streamline various administrative and academic tasks within educational institutions, enhancing efficiency in managing student enrollment, attendance, grades, and other resources. The document also includes a program code and descriptions of the system's features, courses offered, campus facilities, and student testimonials.

Uploaded by

Mayank Naik
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0 views25 pages

CSS microproject

The document certifies the completion of a project titled 'College Management System' by students of Bharti Vidyapeeth Institute of Technology, under the guidance of Mrs. Asmita Jagatap, as part of their Diploma in Information Technology. The College Management System aims to streamline various administrative and academic tasks within educational institutions, enhancing efficiency in managing student enrollment, attendance, grades, and other resources. The document also includes a program code and descriptions of the system's features, courses offered, campus facilities, and student testimonials.

Uploaded by

Mayank Naik
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 25

BHARTI VIDYAPEETH INSTITUTE OF TECHNOLOGY

Sector-7, C.B.D. Belapur, Navi Mumbai

Certificate
This is to certify that the report of project entitled,

“COLLAGE MANAGEMENT SYSTEM”

Submitted by:
2100270146 3525 Samarth Arote
2100270051 3526 Varsha Raut
2100270177 3527 Krupali Wayal
2200270646 3528 Aryan Patil
To The
MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION
In partial fulfillment of the requirement of the Course of

DIPLOMA IN INFORMATION TECHNOLOGY


Has been satisfactorily carried out under the guidance of

MRS. ASMITA JAGATAP


In SEM V during the academic year 2023

~1~
INTRODUCTION
A College Management System is a comprehensive software platform or
application designed to streamline and automate various administrative
and academic tasks within an educational institution, specifically focused
on colleges and universities. It serves as an integrated system to manage
and coordinate a wide range of functions, including student enrollment,
class scheduling, attendance tracking, grade management, faculty and
staff management, library management, financial transactions, and more.
College Management Systems facilitate efficient information
management, data analysis, and reporting, helping college
administrators, faculty, and students access and process vital data with
ease. These systems enhance the overall efficiency and effectiveness of
college operations, making it easier to monitor student progress,
maintain academic records, and manage resources while enabling
institutions to adapt to the demands of the digital age in education. They
play a pivotal role in modernizing and optimizing the administrative and
educational processes within colleges, resulting in improved productivity
and data accuracy.

~2~
PROGRAM CODE
<!DOCTYPE html>

<html>

<head>

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

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

<script src="script.js"></script>

<link rel="preconnect" href="https://fonts.googleapis.com">

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link href="https://fonts.googleapis.com/css2?
family=Poppins:ital,wght@1,500&display=swap" rel="stylesheet">

<title>College Management System</title>

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

</head>

<body id="home">

<h1>Welcome to the College Management System</h1>

<ul>

<!-- <li><a href="/students">Students</a></li> --->

<!--- <li><a href="/courses">Courses</a></li> --->

</ul>

<section class="header">

<nav>

<a href="index.html"><img src="./images/eduford_img/logo.png"></a>

~3~
<div class="nav-links">

<ul>

<li><a href="/" onclick="showSection('home')">Home</a></li>

<li><a href="#about" onclick="showSection('about')">About</a></li>

<li><a href="/course-form" onclick="showSection('course-form')">Courses</a></li>

<li><a href="/student-form" onclick="showSection('blog')">Students</a></li>

<li><a href="#contact" onclick="showSection('contact')">Contact</a></li>

</ul>

</div>

</nav>

<div class="text-box">

<h1>India's greatest Collage</h1>

<p>BVCOE B. Tech ranking by IIRF is 60 out of 173 colleges in India in 2022.</p>

<p class="p2">The average salary package offered is 4 LPA to 5 LPA and the highest
salary package offered is 8 LPA to 10 LPA.<br>Almost 80% to 90% of students are placed in this
course. Infrastructure: The infrastructure of this college is good</p>

<a href="http://iotmumbai.bharatividyapeeth.edu/" class="hero-btn">Visit to know


more</a>

</div>

</section>

<!--cousrse disign-->

<section class="course" id="courses">

<h1>Courses offered by collage(BVIT) </h1>

<p>here the course is very good so you can choose the one course from here</p>

~4~
<div class="row">

<div class="course-col">

<h3>Intermediate</h3>

<p>A paragraph is a series of sentences that are organized and coherent, and are all
related to a single topic. Almost every piece of writing you do that is longer than a few
sentences should be organized into paragraphs. This is because paragraphs show a reader
where the subdivisions of an essay begin and end, and thus help the reader see the
organization of the essay and grasp its main points.</p>

</div>

<div class="course-col">

<a href="/diploma"><h3>Diploma</h3> </a>

<p>A paragraph is a series of sentences that are organized and coherent, and are all
related to a single topic. Almost every piece of writing you do that is longer than a few
sentences should be organized into paragraphs. This is because paragraphs show a reader
where the subdivisions of an essay begin and end, and thus help the reader see the
organization of the essay and grasp its main points.</p>

</div>

<div class="course-col">

<a href="/post-graduate-form"><h3>Post Graduate</h3></a>

<p>A paragraph is a series of sentences that are organized and coherent, and are all
related to a single topic. Almost every piece of writing you do that is longer than a few
sentences should be organized into paragraphs. This is because paragraphs show a reader
where the subdivisions of an essay begin and end, and thus help the reader see the
organization of the essay and grasp its main points.</p>

</div>

</div>

</section>

~5~
<section class="campus">

<h1>Our Global Campus </h1>

<p> A paragraph is a series of sentences that are organized and coherent, and are all
related to a single topic. Almost every piece of writing you do that is longer than a few
sentences should be organized into paragraphs. This is because paragraphs show a reader
where the subdivisions of an essay begin and end, and thus help the reader see the
organization of the essay and grasp its main points.</p>

<div class="row">

<div class="campus-col">

<img src="./images/download.jpeg">

<div class="layer">

<a href="https://www.bvuniversity.edu.in/"> <h3>PUNE</h3> </a>

</div>

</div>

<div class="campus-col">

<img src="images/eduford_img/newyork.png">

<div class="layer">

<h3>Navi Mumbai</h3>

</div>

</div>

<div class="campus-col">

<img src="images/eduford_img/washington.png">

<div class="layer">

<a href="https://mchsangli.bharatividyapeeth.edu/"><h3>KOLKATA</h3></a>

</div>
~6~
</div>

</div>

</section>

<!--Falcilities-->

<section class="facilty">

<h1> our Falcilities for the STUDENTS</h1>

<p>A paragraph is a series of sentences that are organized and coherent, and are all
related to a single topic. Almost every piece of writing you do that is longer than a few
sentences should be organized into paragraphs. This is because paragraphs show a reader
where the subdivisions of an essay begin and end, and thus help the reader see the
organization of the essay and grasp its main points.</p>

<div class="row">

<div class="facility-col">

<img src="./images/eduford_img/library.png">

<h3>Best Library for Study</h3>

<p>A paragraph is a series of sentences that are organized and coherent, and are all
related to a single topic. Almost every piece of writing you do that is longer than a few
sentences should be organized into paragraphs.</p>

</div>

<div class="facility-col">

<img src="images\eduford_img\basketball.png">

<h3>best playground For Playing a games</h3>

<p>A paragraph is a series of sentences that are organized and coherent, and are all
related to a single topic. Almost every piece of writing you do that is longer than a few
sentences should be organized into paragraphs.</p>

</div>

~7~
<div class="facility-col">

<img src="images\eduford_img\cafeteria.png">

<h3>Best healthy and tasty food for students</h3>

<p>A paragraph is a series of sentences that are organized and coherent, and are all
related to a single topic. Almost every piece of writing you do that is longer than a few
sentences should be organized into paragraphs.</p>

</div>

</div>

</section>

<section class="testimonial">

<h1>What our student says </h1>

<div class="row">

<div class="testimonial-col">

<img src="/images/avengers-age-of-ultron-1280x720-avengers-2-robert-downey-jr-
iron-man-5750.jpg">

<div>

<p>collage is not good please take addmission here</p>

<h3>IRON MAN (TONY STARK)</h3>

<i class="fa-solid fa-star"></i>

<i class="fa-solid fa-star"></i>

<i class="fa-solid fa-star"></i>

<i class="fa-solid fa-star"></i>

</div>

</div>

~8~
<div class="testimonial-col">

<img src="/images/men are brave.jpg">

<div>

<p>collage is disapointment please take addmission here</p>

<h3>BATMAN (BRUCE WAYAN)</h3>

<i class="fa-solid fa-star"></i>

<i class="fa-solid fa-star"></i>

<i class="fa-solid fa-star"></i>

<i class="fa-solid fa-star-"></i>

</div>

</div>

</div>

</section>

<section class="cta" id="contact">

<a href="/contact" class="hero-btn">Contact Us</a>

</section>

<!----Footer-->

<section class="footer" id="about">

<h4>About Us</h4>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus praesentium
quibusdam in totam veniam eveniet sed, alias nesciunt dicta repudiandae aspernatur quidem
odit quaerat temporibus quas ad fuga eum error!Lorem ipsum dolor sit amet consectetur
adipisicing elit. Explicabo eius culpa qui. In perspiciatis, vero minima illum voluptas, quam
aliquam quae natus, unde tempora aperiam nobis blanditiis dignissimos fugiat ad.A paragraph
is a series of sentences that are organized and coherent, and are all related to a single topic.

~9~
Almost every piece of writing you do that is longer than a few sentences should be organized
into paragraphs.</p>

<div class="icons">

<i class="fa fa-facebook"></i>

<i class="fa fa-twitter"></i>

<i class="fa fa-instagram"></i>

<i class="fa fa-linkedin"></i>

</div>

</section>

<footer class="footer2">

<div class="container">

<p>&copy; 2023 Your Company. All rights reserved.</p>

</div>

</footer>

</body>

</html>

CSS
*{

margin:0%;

padding: 0;

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

.header{

~ 10 ~
min-height: 100vh;

width: 100;

background-image: linear-gradient(rgba(4,9,30,0.7) , rgba(4,9,30,0.7)) ,


url("./images/eduford_img/banner.png");

background-position: center;

background-size: cover;

position: relative;

nav{

display: flex;

padding: 2% 6%;

justify-content: space-between;

align-items: center;

nav img {

width: 150px;

.nav-links{

flex:1;

text-align: right;

.nav-links ul li{

list-style: none;

display:inline-block;
~ 11 ~
padding: 8px 12px;

position: relative;

.nav-links ul li a{

color: #0c0101;

text-decoration: none;

font-size: 5vh;

.nav-links ul li::after{

content: '';

width: 0%;

height: 2px;

background : #f44336;

display: block;

margin: auto;

transition: 0.5s;

.nav-links ul li:hover::after{

width:100%;

.text-box{

width:80%;

~ 12 ~
color: #eb1616;

position: absolute;

top:50%;

left:70%;

transform: translate(-50% ,-50%);

.text-box h1{

font-size: 62px;

.text-box p{

margin:10px 40px ;

font-size:15px;

color:#f1eaea;

.hero-btn {

display: inline-block;

text-decoration: none;

color: #fff;

border:1px solid #fff;

padding: 12px 34px;

font-size: 13px;

background: transparent;

~ 13 ~
position:relative;

cursor: pointer;

.hero-btn:hover{

border: #f44336;

background: #f44336;

transition: 0.5s;

.course{

width:80%;

margin:auto;

text-align: center;

padding-top: 100px;

h1{

font-size: 36px;

font-weight: 600;

p{

color: #072ffa;

font-size: 14px;

font-weight: 300;

~ 14 ~
line-height: 22px;

padding:10px;

.row{

margin-top: 5%;

display: flex;

justify-content: space-between;

.course-col{

flex-basis: 31%;

background: #d4c784;

border-radius: 10px;

margin-bottom: 5%;

padding: 20px 12px;

box-sizing: border-box;

h3{

text-align: center;

font-weight: 300;

margin:10px 0;

.course-col:hover{

box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.7);

~ 15 ~
}

.campus{

width: 80%;

margin: auto;

text-align: center;

padding-top: 50px;

.campus-col{

flex-basis: 32%;

border-radius: 10px;

margin-bottom: 30px;

position:relative;

overflow:hidden;

.campus-col img{

width:100%;

.layer{

background: transparent;

height: 100%;

width:100%;

position: absolute;

top:0;

~ 16 ~
left:0;

transition: 0.5s;

.layer:hover{

background: rgba(226, 0, 0, 0.7);

.layer h3{

width: 100%;

font-weight: 500;

color: #fff;

font-size: 26px;

bottom: 0;

left: 50%;

transform: translate(-50%);

position: absolute;

.layer:hover h3{

bottom: 49%;

opacity: 1;

transition: 0.5s;

.facility{

width: 80%;

~ 17 ~
margin:auto;

text-align:center;

padding-top: 100px;

.facility-col{

flex-basis: 31%;

border-radius: 10px;

margin-bottom: 5%;

text-align: left;

.facility-col img{

width:100%;

border-radius: 10px;

.facility-col p{

padding: 0%;

.facility-col h3{

margin-top: 16px;

margin-bottom: 15px;

text-align: left;

.testimonial{

~ 18 ~
width: 80%;

margin:auto;

padding-top: 100px;

text-align: center;

.testimonial-col{

flex-basis: 54%;

border-radius: 10px;

margin-bottom: 5%;

text-align: left;

background: #fff3f3;

padding: 25px;

cursor: pointer;

display:flex;

.testimonial-col img{

height:40px;

margin-left: 5px;

margin-right:30px;

border-radius: 50%;

.testimonial-col p{

padding: 0%;

~ 19 ~
}

.testimonial-col h3{

margin-top: 15%;

text-align: left;

.testimonial-col .fa{

color: #f44336;

.cta{

margin: 100px auto;

width: 80%;

background-image: linear-gradient(rgba(0,0,0,0.7) ,rgba(0,0,0,0.7)) ,


url(./images/eduford_img/banner2.jpg);

background-position: center;

background-size: cover;

border-radius: 10px;

text-align:center;

padding: 100px 0;

.footer {

background-color: #f5f5f5;

padding: 20px;

text-align: center;

}
~ 20 ~
.footer h4 {

font-size: 18px;

margin-bottom: 10px;

.footer p {

font-size: 14px;

line-height: 1.5;

.icons {

margin-top: 20px;

.icons i {

font-size: 20px;

margin-right: 10px;

color: #333;

.icons i:hover {

color: #007bff;

cursor: pointer;

.footer2 {

background-color: #333;

color: #fff;

~ 21 ~
padding: 20px;

text-align: center;

.footer2 p {

font-size: 14px;

margin: 0;

JAVA SCRIPT
function showSection(sectionId) {

const section = document.getElementById(sectionId);

if (section) {

section.scrollIntoView({ behavior: 'smooth' });

function showSection(sectionId) {

const section = document.getElementById(sectionId);

if (section) {

section.scrollIntoView({ behavior: 'smooth' });

~ 22 ~
OUTPUT

~ 23 ~
~ 24 ~
~ 25 ~

You might also like