Akshay Wtlab
Akshay Wtlab
BACHELOR OF TECHNOLOGY
IN
By
Ms.Suneetha
Mr.Anvesh
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
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.
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:
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:
• Common margins
• Common paddings
• Common alignments
• Common fonts
• Common colors
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.
</script>
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
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:
mouseover onmouseover When the cursor of the mouse comes over the element
mousedown onmousedown When the mouse button is pressed over the element
mouseup onmouseup When the mouse button is released over the element
Keydown & Keyup onkeydown & onkeyup When the user press and then release the key
Form events:
Window/Document events
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.
load onload When the browser finishes the loading of the page
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.
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 −
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 −
Creating a basic table involves naming the table and defining its columns and each column's data type.
Syntax
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 −
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.
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
13
Example
The following code is an example, which would fetch the ID, Name and Salary fields of the customers available in
CUSTOMERS table.
+----+----------+----------+
| 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
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
Example
+----+----------+----------+
| 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;
+----+----------+-----+-----------+----------+
| 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 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.
Example
+----+----------+-----+-----------+----------+
| 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 |
+----+----------+----------+
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
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
+----+----------+-----+-----------+----------+
+----+----------+-----+-----------+----------+
| 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.
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;
}
/* Change the color of links on hover */ .topnav a:hover { backgroundcolor: #ddd; color:
black;
<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;}
form { border:none;
}
/* Set a style for all buttons */ button { backgroundcolor:black; color: white; padding:
14px 20px; margin: 8px 0; border: none; cursor: pointer; width:
100%;
}
/* 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;
}
/* 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;
}
/* 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;
/* 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
* { box-sizing: borderbox; }
.row { display: -ms-flexbox; /* IE10 */ display: flex; flexwrap: wrap; margin: 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;
}
hr {
border: 1px solid lightgrey;
}
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;
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="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
/* 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