Contact Us Web Page

Overview

This project is a responsive "Contact Us" web page with a modern, visually appealing design. The page features a glassmorphism effect for the contact form, a gradient background with smooth transitions, and a raindrop animation that adds a dynamic, interactive feel to the user experience.

Features

• Responsive Design: The page is fully responsive, ensuring it looks great on all devices, including desktops, tablets, and smartphones.
• Glassmorphism Effect: The contact form is styled with a glass effect, creating a frosted glass appearance that blends beautifully with the gradient background.
• Gradient Background Animation: The background features a smooth, animated gradient that shifts colors over time, adding a modern touch to the page.
• Raindrop Animation: A subtle raindrop effect is implemented in the background, with droplets falling at random positions and intervals, enhancing the visual appeal.
• Customizable Form: The form includes fields for the user's name, email, subject, and message, and can be easily customized to include additional fields if necessary.
• Attribution: The page includes a footer note with the text "Developed by Daud."

Technologies Used

• HTML5: For structuring the web page.
• CSS3: For styling, including the glass effect, gradient background, and responsive layout.
• JavaScript: For creating and animating the raindrop effect.

Getting Started

Prerequisites

To view or edit this project, you'll need a modern web browser and a code editor such as Visual Studio Code.

Running the Project

1. Clone the repository (if applicable) or simply copy the HTML code into a .html file.
2. Open the file in your browser: You can open the HTML file directly in your web browser by double-clicking it.
3. View the page: The page should load with all the visual effects, including the glassmorphism contact form, animated gradient background, and raindrop effect.

Customization

• Form Fields: You can add or modify the form fields within the <form> element in the HTML structure.
• Raindrop Effect: The number of raindrops, speed, and other attributes can be adjusted in the JavaScript section at the bottom of the HTML file by modifying the numDrops variable and CSS for .raindrop.
• Background and Animation: The gradient colors, animation duration, and other properties can be tweaked within the CSS in the body and @keyframes gradientBG sections.

This project is open-source and available under the MIT License. Feel free to use, modify, and distribute it as needed.

Acknowledgements

• Special thanks to the creator of the glassmorphism and gradient animation concepts that inspired this project.
• Developed by Daud.