Brands Water - Premium Custom Water Bottles Website

A professional and beautiful website for a custom water bottle business featuring a modern frosted glass effect design. The website showcases premium quality, customizable water bottles with a sleek, transparent UI.

Features

• Frosted glass effect with backdrop-filter blur
• Responsive design that works on all devices (desktop, tablet, mobile)
• Modern UI with interactive glass elements
• Parallax mouse effect on glass elements
• Product showcase with elegant presentation
• Interactive customization tool for water bottles
• Contact form with glass effect
• Smooth scrolling navigation

Technologies Used

• HTML5
• CSS3 (with CSS Variables and backdrop-filter)
• JavaScript (Vanilla)
• Font Awesome Icons
• Google Fonts (Montserrat & Poppins)

Pages & Sections

1. Home - Hero section with frosted glass effect and call-to-action buttons
2. Products - Showcasing best-selling water bottles with glass card design
3. Customize - Interactive tool to customize your own water bottle
4. About Us - Company information with glass panel design
5. Contact - Contact form with frosted glass effect

Setup Instructions

1. Clone the repository
2. Place your background image in the images folder named background.jpg
3. Open index.html in your browser
4. No build steps or dependencies required

Project Structure

├── index.html              # Main HTML file
├── styles/
│   └── main.css            # Main stylesheet
├── js/
│   └── main.js             # JavaScript functionality
└── images/                 # Image assets (not included in repository)
    └── background.jpg      # Main background image for frosted glass effect

Image Assets Required

For the website to display properly, you'll need to add the following images to the images directory:

• background.jpg: Main background image for the frosted glass effect
• blank-bottle.png: Template bottle for customization
• bottle1.png to bottle4.png: Product images
• stainless-icon.png, glass-icon.png, sport-icon.png: Bottle type icons for customization

Browser Compatibility

The frosted glass effect (backdrop-filter) works best on:

• Chrome (latest)
• Safari (latest)
• Edge (latest)
• Firefox (latest) with layout.css.backdrop-filter.enabled set to true in about:config

License

This project is licensed under the MIT License.

Author

Created by mohd uzaif khan