Skip to content

Glass-morphic Bio Data Form — responsive HTML/CSS/JS form with animated inputs, mailto submission, and floating social buttons (GitHub, LinkedIn, Linktree). Lightweight, mobile-ready portfolio piece.

Notifications You must be signed in to change notification settings

Dark-Vinaal/biodata-form

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

🧾 Bio Data Form - Project

A stylish, glassmorphic web-based bio data form with floating effects and responsive design — built using HTML, CSS, and JavaScript.


✨ Interactive Bio Data Form

  • This project is a fully responsive, visually appealing Bio Data Form that allows users to enter their personal details such as name, contact info, age, and other essentials.
  • It features glowing input boxes, smooth transitions, and floating round contact buttons for quick access to your social profiles GitHub, Linkedin, Instagram, x, and so in Linktree.

🚀 Overview

  • The Bio Data Form is designed with elegance and interactivity in mind. It captures user input in a professional layout and enhances usability through subtle animations, smooth shadows, and stylish buttons.
  • Each field is carefully crafted to provide an engaging, futuristic interface inspired by glassmorphism and modern web trends.

🧩 Key Features & Functionality

  • 💠 Beautiful Glass UI: Transparent glowing form with layered depth effects.
  • 📱 Responsive Design: Works seamlessly across desktops, tablets, and mobile devices.
  • Hover Effects: Smooth transitions with glowing button animations for a premium experience.
  • 🔗 Contact Buttons: Floating social buttons with official GitHub, LinkedIn, and Linktree links.
  • 📤 Form Submission: Uses mailto: functionality to send the filled form to your desired email.
  • Dynamic Interactions: Uses JavaScript to confirm successful submission and display messages.

🎨 Technologies Used

  • HTML5: Structured layout and semantic form fields.
  • CSS3: Glassmorphic styling, transitions, and responsive design.
  • JavaScript (ES6): Handles form submission, validation, and dynamic user feedback.

🧠 Learning Outcomes

  • Building a form-based web app from scratch with HTML, CSS, and JS.
  • Implementing responsive design principles for cross-device compatibility.
  • Applying modern design trends like glassmorphism and glowing effects.
  • Integrating mailto functionality for email-based form submission.
  • Creating interactive floating buttons for quick contact links.

🖥️ Live Demo

🔗 View Project Live


🧰 Tech Stack

HTML5
CSS3
JavaScript
Git
GitHub
GitHub Pages
VS Code


🧑‍💻 Developer

👨‍💻 Developed by: Darkxzz
🌐 Portfolio: Linktree
💼 LinkedIn: Vinaal


🪪 License

This project is licensed under the MIT License — feel free to use, modify, and share it responsibly.


🌟 Showcase


💬 “Simple. Fast. Elegant. — Power of arithmetic, refined through design.”


About

Glass-morphic Bio Data Form — responsive HTML/CSS/JS form with animated inputs, mailto submission, and floating social buttons (GitHub, LinkedIn, Linktree). Lightweight, mobile-ready portfolio piece.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published