MINOR PROJECT REPORT ON

College Website

Submitted in partial fulfillment of the requirements

for the award of the degree of

BACHELOR OF COMPUTER APPLICATIONS

Guru Gobind Singh Indraprastha University, Delhi

Batch: 2019 – 22

Under the Guidance of Submitted by

Name of Faculty-Dr Varun Tiwari Bhawna Sharma

Designation-Associate Professor 00728402019

[1]
CONTENTS
S No Topic Page No
1. Declaration 3
2. Acknowledgement 4
3. List of Tables -
4. List of Figures 5
5. List of Abbreviations 5
6. Chapter-1: Introduction 5
7. Chapter-2: Objective of the Project 5
8. Chapter-3: Project Category (RDBMS, Window Application, Web -
Application, AI, Machine Learning, Expert System, Networking) etc.
9. Chapter-4: Systems Requirement Analysis 6
4.1. Hardware Requirement
4.2. Software Requirement
10. Chapter-5: System Analysis 6-8
5.3Data Dictionary
5.4Data Flow Diagram
5.5ER Diagram
5.6Sequence Diagram, Collaboration Diagram, Class Diagram
etc (if required)
11. Chapter-6: Systems Development (Coding) 9-52
12. Chapter-7: Systems Implementation (Screen shots) 53-59
13. Chapter-8: Systems Testing 59
14. Chapter-9: Future Scope of the Project 59
15. Chapter-10: Project Doing (Mention Industry Name, Mention the -
Name and Address of the Industry, And Attached Certificate)
16. References 60

3. LIST OF TABLES

Table No Title Page No

1 Total Table Description and Number

4. LIST OF FIGURES

Figure No Title Page No

1 Total Figure Name and Number

5. LIST OF ABBREVIATIONS

S No Abbreviated Name Full name

1 DFD Data Flow Diagram
2 ERP Enterprise Resource Planning

[2]
Bosco Technical Training Society
(Affiliated to GGSIP University, Delhi)
Don Bosco Technical School, Okhla Road, Adjacent to
Sukhdev Vihar, Metro Station, New Delhi-110025
9643868820, 8527787221, 011-41033889

Declaration

I Bhawna Sharma, Enrollment No.:- 00728402019 from BCA-V Sem of Bosco Technical
Training Society , Don Bosco Technical School, Delhi hereby declare that the Project Report
entitled College Website at Bosco Technical Training Society is an original work and the
same has not been submitted to any other Institute for the award of any other degree.

Date:-10-11-2021 Signature of the Student

Certified that the Project Report submitted in partial fulfillment of Bachelor of Computer
Applications (BCA) to be awarded by G.G.S.I.P. University, Delhi by Bhawna Sharma,
Enrolment No:-00728402019 has been completed under my guidance and is Satisfactory.

Date:
Signature of the Faculty/Guide

Dr Varun Tiwari

Associate Professor

[3]
Acknowledgement

The note starts with thanks to Almighty who actually created this piece of work and helped us
when things were not easy for us.

I am very grateful and indebted to my Faculty/Guide Dr Varun Tiwari who immensely helped
and rendered his valuable advice, precious time, knowledge and relevant information regarding
the collection of material. He has been a major source of inspiration throughout the project as
he not only guided me throughout the Minor Project Report College Website but also
encouraged me to solve problems that arose during this report.

His guidance and suggestions about this Minor Project report have really enlightened me. It
has been a great help to support to have her/him around.

And finally, I would like to mention appreciation to our parents and friends who have been
instrumental throughout this period by providing unrelenting encouragement.

Student Name- Bhawna Sharma

Enroll. N-00728402019

[4]
s 4. List of Figures

Figure No Title Page No

1 Data Flow Diagram 7
2 ER Diagram 8

5. List of Abbreviations

S No Abbreviated Name Full name

1 HTML Hyper Text Markup Language
2 CSS Cascading Style Sheet
3 JSS JavaScript Certificate
4 PHP Hypertext Preprocessor 

[5]
Chapter 1: INTRODUCTION

The growing significance of websites for various organizations is well known. So, our team has decided
to develop a website for the college under the guidance of teacher Dr. Varun Tiwari. Our college website
comprising of all the required information about the college.
We have created our college website “Bosco Technical Training Society (BTTS)”. This is completely
different from our official college website. We designed that in our own way. This website deals with all
kinds of student details, academic related reports, college details, course details, batch details and other
resource related details too. We used different web languages like HTML, CSS, JavaScript and PHP to
build our website successfully.

HTML
HTML stands for Hyper Text Markup Language. HTML is the standard markup language for creating
Web pages.HTML describes the structure of a Web page.HTML consists of a series of elements.HTML
elements tell the browser how to display the content.HTML elements label pieces of content such as "this
is a heading", "this is a paragraph", "this is a link", etc. Instead, with HTML, web users can create and
structure sections, paragraphs, and links using elements, tags, and attributes. Web development.
Developers use HTML code to design how a browser displays web page elements.

CSS
CSS stands for Cascading Style Sheets. CSS describes how HTML elements are to be displayed on
screen, paper, or in other media. CSS saves a lot of work. It can control the layout of multiple web pages
all at once. External stylesheets are stored in CSS files.

JavaScript
JavaScript is a lightweight, interpreted, object-oriented language with first-class functions, and is best
known as the scripting language for Web pages, but it's used in many non-browser environments as well.
It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented,
imperative, and functional programming styles.
JavaScript runs on the client side of the web, which can be used to design / program how the web pages
behave on the occurrence of an event. JavaScript is an easy to learn and also powerful scripting language,
widely used for controlling web page behavior.

PHP
PHP is an acronym for "PHP: Hypertext Preprocessor". PHP is a widely-used, open source scripting
language. PHP scripts are executed on the server. PHP is free to download and use. PHP can generate
dynamic page content
PHP can create, open, read, write, delete, and close files on the server. PHP can collect form data. PHP
can send and receive cookies. PHP can add, delete, modify data in your database. PHP can be used to
control user-access. PHP can encrypt data
We all members of our team worked with full dedication and sincerely for completing this project within
the submission time. It was really a different experience for all of us for this project. We have gained too
much of knowledge while doing this project. Our website contains query related form also if anybody
have any question regarding college purpose, they can ask their queries by filling the form and can be
solved by sending response to them.

[6]
Chapter 2: OBJECTIVE OF THE PROJECT

The objective of this project is to design, publish and maintain a website for college which consists of all
the information regarding the college like faculty, infrastructure, etc.
The purpose of college website is to automate the existing manual system by the help of computerized
equipment’s and full-fledged computer software, fulfilling their requirements, so that their valuable
data/information can be stored for a longer period with easy accessing and manipulation of the same.

It applies to all the official web applications that are developed to maintain the information online. This
is extended to all the domains of the applications. The system gives in detail description of our college
infrastructure. Student can ask for specific query for any subject through the post option and if anyone
have the solution he / she can respond with the details. Students can have the messaging facility for any
personal query to the portal members. Moreover any student can interact with any college persons (like
students of any department, governing body, administrative section etc.)It is especially useful for any
educational institute where modifications in the content can be done easily according to requirements.
The project can be easily implemented under various situations. We can add new features as and when
we require, making reusability possible as there is flexibility in all the modules.

Chapter-3: Project Category

[7]
Our project is completely based on web application and RDBMS. We have used different web languages
like HTML, CSS, JavaScript and PHP. So here is the few information about web application and
RDBMS.

WEB APPLICATION

A web application is application software that runs on a web server, unlike computer-based software
programs that are run locally on the operating system of the device. Web applications are accessed by the
user through a web browser with an active network connection.
Web applications can be designed for a wide variety of uses and can be used by anyone; from an
organization to an individual for numerous reasons. Commonly used Web applications can include
webmail, online calculators, or e-commerce shops. Some Web apps can be only accessed by a specific
browser; however, most are available no matter the browser.
For a web app to operate, it needs a Web server, application server, and a database. Web servers
manage the requests that come from a client, while the application server completes the requested task.
A database can be used to store any needed information. Most Web apps are written in JavaScript,
HTML5, or Cascading Style Sheets (CSS). Client-side programming typically utilizes these languages,
which help build an applications front-end. Server-side programming is done to create the scripts a Web
app will use. Languages such as Python, Java, and Ruby are commonly used in server-side programming.

RDBMS

RDBMS stands for Relational Database Management System. RDBMS is the basis for SQL, and for all
modern database systems like MS SQL Server, IBM DB2, Oracle, MySQL, and Microsoft Access.
A Relational database management system (RDBMS) is a database management system (DBMS) that is
based on the relational model .A relational database is purpose-built to handle a wide range of data
formats and process queries efficiently. RDBMS structures are commonly used to perform four basic
operations: CRUD (create, read, update and delete), which are critical in supporting consistent data
management.

MySQL

