Skip to content

Commit

Permalink
Added Blood donation form (#747)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Khushi-Pushkar
Khushi-Pushkar authored Aug 6, 2024
1 parent dd993d9 commit 0efddae
Show file tree
Hide file tree
Showing 7 changed files with 395 additions and 0 deletions.
68 changes: 68 additions & 0 deletions Front-end-Projects/Basic/Blood-Donation-Form/README.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
<h1 align='center'><b>💥 Blood Donation Form 💥</b></h1>

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

<h3 align='center'>Tech Stack Used 🎮</h3>


<div align='center'>

![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white)
![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white)

</div>


![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847)

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

## :zap: Description 📃

<div>
<p> Blood donation form is to gather essential information from potential blood donors to ensure the safety and suitability of both the donor and the recipient.. This project Showcases the power of HTML and CSS..</p>
</div>


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

## :zap: How to run it? 🕹️

<div>
<p>To run this project locally, follow these steps:

1. Fork the repository.

2. Clone the repository to your local machine:
git clone

3. Open the project folder in your preferred code editor, now you can view website in live.

</p>
</div>

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

## :zap: Screenshots 📸
<!-- add the screenshot of the project (Mandatory) -->

<img src='./screenshot.webp'>


![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847)

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

<h4 align='center'>Developed By <b><i>Khushi Pushkar</i></b></h4>
<p align='center'>
<a href='https://www.linkedin.com/in/khushi-pushkar-9029b8287/'>
<img src='https://img.shields.io/badge/linkedin-%230077B5.svg?style=for-the-badge&logo=linkedin&logoColor=white' />
</a>
<a href='https://github.com/Khushi-Pushkar'>
<img src='https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white' />
</a>
</p>

<h4 align='center'>Happy Coding 🧑‍💻</h4>

<h3 align="center">Show some &nbsp;❤️&nbsp; by &nbsp;🌟&nbsp; this repository!</h3>
Binary file added Front-end-Projects/Basic/Blood-Donation-Form/icon.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Front-end-Projects/Basic/Blood-Donation-Form/images.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
159 changes: 159 additions & 0 deletions Front-end-Projects/Basic/Blood-Donation-Form/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,159 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blood Donation Form</title>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="header">
<img src="icon.png" alt="Blood Icon" class="header-icon">
<h1>Blood Donation Form</h1>
<p>Please fill out the following information to help us ensure the safety and eligibility of your donation.</p>
</div>
<form>
<div class="section">
<h2>Personal Information</h2>
<div class="form-group">
<label for="full-name">Full Name</label>
<input type="text" id="full-name" name="full-name" required>
</div>
<div class="form-group">
<label for="dob">Birth Date</label>
<input type="date" id="dob" name="dob" required>
</div>
<div class="form-group">
<label for="gender">Gender</label>
<select id="gender" name="gender" required>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>
</div>
</div>

<div class="section">
<h2>Contact Information</h2>
<div class="form-group">
<label for="phone">Phone Number</label>
<input type="tel" id="phone" name="phone" placeholder="Phone Number" required>
</div>
<div class="form-group">
<label for="email">Email Address</label>
<input type="email" id="email" name="email" placeholder="Email Address" required>
</div>
</div>

<div class="section">
<h2>Address</h2>
<div class="form-group">
<label for="address">Street Address</label>
<input type="text" id="address" name="address" placeholder="Street Address" required>
</div>
<div class="form-group">
<label for="city">City</label>
<input type="text" id="city" name="city" placeholder="City" required>
</div>
<div class="form-group">
<label for="state">State</label>
<input type="text" id="state" name="state" placeholder="State" required>
</div>
<div class="form-group">
<label for="zip">Postal Code</label>
<input type="text" id="zip" name="zip" placeholder="Postal Code" required>
</div>
</div>

<div class="section">
<h2>Blood Donation Details</h2>
<div class="form-group">
<label for="blood-type">What is your blood type?</label>
<div class="radio-group">
<input type="radio" id="a-pos" name="blood-type" value="A+">
<label for="a-pos">A+</label>
<input type="radio" id="a-neg" name="blood-type" value="A-">
<label for="a-neg">A-</label>
<input type="radio" id="b-pos" name="blood-type" value="B+">
<label for="b-pos">B+</label>
<input type="radio" id="b-neg" name="blood-type" value="B-">
<label for="b-neg">B-</label>
<input type="radio" id="ab-pos" name="blood-type" value="AB+">
<label for="ab-pos">AB+</label>
<input type="radio" id="ab-neg" name="blood-type" value="AB-">
<label for="ab-neg">AB-</label>
<input type="radio" id="o-pos" name="blood-type" value="O+">
<label for="o-pos">O+</label>
<input type="radio" id="o-neg" name="blood-type" value="O-">
<label for="o-neg">O-</label>
</div>
</div>
<div class="form-group">
<label for="last-donation">When was the last time you donated blood?</label>
<input type="date" id="last-donation" name="last-donation">
</div>
<div class="form-group">
<label>Have you donated previously?</label>
<div class="radio-group">
<input type="radio" id="donated-yes" name="donated" value="yes">
<label for="donated-yes">Yes</label>
<input type="radio" id="donated-no" name="donated" value="no">
<label for="donated-no">No</label>
</div>
</div>
</div>

<div class="section">
<h2>Health Information</h2>
<div class="form-group">
<label>In the last 6 months, have you had any of the following?</label>
<div class="checkbox-group">
<input type="checkbox" id="tattoo" name="symptoms" value="tattoo">
<label for="tattoo">Tattooing</label>
<input type="checkbox" id="piercing" name="symptoms" value="piercing">
<label for="piercing">Body Piercing</label>
<input type="checkbox" id="surgery" name="symptoms" value="surgery">
<label for="surgery">Surgery</label>
</div>
</div>
<div class="form-group">
<label>Do you suffer from or have suffered from any of the following diseases?</label>
<div class="checkbox-group">
<input type="checkbox" id="hiv" name="diseases" value="hiv">
<label for="hiv">HIV</label>
<input type="checkbox" id="hepatitis" name="diseases" value="hepatitis">
<label for="hepatitis">Hepatitis</label>
<input type="checkbox" id="malaria" name="diseases" value="malaria">
<label for="malaria">Malaria</label>
</div>
</div>
<div class="form-group">
<label>Are you taking any medication?</label>
<div class="checkbox-group">
<input type="checkbox" id="antibiotics" name="medications" value="antibiotics">
<label for="antibiotics">Antibiotics</label>
<input type="checkbox" id="insulin" name="medications" value="insulin">
<label for="insulin">Insulin</label>
</div>
</div>
<div class="form-group">
<label>Have you had any surgeries or blood transfusions in the past six months?</label>
<div class="checkbox-group">
<input type="checkbox" id="surgery-major" name="surgery" value="major">
<label for="surgery-major">Major Surgery</label>
<input type="checkbox" id="surgery-minor" name="surgery" value="minor">
<label for="surgery-minor">Minor Surgery</label>
<input type="checkbox" id="blood-transfusion" name="surgery" value="blood-transfusion">
<label for="blood-transfusion">Blood Transfusion</label>
</div>
</div>
</div>

<button type="submit">Submit</button>
</form>
</div>
</body>
</html>
Binary file added Front-end-Projects/Basic/Blood-Donation-Form/screenshot.webp
View file
Binary file not shown.
167 changes: 167 additions & 0 deletions Front-end-Projects/Basic/Blood-Donation-Form/styles.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,167 @@
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
}

