Scribd
Upload
5 views

Frontend html and css coding for dbms

This document contains the HTML and CSS code for a Blood Bank Management System webpage. It includes a header, main content sections for adding donors, searching donors by blood group, and displaying a list of all donors. The styling is applied to create a user-friendly interface with responsive design elements.

Uploaded by

lw26200
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
5 views

Frontend html and css coding for dbms

This document contains the HTML and CSS code for a Blood Bank Management System webpage. It includes a header, main content sections for adding donors, searching donors by blood group, and displaying a list of all donors. The styling is applied to create a user-friendly interface with responsive design elements.

Uploaded by

lw26200
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

Frontend html and css coding

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Blood Bank Management System</title>
<style>/* Reset and base styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}

body {
background-color: #f3f3f3;
color: #333;
}

/* Header */
header {
background-color: #d90429;
color: white;
padding: 20px 0;
text-align: center;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Main content */
main {
padding: 30px;
max-width: 800px;
margin: auto;
}

/* Section titles */
h2 {
margin-bottom: 15px;
color: #d90429;
border-left: 5px solid #d90429;
padding-left: 10px;
font-size: 24px;
}

/* Forms */
form {
background-color: #fff;
padding: 20px;
margin-bottom: 30px;
border-radius: 8px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
display: flex;
flex-direction: column;
gap: 10px;
}

input, button {
padding: 10px;
font-size: 16px;
border-radius: 5px;
border: 1px solid #ccc;
}

button {
background-color: #d90429;
color: white;
border: none;
cursor: pointer;
transition: background-color 0.3s ease;
}

button:hover {
background-color: #a3001d;
}

/* Donor list */
ul {
list-style: none;
padding-left: 0;
}

ul li {
background: white;
padding: 12px;
margin-bottom: 10px;
border-left: 5px solid #d90429;
border-radius: 5px;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.05);
}

/* Footer */
footer {
background-color: #222;
color: #aaa;
text-align: center;
padding: 15px;
margin-top: 40px;
}
</style>
</head>
<body>

<header>
<h1>Blood Bank Management System</h1>
</header>

<main>
<section>
<h2>Add Donor</h2>
<form>
<input type="text" placeholder="Full Name" required />
<input type="number" placeholder="Age" required />
<input type="text" placeholder="Gender (M/F)" required />
<input type="text" placeholder="Blood Group (e.g. A+, O-)" required
/>
<input type="text" placeholder="Contact Number" required />
<button type="submit">Add Donor</button>
</form>
</section>
<section>
<h2>Search Donors by Blood Group</h2>
<form>
<input type="text" placeholder="Enter Blood Group" required />
<button type="submit">Search</button>
</form>
</section>

<section>
<h2>All Donors</h2>
<ul>
<li>John Doe (A+) - 1234567890</li>
<li>Jane Smith (O-) - 9876543210</li>
<!-- Add more sample donors if needed -->
</ul>
</section>
</main>

<footer>
<p>© 2025 Blood Bank System</p>
</footer>

</body>
</html>

You might also like