In RDBMS we use MySQL, SQL is integral to many of the most popular software stacks for building
and maintaining everything from customer-facing web applications to powerful, data-driven B2B
services. Its open-source nature, stability, and rich feature set, paired with ongoing development and
support from Oracle, have meant that internet-critical organizations such as Facebook, Flickr, Twitter,
Wikipedia, and YouTube all employ MySQL backends. Though often associated with internet
applications or web services, MySQL was designed to be extensively compatible with other technologies
and architectures. The RDBMS runs on all major computing platforms, including Unix-based operating
systems, such as the myriad Linux distributions or Mac OS, and Windows. In RDBMS we use MySQL
for fetching the data in the login form. Students can fill their details by authenticate their email and
password.

[8]
Chapter 4: SYSTEMS REQUIREMENT ANALYSIS

4.1 Hardware Requirements

● CORE 2 DUO 3GHz. Micro Processor

● 256 GB Hard Disk Drive or above

● 3 Gb RAM or above

●17-inch Color Monitor

● Keyboard

● Mouse

● PenDrive

4.2 Software Requirements

● HTML

● JavaScript

● CSS

● PHP

● Visual Studio Code

● WAMP Server

● MS Word 2007 or above

● Web Browser: Microsoft Internet Explorer, Mozilla, Google Chrome or later

● Operating System: Windows XP / Windows7/ Windows Vista

[9]
Chapter-5: SYSTEM ANALYSIS

A system analysis is a separation of a substance into parts for study and their implementation and
detailed examination. Before designing any system, it is important that the nature of the system and the
way it currently operates are clearly understood. The detailed examination provides the specific data
required during designing in order to ensure that all the user’s requirements are fulfilled. The
investigation or the study conducted during the analysis phase is largely based on the feasibility study.
Rather it would not be wrong to say that the analysis and feasibility phases overlap. The system is
effectively used to provide large variety of information to the interested customer. It provides transaction
details of customers.

5.4. DFD (Data Flow Diagram)

[10]
4.5 ER DIAGRAM

[11]
.

Chapter- 6: System Development(Coding)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">

[12]
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="webthemez">
    <title>Don Bosco Institute of Technology</title>
    <!-- core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <link href="css/animate.min.css" rel="stylesheet">
    <link href="css/prettyPhoto.css" rel="stylesheet">
    <link href="css/styles.css" rel="stylesheet">
    <!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
    <link rel="shortcut icon" href="C:\Users\HOME\Desktop\DBIT Website\images\logo1.jpg">
</head>

<body id="home">
    <header id="header">
        <nav id="main-nav" class="navbar navbar-default navbar-fixed-top" role="banner">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-
collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="index.html"><img
                            src=".\images\newlogo.jpeg" alt="logo"></a>
                </div>

                <div class="collapse navbar-collapse navbar-right">

                    <ul class="nav navbar-nav">
                        <li class="scroll active"><a href="#home">Home</a></li>
                        <li class="scroll"><a href="#about">About</a></li>
                        <li class="scroll"><a href="#services">Why DBIT</a></li>
                        <li class="scroll"><a href="#our-team">Teachers</a></li>
                        <li class="scroll"><a href="#portfolio">Gallery</a></li>
                        <li class="scroll"><a href="#pricing">Events</a></li>

                        <li class="scroll"><a href="#testimonial">Testimonial</a></li>

                        <li class="scroll"><a href="#contact-us">Contact</a></li>

                    </ul>
                </div>
            </div>
            <!--/.container-->
        </nav>
[13]
        <!--/nav-->
    </header>
    <!--/header-->

    <section id="hero-banner">
        <div class="banner-inner">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12">
                    <h2 align="left"><b>Don Bosco Institute of Technology</b></h2>
                        <strong>
                            <p style="color:#ffffff;">An ISO Certified Institute <br><br>Admissions Open</p>
                        </strong>
                        <a class="btn btn-primary btn-lg" href="..\student_form.html">Apply Now</a>

                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--/#main-slider-->
<!--/#about-->
 <section id="about">
        <div class="container">

            <div class="section-header">
                <h2 class="section-title wow fadeInDown">About Don Bosco Institute of Technlogy</h2>
                <h4>
                    <p class="wow fadeInDown">'Learn a Trade, Earn a Living'<br>(Affliated to GGSIP
University, Delhi)<br>
                        Don Bosco Technical School, Okhla road, New Delhi-110025<br>
                        Email: [email protected]; Website: www.boscotechnical.in<br>
                        Contact:011-41033889, 9643868820, 8527787221</p>
                </h4>
            </div>

            <div class="row">
                <div class="col-sm-6 wow fadeInLeft">
                    <img class="img-responsive" src="images/about1.jpg" alt="">
                </div>

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

                    <strong><p>Bosco Technical Training Society (BTTS) affiliated to Guru Gobind Singh
Indraprastha University (GGSIPU) Dwarka, New Delhi is located in the heart of South Delhi, adjacent to
Sukhdev Vihar metro station (On Magenta Line of Delhi Metro). Our students' motto is 'Learn a Trade,
Earn a Living '. It is specifically dedicated for students interested in pursuing BCA (Bachelor in
Computers Application). The institute, Don Bosco Institute of Technology (DBIT) ventured into BCA 3

years ago, under the name BTTS, on 16th August,2019. Our Director, Dr Vikas Rao Vadi, joined in this
esteemed institution on 16th September, 2019 under whose guidance we could reach great heights.
[14]
</p></strong>
                    <h3 class="column-title">Courses we offer in DBIT</h3>
                    <h5><p>In Don Bosco we provide different courses certified by many institutions and
universities. The
                        list of the same are as below:</p></h5>
                        <strong><h4>
                            <ul class="listarrow">
                                <li><i class="fa fa-angle-double-right"></i>BCA</li>
                                <li><i class="fa fa-angle-double-right"></i>Draughtsman</li>
                                <li><i class="fa fa-angle-double-right"></i>MACHINIST</li>
                                <li><i class="fa fa-angle-double-right"></i>GRAPHICS DESIGN
TECHNICIAN</li>
                                <li><i class="fa fa-angle-double-right"></i>COPA</li>
                                <li><i class="fa fa-angle-double-right"></i>Hardware & Networking</li>
                                <li><i class="fa fa-angle-double-right"></i>Multimedia</li>
                                <li><i class="fa fa-angle-double-right"></i>O' Level</li>
                                <li><i class="fa fa-angle-double-right"></i>CNC Setter Cum Operator -VMC </li>
    
                            </ul>
                        </strong></h4>
          

                </div>
            </div>
        </div>
    </section>
    <section id="services">
        <div class="container">

            <div class="section-header">
                <h2 class="section-title wow fadeInDown">What’s In For You</h2>
                <p class="wow fadeInDown">Here at Don Bosco we aim for the skies as explained below</p>
            </div>

            <div class="row">
                <div class="features">
                    <div class="col-md-4 col-sm-6 wow fadeInUp" data-wow-duration="300ms" data-wow-
delay="0ms">
                        <div class="media service-box">
                            <div class="pull-left">
                                <i class="fa fa-futbol-o"></i>
                            </div>
                            <div class="media-body">
                                <h4 class="media-heading">Certification</h4>
                                <p>Backed by some of the biggest names in the industry, our certification values a lot
                                    inside and even outside India</p>
                            </div>
                        </div>
                    </div>
                    <!--/.col-md-4-->
[15]
                    <div class="col-md-4 col-sm-6 wow fadeInUp" data-wow-duration="300ms" data-wow-
delay="100ms">
                        <div class="media service-box">
                            <div class="pull-left">
                                <i class="fa fa-compass"></i>
                            </div>
                            <div class="media-body">
                                <h4 class="media-heading">Don Bosco Group</h4>
                                <p>Don Bosco Group is spread across 132 countries having thousands of training
institutes worldwide </p>
                            </div>
                        </div>
                    </div>
                    <!--/.col-md-4-->

                    <div class="col-md-4 col-sm-6 wow fadeInUp" data-wow-duration="300ms" data-wow-

delay="200ms">
                        <div class="media service-box">
                            <div class="pull-left">
                                <i class="fa fa-database"></i>
                            </div>
                            <div class="media-body">
                                <h4 class="media-heading">Classrooms</h4>
                                <p>High tech classrooms with smartboards and capacity to seat approx 60 students at
a
                                    time</p>
                            </div>
                        </div>
                    </div>
                    <!--/.col-md-4-->

                    <div class="col-md-4 col-sm-6 wow fadeInUp" data-wow-duration="300ms" data-wow-

delay="300ms">
                        <div class="media service-box">
                            <div class="pull-left">
                                <i class="fa fa-bar-chart"></i>
                            </div>
                            <div class="media-body">
                                <h4 class="media-heading">Computer Lab</h4>
                                <p>Best in class all in one PC's and iMac/Dell laptops for faculty for work to be
