VYBE-WEB

🌟 Overview

VYBE is a modern, futuristic streetwear e-commerce website featuring a stunning cyberpunk-inspired design. The website showcases premium fashion products with unique designs and limited drops, targeting urban fashion enthusiasts who want to "Own the EDGE" and "Keep the VIBE".

✨ Features

🎨 Design Highlights

• Cyberpunk Aesthetic: Bold gradients with pink (#EEAECA) and blue (#94BBE9) color scheme
• Modern Typography: Uses Anton and Poppins fonts for a contemporary look
• Responsive Layout: Fluid design that adapts to different screen sizes
• Interactive Elements: Hover effects, smooth transitions, and animated components

🛍️ E-commerce Functionality

• Product Catalog: Display of streetwear items including hoodies, jackets, tees, pants, and accessories
• Shopping Cart: Integrated cart system showing product count
• Product Categories:
  • Tops (tees, hoodies, jackets)
  • Bottoms (pants, shorts)
  • Accessories (caps, watches, sneakers)
• Featured Products: Highlighted items with pricing (in Rs.)
• Product Cards: Clean product presentation with images, names, descriptions, and prices

🎯 Key Sections

1. Hero Banner: Eye-catching header with "Own the EDGE" and "Keep the VIBE" taglines
2. New Arrivals: "Where Art Meets your Style" - showcasing the latest streetwear
3. Latest Drops: Interactive carousel with dot navigation showing 3 products at a time
4. Featured Products: Highlighted items including:
   • Urban Vanguard Tee (Rs. 999)
   • Cyber Hoodie (Rs. 1299)
   • Future Jacket (Rs. 1799)
   • Tech Sneakers (Rs. 2199)
   • And many more...
5. Collage Section: Visual storytelling with "Shop the Vibe" call-to-action
6. Rating System: 4.2/5.0 customer satisfaction display

🔧 Technical Features

• Product Slider: JavaScript-powered carousel with dot navigation
• Search Functionality: Built-in search bar for product discovery
• User Profile: Profile dropdown menu
• Navigation Menu: Easy access to Shop, Collections, About, and Contact pages

📁 Project Structure

vybe-web/ ├── index.html # Main HTML file ├── Readme.md # Project documentation ├── styles/ # CSS stylesheets │ ├── general.css # Global styles │ ├── header.css # Header/navigation styles │ ├── banner.css # Hero banner and main sections │ ├── latest-drops.css # Product carousel styles │ └── collage.css # Collage section styles ├── scripts/ # JavaScript files │ └── slider-dots.js # Product carousel functionality ├── images/ # Product and hero images └── icons/ # SVG icons and UI elements

🚀 Getting Started

Prerequisites

• A modern web browser (Chrome, Firefox, Safari, or Edge)
• No build tools or dependencies required - this is a pure HTML/CSS/JS project

Installation & Running

1. Clone the repository:

   git clone https://github.com/mrcoder36/vybe-web.git

2. Navigate to the project directory:

   cd vybe-web

3. Open index.html in your web browser:

   • Double-click the file, or

   • Use a local server (recommended):

     # Using Python
     python -m http.server 8000
     
     # Using Node.js
     npx serve

4. Visit http://localhost:8000 in your browser

🎨 Design System

Color Palette

• Primary Pink: #EEAECA (rgba(238, 174, 202, 1))
• Primary Blue: #94BBE9 (rgba(148, 187, 233, 1))
• Background: Light blue tint (aliceblue)
• Text: White and dark gray variations

Typography

• Display Font: Anton (bold headings)
• Body Font: Poppins (various weights: 100-900)
• Supporting Font: Roboto

Layout

• Gradient backgrounds using radial and linear gradients
• Border radius: 27px, 40px, 50px for rounded elements
• Consistent spacing and padding throughout

🛠️ Technologies Used

• HTML5: Semantic markup
• CSS3:
  • Flexbox layouts
  • CSS Grid
  • Gradients and transitions
  • Custom animations
• Vanilla JavaScript:
  • DOM manipulation
  • Event handling
  • Carousel/slider functionality

📱 Browser Compatibility

• Chrome (recommended)
• Firefox
• Safari
• Edge
• Opera

🎯 Future Enhancements

• Add backend integration for real shopping cart
• Implement product filtering and sorting
• Add user authentication
• Create product detail pages
• Integrate payment gateway
• Add mobile responsive breakpoints
• Implement product reviews and ratings

👤 Author

VISHAL K.

📄 License

This project is open source and available under the standard open source license.

🤝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to check the issues page.

---

Where Art Meets your Style - Step into the future of Streetwear today