Professional Documents
Culture Documents
CONTENTS Page - Merged
CONTENTS Page - Merged
page no
Abstract ii
CHAPTER-1 0-12
1.1 Introduction 1
1.1.1 Introduction 1
1.1.2 Purpose 1
1.1.3 Audience 1
1.1.4 Scope of Document 1
1.2 Overview and Specification 2-4
1.2.1 Definition 2
1.2.2 System Overview 2
1.2.2.1 Introduction 2
1.2.2.2 Modules 2
1.2.2.3 Types of Users 4
1.3 Requirement Specification 5
1.3.1 H/W Requirement 5
1.3.2 S/W Requirement 5
1.4 Concept and Definition 6-11
1.4.1 HTML 6
1.4.1.1 What Is HTML 6
1.4.1.2 Simple Example of HTML 6
1.4.1.3 Description of HTML Example 7
1.4.1.5 HTML Version 8
1.4.1.6 Features of HTML 8
1.4.2 CSS 9
1.4.2.1 What Is CSS 9
1.4.2.2 What Does CSS Do 9
1.4.2.3 Why Use CSS 9
1.4.2.4 CSS Version 10
1.4.2.5 CSS Type 11
1.5 Conclusion 12
CHAPTER-2 13-28
2.1 Introduction 14
2.2 Data Flow Diagram 14
2.2.1 Rules for DFD 15
2.2.2 Zero Level DFD 16
2.2.3 One Level DFD 17
2.2.4 Second Level DFD 18
2.3 ER Diagram 19
2.4 Project Life Cycle 20
2.4.1 Stages of SDLC 21
2.4.2 Feasibility Study 21
2.4.2.1 Economic Feasibility 22
2.4.2.2 Technical Feasibility 22
2.4.2.3 Operation Feasibility 23
2.4.3 Testing 24
2.4.4 Types of Testing 24
2.4.4.1 Unit Testing 24
2.4.4.1.1 BBT 24
2.4.4.1.2 WBT 25
2.4.4.2 Integration Testing 26
2.4.4.3 System Testing 26
2.5 Conclusion 28
CHAPTER-3 29-40
3.1 Introduction 30
3.2 HTML Code 31
3.3 CSS Code 33
3.4 Screen Shot 35
3.5 Conclusion 39
3.6 Recommendation 39
3.7 Bibliography 40
CHAPTER – 1
INTRODUCTION
0
Chapter-1
1.1 INTRODUCTION:
1.1.1 INTRODUCTION:
All the schools and colleges are now moving towards the digital transformation, which
has helped industries like banking, manufacturing, commerce, and corporate streamline
increase their efficiency.
The digital transformation can help colleges in ways like saving the faculty’s time, storage
and analysis of the academic and administrative data, engaging students through digital
culture, improved communication, etc. It can be achieved in schools and colleges by
implementing a college automation system that can smoothen schools’ functioning and
colleges.
1.1.2 PURPOSE:
Our main purpose is to create a software which will manage the working of these
different modules. This document will form the basis for further design and development
activities on the project. The purpose of the college website is to let people know about this
college, their achievements as well as to interact with potential students as well as their
alumni.
1.1.3 AUDIENCE:
The audiences for this website will be people that are currently in college, potential
students, past students and any person who wants to know about college and its activities.
Broadly, they will be current students, faculty, alumni, unregistered users (includes potential
students).
This document will restrict itself to documenting all business requirements for college
website project. The document will also help in the design and development of the project.
The document will represent flow of the application. The scope of the project is to provide
a user-friendly college website.
1
Chapter-1
1.2 OVERVIEW AND SPECIFICATION:
1.2.1 DEFINITION:
A college automation system is an application that digitizes and streamlines the
operation of colleges and universities. The procedure varies from admission management
to class management to human resource management to finance management and many
more. It helps carry out the everyday chores online and helps manage admin, academic, and
non-academic activities.
In the college administration system, it will have functions for both the students and
management. It can manage the parent, teacher, and student’s life cycle and the financial,
academic, and admin activities.
1.2.2.2 MODULES:
Project will have following major modules:
Home Page:
It will be start page for website. It will contain brief overview of News and upcoming
Events in college. They can be redirected to their individual pages if more information
is required by user. User can also register for events from these links.
About Us
Campus
Labs
Canteen
Classrooms
Playground
Library
Courses Offered:
It will contain details for specific courses that are available in the college.
Under-graduation
Post-graduation
Management
ITI
Nursing
2
Chapter-1
Extra Courses: These courses are apart from regular academics. They can be taken
by student as well as faculty.
Contact Us
1. Administrator (Admin):
a) Add/edit/delete courses
b) Add/edit/delete events
c) Add/edit/delete news
d) Add/edit/delete jobs
h) Administer content from feedback and from communicate with faculty module for
students
i) etc.
2. Student:
d) Feedback
3. Faculty:
a) Edit profile
c) Feedback
Add/edit/delete events
3
Chapter-1
1.2.2.3 TYPES OF USERS:
Administrator:
Site administrator has complete control of all the activities of the website. Site
admin can view as well as update jobs, events, communication, etc.
Student:
Student is a part of any of courses in college and is currently studying in the
college. He/she can provide feedback or communicate with faculty and edit his/her
profile.
Unregistered User:
Guest user is not a registered user. He/she can surf through the facilities of
college, news, register for events. But he cannot communicate with faculty and
provide feedback.
Faculty
Faculty can register for course edit his/her profile, give feedback and add/edit
exam schedule and results.
4
Chapter-1
1.3 REQUIREMENT SPECIFICATION:
1.3.1 H/W Requirement:
Device name: DELL-inspiration-15-3000
RAM: 8.00 GB
Ms-Word 2019
5
Chapter-1
Hyper Text: HyperText simply means "Text within Text." A text has a link within it, is a
hypertext. Whenever you click on a link which brings you to a new webpage, you have clicked
on a hypertext. HyperText is a way to link two or more web pages (HTML documents) with
each other.
Markup language: A markup language is a computer language that is used to apply layout
and formatting conventions to a text document. Markup language makes text more
interactive and dynamic. It can turn text into images, tables, links, etc.
Web Page: A web page is a document which is commonly written in HTML and translated by
a web browser. A web page can be identified by entering an URL. A Web page can be of the
static or dynamic type. With the help of HTML only, we can create static web pages.
Hence, HTML is a markup language which is used for creating attractive web pages with
the help of styling, and which looks in a nice format on a web browser. An HTML document is
made of many HTML tags and each HTML tag contains different content.
6
Chapter-1
1.4.1.3 Description of HTML Example:
<!DOCTYPE>: It defines the document type or it instruct the browser about the version
of HTML.
<html >: This tag informs the browser that it is an HTML document. Text between html
tag describes the web document. It is a container for all other elements of HTML except
<!DOCTYPE>
<head>: It should be the first element inside the <html> element, which contains the
metadata (information about the document). It must be closed before the body tag
opens.
<title>: As its name suggested, it is used to add title of that HTML page which appears
at the top of the browser window. It must be placed inside the head tag and should
close immediately. (Optional)
<body>: Text between body tag describes the body content of the page that is visible
to the end user. This tag contains the main content of the HTML document.
<h1>: Text between <h1> tag describes the first level heading of the webpage.
<p>: Text between <p> tag describes the paragraph of the webpage.
Tim Berners-Lee is known as the father of HTML. The first available description of
HTML was a document called "HTML Tags" proposed by Tim in late 1991. The latest
version of HTML is HTML5, which we will learn later in this tutorial.
7
Chapter-1
1.4.1.5 HTML Versions:
Since the time HTML was invented, there are lots of HTML versions in market, the
brief introduction about the HTML version is given below:
HTML 1.0: The first version of HTML was 1.0, which was the barebones version of
HTML language, and it was released in1991.
HTML 2.0: This was the next version which was released in 1995, and it was
standard language version for website design. HTML 2.0 was able to support extra
features such as form-based file upload, form elements such as text box, option button,
etc.
HTML 3.2: HTML 3.2 version was published by W3C in early 1997. This version was
capable of creating tables and providing support for extra options for form elements. It
can also support a web page with complex mathematical equations. It became an
official standard for any browser till January 1997. Today it is practically supported by
most of the browsers.
HTML 4.01: HTML 4.01 version was released on December 1999, and it is a very
stable version of HTML language. This version is the current official standard, and it
provides added support for stylesheets (CSS) and scripting ability for various multimedia
elements.
HTML5: HTML5 is the newest version of HyperText Markup language. The first
draft of this version was announced in January 2008. There are two major organizations
one is W3C (World Wide Web Consortium), and another one is WHATWG (Web
Hypertext Application Technology Working Group) which are involved in the
development of HTML 5 version, and still, it is under development.
2) It is very easy to make an effective presentation with HTML because it has a lot of
formatting tags.
3) It is a markup language, so it provides a flexible way to design web pages along with
the text.
4) It facilitates programmers to add a link on the web pages (by html anchor tag), so it
enhances the interest of browsing of the user.
5) It is platform-independent because it can be displayed on any platform like Windows,
Linux, and Macintosh, etc.
6) HTML is a case-insensitive language, which means we can use tags either in lower-
case or upper-case.
8
Chapter-1
1.4.2 CSS:
1.4.2.1 What is CSS:
CSS stands for Cascading Style Sheets. It is a style sheet language which is used to
describe the look and formatting of a document written in markup language. It provides
an additional feature to HTML. It is generally used with HTML to change the style of web
pages and user interfaces. It can also be used with any kind of XML documents including
plain XML, SVG and XUL.
CSS is used along with HTML and JavaScript in most websites to create user interfaces
for web applications and user interfaces for many mobile applications.
9
Chapter-1
CSS Level 1 (CSS1) was officially released in 1996, and included properties for
adding font properties such as typeface and emphasis color of text, backgrounds, and
other elements Text attributes such as spacing between words, letters, and lines of text.
Unfortunately, lack of dependable web browser support prevented the popularity of CSS
Level 1 for several years.
2. CSS Level 2:
CSS level 2 (CSS2) specification was developed by the W3C and published as a
recommendation in 1998. Its most notably added properties for positioning that allowed
CSS to be used for page layout. It also introduced styles for other media types and more
sophisticated methods for selecting elements for styling.
3. CSS Level 3:
The earliest CSS level 3 (CSS3) drafts were published in 1999. CSS3 adds
presentation-style properties, allowing you to effectively build presentations from Web
documents. CSS level 3 is divided into several separate documents called modules. Due
to the modularization, different modules have different stability and statuses.
4. CSS Level 4:
There is no single CSS4 specification and there is no standard which named as CSS4.
But a few levels 4 modules exist such as Image Values, Backgrounds & Borders, or
Selectors etc., which build on the functionality of a preceding level 3 module. The level 4
modules can collectively be referred to as CSS level 4. There is only CSS standard, and
each module can level up independently.
10
Chapter-1
2.Internal CSS or Embedded CSS: Internal or Embedded CSS: This can be used when a
single HTML document must be styled uniquely. The CSS rule set should be within the
HTML file in the head section i.e., the CSS is embedded within the HTML file.
3.External CSS: External CSS contains separate CSS file which contains only style property
with the help of tag attributes (For example class, id, heading, … etc). CSS property
written in a separate file with .css extension and should be linked to the HTML document
using link tag. This means that for each element, style can be set only once and that will
be applied across web pages.
11
Chapter-1
1.5 CONCLUSION:
From the above chapter we know about the basic feature about the project, what is the
problem definition, what are the concept and definition, advantages of the proposed system.
We also know what are the hardware & software are required for this project. Here we
discussed the different Modules to be described. We also know the tools and technologies
required to develop this project. We know about the HTML, CSS.
12
CHAPTER – 2
SYSTEM DESIGN
13
Chapter-2
2.1 INTRODUCTION:
System design includes context diagram, E R diagram, different level of data flow
diagram, data base tables and also software life cycle along with different types of testing.
This above experiment parts helps in developing the project easier and simpler.
Symbol Description
14
Chapter-2
2.2.1 RULES FOR DATA FLOW DIAGRAM:
2 Organize the DFD so that the main sequence of the actions reads left to right and top to
bottom
4 A process is required for all the data transformation and transfers. Therefore, never
connect a data store to a data source or the destinations or another data store with just a
data flow arrow.
5 Do not indicate hardware and ignore control information 6 Make sure the names of the
processes accurately convey everything the process is done.
8 Indicate external sources and destinations of the data, with squares. 4 Number each
occurrence of repeated external entities.
10 Identify all data flows for each process step, except simple Record retrievals.
15
Chapter-2
Course
management
COLLEGE
AUTOMATION
SYSTEM
Login
Management
16
Chapter-2
College Generate
management College Report
Classes Generate
management Classes Report
Students’ Generate
management Students Report
COLLEGE
AUTOMATION
SYSTEM
Courses Check
management Courses Report
Generate
Faculties
Courses Report
management
Registration Generate
management Registration
Report
17
Chapter-2
Login Check
Admin to roles of
system Access
Forgot
Password Check Manage
Credentials Modules
Manage Semester
Report
18
Chapter-2
19
Chapter-2
The Software Development Life Cycle (SDLC) is the process by which software is created
Some companies don't have anything more than an ad hoc approach to software
development, but these environments still have an SDLC-it's just a bad one. Likewise, each
company that has a formal SDLC probably has its own, unique flavour of the SDLC Sometimes
the SDLC is a very complicated, detailed approach that requires a whole team of project
managers just to keep going. The lifecycle of a project may include the following steps:
Analysis
Design
By applying this simple set of definite steps and deliverables at the outset and relating this
to a transparent time and cost structure, we provide clients with an effective framework
against which to measure expectation, quality, progress and cost for their project.
In addition to providing the technical lifecycle framework, ISL also provide clients with a
simple step by step plan at the outset of their project, which details how each step is
initiated, what documents or details are required from the client to enable the activities to
be carried out and where feedback or confirmation is likely to be needed, to ensure that the
deliverables meet the need.
20
Chapter-2
Requirements
Design
Implementation
Verification
Maintenance
21
Chapter-2
1. Economic Feasibility
2. Technical Feasibility
3. Operational Feasibility
This is based on questions like "will the system provide benefits greater than the
costs?" The feasibility study presents intangible as well as tangible benefits in a formal way.
A relatively detailed analysis of the costs of both development and operations of various
alternatives is also presented.
This is based on questions like" can the proposed application be implemented with
existing equipment, software technology and available personnel" If the new technology
is required, what is the likelihood that it can be developed? Analysis of project risk relative
to technical feasibility includes not only whether the technology available on the market
but also its "state of the art” both in absolute terms and relative to company's current
technical specification.
22
Chapter-2
This is based on questions like "will the system be used if it is developed and
implemented? Will these be resistant from users that will undermine the possible
application benefits?" This analysis may invoke a subjective assessment of political and
managerial environment in which the system will be implemented. In general, the greater
the requirements for change in the user environment in which the system will be
installed, the greater the risk of implementation failure.
23
Chapter-2
2.4.3 TESTING:
TESTING OBJECTIVES
2. A good test case is one that has a probability of finding an as yet undiscovered error.
1. Unit testing
2. Integration testing
3. System testing
In black-box testing, test cases are designed from an examination of the input output
values only and no knowledge of design or code is required. The following are two main
approaches to design the black-box testing test cases.
24
Chapter-2
In this approach, the domain of input values to a program is partitioned into a set of
equivalence classes. This partitioning is done such that the behaviour of the program is
similar every input data belonging to the same equivalence class. The main idea behind
defining the equivalence class is that testing the code with any one value belonging to an
equivalence class is as good as testing the software with any other value belonging to
that equivalence class Equivalence classes for software can be designed by examining
both input and the output data.
White box testing sometimes called as glass box testing is a test case design method
that uses the control structures of the procedural design to derive test cases. Using white
box testing methods, the software engineer can derive test case that,
1. Guarantee that all independent paths with in a module have been exercised at
least once.
2. Exercise all logical decisions on their true and false sides.
3. Execute all loops at their boundaries and within their operational bounds.
4. Exercise internal data structures to ensure their validity.
5. Logic errors and incorrect assumptions are inversely proportional to the
probability that a program path will be executed.
Errors tend to creep into our work when we design and implement functions.
conditions are or control that are out of the mainstream. Everyday processing tends to be
well understood, while special case processing tends to fall into the cracks. We often
believe that a logical path is not executed when, in fact, it may be executed on a regular
basis. The logical flow of a program is sometimes counterintuitive, meaning that our
unconscious assumptions about flow of control and data may lead us to make design errors
that are uncovered only once path testing commences.
25
Chapter-2
1. Big-bang approach:
It is the simplest integration testing approach, where all the modules making up a
system are integrated in a single step.
2. Top-down approach:
Top-down integration testing starts with the main routine and one or two
subordinate routines in the system After the top-level skeleton' has been tested, the
immediate subroutines of the skeleton' are combined with it and tested.
3. Bottom-up approach:
In bottom-up testing, each subsystem is tested separately and then the full system
is tested. A subsystem might consist of many modules which communicate among each
other through well-defined interfaces.
4. Mixed approach:
1. Alpha testing:
Alpha testing refers to the system testing carried out by the test team within the
developing organization Beta testing Beta testing is the system testing performed by a
select group of friendly customers.
26
Chapter-2
2. Acceptance testing:
3. Performance testing:
Performance testing is carried out to check whether the system meets the non-
functional requirements identified in the SRS document. There are several types of
performance testing as discussed below. The type of performance testing to be carried
out on a system depends on the different non-functional requirements of the system
documented in the SRS document. All performance tests can be considered as black-box
tests.
4. Stress testing:
Stress testing evaluates system performance when it is stressed for short periods of
time. Stress tests are black-box tests which are designed to impose a range of abnormal
and even illegal input conditions so as to stress the capabilities of the software.
5. Volume testing:
6. Configuration testing:
7. Usability testing:
This testing pertains to check the user interface to see if it meets all the user
requirements. During usability testing, the display screens, messages, report formats,
and other aspects relating to the user interface requirements are tested.
27
Chapter-2
2.5 CONCLUSION:
In this chapter we study about the data flow diagram, entity relationship diagram,
software life cycle with software development life cycle. This chapter gives enormous
idea about the entire project.
28
CHAPTER – 3
CODING AND CONCLUSION
29
Chapter-3
3.1 INTRODUCTION:
In this chapter we analyse about the sample coding, reference, recommendation and
screen shot. Bibliography provides the source of design and knowledge of coding for the
website. Coding of HTML and CSS in a source code editor like Vs code. Recommendation
provides somethings is good or suitable for a particular purpose or job. Screen shot
provides pictorial description of different pages of website.
30
Chapter-3
<head>
<meta name="viewport" content="with=device-width, initial-scale=1.0">
<title>COLLEGE AUTOMATION</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap"
rel="stylesheet">
</head>
<body>
<section class="header">
<nav>
<img src="Nabapravat logo.jpeg" width="100" height="100">
<div class="navbar">
<ul>
<li><a href="">HOME</a></li>
<li><a href="about.html.html">ABOUT</a></li>
<li><a href="course.html.html">COURSES</a></li>
<li><a href="Facilities.html.html">FACILITIES</a></li>
<li><a href="contact.html.html">CONTACT US</a></li>
</ul>
</div>
</nav>
<div class="text-box">
<h1>NABAPRAVAT ACADEMY FOR MANAGEMENT EDUCATION</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aliquam, labore?Lorem
ipsum dolor sit amet,consectetur adipisicing elit.<br> Nihil aperiam quidem itaque iure dolorum
harum cumque, illum namreiciendis? Asperiores?</p>
<a href=" " class="btn">Visit Us To Know More</a>
</div>
</section>
31
Chapter-3
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo ea exercitationem,
veniam corporis eosiure minus beatae adipisci quod.</p>
</div>
<div class="course-col">
<h3>Nursing</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo ea exercitationem,
veniam corporis eoiure minus beatae adipisci quod.</p>
</div>
</div>
</section>
32
Chapter-3
<section class="testimonials">
<h1>What Our Student Says</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<div class="row">
<div class="testimonials-cols">
<img src="DSC_0914.JPG">
<div class="star">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas illo dicta
veniam laboriosam error molestiae aperiam harum laborum necessitatibus natus?</p>
<h3>Chita Ranjan Behera</h3>
<img src="star.jpg">
<img src="star.jpg">
<img src="star.jpg">
<img src="halfstar.jpg">
<img src="halfstar.jpg">
</div>
</div>
<div class="testimonials-cols">
<img src="DSC_0944.JPG">
<div class="star">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas illo dicta
veniam laboriosam error molestiae aperiam harum laborum necessitatibus natus?</p>
<h3>Raghunath Sahoo</h3>
<img src="star.jpg">
<img src="star.jpg">
<img src="star.jpg">
<img src="star.jpg">
<img src="halfstar.jpg">
</div>
</div>
</div>
</section>
</html>
33
Chapter-3
.header {
min-height: 100vh;
width: 100%;
background-image: url("DSC_0941.JPG");
background-position: center;
background-size: cover;
opacity: 1.5;
}
nav img {
padding-left: 10px;
padding-top: 8px;
}
nav {
padding-left: 33px;
display: flex;
justify-content: space-between;
align-items: center;
}
.navbar {
flex: 1;
padding-left: 110px;
padding-top: 95px;
}
.navbar ul li {
list-style: none;
display: inline-block;
padding: 10px 10px;
position: relative;
}
.navbar ul li a {
text-decoration: none;
color: white;
font-size: 15px;
font-weight: bold;
}
.navbar ul li::after {
content: "";
width: 0%;
height: 5px;
background: red;
display: block;
margin: auto;
transition: 0.5s;
}
34
Chapter-3
.navbar ul li:hover::after {
width: 100%;
}
.text-box {
width: 90%;
position: absolute;
top: 47%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.text-box h1 {
color: rgba(4 135 238 / 99%);
font-size: 36px;
}
.text-box p {
color: rgb(238 240 244 / 99%);
margin: 49px 0 4px;
font-size: 17px;
}
.btn {
display: inline-block;
text-decoration: none;
color: red;
border: 1.5px solid #f57f17;
border-radius: 10px;
padding: 12px 30px;
font-size: 20px;
font-weight: bold;
background: transparent;
position: relative;
cursor: pointer;
}
.btn:hover {
border: 1.5px solid #c44040;
border-radius: 10px;
background: #aa1a1a;
color: white;
transition: 1s;
}
/* courses */
.course {
width: 80%;
margin: auto;
text-align: center;
padding-top: 100px;
}
h1 {
color: rgb(3 4 86 / 99%);
font-size: 36px;
font-weight: bold;
}
35
Chapter-3
p {
font-size: 14px;
font-weight: 200;
line-height: 22px;
padding: 10px;
}
.row {
margin-top: 5%;
display: flex;
justify-content: space-between;
cursor: pointer;
}
.course-col {
flex-basis: 30%;
background: #eec3c3ba;
border-radius: 10px;
margin-bottom: 5%;
padding: 20px 12px;
box-sizing: border-box;
transition: 0.5s;
}
h3 {
color: #1d2f8f;
text-align: center;
font-weight: 800;
margin: 10px 0px;
}
.course-col:hover {
box-shadow: 0 0 20px 0px;
}
/* Facilities */
.facilities {
width: 80%;
margin: auto;
text-align: center;
}
.facilities h1 {
margin-top: 30px;
}
.classroom {
flex-basis: 32%;
border-radius: 10px;
margin-bottom: 30px;
position: relative;
overflow: hidden;
.classroom img {
width: 100%;
height: 300px;
display: block;
}
36
Chapter-3
.layer {
background: transparent;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
transition: 0.5s;
}
.layer h2 {
color: #1d2f8f;
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%);
transition: 0.5s;
opacity: 0;
}
.layer:hover {
background: rgba(231, 159, 159, 0.7);
}
.library {
flex-basis: 32%;
border-radius: 10px;
margin-bottom: 30px;
position: relative;
overflow: hidden;
}
.library img {
width: 100%;
height: 300px;
}
.hostel {
flex-basis: 32%;
border-radius: 10px;
margin-bottom: 30px;
position: relative;
overflow: hidden;
}
.hostel img {
width: 100%;
height: 300px;
}
.layer:hover h2 {
bottom: 49%;
opacity: 1;
}
.lab {
flex-basis: 32%;
border-radius: 10px;
margin-bottom: 30px;
position: relative;
overflow: hidden;
}
37
Chapter-3
.lab img {
width: 100%;
height: 300px;
display: block;
}
.Playground {
flex-basis: 32%;
border-radius: 10px;
margin-bottom: 30px;
position: relative;
overflow: hidden;
}
.Playground img {
width: 100%;
height: 300px;
}
.Canteen {
flex-basis: 32%;
border-radius: 10px;
margin-bottom: 30px;
position: relative;
overflow: hidden;
}
.Canteen img {
width: 100%;
height: 300px;
}
.testimonials {
width: 80%;
margin: auto;
text-align: center;
padding-top: 100px;
}
.testimonials-cols {
flex-basis: 44%;
border-radius: 10px;
margin-bottom: 5%;
text-align: left;
background: #eec3c3ba;
cursor: pointer;
display: flex;
}
.testimonials-cols img {
padding: 10px;
height: 68px;
width: 87px;
margin-left: 8px;
border-radius: 50%;
}
.testimonials-cols p {
padding: 10;
}
38
Chapter-3
.testimonials-cols h3 {
margin-top: 15px;
text-align: left;
}
.star img {
padding: 0px;
height: 20px;
width: 20px;
}
/* call to action */
.cta {
margin: 100px auto;
width: 80%;
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(banner2.jpg);
background-position: center;
background-size: cover;
border-radius: 10px;
text-align: center;
padding: 100px 0;
}
.cta h1 {
color: #fff;
margin-bottom: 40px;
padding: 0;
}
.footer {
width: 100%;
text-align: center;
padding: 30px;
}
.footer h4 {
font-weight: 600;
margin-bottom: 25px;
margin-top: 20px;
}
.icons img {
width: 30px;
height: 30px;
cursor: pointer;
color: red;
}
p img {
padding-top: 20px;
height: 20px;
width: 20px;
}
.fa-solid {
color: #f44336;
}
39
Chapter-3
.sub-header {
height: 50vh;
width: 100%;
background-image: linear-gradient(rgba(4, 9, 30, 0.7), rgba(4, 9, 30, 0.7)),
url("background.jpg");
background-position: center;
background-size: cover;
text-align: center;
}
.sub-header h1 {
margin-top: 100px;
color: white;
}
.about-us {
width: 80%;
margin: auto;
padding-top: 80px;
padding-bottom: 50px;
}
.about-cols {
flex-basis: 48%;
padding: 30px 2px;
.about-cols img {
width: 100%;
}
.about-cols h1 {
padding-top: 0;
}
.about-cols {
padding: 15px 0 25px;
}
.location {
width: 80%;
margin: auto;
padding: 80px 0;
}
.location iframe {
width: 100%;
}
40
Chapter-3
41
Chapter-3
42
Chapter-3
43
Chapter-3
44
Chapter-3
45
Chapter-3
46
Chapter-3
47
Chapter-3
48
Chapter-3
3.5 CONCLUSION:
In today's Web development, a good page design is essential. A bad design will lead to
the loss of visitors and that can lead to a loss of business. In general, a good page layout has
to satisfy the basic elements of a good page design. This includes color contrast, text
organization, font selection, style of a page, page size, graphics used, and consistency. In order
to create a well-designed page for a specific audience. The developer needs to organized and
analyse the users' statistics and the background of the users. Although it can be hard to come
up with a design that is well suited to all of the users, there will be a design that is appropriate
for most of the audience. The better the page design, the more hits a page will get. That
implies an increase in accessibility and a possible increase in business.
The project is based on a final project on web page designing in really knowledgeable
project for all the college students. HTML is necessary for rising issues of audiences, purpose,
design, and accessibility. HTML need to be a barrier to learning and writing, that is possible to
use HTML to address writing issues.
3.6 RECOMMENDATION:
After analysing all the researched information and feedback from different users, I would
recommend that a general purposed Web site should use non-frame pages and graphics
navigation bar with rollover effects. In addition to the graphic navigation bar with rollover
effects, each page should also have a text-only navigation bar for easy control. The developer
should also create a Cascading Style Sheet to control the font and font-size and use the style
sheet throughout the site to obtain a consistent look and feel.
49
Chapter-3
3.7 BIBLIOGRAPHY:
I have done this project with the help of my friends, Guide lecture and my parents.
I have taken help from the following:
1. Youtube.com (CodeWithHarry, Easy Tutorials)
2. Google Chrome (W3Schools, geeksforgeeks, Javatpoint, Tutorialspoint, etc)
3. Google.com
4. Wikipedia.com
5. Slideshare.net
6. Visual Studio Code, etc.
Thank you……
50
2.3 E-R Diagram
c.name C.add C.code
College a.type
Have Handel
1 1
1 a.name
M
M 1
Library a.id
Administrative
M 1
l.code
Guide d.id
Manage
Have Have
19
M M d.name
Staff Department
M
M M d.email
s.phno
Guide Have
c.name
h.type
M Study Guide M
h.name c.id
Hostel Courses
h.add Admit c.type
M M
Chapter-2
Student Teach
Faculty
s.name f.sub