done
                                    efficiently</p>
                            </div>
                        </div>
                    </div>
                    <!--/.col-md-4-->

                    <div class="col-md-4 col-sm-6 wow fadeInUp" data-wow-duration="300ms" data-wow-

delay="400ms">
[16]
                        <div class="media service-box">
                            <div class="pull-left">
                                <i class="fa fa-paper-plane-o"></i>
                            </div>
                            <div class="media-body">
                                <h4 class="media-heading">Placements</h4>
                                <p>Guaranteed placement opportunities for all from MNC's like TCS, Wipro,
Magneti
                                    Marelli, etc.</p>
                            </div>
                        </div>
                    </div>
                    <!--/.col-md-4-->

                    <div class="col-md-4 col-sm-6 wow fadeInUp" data-wow-duration="300ms" data-wow-

delay="500ms">
                        <div class="media service-box">
                            <div class="pull-left">
                                <i class="fa fa-bullseye"></i>
                            </div>
                            <div class="media-body">
                                <h4 class="media-heading">Extracurricular Activities</h4>
                                <p>At Don Bosco, we believe sports and other events are equally important as
studies</p>
                            </div>
                        </div>
                    </div>
                    <!--/.col-md-4-->
                </div>
            </div>
            <!--/.row-->
        </div>
        <!--/.container-->
    </section>
    <!--/#services-->

    <section id="our-team">
        <div class="container">
            <div class="section-header">
                <h2 class="section-title wow fadeInDown">OUR TEACHERS</h2>
                <h4>
                    <p class="wow fadeInDown">Teachers are the backbone of any schools or institutions
<br>Proudly presenting to
                        you the faculty members of DBIT</p>
                </h4>
            </div>

            <div class="row text-center">

                <div class="col-md-3 col-sm-6 col-xs-12">
                    <div class="team-member wow fadeInUp" data-wow-duration="400ms" data-wow-
[17]
delay="0ms">
                        <div class="team-img">
                            <img class="img-responsive" src="images/team/01.jpg" alt="">
                        </div>
                        <div class="team-info">
                            <h3>Dr Vikas Rao Vadi</h3>
                            <span>Director</span>
                        </div>
                        <ul class="social-icons">
                            <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                            <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                            <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                            <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6 col-xs-12">
                    <div class="team-member wow fadeInUp" data-wow-duration="400ms" data-wow-
delay="200ms">
                        <div class="team-img">
                            <img class="img-responsive" src="images/team/02.jpg" alt="">
                        </div>
                        <div class="team-info">
                            <h3>Dr Ruchi Sawhney</h3>
                            <span>Head Of Department (HOD)</span>
                        </div>
                        <ul class="social-icons">
                            <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                            <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                            <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                            <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6 col-xs-12">
                    <div class="team-member wow fadeInUp" data-wow-duration="400ms" data-wow-
delay="100ms">
                        <div class="team-img">
                            <img class="img-responsive" src="images/team/03.jpg" alt="">
                        </div>
                        <div class="team-info">
                            <h3>Mrs Deepika Kirti</h3>
                            <span>Assistant Professor</span>
                        </div>
                        <ul class="social-icons">
                            <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                            <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                            <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                            <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
                        </ul>
[18]
                    </div>
                </div>
                <div class="col-md-3 col-sm-6 col-xs-12">
                    <div class="team-member wow fadeInUp" data-wow-duration="400ms" data-wow-
delay="200ms">
                        <div class="team-img">
                            <img class="img-responsive" src="images/team/04.jpg" alt="">
                        </div>
                        <div class="team-info">

                            <h3>Dr Varun Tiwari</h3>

                            <span>Associate Professor</span>
                        </div>
                        <ul class="social-icons">
                            <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                            <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                            <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                            <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
                        </ul>
                    </div>
                </div>
        
                <div class="col-md-3 col-sm-6 col-xs-12">
                    <div class="team-member wow fadeInUp" data-wow-duration="400ms" data-wow-
delay="200ms">
                        <div class="team-img">
                            <img class="img-responsive" src="images/team/05.jpg" alt="">
                        </div>
                        <div class="team-info">
                            <h3>Mr Bijoy Jose</h3>
                            <span>Assistant Professor</span>
                        </div>
                        <ul class="social-icons">
                            <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                            <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                            <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                            <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
                        </ul>
                    </div>
                </div>
        
                <div class="col-md-3 col-sm-6 col-xs-12">
                    <div class="team-member wow fadeInUp" data-wow-duration="400ms" data-wow-
delay="200ms">
                        <div class="team-img">
                            <img class="img-responsive" src="images/team/06.jpg" alt="">
                        </div>
                        <div class="team-info">
                            <h3>Mr Sanjay Singh</h3>
                            <span>Assistant Professor</span>
[19]
                        </div>
                        <ul class="social-icons">
                            <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                            <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                            <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                            <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6 col-xs-12">
                    <div class="team-member wow fadeInUp" data-wow-duration="400ms" data-wow-
delay="200ms">
                        <div class="team-img">
                            <img class="img-responsive" src="images/team/07.jpg" alt="">
                        </div>
                        <div class="team-info">
                            <h3>Mr Randhir Singh</h3>
                            <span>Librarian</span>
                        </div>
                        <ul class="social-icons">
                            <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                            <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                            <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                            <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
                        </ul>
                    </div>
                </div>

                <div class="col-md-3 col-sm-6 col-xs-12">

                    <div class="team-member wow fadeInUp" data-wow-duration="400ms" data-wow-
delay="300ms">
                        <div class="team-img">
                            <img class="img-responsive" src="images/team/08.jpg" alt="">
                        </div>
                        <div class="team-info">
                            <h3>Mrs Rosleen Gomez</h3>
                            <span>Receptionist</span>
                        </div>
                        <ul class="social-icons">
                            <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                            <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                            <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                            <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
                        </ul>
                    </div>
                </div>
            </div>

        </div>        
        
[20]
    </section>
    <!--/#our-team-->

    <section id="portfolio">
        <div class="container">
            <div class="section-header">
                <h2 class="section-title wow fadeInDown">Gallery</h2>
                <h5><p class="wow fadeInDown">Some good old memories<br></p></h5>
        
            </div>

            <div class="text-center">
                <ul class="portfolio-filter" style="display:none">
                    <li><a class="active" href="#" data-filter="*">All Works</a></li>
                    <li><a href="#" data-filter=".designing">Designing</a></li>

                    <li><a href="#" data-filter=".mobile">Mobile App</a></li>

                    <li><a href="#" data-filter=".development">Development</a></li>
                </ul>
                <!--/#portfolio-filter-->
            </div>

            <div class="portfolio-items">
                <div class="portfolio-item designing">
                    <div class="portfolio-item-inner">
                        <img class="img-responsive" src="images/portfolio/01.jpg" alt="">
                        <div class="portfolio-info">
                            <a class="preview" href="images/portfolio/01.jpg" rel="prettyPhoto"><i
                                    class="fa fa-eye"></i></a>
                        </div>
                    </div>
                </div>
                <!--/.portfolio-item-->

                <div class="portfolio-item mobile development">

                    <div class="portfolio-item-inner">
                        <img class="img-responsive" src="images/portfolio/02.jpg" alt="">
                        <div class="portfolio-info">
                            <a class="preview" href="images/portfolio/02.jpg" rel="prettyPhoto"><i
                                    class="fa fa-eye"></i></a>
                        </div>
                    </div>
                </div>
                <!--/.portfolio-item-->

                <div class="portfolio-item designing">

                    <div class="portfolio-item-inner">
                        <img class="img-responsive" src="images/portfolio/03.jpg" alt="">
                        <div class="portfolio-info">
                            <a class="preview" href="images/portfolio/03.jpg" rel="prettyPhoto"><i
[21]
                                    class="fa fa-eye"></i></a>
                        </div>
                    </div>
                </div>
                <!--/.portfolio-item-->

                <div class="portfolio-item mobile">

                    <div class="portfolio-item-inner">
                        <img class="img-responsive" src="images/portfolio/04.jpg" alt="">
                        <div class="portfolio-info">
                            <a class="preview" href="images/portfolio/04.jpg" rel="prettyPhoto"><i
                                    class="fa fa-eye"></i></a>
                        </div>
                    </div>
                </div>
                <!--/.portfolio-item-->

                <div class="portfolio-item designing development">

                    <div class="portfolio-item-inner">
                        <img class="img-responsive" src="images/portfolio/05.jpg" alt="">
                        <div class="portfolio-info">
                            <a class="preview" href="images/portfolio/05.jpg" rel="prettyPhoto"><i
                                    class="fa fa-eye"></i></a>
                        </div>
                    </div>
                </div>
                <!--/.portfolio-item-->

                <div class="portfolio-item mobile">

                    <div class="portfolio-item-inner">
                        <img class="img-responsive" src="images/portfolio/06.jpg" alt="">
                        <div class="portfolio-info">
                            <a class="preview" href="images/portfolio/06.jpg" rel="prettyPhoto"><i
                                    class="fa fa-eye"></i></a>
                        </div>
                    </div>
                </div>
                <!--/.portfolio-item-->

                <div class="portfolio-item designing development">

                    <div class="portfolio-item-inner">
                        <img class="img-responsive" src="images/portfolio/07.jpg" alt="">
                        <div class="portfolio-info">
                            <a class="preview" href="images/portfolio/07.jpg" rel="prettyPhoto"><i
                                    class="fa fa-eye"></i></a>
                        </div>
                    </div>
                </div>
                <!--/.portfolio-item-->
