A Project Report

LIBRARY MANAGEMENT SYSTEM

Submitted to parietal fulfilment of the requirements for award of the degree of

BACHELOR OF TECHNOLOGY
IN

INFORMATION TECHNOLOGY AND COMPUTER APPLICATIONS

By

REEMALI AKSHAY NAGA KUMAR 320106411037

Under the guidance of

Ms.Suneetha

Mr.Anvesh

DEPARTMENT OF INFORMATION TECHNOLOGY AND

COMPUTER APPLICATIONS (IT&CA)

ANDHRA UNIVERSITY COLLEGE OF ENGINEERING (A)

(Accredited by NBA,NAAC Approved by AICTE and ISO 9001-2008 Certified)

AndhraUniversity North Campus ,Visakhapatnam

 1

INDEX
Table of Contents
Introduction to HTML 3
Definition of HTML 3
Advantages of HTML
3
Disadvantages of HTML 3
Elements and tags of HTML 4
HTML page structure 5
Features of HTML 5
Introduction to CSS 6
Definition of CSS 6
Advantages of CSS 6
Disadvantages of CSS 6
W3 Container 6
Introduction to Java script 7
Define java script 7
Script tag 7
Java script functions and events 7

External java script and it’s advantages 8

Introduction to database connectivity 9
How to create a data base 10
How to create a table 11
How to insert into a table 12
How to select from a table 13
How to use where statement 14
How to use order by statement 15
How to establish data base connectivity with Mysql or Ms Access or Oracle 16
Abstract of project 1 17
 2

Introduction to Project-1 17
Requirements(Hard ware and Software) 18
How to run the project 19
Code of Project-1 20
Output screen shot of
Project1……………………………………………………………………………………
52… …………………………………………….
Abstract of project 2 60
Introduction to Project-2 60
Requirements(Hard ware and Software) 61
How to run the project 61
Code of Project-2 62
Output screen shot of
Project2…………………………………………………………………………………124…
…………………………………………….
 3

Introduction to HTML
HTML stands for Hyper Text Markup Language. It is used to design web pages using markup language.
HTML is the combination of Hypertext and Markup language. Hypertext defines the link between the web
pages. Markup language is used to define the text document within tag which defines the structure of web
pages. HTML 5 is the fifth and current version of HTML. It has improved the markup available for
documents and has introduced application programming interfaces(API) and Document Object
Model(DOM).
4
 5

Definition of HTML
HTML tutorial or HTML 5 tutorial provides basic and advanced concepts of HTML. Our HTML tutorial
is developed for beginners and professionals. In our tutorial, every topic is given step-by-step so that you
can learn it in a very easy way. If you are new in learning HTML, then you can learn HTML from basic to
a professional level and after learning HTML with CSS and JavaScript you will be able to create your own
interactive and dynamic website. But Now We will focus on HTML only in this tutorial.

The major points of HTML are given below:

o HTML stands for HyperText Markup Language. o HTML is used to create

web pages and web applications. o HTML is widely used language on the

web. o We can create a static website by HTML only. o Technically, HTML

is a Markup language rather than a programming language.

