Glassomorphic Website
September 2024
A glassomorphic e-commerce website made in HTML, CSS, and Javascript.
Project Overview
A sleek, modern e-commerce website built using HTML, CSS, and JavaScript, featuring a stylish glassmorphism UI design. The website includes dynamic catalog filtering, detailed product views, dark mode, and a responsive layout optimized for all devices.
The Glassomorphic E-Commerce Website is a front-end project showcasing a fictional e-commerce store with a polished, futuristic design. Users can explore products, filter the catalog, and view detailed product descriptions—all presented with a glass-like UI effect that elevates the browsing experience.
- scripts.js dynamically updates visible products based on category, price, or other selected filters.
- Each page is standalone HTML, linked via nav menus and tags for simple SPA-style browsing.
- styles.css uses backdrop filters, blur effects, and gradients to create a modern glassmorphic UI.
Catalog Filtering
Navigation
Styling
Project Features
- 🏠 Home page with stylish hero section and featured products
- 📖 About Us page explaining company mission and values
- 🛒 Catalog with filtering by category, price, or other attributes
- 🔍 Product detail page with description, price, and purchase button.
- 🎨 Clean and elegant light/dark mode glassmorphism UI
- 📱 Fully responsive design across desktop, tablet, and mobile
Project User Workflow
- Launch the site → Land on the index.html homepage
- Navigate to about.html → Learn more about the store
- Visit catalog.html → Browse products and apply filters
- Click on a product → View product.html with full details
- (Coming Soon) → Add products to the cart and check out
Technologies Used
- 🌐 HTML5 for structure
- 🎨 CSS3 for responsive layouts and glassmorphism effects
- ⚙️ JavaScript for interactivity and filtering