index.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CRUD</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="head">
<div class="name">
<h1>FIND MY FRIEND</h1>
</div>
<div class="menu">
<ul class="list">
<li class="content">BloodTypes</li>
<li class="content">Hospitl</li>
<li class="content">Contact</li>
<li class="content">About</li>
</ul>
</div>
</div>
<div class="mainpage">
<a href="input.html"><button type="submit" class="btn">Donet
Blood</button></a>
</div>
</body>
</html>
---------------------------------------------------------
input.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CRUD</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="head">
<div class="name">
<h1>FIND MY FRIEND</h1>
</div>
<div class="menu">
<ul class="list">
<li class="content">BloodTypes</li>
<li class="content">Hospitl</li>
<li class="content">Contact</li>
<li class="content">About</li>
</ul>
</div>
</div>
<form action="table.html">
<div class="get">
<div class="label">
<label for="">Id</label><br>
<label for="">Name</label><br>
<label for="">Age</label><br>
<label for="">BloodGroup</label><br>
<label for="">Address</label><br>
<label for="">Phone</label><br>
</div>
<div class="input"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
</div>
</div>
<div class="submit">
<button type="submit" class="add">Submit</button>
</div>
</form>
</body>
</html>
---------------------------------------------------------
table.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CRUD</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="head">
<div class="name">
<h1>FIND MY FRIEND</h1>
</div>
<div class="menu">
<ul class="list">
<li class="content">BloodTypes</li>
<li class="content">Hospitl</li>
<li class="content">Contact</li>
<li class="content">About</li>
</ul>
</div>
</div>
<div class="table">
<form action="index.html">
<table border="1" align="center">
<thead align="center">
<th>Id</th>
<th>Name</th>
<th>age</th>
<th>BloodGroup</th>
<th>Address</th>
<th>Phone</th>
<th colspan="2">Action</th>
</thead>
<tbody align="center">
<tr>
<td>01</td>
<td>Subashreghan</td>
<td>20</td>
<td>O+ve</td>
<td>575,Madha kovil streen,thiruvakkarai</td>
<td>9655836427</td>
<td class="edit">Edit</td>
<td class="delete">delete</td>
</tr>
</tbody>
</table>
<div class="butt">
<button type="submit" class="btn1">Add</button>
</div>
</form>
</div>
</body>
</html>
---------------------------------------------------------
style.css
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida
Sans', Arial, sans-serif;
font-style:italic;
text-decoration: none;
list-style: none;
}
body{
background-color:#ed9bbd;
}
.head{
background-color: #500711;
padding: 30px;
display:flex;
justify-content: space-between;
align-items: center;
}
.name{
color: #ed9bbd;
padding-left: 130px;
text-shadow: 1px 1px 20px;
font-size: x-large;
}
.list{
display: flex;
font-size: x-large;
}
.content{
cursor: pointer;
color: #f58291;
padding: 15px;
}
.mainpage{
display: flex;
justify-content: center;
margin-top: 300px;
}
.btn{
background-color: #500711;
color: #ed9bbd;
font-size: xx-large;
border-radius: 25px;
border:rgb(235, 235, 131) ;
box-shadow: 10px 10px 20px 5px rgb(143, 41, 41);
width: 400px;
height: 100px;
}
.btn:hover{
margin-top: -10px;
padding-bottom:10px;
cursor: pointer;
width: 480px;
height:145px ;
}
.get{
display: flex;
justify-content: center;
align-items: center;
margin-top: 80px;
padding: 10px;
}
.label{
margin: 10px;
}
label{
color: #500711;
display: flex;
justify-content: center;
padding: 10px;
margin: 7px;
font-size: x-large;
}
.input{
margin: 10px;
padding: 10px;
}
input{
display: flex;
justify-content: center;
font-size: larger;
padding: 25px;
margin: 5px;
width: 300px;
height: 20px;
border-radius: 20px;
}
.submit{
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 10px;
}
.add{
display: flex;
justify-content: center;
font-size: larger;
text-align: center;
background-color: #eb5a6d;
border-radius: 20px;
width: 200px;
height: 50px;
margin-right: 100px;
padding: 15px;
}
.table{
display: flex;
justify-content: center;
align-items: center;
margin-top: 100px;
}
table{
border-radius: 5px;
color:#500711;
background-color: #fab5eb;
}
th{
border-radius: 3px;
background-color: #500711;
color: #ed9bbd;
width: 100px;
height: 50px;
}
td{
border-radius: 3px;
color:#500711;
}
.edit{
background-color: #eb5a6d;
color: #ed9bbd;
width: 70px;
}
.delete{
background-color: rgb(74, 139, 139);
color: #ed9bbd;
}
.butt{
display: flex;
align-items: center;
justify-content: center;
margin: 100px;
}
.btn1{
width: 200px;
height: 50px;
border-radius: 10px;
border: 2px solid #b65c68 ;
font-size: x-large;
color: #e65793;
}