[22]
                <div class="portfolio-item designing development">
                    <div class="portfolio-item-inner">
                        <img class="img-responsive" src="images/portfolio/08.jpg" alt="">
                        <div class="portfolio-info">
                            <a class="preview" href="images/portfolio/08.jpg" rel="prettyPhoto"><i
                                    class="fa fa-eye"></i></a>
                        </div>
                    </div>
                </div>
                <!--/.portfolio-item-->

                <div class="portfolio-item designing development">

                    <div class="portfolio-item-inner">
                        <img class="img-responsive" src="images/portfolio/09.jpg" alt="">
                        <div class="portfolio-info">
                            <a class="preview" href="images/portfolio/09.jpg" rel="prettyPhoto"><i
                                    class="fa fa-eye"></i></a>
                        </div>
                    </div>
                </div>

                <!--/.portfolio-item-->

                <div class="portfolio-item designing development">

                    <div class="portfolio-item-inner">
                        <img class="img-responsive" src="images/portfolio/10.jpg" alt="">
                        <div class="portfolio-info">
                            <a class="preview" href="images/portfolio/10.jpg" rel="prettyPhoto"><i
                                    class="fa fa-eye"></i></a>
                        </div>
                    </div>
                </div>
                <!--/.portfolio-item-->

                <div class="portfolio-item designing development">

                    <div class="portfolio-item-inner">
                        <img class="img-responsive" src="images/portfolio/11.jpg" alt="">
                        <div class="portfolio-info">
                            <a class="preview" href="images/portfolio/11.jpg" rel="prettyPhoto"><i
                                    class="fa fa-eye"></i></a>
                        </div>
                    </div>
                </div>
                <!--/.portfolio-item-->

                <div class="portfolio-item designing development">

                    <div class="portfolio-item-inner">
                        <img class="img-responsive" src="images/portfolio/12.jpg" alt="">
                        <div class="portfolio-info">
[23]
                            <a class="preview" href="images/portfolio/12.jpg" rel="prettyPhoto"><i
                                    class="fa fa-eye"></i></a>
                        </div>
                    </div>
                </div>
                <!--/.portfolio-item-->

                <div class="portfolio-item designing development">

                    <div class="portfolio-item-inner">
                        <img class="img-responsive" src="images/portfolio/13.jpg" alt="">
                        <div class="portfolio-info">
                            <a class="preview" href="images/portfolio/13.jpg" rel="prettyPhoto"><i
                                    class="fa fa-eye"></i></a>
                        </div>
                    </div>
                </div>
                <!--/.portfolio-item-->

                <div class="portfolio-item designing development">

                    <div class="portfolio-item-inner">                        <img class="img-responsive"
src="images/portfolio/14.jpeg" alt="">
                        <div class="portfolio-info">
                            <a class="preview" href="images/portfolio/14.jpeg" rel="prettyPhoto"><i
                                    class="fa fa-eye"></i></a>

                        </div>
                    </div>
                </div>
                <!--/.portfolio-item-->

                <div class="portfolio-item designing development">

                    <div class="portfolio-item-inner">
                        <img class="img-responsive" src="images/portfolio/15.jpeg" alt="">
                        <div class="portfolio-info">
                            <a class="preview" href="images/portfolio/15.jpeg" rel="prettyPhoto"><i
                                    class="fa fa-eye"></i></a>
                        </div>
                    </div>
                </div>
                <!--/.portfolio-item-->

                <div class="portfolio-item mobile">

                    <div class="portfolio-item-inner">
                        <img class="img-responsive" src="images/portfolio/16.jpeg" alt="">
                        <div class="portfolio-info">
                            <a class="preview" href="images/portfolio/16.jpeg" rel="prettyPhoto"><i
                                    class="fa fa-eye"></i></a>
                        </div>
                    </div>
                </div>
[24]
                <!--/.portfolio-item-->
            </div>
        </div>
        <!--/.container-->
    </section>
    <!--/#portfolio-->

    <section id="pricing">
        <div class="container">
            <div class="section-header">
                <h2 class="section-title wow fadeInDown">Events</h2>
                <p class="wow fadeInDown"></p>
            </div>
            <div class="row">
                <div class="col-md-4 col-sm-6 col-xs-12"></div>
                <div class="col-md-4 col-sm-6 col-xs-12">
                    <div class="wow zoomIn" data-wow-duration="400ms" data-wow-delay="200ms">
                        <ul class="pricing featured">
                            <li class="plan-header">
                                <div class="price-duration">
                                    <span class="price">
                                        Events
                                    </span>
                                    <h3><span class="duration">
                                            held at
                                        </span></h3>
                                </div>

                                <h1>
                                    <div class="plan-name">
                                        DBIT
                                    </div>
                                </h1>
                            </li>
                            <li><strong>8th August,2021-</strong> Bosco Festivista</li>
                            <li><strong>4th September,2021-</strong> Teachers Day Celebration</li>
                            <li><strong>21st September,2021-</strong>  First E-Newsletter Of BTTS</li>
                            <li><strong>22nd September,2021-</strong> Plantation Drive</li>
                            <li><strong>2nd November,2021-</strong> Treasure Hunt</li>

                        </ul>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6 col-xs-12"></div>

            </div>
    </section>
    <!--/#SWOT-->

[25]
    <section id="business-stats">
        <div class="container">
            <div class="section-header">
                <h2 class="section-title wow fadeInDown">Healthy Report</h2>
                <h4>
                    <p class="wow fadeInDown">Stats of DBIT<br> </p>
                </h4>
            </div>

            <div class="row text-center">

                <div class="col-md-3 col-sm-6 col-xs-12">
                    <div class="wow fadeInUp" data-wow-duration="400ms" data-wow-delay="0ms">
                        <div class="business-stats" data-digit="6850" data-duration="1000"></div>
                        <strong>Recruiters</strong>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6 col-xs-12">
                    <div class="wow fadeInUp" data-wow-duration="400ms" data-wow-delay="100ms">
                        <div class="business-stats" data-digit="30" data-duration="1000"></div>
                        <strong>Teachers</strong>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6 col-xs-12">
                    <div class="wow fadeInUp" data-wow-duration="400ms" data-wow-delay="200ms">
                        <div class="business-stats" data-digit="20" data-duration="1000"></div>
                        <strong>Courses</strong>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6 col-xs-12">
                    <div class="wow fadeInUp" data-wow-duration="400ms" data-wow-delay="300ms">

                        <div class="business-stats" data-digit="2568" data-duration="1000"></div>

                        <strong>Pass Outs</strong>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--/#business-stats-->

    <section class="testimonial-area" id="testimonial">

        <div class="container">
            <div class="section-header">
                <h2 class="section-title wow fadeInDown">Testimonial</h2>
                <h6><p class="wow fadeInDown">Names and photos are withheld due to privacy
issues<br></p></h6>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <div class="single-testimonial animate_fade_in" style="opacity: 1; right: 0px;">
[26]
                        <div class="row">
                            <div class="col-xs-12">
                                <h5>
                                    <blockquote>"Nice infrastructure of college building. They have big play ground
and
                                        so much greenery in campus. Professors and other staff is good and frank. They
                                        have advanced computer labs. 2 min walking distance by sukhdev vihar , metro
                                        station (Magenta Line)"</blockquote>
                                </h5>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-3">
                                <img src="images/pic1.jpg" alt="client">
                            </div>
                            <div class="col-xs-9 half-gutter">
                                <h5>PN</h5>
                                <h6>Google Maps</h6>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="single-testimonial animate_fade_in" style="opacity: 1; right: 0px;">
                        <div class="row">
                            <div class="col-xs-12">
                                <h5>
                                    <blockquote>"My son is studying here, discipline is very good and teachers are
also
                                        good. I visited during lunch time but to my surprise there was total silence and
                                        kids were not making any noise rather they were sitting in the garden and
                                        discussing"</blockquote>
                                </h5>

                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-3">
                                <img src="images/pic2.jpg" alt="client">
                            </div>
                            <div class="col-xs-9 half-gutter">
                                <h5>TS</h5>
                                <h6>Local Guide</h6>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="single-testimonial animate_fade_in" style="opacity: 1; right: 0px;">
                        <div class="row">
