STYLÉKA - Modern E-Commerce Fashion Website

A modern, responsive e-commerce website for fashion and lifestyle products built with HTML, CSS, and JavaScript.

🌟 Features

🛍️ Core E-Commerce Features

• Product Catalog: Comprehensive product listings with detailed information
• Advanced Search: Real-time product search with multiple filters
• Shopping Cart: Add to cart functionality with cart management
• Product Categories: Organized product sections (Featured Products, New Arrivals)
• Individual Product Pages: Detailed product views with specifications

🎨 Modern UI/UX

• Responsive Design: Mobile-first approach, works on all devices
• Gradient Backgrounds: Modern gradient designs throughout the site
• Interactive Elements: Hover effects, smooth transitions, and animations
• Glass Morphism: Modern translucent design elements
• Professional Typography: Clean and readable font choices

🔍 Advanced Search System

• Text Search: Search by product name, brand, or description
• Brand Filtering: Filter products by specific brands (Adidas, Zara, Gucci, etc.)
• Price Range Filtering: Filter by price ranges (₹0-2000, ₹2000-5000, etc.)
• Real-time Results: Instant filtering as you type
• Clear Search: Easy reset functionality

📱 User Experience

• Authentication UI: Login and signup interfaces
• Newsletter Subscription: Email subscription for updates
• Social Media Integration: Follow us on various platforms
• Mobile Navigation: Hamburger menu for mobile devices
• Fast Loading: Optimized images and efficient code

🏗️ Project Structure

STYLÉKA/
├── index.html              # Homepage
├── shop.html              # Product catalog page
├── blog.html              # Blog/news section
├── about.html             # About us page
├── contact.html           # Contact information
├── login.html             # User login page
├── register.html          # User registration page
├── cart.html              # Shopping cart
├── cancel.html            # Order cancellation
├── success.html           # Order success page
├── sproduct*.html         # Individual product pages (1-15)
├── style.css              # Main stylesheet
├── script.js              # JavaScript functionality
├── server.js              # Backend server (if applicable)
└── README.md              # Project documentation

🛠️ Technologies Used

Frontend

• HTML5: Semantic markup and structure
• CSS3: Modern styling with flexbox, grid, gradients, and animations
• JavaScript (ES6+): Interactive functionality and DOM manipulation
• Font Awesome 6.4.2: Icons and visual elements
• Google Fonts: Professional typography

Design Elements

• Responsive Design: Mobile-first approach
• CSS Grid & Flexbox: Modern layout systems
• CSS Animations: Smooth transitions and hover effects
• Gradient Backgrounds: Modern visual appeal
• Box Shadows: Depth and visual hierarchy

External Resources

• Pexels CDN: High-quality product images
• Unsplash: Hero section backgrounds
• FontAwesome CDN: Icons and UI elements

🚀 Getting Started

Prerequisites

• Modern web browser (Chrome, Firefox, Safari, Edge)
• Text editor or IDE (VS Code recommended)
• Local server (optional, for full functionality)

Installation

1. Clone the repository

   git clone https://github.com/Channpreetk/Styleka.git
   cd Styleka

2. Open the project

   • Open index.html in your web browser, or
   • Use a local server for better performance:

   # Using Python
   python -m http.server 8000
   
   # Using Node.js
   npx serve .
   
   # Using VS Code Live Server extension
   Right-click on index.html → "Open with Live Server"

3. Navigate the website

   • Visit http://localhost:8000 (if using local server)
   • Or simply open index.html in your browser

📖 Usage Guide

🏠 Homepage Features

• Hero Section: Eye-catching banner with call-to-action
• Featured Products: Highlighted products with search functionality
• Why Choose Us: Benefits and unique selling points
• New Arrivals: Latest product additions
• Newsletter Signup: Stay updated with latest offers

🛒 Shopping Features

• Product Search: Use the search bar to find specific products
• Filter Options: Use brand and price filters to narrow down results
• Product Details: Click on products to view detailed information
• Add to Cart: Add desired items to your shopping cart

📱 Mobile Experience

• Responsive Navigation: Hamburger menu for mobile devices
• Touch-Friendly: Optimized for touch interactions
• Fast Loading: Optimized for mobile networks

🎨 Customization

Color Scheme

The website uses a modern teal-based color palette:

• Primary: #088178 (Teal)
• Secondary: #06b19e (Light Teal)
• Accent: Various gradients and complementary colors

Fonts

• Primary Font: "Play" - Modern, clean sans-serif
• Fallback: System fonts for compatibility

Images

• All product images are sourced from Pexels CDN for reliability
• Hero backgrounds from Unsplash for high quality

🔧 Configuration

Search Functionality

The search system can be customized in script.js:

• Add new brands to the brand filter
• Modify price ranges
• Adjust search algorithms

Styling

Main styles are in style.css:

• Modify color variables for theme changes
• Adjust responsive breakpoints
• Customize animations and transitions

🌐 Browser Support

• Chrome: ✅ Fully supported
• Firefox: ✅ Fully supported
• Safari: ✅ Fully supported
• Edge: ✅ Fully supported
• Mobile Browsers: ✅ Optimized for mobile

📊 Performance Features

• Optimized Images: Compressed and properly sized images
• Efficient CSS: Minimized CSS with efficient selectors
• Fast JavaScript: Optimized DOM manipulation
• CDN Resources: Fast loading external resources

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the project
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📝 License

This project is open source and available under the MIT License.

👨‍💻 Author

Channpreet Kaur

• GitHub: @Channpreetk

🙏 Acknowledgments

• Images: Pexels and Unsplash for high-quality images
• Icons: Font Awesome for beautiful icons
• Fonts: Google Fonts for typography
• Inspiration: Modern e-commerce design trends

📞 Contact

For any queries or support, please contact:

• Email: [Your Email]
• Phone: (+91) - 8507566667
• Address: Guru Nanak Dev University, Amritsar

---

Made with ❤️ for modern fashion enthusiasts

---

🔄 Version History

• v1.0.0 - Initial release with basic e-commerce functionality
• v1.1.0 - Added advanced search and filtering
• v1.2.0 - Enhanced mobile responsiveness
• v1.3.0 - Improved UI/UX with modern design elements

---

Last updated: January 2025