body {
background: url('images.jpg') no-repeat center center fixed;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
color: #fff;
overflow-y: scroll;
padding: 20px;
}

.container {
background-color: rgba(255, 255, 255, 0.9);
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 600px;
color: #333;
animation: fadeIn 2s;
}

@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

.header {
text-align: center;
margin-bottom: 20px;
background: linear-gradient(90deg, rgba(231, 76, 60, 1) 0%, rgba(192, 57, 43, 1) 100%);
padding: 20px;
border-radius: 10px;
position: relative;
overflow: hidden;
}

.header h1 {
font-family: 'Bebas Neue', cursive;
color: #fff;
font-size: 2.5rem;
margin-top: 10px;
}

.header p {
color: #fff;
font-size: 1rem;
}

.header-icon {
position: absolute;
top: 10px;
left: 10px;
width: 50px;
height: auto;
}

.form-group {
margin-bottom: 20px;
}

.form-group label {
display: block;
margin-bottom: 5px;
color: #333;
font-weight: 700;
}

.form-group input,
.form-group select {
width: 100%;
padding: 12px;
border: 1px solid #ddd;
border-radius: 5px;
color: #333;
font-size: 1rem;
}

.radio-group,
.checkbox-group {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin-top: 10px;
}

.radio-group input,
.checkbox-group input {
display: none;
}

.radio-group label,
.checkbox-group label {
position: relative;
padding-left: 30px;
cursor: pointer;
user-select: none;
display: flex;
align-items: center;
}

.radio-group label::before,
.checkbox-group label::before {
content: '';
position: absolute;
top: 50%;
left: 0;
width: 20px;
height: 20px;
border: 2px solid #e74c3c;
border-radius: 50%;
transform: translateY(-50%);
background-color: #fff;
transition: background-color 0.3s, border-color 0.3s;
}

.radio-group input:checked + label::before,
.checkbox-group input:checked + label::before {
background-color: #e74c3c;
border-color: #e74c3c;
}

.checkbox-group label::after {
content: '';
position: absolute;
top: 50%;
left: 6px;
width: 12px;
height: 12px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: translateY(-50%) rotate(45deg);
opacity: 0;
transition: opacity 0.3s;
}

.checkbox-group input:checked + label::after {
opacity: 1;
}

button {
width: 100%;
padding: 12px;
background-color: #e74c3c;
color: #fff;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s;
}

button:hover {
background-color: #c0392b;
}
Loading

0 comments on commit 0efddae

Please sign in to comment.