[27]
                            <div class="col-xs-12">
                                <h5>
                                    <blockquote>"Working for enrichment of the needy and backward. With world
class
                                        affiliation in to technical and computer knowledge. Huge Campus, down to
earth
                                        staff and course fee. Skilled and Talented teachers! Companies like Godrej have
                                        its office branch in this institute."</blockquote>
                                </h5>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-3">
                                <img src="images/pic1.jpg" alt="client">
                            </div>
                            <div class="col-xs-9 half-gutter">
                                <h5>JS</h5>
                                <h6>Google Maps</h6>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section id="contact-us">
        <div class="container">
            <div class="section-header">
                <h2 class="section-title wow fadeInDown">Contact Us</h2>
                <p class="wow fadeInDown">In case of any queries regarding admissions or any other topic,
write to us
                </p>
            </div>
        </div>
    </section>
    <!--/#contact-us-->

    <section id="contact">

        <div class="container">
            <div class="container contact-info">
                <div class="row">
                    <div class="col-sm-4 col-md-4">
                        <div class="contact-form">
                            <h3>Contact Info</h3>

                            <address>
                                <strong>Don Bosco Institute of Technology</strong><br>
                                Jamia Nagar, Okhla Road<br>
                                New Delhi-110025<br>
[28]
                                <abbr title="Phone"></abbr> Phone Number: 011-41033889/ +91-9643868820<br>
                                <abbr title="Email ID"></abbr>Email ID: [email protected]
                            </address>
                        </div>
                    </div>
                    <div class="col-sm-8 col-md-8">
                        <div class="contact-form">

                            <form id="main-contact-form" name="contact-form" method="post" action="#">

                                <div class="form-group">
                                    <input type="text" name="name" class="form-control" placeholder="Name"
required>
                                </div>
                                <div class="form-group">
                                    <input type="email" name="email" class="form-control" placeholder="Email"
required>
                                </div>
                                <div class="form-group">
                                    <input type="text" name="subject" class="form-control" placeholder="Subject"
                                        required>
                                </div>
                                <div class="form-group">
                                    <textarea name="message" class="form-control" rows="8"
placeholder="Message"
                                        required></textarea>
                                </div>
                                <button type="submit" class="btn btn-primary">Send Message</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--/#bottom-->

    <footer id="footer">
        <div class="container">
            <div class="row">

                <div class="col-sm-6">
                    &copy; <a target="_blank" href="http://donboscotechdelhi.in/Index.aspx"
title="donboscotechdelhi">
                        donboscotechdelhi</a>
                </div>
                <div class="col-sm-6">
                    <ul class="social-icons">

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

[29]
                        <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                        <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                        <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
                        <li><a href="#"><i class="fa fa-youtube"></i></a></li>
                        <li><a href="#"><i class="fa fa-github"></i></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </footer>
    <!--/#footer-->

    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/mousescroll.js"></script>
    <script src="js/smoothscroll.js"></script>
    <script src="js/jquery.prettyPhoto.js"></script>
    <script src="js/jquery.isotope.min.js"></script>
    <script src="js/jquery.inview.min.js"></script>
    <script src="js/wow.min.js"></script>
    <script src="js/custom-scripts.js"></script>
</body>

</html>

Coding (JavaScript Part)

/*
Author: webthemez.com
Author URL: http://webthemez.com
*/
jQuery(function($) {
    'use strict';
   
    $(window).scroll(function(event) {
        Scroll();
    });

    $('.navbar-collapse ul li a').on('click', function() {

        $('html, body').animate({
            scrollTop: $(this.hash).offset().top - 5
        }, 1000);
        return false;
    });
 
    function Scroll() {
        var contentTop = [];
        var contentBottom = [];
        var winTop = $(window).scrollTop();
        var rangeTop = 200;
        var rangeBottom = 500;
[30]
        $('.navbar-collapse').find('.scroll a').each(function() {
            contentTop.push($($(this).attr('href')).offset().top);
            contentBottom.push($($(this).attr('href')).offset().top + $($(this).attr('href')).height());
        })
        $.each(contentTop, function(i) {
            if (winTop > contentTop[i] - rangeTop) {
                $('.navbar-collapse li.scroll')
                    .removeClass('active')
                    .eq(i).addClass('active');
      }
        })
    };

    $('#tohash').on('click', function() {
        $('html, body').animate({
            scrollTop: $(this.hash).offset().top - 5
        }, 1000);
        return false;
    });

 
    new WOW().init();
   
    smoothScroll.init();

  
    $(window).load(function() {
        'use strict';
        var $portfolio_selectors = $('.portfolio-filter >li>a');
        var $portfolio = $('.portfolio-items');
        $portfolio.isotope({
            itemSelector: '.portfolio-item',
            layoutMode: 'fitRows'
        });

        $portfolio_selectors.on('click', function() {
            $portfolio_selectors.removeClass('active');
            $(this).addClass('active');
            var selector = $(this).attr('data-filter');
            $portfolio.isotope({
                filter: selector
            });
            return false;
        });
    });

    $(document).ready(function() {
  
        $.fn.animateNumbers = function(stop, commas, duration, ease) {
            return this.each(function() {
[31]
                var $this = $(this);
                var start = parseInt($this.text().replace(/,/g, ""));
                commas = (commas === undefined) ? true : commas;
                $({
                    value: start
                }).animate({
                    value: stop
                }, {
                    duration: duration == undefined ? 1000 : duration,
                    easing: ease == undefined ? "swing" : ease,
                    step: function() {
                        $this.text(Math.floor(this.value));
                        if (commas) {
                            $this.text($this.text().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,"));
            }
                    },
                    complete: function() {
                        if (parseInt($this.text()) !== stop) {
                            $this.text(stop);
                            if (commas) {
                                $this.text($this.text().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,"));
              }
            }
          }
                });
            });
        };

        $('.business-stats').bind('inview', function(event, visible, visiblePartX, visiblePartY) {

            var $this = $(this);
            if (visible) {
                $this.animateNumbers($this.data('digit'), false, $this.data('duration'));
                $this.unbind('inview');
      }
        });
    });

 
    $("a[rel^='prettyPhoto']").prettyPhoto({
        social_tools: false
    });
 

});

Coding (CSS Part) (style.css)

[32]
@import url(http://fonts.googleapis.com/css?family=Raleway:400,700,500);
/*
Author: webthemez.com
Author URL: http://webthemez.com
*/
/*************************
*******Typography******
**************************/
body {
  padding-top: 100px;
  background: #fff;
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
  color: #282828;
  line-height: 26px;
  padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600;
  font-family: 'Raleway', sans-serif;
}
a{
  color: #45aed6;
  -webkit-transition: color 400ms, background-color 400ms;
  -moz-transition: color 400ms, background-color 400ms;
  -o-transition: color 400ms, background-color 400ms;
  transition: color 400ms, background-color 400ms;
}
a:hover,
a:focus {
  text-decoration: none;
  color: #2a95be;
}
hr {
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #fff;
}
.gradiant {
  background-image: -moz-linear-gradient(90deg, #2caab3 0%, #2c8cb3 100%);
  background-image: -webkit-linear-gradient(90deg, #2caab3 0%, #2c8cb3 100%);
  background-image: -ms-linear-gradient(90deg, #2caab3 0%, #2c8cb3 100%);
}
.gradiant-horizontal {
  background-image: -moz-linear-gradient(4deg, #2caab3 0%, #2c8cb3 100%);
[33]
  background-image: -webkit-linear-gradient(4deg, #2caab3 0%, #2c8cb3 100%);

  background-image: -ms-linear-gradient(4deg, #2caab3 0%, #2c8cb3 100%);

}
.section-header {
  margin-bottom: 50px;
}
.section-header p{
text-align:center;
}
.section-header .section-title {
  font-size: 44px;
  color: #F9690E;
  position: relative;
  padding-bottom: 20px;
  margin: 0 0 20px;  

  display: block;
  text-align: center;
}
.section-header .section-title:before {
  content: "";
  position: absolute;
  width: 140px;
  bottom: -5px;
  right: 0;
  width: 30px;
  background: rgb(249, 105, 14);
  border-radius: 50%;
  margin: 0 auto;
  left: 0;
  right: 0;
  height: 10px;
}

.btn {
  border-width: 0;
  border-radius: 0;
}
.btn.btn-primary {
  background: #CD4F00;
}
.btn.btn-primary:hover,
.btn.btn-primary:focus {
  background: #FF8A41;
}
.listarrow{
padding:0px;
}
.listarrow li{
[34]
list-style:none;
margin:0px;
padding:0px;
}

.listarrow li i{
padding-right:15px;
color: #F9690E;
}
.column-title {
  margin-top: 0;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
  margin-bottom: 15px;
  position: relative;
  color: #fff;
}
.column-title:after {
  content: " ";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 40%;
}
ul.nostyle {
  list-style: none;
  padding: 0;
  margin-bottom: 20px;
}
ul.nostyle i {
  color: #45aed6;
}
.scaleIn {
  -webkit-animation-name: scaleIn;
  animation-name: scaleIn;
}
.navbar-toggle{
border-radius: 0;
}

.navbar-nav>li>a {
text-transform: uppercase;
}
@-webkit-keyframes scaleIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
 }
  100% {
[35]
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
 }
}
@keyframes scaleIn {
  0% {

    opacity: 0;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
 }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
 }
}
/*************************
*******Header******
**************************/
#main-nav.navbar-default {
background: #FFFFFF;
}
#main-nav.navbar-default .navbar-nav > li.active > a, #main-nav.navbar-default .navbar-nav > li.open >
a, #main-nav.navbar-default .navbar-nav > li:hover > a {
background: rgb(249, 105, 14);
color: #FFFFFF;
}
.navbar.navbar-default {
  border: 0;
  border-radius: 0;
  margin-bottom: 0;
}
.navbar.navbar-default .navbar-toggle {
  margin-top: 32px;
}
.navbar.navbar-default .navbar-brand {
  height: auto;
  padding: 10px 15px 1px;
}
.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus{
color: #F8680D;
 
background: transparent;
}
.navbar-default .navbar-nav>li>a{
color: #020202;
[36]
}
#main-nav.navbar-default {
background: #FFF;
}
.navbar-nav>li {
}
 

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

  #main-nav.navbar-default {

    -webkit-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.1);

    box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.26);
 }
  #main-nav.navbar-default .navbar-nav > li > a {
    padding-top: 30px;
    padding-bottom: 24px;
 
    border-bottom: 4px solid transparent;
}
  .navbar-default .navbar-nav>li>a {
  color: #0E0E0E;
 }
  #main-nav.navbar-default .navbar-nav > li.active > a,

  #main-nav.navbar-default .navbar-nav > li.open > a,

  #main-nav.navbar-default .navbar-nav > li:hover > a {
    background: transparent;
 
    color: #F9690E;
 
}
  #main-nav.navbar-default .dropdown-menu {
    padding: 0 20px;
    min-width: 220px;
    background-color: rgba(26, 28, 40, 0.9);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    -webkit-box-shadow: none;
    background-clip: inherit;
 }
  #main-nav.navbar-default .dropdown-menu > li {
    border-left: 3px solid transparent;
    margin-left: -20px;
    padding-left: 17px;
    -webit-transition: border-color 400ms;
    transition: border-color 400ms;
 }
  #main-nav.navbar-default .dropdown-menu > li > a {
