🧪 Web Lab 2

Welcome to Web Lab 2! This repository showcases a pair of stylish, modern web components built with HTML, CSS, and a touch of JavaScript. Both projects focus on contemporary design trends like gradients and glassmorphism.

🚀 Projects Included

This repository contains two standalone projects:

1. 📝 Modern Biodata Form

• File: biodata.html
• Description: A visually appealing "glass" form set against a vibrant purple gradient. This is a single-file demo showcasing how to build and style a modern form using embedded CSS, custom fonts, and transparency effects.

![Modern Biodata Form]

2. 🧮 Glassmorphism Calculator

• Files: index1.html & style.css
• Description: A beautiful and functional calculator that uses the "glassmorphism" design trend. It features a blurred, transparent background, clean buttons, and all basic arithmetic operations powered by a simple inline script.

![Glassmorphism Calculator]

---

🎨 Key Features

• Glassmorphism UI: Both projects use backdrop-filter: blur() for a modern, frosted-glass effect on the containers.
• Vibrant Gradients: Smooth, multi-color linear-gradient backgrounds create an engaging and dynamic feel.
• Custom Fonts: Integrates Google Fonts (Lexend) for clean, modern typography across all elements.
• Interactive Elements: Includes custom-styled buttons, inputs, and hover/active states for a responsive user experience.
• Functional JS: The calculator is fully functional for basic arithmetic.

🛠️ Technologies Used

• 🧱 HTML5: For the core structure of both pages.
• 🎨 CSS3: For all styling, including:
  • Flexbox & CSS Grid
  • Gradients & Box Shadows
  • backdrop-filter
  • Custom Font Imports
• 💡 JavaScript (ES6+): For the calculator's logic (inline script).

▶️ How to View

Since these are static files, you can view them directly in your browser:

1. Clone the repository:

   git clone [https://github.com/CoderGUY47/web-lab2.git](https://github.com/CoderGUY47/web-lab2.git)

2. Navigate to the directory:

   cd web-lab2

3. Open the files:
   • To see the biodata form, open biodata.html.
   • To see the calculator, open index1.html.