Advantages of Html:
1. HTML is Easy to Learn and Use HTML is very easy to learn and understand. ...
2. HTML is Free One of the biggest advantages of HTML is that it is free of cost and there is no need to
purchase specific software. ...
3. HTML is supported by all Browsers Almost all the browsers around the globe are supported by HTML.
...
4. HTML is the Most Friendly Search Engine HTML is one of the most friendly search engines in
comparison to all the programming languages available in the market (Search Engine ...
5. HTML is Simple to Edit HTML is very easy to edit as there is no need to have a special interface or
platform to edit it.
 6

Disadvantages of Html:

• Complexity – A lot of code can be complex to handle

• Security – It is not secure by its own
• Limitations – Alone HTML do not have many capabilities
7
8
 9

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.

o You can add new looks to your old HTML documents. o You can completely change
the look of your website with only a few changes in CSS code.

Advantages of CSS
CSS handles the look and feel part of a web page. Using CSS, you can control the color of the text, the style
of fonts, the spacing between paragraphs, how columns are sized and laid out, etc.
The following are the advantages of CSS − • CSS saves time − You can write CSS once and then reuse the
same sheet in multiple HTML pages. You can define a style for each HTML element and apply it to as
many Web pages as you want.

• Easy maintenance − To make a global change, simply change the style, and all elements in all the web
pages will be updated automatically.

• Global web standards − Now HTML attributes are being deprecated and it is being recommended to
use CSS. So it's a good idea to start using CSS in all the HTML pages to make them compatible with
future browsers.

• Platform Independence − The Script offer consistent platform independence and can support latest
browsers as well.
 10

Disadvantages of CSS
• CSS, CSS 1 up to CSS3, result in creating of confusion among web browsers.
• With CSS, what works with one browser might not always work with another. The web developers need
to test for compatibility, running the program across multiple browsers.
• There exists a scarcity of security.
• After making the changes we need to confirm the compatibility if they appear. The similar change affects
on all the browsers.
• The programing language world is complicated for non-developers and beginners. Different levels of
CSS i.e. CSS, CSS 2, CSS 3 are often quite confusing.
• Browser compatibility (some styles sheet are supported and some are not).
• CSS works differently on different browsers. IE and Opera supports CSS as different logic.
• There might be cross-browser issues while using CSS.
• There are multiple levels which creates confusion for non-developers and beginners.
•
W3 container
The w3-container class adds a 16px left and right padding to any HTML element.

The w3-container class is the perfect class to use for all HTML container elements like:

<div>, <article>, <section>, <header>, <footer>, <form>, and more.

The w3-container provides equality for all HTML container elements:

• Common margins
• Common paddings
• Common alignments
• Common fonts
• Common colors

Event Performed Event Handler Description

Introduction to java script

Define java script

JavaScript (js) is a light-weight object-oriented programming language which is used by several websites for
scripting the webpages. It is an interpreted, full-fledged programming language that enables dynamic
 11

interactivity on websites when applied to an HTML document. It was introduced in the year 1995 for adding
programs to the webpages in the Netscape Navigator browser. Since then, it has been adopted by all other
graphical web browsers. With JavaScript, users can build modern web applications to interact directly
without reloading the page every time.

Script tag
Handling. Thus, js handles the HTML events via Event Handlers.

• JavaScript code must be written within <script> tag.

• External JavaScript file (.js) can be referenced using <script src="/PathToScriptFile.js"></script> where
src attribute is used to specify the full path of .js file.
• Html5 standard does not required type="text/javascript" attribute, whereas prior html standards requires
type attribute.
<script>
//Write javascript code here...

</script>

Java script functions and events

The change in the state of an object is known as an Event. In html, there are various events which represents
that some activity is performed by the user or by the browser. When javascript code is included in HTML, js
react over these events and allow the execution. This process of reacting over the events is called Event

Event Event Description

Performed Handler

focus onfocus When the user focuses on an element

submit onsubmit When the user submits the form

blur onblur When the focus is away from a form element

change onchange When the user modifies or changes the value of a form
element
For example, when a user clicks over the browser, add js code, which will execute the task to be performed
on the event.

Mouse events:
 12

Keyboard events:

click onclick When mouse click on an element

mouseover onmouseover When the cursor of the mouse comes over the element

mouseout onmouseout When the cursor of the mouse leaves an element

mousedown onmousedown When the mouse button is pressed over the element

mouseup onmouseup When the mouse button is released over the element

mousemove onmousemove When the mouse movement takes place.

Event Performed Event Handler Description

Keydown & Keyup onkeydown & onkeyup When the user press and then release the key

Form events:

Window/Document events

External java script and it’s advangates

We can create external JavaScript file and embed it in many html page.

It provides code re usability because single JavaScript file can be used in several html pages.

Event Handler Description

Event
Performed

load onload When the browser finishes the loading of the page

unload onunload When the visitor leaves the current webpage,

the browser unloads it
 13

resize onresize When the visitor resizes the window of the browser
 14

An external JavaScript file must be saved by .js extension. It is recommended to embed all JavaScript files
into a single file. It increases the speed of the webpage.

There will be following benefits if a user creates an external javascript:

1. It helps in the reusability of code in more than one HTML file.

2. It allows easy code readability.
3. It is time-efficient as web browsers cache the external js files, which further reduces the page loading
time.
4. It enables both web designers and coders to work with html and js files parallelly and separately, i.e.,
without facing any code conflictions.
5. The length of the code reduces as only we need to specify the location of the js file.
15
16
17
18
19
 20

Introduction to data base connectivity

How to create a data base

A database is an organized collection of structured information, or data, typically stored electronically in a

computer system. A database is usually controlled by a database management system (DBMS).

The SQL CREATE DATABASE statement is used to create a new SQL database.

Syntax
The basic syntax of this CREATE DATABASE statement is as follows −

CREATE DATABASE DatabaseName;

Always the database name should be unique within the RDBMS.

Example
 11

If you want to create a new database <testDB>, then the CREATE DATABASE statement would be as shown below −
SQL> CREATE DATABASE testDB;
Make sure you have the admin privilege before creating any database. Once a database is created, you can check it in
the list of databases as follows −

SQL> SHOW DATABASES;

+--------------------+
| Database |
+--------------------+
| information_schema |
| AMROOD |
| TUTORIALSPOINT |
| mysql |
| orig |
| test |
| testDB |
+--------------------+
7 rows in set (0.00 sec)

How to create a table

Creating a basic table involves naming the table and defining its columns and each column's data type.

The SQL CREATE TABLE statement is used to create a new table.

Syntax

The basic syntax of the CREATE TABLE statement is as follows −

CREATE TABLE table_name(

column1 datatype,
column2 datatype, column3
datatype,
.....
columnN datatype,
PRIMARY KEY( one or more columns )
);
CREATE TABLE is the keyword telling the database system what you want to do.

Example
 12

The following code block is an example, which creates a CUSTOMERS table with an ID as a primary key
and NOT NULL are the constraints showing that these fields cannot be NULL while creating records in this
table −

SQL> CREATE TABLE CUSTOMERS(

ID INT NOT NULL,
NAME VARCHAR (20) NOT NULL,
AGE INT NOT NULL,
ADDRESS CHAR (25) ,
SALARY DECIMAL (18, 2),
PRIMARY KEY (ID)
);

You can verify if your table has been created successfully by looking at the message displayed by the SQL
server, otherwise you can use the DESC command as follows −
SQL> DESC CUSTOMERS;
+---------+---------------+------+-----+---------+-------+
| Field | Type | Null | Key | Default | Extra |
+---------+---------------+------+-----+---------+-------+
| ID | int(11) | NO | PRI | | |
| NAME | varchar(20) | NO | | | |
| AGE | int(11) | NO | | | |
| ADDRESS | char(25) | YES | | NULL | |
| SALARY | decimal(18,2) | YES | | NULL |
| +---------+---------------+------+-----+---------+-------+
5 rows in set (0.00 sec)

Now, you have CUSTOMERS table available in your database which you can use to store the required
information related to customers.

How to insert into a table

The SQL SELECT statement is used to fetch the data from a database table which returns this data in the form of a
result table. These result tables are called result-sets.

Syntax

The basic syntax of the SELECT statement is as follows −

SELECT column1, column2, columnN FROM table_name;

Here, column1, column2... are the fields of a table whose values you want to fetch. If you want to fetch all the fields
available in the field, then you can use the following syntax.
SELECT * FROM table_name;

13

Example

Consider the CUSTOMERS table having the following records −

+----+----------+-----+-----------+----------+
| ID | NAME | AGE | ADDRESS | SALARY |
+----+----------+-----+-----------+----------+
| 1 | Ramesh | 32 | Ahmedabad | 2000.00 |
| 2 | Khilan | 25 | Delhi | 1500.00 |
| 3 | kaushik | 23 | Kota | 2000.00 |
| 4 | Chaitali | 25 | Mumbai | 6500.00 |
| 5 | Hardik | 27 | Bhopal | 8500.00 | |
6 | Komal | 22 | MP | 4500.00 |
| 7 | Muffy | 24 | Indore | 10000.00 |
+----+----------+-----+-----------+----------+

The following code is an example, which would fetch the ID, Name and Salary fields of the customers available in
CUSTOMERS table.

SQL> SELECT ID, NAME, SALARY FROM CUSTOMERS;

This would produce the following result −

+----+----------+----------+
| ID | NAME | SALARY |
+----+----------+----------+
| 1 | Ramesh | 2000.00 |
| 2 | Khilan | 1500.00 |
| 3 | kaushik | 2000.00 |
| 4 | Chaitali | 6500.00 |
| 5 | Hardik | 8500.00 |
| 6 | Komal | 4500.00 |
| 7 | Muffy | 10000.00 |
+----+----------+----------+
If you want to fetch all the fields of the CUSTOMERS table, then you should use the following query.
SQL> SELECT * FROM CUSTOMERS;
This would produce the result as shown below.

+----+----------+-----+-----------+----------+
| ID | NAME | AGE | ADDRESS | SALARY |
+----+----------+-----+-----------+----------+
| 1 | Ramesh | 32 | Ahmedabad | 2000.00 |
| 2 | Khilan | 25 | Delhi | 1500.00 |
| 3 | kaushik | 23 | Kota | 2000.00 |
| 4 | Chaitali | 25 | Mumbai | 6500.00 |
| 5 | Hardik | 27 | Bhopal | 8500.00 | |
6 | Komal | 22 | MP | 4500.00 |
| 7 | Muffy | 24 | Indore | 10000.00 |
+----+----------+-----+-----------+----------+

14

How to select from a table

The SQL SELECT statement is used to fetch the data from a database table which returns this data in the form of a
result table. These result tables are called result-sets.

Syntax

The basic syntax of the SELECT statement is as follows −

SELECT column1, column2, columnN FROM table_name;

Here, column1, column2... are the fields of a table whose values you want to fetch. If you want to fetch all the fields
available in the field, then you can use the following syntax.
SELECT * FROM table_name;

Example

Consider the CUSTOMERS table having the following records −

+----+----------+-----+-----------+----------+
| ID | NAME | AGE | ADDRESS | SALARY |
+----+----------+-----+-----------+----------+
| 1 | Ramesh | 32 | Ahmedabad | 2000.00 |
| 2 | Khilan | 25 | Delhi | 1500.00 |
| 3 | kaushik | 23 | Kota | 2000.00 |
| 4 | Chaitali | 25 | Mumbai | 6500.00 | |
5 | Hardik | 27 | Bhopal | 8500.00 | |
6 | Komal | 22 | MP | 4500.00 |
| 7 | Muffy | 24 | Indore | 10000.00 |
+----+----------+-----+-----------+----------+
The following code is an example, which would fetch the ID, Name and Salary fields of the customers available in
CUSTOMERS table.

SQL> SELECT ID, NAME, SALARY FROM CUSTOMERS;

This would produce the following result −

+----+----------+----------+
| ID | NAME | SALARY |
+----+----------+----------+
| 1 | Ramesh | 2000.00 |
| 2 | Khilan | 1500.00 |
| 3 | kaushik | 2000.00 |
| 4 | Chaitali | 6500.00 |
| 5 | Hardik | 8500.00 |
| 6 | Komal | 4500.00 |
| 7 | Muffy | 10000.00 |
+----+----------+----------+
If you want to fetch all the fields of the CUSTOMERS table, then you should use the following query.

15
SQL> SELECT * FROM CUSTOMERS;

This would produce the result as shown below.

+----+----------+-----+-----------+----------+
| ID | NAME | AGE | ADDRESS | SALARY |
+----+----------+-----+-----------+----------+
| 1 | Ramesh | 32 | Ahmedabad | 2000.00 |
| 2 | Khilan | 25 | Delhi | 1500.00 |
| 3 | kaushik | 23 | Kota | 2000.00 |
| 4 | Chaitali | 25 | Mumbai | 6500.00 |
| 5 | Hardik | 27 | Bhopal | 8500.00 | |
6 | Komal | 22 | MP | 4500.00 |
| 7 | Muffy | 24 | Indore | 10000.00 |
+----+----------+-----+-----------+----------+

How to use where statement

The SQL WHERE clause is used to specify a condition while fetching the data from a single table or by joining with
multiple tables. If the given condition is satisfied, then only it returns a specific value from the table. You should use
the WHERE clause to filter the records and fetching only the necessary records.
The WHERE clause is not only used in the SELECT statement, but it is also used in the UPDATE, DELETE statement, etc.,
which we would examine in the subsequent chapters.

Syntax

The basic syntax of the SELECT statement with the WHERE clause is as shown below.

SELECT column1, column2, columnN

FROM table_name
WHERE [condition]
You can specify a condition using the comparison or logical operators like >, <, =, LIKE, NOT, etc. The following
examples would make this concept clear.

Example

Consider the CUSTOMERS table having the following records −

 16

+----+----------+-----+-----------+----------+
| ID | NAME | AGE | ADDRESS | SALARY |
+----+----------+-----+-----------+----------+
| 1 | Ramesh | 32 | Ahmedabad | 2000.00 |
| 2 | Khilan | 25 | Delhi | 1500.00 |
| 3 | kaushik | 23 | Kota | 2000.00 |
| 4 | Chaitali | 25 | Mumbai | 6500.00 |
| 5 | Hardik | 27 | Bhopal | 8500.00 | |
6 | Komal | 22 | MP | 4500.00 |
| 7 | Muffy | 24 | Indore | 10000.00 |
+----+----------+-----+-----------+----------+

The following code is an example which would fetch the ID, Name and Salary fields from the CUSTOMERS table,
where the salary is greater than 2000 −
SQL> SELECT ID, NAME, SALARY
FROM CUSTOMERS
WHERE SALARY > 2000;
This would produce the following result −

+----+----------+----------+
| ID | NAME | SALARY |
+----+----------+----------+
| 4 | Chaitali | 6500.00 |
| 5 | Hardik | 8500.00 |
| 6 | Komal | 4500.00 |
| 7 | Muffy | 10000.00 |
+----+----------+----------+
The following query is an example, which would fetch the ID, Name and Salary fields from the CUSTOMERS table for a
customer with the name Hardik.

Here, it is important to note that all the strings should be given inside single quotes (''). Whereas, numeric
values should be given without any quote as in the above example.
SQL> SELECT ID, NAME, SALARY
FROM CUSTOMERS WHERE NAME = 'Hardik';
This would produce the following result −

+----+----------+----------+
| ID | NAME | SALARY |
+----+----------+----------+
| 5 | Hardik | 8500.00 |
+----+----------+----------+

How to use order by statement

The SQL ORDER BY clause is used to sort the data in ascending or descending order, based on one or more columns.
Some databases sort the query results in an ascending order by default.

Syntax

The basic syntax of the ORDER BY clause is as follows −

SELECT column-list
FROM table_name
[WHERE condition]
[ORDER BY column1, column2, .. columnN] [ASC | DESC];
You can use more than one column in the ORDER BY clause. Make sure whatever column you are
using to sort that column should be in the column-list.

Example

Consider the CUSTOMERS table having the following records −

+----+----------+-----+-----------+----------+

SQL> SELECT * FROM CUSTOMERS

ORDER BY NAME, SALARY;
| ID | NAME | AGE | ADDRESS | SALARY |
+----+----------+-----+-----------+----------+
| 1 | Ramesh | 32 | Ahmedabad | 2000.00 |
| 2 | Khilan | 25 | Delhi | 1500.00 |
| 3 | kaushik | 23 | Kota | 2000.00 |
| 4 | Chaitali | 25 | Mumbai | 6500.00 |
| 5 | Hardik | 27 | Bhopal | 8500.00 | |
6 | Komal | 22 | MP | 4500.00 |
| 7 | Muffy | 24 | Indore | 10000.00 |
+----+----------+-----+-----------+----------+
The following code block has an example, which would sort the result in an ascending order by the
NAME and the
SALARY −

This would produce the following result −

+----+----------+-----+-----------+----------+
| ID | NAME | AGE | ADDRESS | SALARY |
+----+----------+-----+-----------+----------+
| 4 | Chaitali | 25 | Mumbai | 6500.00 |
| 5 | Hardik | 27 | Bhopal | 8500.00 |
| 3 | kaushik | 23 | Kota | 2000.00 |
| 2 | Khilan | 25 | Delhi | 1500.00 |
| 6 | Komal | 22 | MP | 4500.00 |
| 7 | Muffy | 24 | Indore | 10000.00 |
| 1 | Ramesh | 32 | Ahmedabad | 2000.00 |
+----+----------+-----+-----------+----------+
SQL> SELECT * FROM CUSTOMERS The following code block has an example,
ORDER BY NAME DESC; which would sort the result in the descending
order by NAME.
This would produce the following result −

+----+----------+-----+-----------+----------+
| ID | NAME | AGE | ADDRESS | SALARY |
+----+----------+-----+-----------+----------+
| 1 | Ramesh | 32 | Ahmedabad | 2000.00 |
| 7 | Muffy | 24 | Indore | 10000.00 |
| 6 | Komal | 22 | MP | 4500.00 |
| 2 | Khilan | 25 | Delhi | 1500.00 |
| 3 | kaushik | 23 | Kota | 2000.00 |
| 5 | Hardik | 27 | Bhopal | 8500.00 |
| 4 | Chaitali | 25 | Mumbai | 6500.00 |
+----+----------+-----+-----------+----------+
How to establish data base connectivity with My Sql or Ms Access or Oracle to connect

Java application with the MySQL database, we need to follow 5 following steps.

In this example we are using MySql as the database. So we need to know following
informations for the mysql database:

1. Driver class: The driver class for the mysql database is com.mysql.jdbc.Driver.
2. Connection URL: The connection URL for the mysql database is
jdbc:mysql://localhost:3306/sonoo where jdbc is the API, mysql is the database,
localhost is the server name on which mysql is running, we may also use IP address,
3306 is the port number and sonoo is the database name. We may use any database, in
such case, we need to replace the sonoo with our database name.
3. Username: The default username for the mysql database is root.
4. Password: It is the password given by the user at the time of installing the mysql
database. In this example, we are going to use root as the password.

PROJECT-1
ONLINE BANKING SYSTEM
ABSTRACT:
This project is a web based application for the sector. This online banking system project
concentrates on online amount transfer ensuring cashless transactions. For transactions, user
should have an account in the bank and as well as create an account for online banking
websites. Online banking provides the services like creating the online website account for
transactions, which can handle online account profiles, payments and loan applications.
Any details about the bank, bank policies and the user data can be viewed through the online
website that we have now. This website also provides with different Loan options like
student, personal, commercial, and mortgage. The user must login to know the account details
and to apply for loan. This project makes online banking easy and available for users across
the globe.

MODULES:
Home:
This page is a home page. Users can view the details about the bank and can access the login,
signup and contact page. This page acts an introduction to the user about the bank.
Login:
This is the login Page. Here the user can login into an existing account and profile data. The
user can only view the details by logging into and existing profile or account.
Sign Up:
This is the Sign Up page. Here a new user can create an account and login into the preceding
account details. By registering the user creates a new profile in the bank.
Account Profile:
This is the Account profile page. Here the user can view the data regarding account details
and can navigate through the options available like Loan application and payment form and
enquires ,here the user can edit the login password and view other features like the
transaction details and account details.
Transaction details:
Here we can see the details regarding the last transactions of the user and account details.
Payment/Transfer:
This is the payment or transfer page here the user can send the amount by entering the details
required.
Loan Application:
Here the user can apply for various types of loans like student, mortgage, personal, and
commercial loans, by entering the data which is required.
Enquiry:
Here the user can send queries regarding the bank and its policies by entering the users data
so the user can check the data regarding it.
Log Out:
By logging out, the user can leave the profile data and can be redirected to the home page.
After this the user must login again to see the account profile.

Execution Details:
1.Open home page we can see about the bank and we can go to loan , contact, login, signup
pages through it . And we can also see the contact number of the bank.

2.If the user is already registered then open login page. In which we should enter our details
present in the page and after submitting the details we get a alert box showing successful
login and it redirects us to account details page.

3.If not go to signup page in which we should fill in the details present in the form. After
submitting the details we get a alert box of successful registration and it redirects us to
account details page.

4.After logging in we view our account details, transaction details.

5.And we can also transfer money using payment option.

6.Through home page we can go to apply for loan by filling the details given in the loan
form.

CODES
1.Home.html
<html>
<head>
<link rel="stylesheet" href="home.css">
<style> body{
background-image:url('https://wallpaperaccess.com/full/2020706.jpg'); } </style>
</head>
<body class="background">
<div class="topnav">
<a class="active" href="home.html">Home</a>
<a href="contact.html">Contact Us</a>
<a href="loan.html">Loans</a>
<a href="login.html">Login</a>
<a href="sign.html">SignUp</a>
</div>
<h1><p style="color:skyblue">
ABOUT US
</p>
<p style="color:white">
<b>
Harley Hills Bank(HHB) is one of the largest banking systems which provides best
online and offline banking services all over India. <br>
our team of specialists and supervisors always strive to provide the best services of
loans,mortagauges,policies and safe online banking.</p>

<h5>
<b><font color="skyblue" font size="18">
 Our Core Values:</font>
</b></h5><b>
<p style=color:white><ul></p>
<li><p style=color:white> We provide a customer experience that earns loyalty and
confidence.</p></li>
<li><p style=color:white> We achieve our goals through teamwork, dedication, and
fun We are a model of creativity, innovation, and quality Note </p></li>
</ul>
<font color="skyblue"><b>Contact no: 891-2163542.</b></font>
</b>
</h1>
</div>
</body>
</html>

Home.css
/* Add a black background color to the top navigation */
.topnav { overflow: hidden;
}

/* Style the links inside the navigation bar */

.topnav a { float: left; color: #f2f2f2; textalign: center; padding: 14px 16px; text-
decoration: none; font-size: 17px;
}

/* Change the color of links on hover */ .topnav a:hover { backgroundcolor: #ddd; color:
black;

/* Add a color to the active/current link */

.topnav a.active { background-color: #04AA6D; color: white; } .container { position:
relative; max-width: 800px; /* Maximum width */ margin: 0 auto; /* Center it */
}
Login.html
<html>
<head>
<link href="login.css" rel="stylesheet" type="text/css">
<style> body{
background-image:url('https://wallpaperaccess.com/full/2020706.jpg');
} h1 { font-size: 63px; textshadow: 2px 2px #A9A9A9;
}
</style>
</head>
<body class="background-image">
<form action="action_page.php" method="post">

<div class="navbar">
<a class="active" href="home.html"><i class="fa fa-fw fa-home"></i> Home</a>
<a href="contact.html"><i class="fa fa-fw fa-envelope"></i> Contact</a>
<a href="loan.html"><i class="fa fa-fw fa-user"></i> Loans</a>
<button class="sbtn" formaction="sign.html"> SIGNUP</button>
</div>
<h1 align="center"> <p style="color:white"><b>HARLEY HILLS BANK</b></p></h1> <p
align="center">
<img src="https://image.freepik.com/free-vector/digital-banking_23-2147517376.jpg"
alt="iu" width="90" height="90" /> <br clear="left">
</p>
</br>
</div>
</form>
<form action="action_page.php" method="post">
<div class="container">
<label for="uname"><p style="color:floralwhite"><b>Username</b></p></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label for="psw" ><p style="color:floralwhite"><b>Password</b></p></label>
 <input type="password" placeholder="Enter Password" name="psw" required>
<a href="pg1.html"><button formaction="pg1.html"
onclick="myFunction()">Login</button></a>
<script>
function myFunction() {
alert("Login Success");
}
</script>
</div>
</form>
</body>
</html>

Login.css
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/4.7.0/css/
fontawesome.min.css">
body {font-family: Arial, Helvetica, sans-serif;}

.navbar { width: 100%; overflow: auto;

font-family:'Brush Script MT', cursive;
}

.navbar a { float: left;

padding: 12px; color: white; textdecoration: none; font-size: 17px;
}

.navbar a:hover { backgroundcolor:skyblue;

}

@media screen and (max-width: 500px) {

 .navbar a { float: none; display: block;
}
}

form { border:none;
}

/* Full-width inputs */ input[type=text],input[type=password] { width: 100%; padding:

12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; box-sizing:
border-box;
}

/* Set a style for all buttons */ button { backgroundcolor:black; color: white; padding:
14px 20px; margin: 8px 0; border: none; cursor: pointer; width:
100%;
}

/* Add a hover effect for buttons */ button:hover { opacity: 0.8; }

.sbtn {
float:right; width: auto; padding: 10px 18px; }

/* Center the avatar image inside this container */

.imgcontainer { textalign: left; margin:
24px 0 12px 0;
}

/* Avatar image */ img.center { display: block; margin-left: auto; margin-right: auto;

width:50%;
}
/* Add padding to containers */
.container { marginright:auto; marginleft:auto; padding: 16px; width:30%; font-
size:18px
}

/* The "Forgot password" text */ span.psw

{ float: center; padding-
top: 16px;
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) { span.psw { display: block; float:
none;
}
.logo{
margin:9px;
}
}
</html>

SignUp.html
<html>
<head>
<link href="sign.css" rel="stylesheet" type="text/css">
<style> body
{ background-image: url('https://wallpaperaccess.com/full/2020706.jpg');
}
h1 { font-size: 45px;
}
</style>
</head>
<body class=background-image">
<form>
<div class="container">
<h1 style="color:floralwhite" align="left">Sign Up</h1>
<hr>
<label for="email"><p style="color:floralwhite"><b>Name</b></p></label>
<input type="text" placeholder="Enter Full Name" name="name" required>
<label for="email"><p style="color:floralwhite"><b>Phone number</b></p></label>
<input type="tel" placeholder="Enter mobile number" name="num" required>
<label for="email"><p style="color:floralwhite"><b>Date of Birth</b></p></label>
<input type="date" placeholder="Enter DOB" name="date" required>
<label for="email"><p style="color:floralwhite"><b>Email</b></p></label>
<input type="text" placeholder="Enter Email" name="email" required>
<label for="psw"><p style="color:floralwhite"><b>Confirm Password</b></p></label>
<input type="password" placeholder="Enter Password" name="psw" required> <div
class="clearfix">
<button type="button" class="cancelbtn">Cancel</button>
<a href="pg1.html"><button type="submit" class="signupbtn" onclick="myFunction()"
formaction="pg1.html">Sign Up</button></a>
<script>
function myFunction() {
alert("Sucessfully Registered!");
}
</script>
</div>
</div>
</form>
</body>
</html>

SignUp.css
* {box-sizing:81%}
/* Full-width input fields */ input[type=text], input[type=password] { width: 50%;
padding: 10px; margin: 5px 0 22px 0; display: inline-block; border: none; background:
#f1f1f1;
}

input[type=text]:focus, input[type=password]:focus { background-color: #ddd; outline:

none;
}

hr { border:none; margin-bottom: 20px;

}

/* Set a style for all buttons */ button { background-color: #04AA6D; color: white;
padding: 10px 20px; margin: 8px 0; border: none; cursor:
pointer; width: 50%; opacity: 0.9;
}
button:hover {
opacity:1;
}

/* Extra styles for the cancel button */

.cancelbtn {
padding: 10px 20px; background-
color: #f44336;
}

/* Float cancel and signup buttons and add an equal width */

.cancelbtn, .signupbtn { float: left;
width: 25%;
}

/* Add padding to container elements */

 .container { marginleft:auto; marginright:auto; padding: 16px;
font-family:'Brush Script MT', cursive;
}

/* Change styles for cancel button and signup button on extra small screens */
@media screen and (max-width: 300px) {
.cancelbtn, .signupbtn { width: 50%;
}
.signupbtn{
padding:10px,20px;
}
}

Details.html
<html>
<head>
<link href="pg1.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style> table
{ border-collapse: collapse;
width: 100%; border: 1px solid #ddd; } table{ marginright:auto; margin-left:auto; } th, td {
textalign: left; padding: 16px;
}
</style>
</head>
<body style="background-color:mintcream">
<div class="bg-img">
<div class="container">
<div class="topnav">
<a href="home.html">Home</a>
<a href="contact.html">Contact</a>
 <a href="loan.html">Loans</a>
<a href="payment.html">Payment</a>
</div>
</div>
<h1 align="center" style="color:DeepSkyBlue"><b> Welcome to Harley Hills Bank!
</b></h1>
<h2>Account Details</h2>
<table class="center">
<tr>
<th>NAME</th>
<th>Blake Pierce</th>
</tr>
<tr>
<td>ACCOUNT NUMBER</td>
<td>321464258985</td>
</tr>
<tr>
<td>BRANCH</td>
<td>Dwaraka Nagar</td>
</tr>
<tr>
<td>CARD-TYPE</td>
<td>VISA</td>
</tr>
<tr>
<th>BALANCE</th>
<th>5,00,0000</th>
</tr>
</table>
</div>
<p align="left" ><a href="#"><b> View Transactions</b></a></p>
<div>
<a href="login.html"><p align="center"><button onclick="myFunction()"
formaction="login.html">Logout</button></p></a>
</div> <script> function myFunction() {
alert("Successfully LoggedOut");
}
</script>
</body>
</html>

Details.css
.bg-img { /* The image used */ background-image: url("img_nature.jpg");

min-height: 380px;

/* Center and scale the image nicely */ background-position: center; backgroundrepeat:

no-repeat; background-size: cover;

/* Needed to position the navbar */ position: relative;

}

/* Position the navbar container inside the image */

.container { position: absolute; margin: 10px; width: auto;
}

/* The navbar */ .topnav { overflow: hidden; background-color:mintcream;

}

/* Navbar links */
.topnav a { float: left; color:black; textalign: center; padding: 14px 16px; text-
decoration: none; font-size: 17px;
}
.topnav a:hover { backgroundcolor: #ddd; color: black; } button
{ backgroundcolor:black; color: white; padding: 14px 20px; border: none; cursor:
pointer; marginright:auto; marginleft:auto;
}

Transaction.html
<html>
<head>
<link href="transaction.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style> table
{
border-collapse: collapse; width: 100%; border: 1px solid #ddd; }
table{ marginright:auto; margin-left:auto; } th, td { textalign: left; padding: 16px;
}
</style>
</head>
<body style="background-color:mintcream">
<div class="bg-img">
<div class="container">
<div class="topnav">
<a href="home.html">Home</a>
<a href="contact.html">Contact</a>
<a href="loan.html">Loans</a>
<a href="payment.html">Payment</a>
</div>
</div>
<h1 align="center" style="color:black"><b> Transaction Details </b></h1>
<table class="center">
<tr>
<th>Name</th>
<th>Amount Transfered</th>
</tr>
 <tr>
<td>Pragna</td>
<td>2000</td>
</tr>
<tr>
<td>Gayatri</td>
<td>10,000</td>
</tr>
<tr>
<td>Prasad</td>
<td>5000</td>
</tr>
<tr>
<th>Siri</th>
<th>50000</th>
</tr>
</table>
</div>
<p align="left" ><a href="#"><b> View More</b></a></p>
<div>
<a href="pg1.html"><p align="center"><button
formaction="pg1.html">Back</button></p></a>
</div>
</body>
</html>

Payment.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="payment.css">
</head>
<body class="container" style="background-color:mintcream">
<div class="col-50">
<h3>Payment</h3>
<label for="cname">Name on Card</label>
<input type="text" id="cname" name="cardname" placeholder="Name" required>
<label for="ccnum">Card number</label>
<input type="text" id="ccnum" name="cardnumber" placeholder="1111-2222-3333-
4444" required>
<label for="expmonth">Exp Month</label>
<input type="text" id="expmonth" name="expmonth" placeholder="Enter the
month">
<div class="row">
<div class="col-50">
<label for="expyear">Exp Year</label>
<input type="text" id="expyear" name="expyear" placeholder="Enter the year">
</div>
<div class="col-50">
<label for="cvv">CVV</label>
<input type="text" id="cvv" name="cvv" placeholder="000">
</div>
</div>
</div>
</div>
<a href="pg1.html"><input type="submit" value="Confirm to pay " class="btn"
onclick="myFunction()"></a>
</form>
</div>
</div> <script> function myFunction() {
alert("Payment Success");
}
</script>
</body>
</html> Payment.css

body { fontfamily: Arial; font-size: 17px; padding: 8px;

}

* { box-sizing: borderbox; }

.row { display: -ms-flexbox; /* IE10 */ display: flex; flexwrap: wrap; margin: 0 -16px;
}

.col-50 { -ms-flex: 50%;

/* IE10 */ flex: 50%; }
.col-50{ padding: 0
16px;
}

.container {
margin-right:auto; margin-left:auto; height:400px; width:400px;
}

input[type=text] { width: 100%; marginbottom: 20px; padding: 12px; border: 1px solid
#ccc; border-radius: 3px;
}

label { marginbottom: 10px; display: block;

}

.btn { background-color: #04AA6D; color: white; padding: 12px; margin: 10px 0;

border: none; width:100%; border-radius: 3px; cursor: pointer; fontsize: 17px; }

.btn:hover { backgroundcolor: #45a049;

}
a { color:
#2196F3; }

hr {
border: 1px solid lightgrey;
}

span.price { float: right; color: grey;

}

Loan.html
<html>
<head>
<link href="loan.css" rel="stylesheet" type="text/css">
</head>
<body style="background-color:#333">
<div class="container">
<form>
<div class="row">
<h4>Apply to Loan</h4>
<div class="input-group input-group-icon">
<input type="text" placeholder="Full Name"/>
<div class="input-icon"><i class="fa fa-user"></i></div>
</div>
<div class="input-group input-group-icon">
<input type="email" placeholder="Account number"/>
<div class="input-icon"><i class="fa fa-envelope"></i></div> </div>
<div class="input-group input-group-icon">
<input type="password" placeholder="Email address"/>
 <div class="input-icon"><i class="fa fa-key"></i></div>
</div>
<div class="input-group input-group-icon">
<input type="password" placeholder="Phone number"/>
<div class="input-icon"><i class="fa fa-key"></i></div>
</div>
</div>
<div class="row">
<div class="col-half">
<h4>Date of Birth</h4>
<div class="input-group">
<div class="col-third">
<input type="text" placeholder="DD"/>
</div>
<div class="col-third">
<input type="text" placeholder="MM"/>
</div>
<div class="col-third">
<input type="text" placeholder="YYYY"/>
</div>
</div>
</div>
<div class="col-half">
<h4>Gender</h4>
<div class="input-group">
<input id="gender-male" type="radio" name="gender" value="male"/>
<label for="gender-male">Male</label>
<input id="gender-female" type="radio" name="gender" value="female"/>
<label for="gender-female">Female</label>
</div>
</div>
<div class="custom-select" style="width:400px;">
 <select>
<option value="0">Select Loan Type:</option>
<option value="1">House Loan</option>
<option value="2">Education Loan</option>
<option value="3">Gold Loan</option>
<option value="4">Personal Loan</option>
</select>
</div>
</div>
<p align="right"> <button formaction="home.html" class="sub>"
onclick="myFunction()">Submit</button></p>
<script>
function myFunction() {
alert("Loan Applied Successfully");
}
</script>
</div>
</form>

</div>
</body>
</html>

Loan.css
*,
*:before, *:after { boxsizing: border-box; } body { padding: 1em; font-family:

'Open Sans',
'Helvetica
Neue',
Helvetica, Arial, sansserif; fontsize: 15px; color: #b9b9b9; backgroundcolor: #e3e3e3; }
h4 { color:
#7ed321; } input, input[type="radio"] + label, input[type="checkbox"] + label:before, select
option, select { width: 100%; padding: 1em; line-height: 1.4; background-color: #f9f9f9;
border:
1px solid #e5e5e5; border-radius:
3px;
-webkit-transition: 0.35s ease-in-out; -moz-transition: 0.35s ease-in-out; -otransition:
0.35s ease-in-out; transition: 0.35s ease-in-out; transition: all 0.35s ease-in-out; }
input:focus { outline: 0; bordercolor: #64ac15;
}
input:focus + .input-icon i { color: #7ed321;
}
input:focus + .input-icon:after { border-rightcolor: #7ed321; } input[type="radio"]
{ display: none; } input[type="radio"] + label, select { display: inlineblock; width: 50%;
textalign: center; float: left; border-radius: 0; }
input[type="radio"] + label:first-of-type { border-topleft-radius: 3px; border-bottom-left-
radius: 3px;
}
input[type="radio"] + label:last-of-type { border-top-right-radius: 3px; borderbottom-right-
radius: 3px;
} input[type="radio"] + label i
{ padding-right: 0.4em;
}
input[type="radio"]:checked + label, input:checked + label:before, select:focus, select:active
{ background-color: #7ed321; color:
#fff; border-color: #64ac15;

} input[type="checkbox"] { display: none; } input[type="checkbox"] + label { position:

relative; display: block; padding-left: 1.6em; } input[type="checkbox"] + label:before
{ position: absolute; top: 0.2em; left: 0; display: block; width: 1em; height: 1em;
padding: 0; content: ""; } input[type="checkbox"] + label:after { position: absolute; top:
0.45em; left: 0.2em; font-size: 0.8em; color:
#fff; opacity: 0; font-family:
FontAwesome; content: "\f00c"; } input:checked + label:after { opacity:
1;
} select { height: 3.4em; lineheight: 2; } select:first-of-type { border-top-left-radius: 3px;
border-bottom-left-radius: 3px; } select:last-of-type { bordertop-right-radius: 3px;
borderbottom-right-radius: 3px; } select:focus, select:active { outline: 0; } select option
{ background-color: #7ed321; color: #fff; } .input-group { margin-bottom: 1em; zoom:
1; }
.input-group:before, .input-group:after { content: ""; display: table; } .input-group:after
{ clear: both; } .input-group-icon { position: relative; }
.input-group-icon input { paddingleft: 4.4em;
}
.input-group-icon .input-icon { position: absolute; top: 0; left: 0;
width: 3.4em;
height: 3.4em; lineheight: 3.4em; textalign: center; pointer-events: none;
}
.input-group-icon .input-icon:after { position: absolute; top: 0.6em; bottom: 0.6em; left:
3.4em; display: block; border-right: 1px solid #e5e5e5; content: "";
-webkit-transition: 0.35s ease-in-out; -moz-transition: 0.35s ease-in-out; -otransition:
0.35s ease-in-out; transition: 0.35s ease-in-out; transition: all 0.35s ease-in-out;
}
.input-group-icon .input-icon i {
-webkit-transition: 0.35s ease-in-out; -moz-transition: 0.35s ease-in-out; -o-transition:
0.35s ease-in-out; transition: 0.35s ease-in-out; transition: all 0.35s ease-in-out; }
.container { max-width:
38em; padding: 1em 3em 2em 3em; margin: 0em auto; background-color: #fff; border-
radius: 4.2px;
box-shadow: 0px 3px 10px -2px rgba(0, 0, 0, 0.2);
} .row { zoom: 1;
}
.row:before,
.row:after { content:
""; display: table; } .row:after { clear: both; } .col-half { padding-right: 10px; float: left;
width: 50%;
}
.col-half:last-of-type { paddingright: 0;
}
.col-third { paddingright: 10px; float: left; width: 33.33333333%;
}
.col-third:last-of-type { paddingright: 0;
}
@media only screen and (max-width: 540px) { .col-half { width: 100%; padding-right:
0;
}
.custom-select{
width:40%;
}
button{
float:right;
background-color:#2E8B57; color: white; padding: 16px 20px; margin: 8px 0; border:
none; cursor: pointer; width: 100%; opacity: 1;
}

Contact.html
<html>
<head>
<link href="contact.css" rel="stylesheet">
</head>
<body style="background-color:#333">
<font color="floralwhite" size="32"><p align="center"><b>Contact
Enquiry</b></p></font> <div class="container">
<form action="action_page.php">

<label for="fname">First Name</label>

<input type="text" id="fname" name="firstname" placeholder="Your name.." required>
 <label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Your last name..">

<label for="country" required>Country</label>

<select id="country" name="country">
<option value="usa">INDIA</option>
<option value="australia">Australia</option>
<option value="canada">Canada</option>
<option value="usa">USA</option>
</select>

<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Write something.."
style="height:45px"></textarea>

<button formaction="home.html">Submit</button>

</form>
</div>
</body>

</html> Contact.css

input[type=text], select, textarea { width:

100%; /* Full width */ padding: 12px; /*
Some padding */ border: 1px solid #ccc;
/* Gray border */ border-radius: 4px; /* Rounded borders */ box-sizing: border-box; /*
Make sure that padding and width stays in place */
margin-top: 6px; /* Add a top margin */ margin-bottom: 16px; /* Bottom margin */
resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */ }

/* Style the submit button with a specific background color etc */ input[type=submit]
{ background-color: #04AA6D; color:
white; padding: 12px 20px; border: none; border-radius: 4px; cursor: pointer;
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=button]:hover { background-color: #45a049;
}

/* Add a background color and some padding around the form */ .container { border-radius:
5px; background-color: #f2f2f2; padding: 20px; width:400px; height:400px; margin-

right:auto; margin-left:auto;
} button{
background-color: #04AA6D; color: white; padding: 16px 20px; margin: 8px 0;
border: none; cursor: pointer; width:
100%; opacity: 1;
}
 Home Page

Login Page
Details Page
Transaction page
Payment Page
Loan Page
Contact Page