[37]
    padding: 15px 0;
    color:#A8A8A8;
 }
  #main-nav.navbar-default .dropdown-menu > li:first-child > a {
    border-top: 0;
 }
  #main-nav.navbar-default .dropdown-menu > li.active,
  #main-nav.navbar-default .dropdown-menu > li.open,
  #main-nav.navbar-default .dropdown-menu > li:hover {
    border-left-color: #45aed6;
 }
  #main-nav.navbar-default .dropdown-menu > li.active > a,
  #main-nav.navbar-default .dropdown-menu > li.open > a,

  #main-nav.navbar-default .dropdown-menu > li:hover > a {

    color: #45aed6;
    background-color: transparent;
 }
}

#hero-banner{
  overflow: hidden;
  height: 700px;
  background: url('../images/banner/banner1.jpg');
 
  background-size:cover;
  color:#fff;
}
#hero-banner.item {
backdrop-filter: blur(2px);
  height: 558px;
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: cover;
}
#hero-banner.banner-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: #000;
}
#hero-banner h2 {
  margin-top: 299px;
  font-size: 39px;
  line-height: 49px;

  text-align: right;  
}
[38]
#hero-banner h2 b{
color:#F9690E;
}
#hero-banner p {
  font-size: 22px;
margin-bottom:20px;
line-height:35px;

  text-align: right;}
#hero-banner a{
width: 150px;
margin: 0;
display: block;
background: transparent;
border: 2px solid #fff;
float: right;

}
#hero-banner a:hover{
text-align: center;
width: 150px;
margin: 0 auto;
display: block;
background: #F9690E;
border: 2px solid #F9690E;
color: #FFF;
}
#hero-banner.banner-inner h2 > span {
  color: #45aed6;
}
#hero-banner.banner-inner .btn {
  margin-top: 10px;
}
 
#hero-text {
  padding: 50px 0;
  border-top: 1px solid #FFFFFF;
}
#hero-text h2 {
  margin-top: 0;
}
#hero-text .btn {
  margin-top: 40px;
}
#cta2 {
  background: #45b1da;
  color: #fff;
  padding-top: 70px;
}
#cta2 .btn {
[39]
  margin-top: 10px;
}
#cta2 h2 {
  color: #fff;
  font-size: 44px;
  line-height: 1;
}
#cta2 h2 > span {
  color: #45aed6;
}
#features h2, #portfolio p{ color: #C3C3C3;}
#features {
  padding: 100px 0;
  background: #FFFFFF;
  color: #000;
}

#features .media.service-box:first-child {
  margin-top: 80px;

}
#services, #features {
  padding: 100px 0 75px;
}
.media.service-box {
  margin: 25px 0 36px;
  padding: 20px;
  padding-left: 86px;
  position: relative;
  background: #FFFFFF;
  border-radius: 0 0 20px 0;
  border: #F9690B 2px solid;
}
.media.service-box .pull-left {
  margin-right: 20px;
}
.media.service-box .pull-left > i {
  font-size: 35px;
  /* height: 94px; */
  line-height: 53px;
  text-align: center;
  width: 79px;
  color: #085C98;
  /* background:#fff; */
  /* box-shadow: inset 0 0 0 1px #d7d7d7; */
  /* -webkit-box-shadow: inset 0 0 0 1px #d7d7d7; */
  transition: background-color 400ms, background-color 400ms;
  position: absolute;
  padding: 14px;
  /* height: 100%; */
[40]
  left: -13px;
  top: -15px;
  vertical-align: middle;
  background: rgb(249, 105, 14);
  border-radius: 10% 20%;
  height: 80px;
  border: 6px #fff solid;
}
.features .media.service-box .pull-left > i{
color: #FFE3D2;
font-size: 30px;
padding-top: 10px;
}
.media.service-box:hover .pull-left > i {  
}
#portfolio {
  padding: 100px 0;
  background: #FFFFFF;
  background: url('../images/img4.png');
  background-size: cover;
}
#portfolio .portfolio-filter {

  list-style: none;
  padding: 0;
  margin: 0 0 50px;
  display: inline-block;
}
#portfolio .portfolio-filter > li {
  float: left;
  display: block;
}
#portfolio .portfolio-filter > li a {
  display: block;
  padding: 7px 15px;
  margin:0px 2px;
  color: #D7D7D7;
  position: relative;
  border-bottom: 2px solid transparent;
  background: rgba(229, 229, 229, 0.29);
}
#portfolio .portfolio-filter > li a:hover,
#portfolio .portfolio-filter > li a.active {
  background: #F9690E;
  color: #FFFFFF;
}
#portfolio .portfolio-items {
  margin: -15px;
}
#portfolio .portfolio-item {
[41]
  width: 24.9%;
  float: left;
  padding: 8px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
#portfolio .portfolio-item .portfolio-item-inner {
  position: relative;
  border-bottom: 4px solid #F9690E;
}
#portfolio .portfolio-item .portfolio-item-inner .portfolio-info {
  opacity: 0;
  transition: opacity 400ms;
  -webkit-transition: opacity 400ms;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  padding: 18px 0 0;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;

  height:100%;
}
#portfolio .portfolio-item .portfolio-item-inner .portfolio-info h3 {
  font-size: 16px;
  line-height: 1;
  margin: 0;
  color: #fff;
}
#portfolio .portfolio-item .portfolio-item-inner .portfolio-info .preview {
  width: 60px;
  height: 60px;
  line-height: 36px;
  text-align: center;
  color: #F9690E;
  display:block;
  text-align: center;

  margin: 45px auto;

  font-size: 26px;
  border: 0;
  /* background: rgba(239, 239, 239, 1); */
  padding: 10px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.53);
