diff --git a/Front-end-Projects/Basic/Blood-Donation-Form/README.md b/Front-end-Projects/Basic/Blood-Donation-Form/README.md new file mode 100644 index 000000000..0c2bf0a4e --- /dev/null +++ b/Front-end-Projects/Basic/Blood-Donation-Form/README.md @@ -0,0 +1,68 @@ +

đŸ’Ĩ Blood Donation Form đŸ’Ĩ

+ + + +

Tech Stack Used 🎮

+ + +
+ + ![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) + +
+ + +![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847) + + + +## :zap: Description 📃 + +
+

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..

+
+ + + + +## :zap: How to run it? 🕹ī¸ + +
+

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. + +

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

Developed By Khushi Pushkar

+

+ + + + + + +

+ +

Happy Coding 🧑‍đŸ’ģ

+ +

Show some  â¤ī¸  by  đŸŒŸ  this repository!

diff --git a/Front-end-Projects/Basic/Blood-Donation-Form/icon.png b/Front-end-Projects/Basic/Blood-Donation-Form/icon.png new file mode 100644 index 000000000..52da6fcff Binary files /dev/null and b/Front-end-Projects/Basic/Blood-Donation-Form/icon.png differ diff --git a/Front-end-Projects/Basic/Blood-Donation-Form/images.jpg b/Front-end-Projects/Basic/Blood-Donation-Form/images.jpg new file mode 100644 index 000000000..6762594a3 Binary files /dev/null and b/Front-end-Projects/Basic/Blood-Donation-Form/images.jpg differ diff --git a/Front-end-Projects/Basic/Blood-Donation-Form/index.html b/Front-end-Projects/Basic/Blood-Donation-Form/index.html new file mode 100644 index 000000000..b077a9b0b --- /dev/null +++ b/Front-end-Projects/Basic/Blood-Donation-Form/index.html @@ -0,0 +1,159 @@ + + + + + + Blood Donation Form + + + + + +
+
+ Blood Icon +

Blood Donation Form

+

Please fill out the following information to help us ensure the safety and eligibility of your donation.

+
+
+
+

Personal Information

+
+ + +
+
+ + +
+
+ + +
+
+ +
+

Contact Information

+
+ + +
+
+ + +
+
+ +
+

Address

+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+

Blood Donation Details

+
+ +
+ + + + + + + + + + + + + + + + +
+
+
+ + +
+
+ +
+ + + + +
+
+
+ +
+

Health Information

+
+ +
+ + + + + + +
+
+
+ +
+ + + + + + +
+
+
+ +
+ + + + +
+
+
+ +
+ + + + + + +
+
+
+ + +
+
+ + diff --git a/Front-end-Projects/Basic/Blood-Donation-Form/screenshot.webp b/Front-end-Projects/Basic/Blood-Donation-Form/screenshot.webp new file mode 100644 index 000000000..8e2c5ce4a Binary files /dev/null and b/Front-end-Projects/Basic/Blood-Donation-Form/screenshot.webp differ diff --git a/Front-end-Projects/Basic/Blood-Donation-Form/styles.css b/Front-end-Projects/Basic/Blood-Donation-Form/styles.css new file mode 100644 index 000000000..bde412b9d --- /dev/null +++ b/Front-end-Projects/Basic/Blood-Donation-Form/styles.css @@ -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; +} diff --git a/Front-end-Projects/README.md b/Front-end-Projects/README.md index 25c736521..45a8c9fbb 100644 --- a/Front-end-Projects/README.md +++ b/Front-end-Projects/README.md @@ -47,6 +47,7 @@ | 20 | [Login Signup Form](./Basic//Login-Signup-Form) | ![Basic](https://img.shields.io/badge/Basic-00FF00?style=for-the-badge) | | 21 | [Feedback Form](./Basic//Feedback-Form) | ![Basic](https://img.shields.io/badge/Basic-00FF00?style=for-the-badge) | | 22 | [Survey Form](./Basic//Survey-Form) | ![Basic](https://img.shields.io/badge/Basic-00FF00?style=for-the-badge) | +| 23 | [Blood Donation Form](./Basic//Blood-Donation-Form) | ![Basic](https://img.shields.io/badge/Basic-00FF00?style=for-the-badge) |