[42]
}
#portfolio .portfolio-item:hover .portfolio-info {
  opacity: 1;
}
/* Start: Recommended Isotope styles */
/**** Isotope Filtering ****/
.isotope-item {
  z-index: 2;
}
.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}
/**** Isotope CSS3 transitions ****/
.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
  -moz-transition-duration: 0.8s;
  -ms-transition-duration: 0.8s;
  -o-transition-duration: 0.8s;
  transition-duration: 0.8s;
}
.isotope {
  -webkit-transition-property: height, width;
  -moz-transition-property: height, width;
  -ms-transition-property: height, width;
  -o-transition-property: height, width;
  transition-property: height, width;

}
.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
  -moz-transition-property: -moz-transform, opacity;
  -ms-transition-property: -ms-transform, opacity;
  -o-transition-property: -o-transform, opacity;
  transition-property: transform, opacity;
}
/**** disabling Isotope CSS3 transitions ****/
.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
  -moz-transition-duration: 0s;
  -ms-transition-duration: 0s;
  -o-transition-duration: 0s;
  transition-duration: 0s;
}
/* End: Recommended Isotope styles */
/* disable CSS transitions for containers with infinite scrolling*/
.isotope.infinite-scrolling {
[43]
  -webkit-transition: none;
  -moz-transition: none;
  -ms-transition: none;
  -o-transition: none;
  transition: none;
}
.img-thumbnail {
display: inline-block;
max-width: 100%;
height: auto;
line-height: 1.42857143;
border: 1px solid #ddd;
border-radius: 0px;
padding:0px;
-webkit-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
margin-bottom: 15px;
}
#testimonial {
  background: #222222;
  background-size: cover;
  padding: 100px 0;
  color: #fff;
  background: url('../images/img3.jpg');
  background-size: cover;
}
#testimonial h2{
color:#fff;
}
#testimonial h4 {

  color: #fff;
  margin-bottom: 8px;
}
#testimonial small {
  display: block;
  margin-bottom: 10px;
  color: rgba(255, 255, 255, 0.7);
}
#testimonial .btns {
  margin-top: 10px;
}
#carousel-testimonial a.btn.btn-primary.btn-sm {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.2);
margin: 0 8px;
}
#about {
  padding: 100px 0;
[44]
  background: #07080A;
  background: url('../images/img2.jpg');    
  background-size: cover;  };
#about .column-title{
color:#fff;
}
#about p{
color:#ffffff;
}
#about .listarrow li{
color:#ffffff;
}
/*Team*/
#our-team {
  padding: 100px 0;
}
#our-team .team-member {
  padding: 0;  
}
#our-team .team-member .team-img {
  margin: 0;
}
#our-team .team-member .team-info {
  background: #222222;
  color: #BBBBBB;
  padding: 7px 0;
  border-top: 2px solid #fff;
}
#our-team .team-member:hover .social-icons > li > a {
  color: #F9690E;
}
 
#our-team .social-icons {
  list-style: none;

  padding: 0;
  margin: 0;  
  -webkit-transition: height 1s; /* For Safari 3.1 to 6.0 */
    transition: height 1s;
  background: #F4F4F4;
  padding: 6px 0 6px;
}
#our-team .social-icons > li {
  display: inline-block;
}
#our-team .social-icons > li > a {
  display: block;
  width: 32px;
  height: 32px;
  line-height: 32px;
[45]
  text-align: center;
  color: #C3C3C3;
  background: transparent;
  border-radius: 3px;
  border: 1px solid #DFDFDF;
  margin: 5px 10px;
}
/*Testimonial Area*/

.testimonial-area{
  padding-bottom:60px;
}
.single-testimonial{
  margin-bottom:30px;
}
.single-testimonial blockquote{
  padding:15px 20px;
  margin-bottom: 22px;
  position:relative;
  -webkit-transition:all .5s ease;
  -moz-transition:all .5s ease;
  transition:all .5s ease;
  font-size: 14px;
  background: rgba(0, 0, 0, 0.39);

  color: #919191;
line-height: 22px;

  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.39);
}
 
.single-testimonial blockquote:after{
  /* position:absolute; */
  /* bottom:-19px; */
  /* left:45px; */
  content:"";

  /* border-top: 19px solid rgba(255, 255, 255, 0.29); */

  /* border-right: 22px solid transparent; */

}
.single-testimonial img{
  border-radius: 50%;
  opacity: 0.6;
}
.single-testimonial h5{
  padding: 8px 0 0px;
  font-size: 16px;
  color: #F9690E;
[46]
}
 
.progress {
  -webkit-box-shadow: none;
  box-shadow: none;
  background: #eeeeee;
}
.progress .progress-bar.progress-bar-primary {
  background-image: -moz-linear-gradient(4deg, #2caab3 0%, #2c8cb3 100%);
  background-image: -webkit-linear-gradient(4deg, #2caab3 0%, #2c8cb3 100%);
  background-image: -ms-linear-gradient(4deg, #2caab3 0%, #2c8cb3 100%);
  -webkit-box-shadow: none;
  box-shadow: none;
}
.nav.main-tab {
  background: #eee;
  border-bottom: 3px solid #222534;
  border-radius: 3px 3px 0 0;
}
.nav.main-tab > li > a {
  color: #272727;
}
.nav.main-tab > li.active > a {
  background: #222534;
  color: #45aed6;
}
.nav.main-tab > li:first-child > a {
  border-radius: 3px 0 0 0;
}
.nav.main-tab > li:last-child > a {
  border-radius: 0 3px 0 0;
}
 .navbar-nav {
margin: 0;  
}
.tab-content {
  border: 1px solid #eee;
  border-top: 0;
  padding: 20px 20px 10px;
  border-radius: 0 0 3px 3px;

}
.panel-default {
  border-color: #eee;
}
.panel-default > .panel-heading {
  background-color: #fff;
  border-color: #eee;
}
.panel-default > .panel-heading .panel-title {
[47]
  font-size: 14px;
  font-weight: normal;
}
.panel-default > .panel-heading + .panel-collapse > .panel-body {
  border-top-color: #eee;
}
#business-stats {
  padding: 100px 0 70px;
  background: #FFFFFF;
  background-size: cover;
  color: #000;
  /* background: url('../images/img2.jpg'); */
  background-size: contain;
}
#business-stats h1,
#business-stats h2,
#business-stats h3,
#business-stats h4 {
  color: #151313;
}
#business-stats strong {
  display: block;
  margin-bottom: 30px;
}
.business-stats {
  display: inline-block;
  width: 140px;
  height: 140px;
  font-size: 24px;
  line-height: 140px;
  border: 4px solid #F9690E;
  border-radius: 100px;
  margin-bottom: 20px;
}
#pricing {
  padding: 100px 0 70px;
}
#pricing ul.pricing {
  list-style: none;
  padding: 0;
  margin: 70px 0 30px;
  border: 1px solid #D0D0D0;
  padding: 8px;

  text-align: center;
  background: #B8B8B8;
}
#pricing ul.pricing li {
  display: block;
  padding: 10px;
[48]
}
#pricing ul.pricing li.plan-header {
  background: #FFFFFF;
  padding: 15px 15px 30px;
  color: #050505 !important;
  border: 1px solid #ECECEC;
  border-radius: 50%;
  height: 225px;
}
#pricing ul.pricing li.plan-header .price-duration {
  position: relative;
  margin-top: 15px;
  top: -16px;
  display: inline-block;
  width: 100%;
  height: 85px;
  color: #474747;  
}
li.plan-purchase .btn {
  width: 100%;
}
#pricing ul.pricing li.plan-header .price-duration > span {
  display: block;
  line-height: 1;
}
#pricing ul.pricing li.plan-header .price-duration > span.price {
  font-size: 24px;
  font-weight: 700;
  margin-top: 35px;
}
#pricing ul.pricing li.plan-header .price-duration > span.duration {
  margin-top: 5px;
}
#pricing ul.pricing li.plan-header .plan-name {
  margin-top: 10px;
  font-size: 24px;
  color: #5A5A5A;
  font-weight: bold;
  line-height: 1;
  text-transform: uppercase;
}
#pricing ul.pricing.featured {
  background: #151515;
  border: 0;
  color: #D2D2D2;
  border: 1px solid #D0D0D0;

}
#pricing ul.pricing.featured  li.plan-header .price-duration{
color: #FFFFFF;
[49]
}
#pricing ul.pricing.featured li.plan-header {
  background: #F9690E;
}
#pricing ul.pricing.featured li.plan-header .plan-name {
  color: #FFFFFF;
}
#contact-us {
  padding: 100px 0 10px;
}
#contact-us h1,
#contact-us h2 {
}
/*Contact*/
 .contact-info{
 background: #F9690E;
 padding: 50px;
 margin-bottom: 50px;
}
.contact-info address {
margin-bottom: 20px;
font-style: normal;
line-height: 27px;
font-size: 15px;
}
.contact-info .form-control {
padding: 6px 12px;
border-radius: 0;
}
 .business-stats:before {
content: '';
margin: 17px;
display: block;
border: currentcolor;
height: 100px;
border-radius: 50%;
position: absolute;
width: 100px;
}
/***********************
********* Footer ******
************************/
#footer {
  padding-top: 30px;
  padding-bottom: 30px;
  color: #fff;
  background: #222222;
}
#footer a {

[50]
  color: #fff;
}
#footer a:hover {
  color: #F9690E;
}
#footer ul {
  list-style: none;
  padding: 0;
  margin: 0 -7.5px;
}
#footer ul > li {
 display: inline-block;

padding: 3px 0;
width: 31px;
text-align: center;
}
@media only screen and (min-width: 768px) {
  #footer .social-icons {
    float: right;
 }
}
@media only screen and (max-width:768px){
.navbar-default .navbar-collapse, .navbar-default .navbar-form {
border-color: #A3A3A3;
padding: 20px 0;
}
}
.form-control {
  box-shadow: none;
  -webkit-box-shadow: none;
}
@media only screen and (max-width: 480px) {
#hero-banner h2 {
margin-top: 161px;
font-size: 26px;
line-height: 40px;
padding: 10px;
}
#hero-banner p {
font-size: 18px;
padding: 10px;
}
#portfolio .portfolio-filter {
list-style: none;
padding: 0;
margin: 0 0 12px;
}
#portfolio .portfolio-filter > li a {
display: block;
[51]
padding: 7px 15px;
margin: 5px 2px;

}
  #portfolio .portfolio-item {
  width: 48.9%;
  padding: 8px;
 }
  #portfolio .portfolio-item .portfolio-item-inner .portfolio-info .preview {
width: 28px;
height: 24px;
line-height: 24px;
margin: 9px auto;
}
#portfolio .portfolio-item .portfolio-item-inner .portfolio-info {
padding: 7px 0 0;
}
}

Coding (PHP Part- HTML form) (student_form.html)

<html>
<head>
<title>Student Registration Form</title>

</head>
<form action="student_form.php"  method="post">
<body>
<h3 align="center">BTTS REGISTRATION FORM</h3>

 
<table align="center" cellpadding = "10">
 
<!----- First Name ---------------------------------------------------------->
<tr>
<td>FIRST NAME</td>
<td><input type="text" name="First_Name" maxlength="30"/>
(max 30 characters a-z and A-Z)
</td>
</tr>
 
<!----- Last Name ---------------------------------------------------------->
<tr>
<td>LAST NAME</td>
<td><input type="text" name="Last_Name" maxlength="30"/>
(max 30 characters a-z and A-Z)
</td>
</tr>
 
<!----- Date Of Birth -------------------------------------------------------->
[52]
<tr>
<td>DATE OF BIRTH</td>
<td><input type="text" name="dob" maxlength="8" />
(In DD/MM/YY Format)
</td>

</tr>
 
<!----- Email Id ---------------------------------------------------------->
<tr>
<td>EMAIL ID</td>
<td><input type="text" name="Email_Id" maxlength="40" /></td>
</tr>
 
<!----- Mobile Number ---------------------------------------------------------->
<tr>
<td>MOBILE NUMBER</td>
<td>
<input type="text" name="Mobile_Number" maxlength="10" />
(10 digit number)
</td>
</tr>
 
<!----- Gender ----------------------------------------------------------->
<tr>
  <td>Gender</td>
  <td>
  <input type="text" name="Gender" maxlength="1" />
  (1 digit only, M incase of Male and F for Female)
  </td>
  </tr>
 
<!----- Address ---------------------------------------------------------->
<tr>
<td>ADDRESS <br /><br /><br /></td>
<td><textarea name="Address" rows="4" cols="30"></textarea></td>
</tr>
 
<!----- City ---------------------------------------------------------->
<tr>
<td>CITY</td>
<td><input type="text" name="City" maxlength="30" />
(max 30 characters a-z and A-Z)
</td>
</tr>
 
<!----- Pin Code ---------------------------------------------------------->
<tr>
<td>PIN CODE</td>
<td><input type="text" name="Pin_Code" maxlength="6" />
[53]
(6 digit number)
</td>
</tr>
 
<!----- State ---------------------------------------------------------->
<tr>
<td>STATE</td>
<td><input type="text" name="State" maxlength="30" />

(max 30 characters a-z and A-Z)

</td>
</tr>
 
<!----- Country ---------------------------------------------------------->
<tr>
<td>COUNTRY</td>
<td><input type="text" name="Country" maxlength="30" /></td>
</tr>

<!----- Qualification ---------------------------------------------------------->

<tr>
  <td>MARKS SCORED IN 10th BOARDS</td>
  <td><input type="text" name="Tenthmarks" maxlength="5"/>
  (upto 2 decimal places)
  </td>
  </tr>

<tr>
  <td>10th BOARDS PASSING YEAR</td>
  <td><input type="text" name="Tenthyear" maxlength="4"/>
  (In YYYY format)
  </td>
  </tr>

  <tr>
    <td>MARKS SCORED IN 12th BOARDS</td>
    <td><input type="text" name="Twelfthmarks" maxlength="5"/>
    (upto 2 decimal places)
    </td>
    </tr>

    <tr>
      <td>12th BOARDS PASSING YEAR</td>
      <td><input type="text" name="Twelfthyear" maxlength="4"/>
      (In YYYY format)
      </td>
      </tr>
 
 
<!----- Submit and Reset ------------------------------------------------->
[54]
<tr>
<td colspan="2" align="center">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
<script>
    function myFunction()
  {
      document.getElementById("myForm").reset();
  }
    </script>
</td>

</tr>
</table>
</form>
</body>
</html>

Coding (PHP Part) (student_form.php)

<?php

$c = mysqli_connect('localhost:3306', "root", "");  

if(! $c)  
{ 
  die('Connection not established: ' . mysqli_error());  
} 
echo 'you are successfully connected with PHP<br/>';  
$s1=mysqli_select_db($c,"stu");

$First_Name = $_REQUEST['First_Name'];
$Last_Name = $_REQUEST['Last_Name'];
$dob = $_REQUEST['dob'];
$Email_Id = $_REQUEST['Email_Id'];
$Mobile_Number = $_REQUEST['Mobile_Number'];
$Gender = $_REQUEST['Gender'];
$Address = $_REQUEST['Address'];
$City = $_REQUEST['City'];
$Pin_Code = $_REQUEST['Pin_Code'];
$State = $_REQUEST['State'];
$Country = $_REQUEST['Country'];
$Tenthmarks = $_REQUEST['Tenthmarks'];
$Tenthyear = $_REQUEST['Tenthyear'];
$Twelfthmarks = $_REQUEST['Twelfthmarks'];
$Twelfthyear = $_REQUEST['Twelfthyear'];

$s= "insert into emp

(fname,lname,sdob,emailid,phno,gender,address,city,pincode,state,country,tenthmarks,tenthyear,twelfth
marks,twyear) values
('$First_Name','$Last_Name','$dob','$Email_Id','$Mobile_Number','$Gender','$Address','$City','$Pin_Co
[55]
de','$State','$Country','$Tenthmarks','$Tenthyear','$Twelfthmarks','$Twelfthyear')";
if(mysqli_query( $c,$s)){

echo "Record entered into table successfully";

}else{

echo "Record can not be inserted".mysqli_error($c);

mysqli_close($c);

?>

Output of Website

[56]
[57]
[58]
[59]
[60]
[61]
Output (Admission Form)

[62]
Chapter-8: SYSTEMS TESTING
[63]
Testing is a set activity that can be planned and conducted systematically. Testing begins at the module
level and work towards the integration of entire computers-based system. A system is tested for online
response, volume of transaction, recovery from failure, etc. System testing is done to ensure that the
system satisfies all the user requirements. Nothing is complete without testing as it is vital success of the
system.

o System coding test is done properly.

o All programming is tested properly and they are working properly.

o All users are able to login in form by entering correct email and password.

o Students have high security on their data because the data is completely tested and have
been stored in database safely.

o A good test case is one that has high probability of finding an undiscovered error.

o A successful test is one that uncovers an undiscovered error.

o If testing is conducted successfully according to the objectives as stated above, it would

uncover errors in the software. Also testing demonstrates that software functions appears
to the working according to the specification, that performance requirements appears to
have been met.

There are three ways to test a program

1. For correctness
2. For Implementation efficiency
3. For Computational Complexity.

[64]
Chapter-9: FUTURE SCOPE OF THE PROJECT

In a nutshell, it can be summarized that the future scope of the project circles around maintaining
information regarding:
• We can give more advance software for college website including more facilities.
We will host the platform on online servers to make it accessible worldwide.

• The motivation behind this application is to provide a platform for everyone to communicate in
an effective and efficient manner.

•The growing popularity and usage of online applications has led to a need to explore the industrial
services who could tap into and enhance their services to the users. The above-mentioned points are the
enhancements which can be done to increase the applicability and usage of this project

 The bright future prospect of college networking is also proven with the fact that the technology
is integrated in mobile phones as well.

 The project is developing with the power of interpersonal communication on a globalized

outlook.

 In fact, social media have become an important tool of marketing in true sense of customer
orientation. But this kind of social networking site which can access only for college campus not
from outside the college will make a dramatic changes inside the college
 campus.

[65]
References

1. https://www.google.com
2. https://www.w3schools.com/html
3. https://www.w3schools.com/colors/colors_picker.asp
4. https://www.w3schools.com/php
5. https://github.com

[66]