styly

STYLY - AI Interior Design Platform

A modern web platform that transforms interior design through AI technology. Built with pure HTML, CSS, and JavaScript, featuring immersive UI/UX and interactive elements.

🌟 Features

• AI-Powered Design Preview

  • Before/After slider visualization
  • Real-time design transformations
  • Multiple style variations

• Interactive UI Elements

  • 3D tilt effects
  • Parallax scrolling
  • Animated transitions
  • Glass morphism design

• Responsive Design

  • Mobile-first approach
  • Fluid layouts
  • Adaptive components

🚀 Getting Started

1. Clone the repository

   git clone https://github.com/yourusername/styly.git
   cd styly
   

2. Setup

   • No build process required
   • Simply serve the files using any web server

   # Example using Python's built-in server
   python -m http.server 8000
   

3. Open in browser

   • Visit http://localhost:8000

🔧 Tech Stack

• HTML5
• CSS3
  • Custom Properties
  • Flexbox
  • Grid
  • Animations
• Vanilla JavaScript
  • Intersection Observer
  • Custom Events
  • ES6+ Features

📁 Project Structure

styly/
├── index.html
├── styles.css
├── script.js
├── assets/
│   ├── images/
│   └── fonts/
└── README.md

✨ Key Components

• Hero Section

  • Dynamic text animation
  • Interactive statistics
  • Before/After comparison slider

• Services Section

  • 3D tilt cards
  • Floating elements
  • Gradient backgrounds

• Retreat Center

  • Parallax backgrounds
  • Interactive gallery
  • Booking system

🎨 Customization

Theme Colors

Modify the root variables in styles.css:

:root {
  --primary-color: #ff8c00;
  --secondary-color: #6f42c1;
  /* ... other variables */
}

Animations

Adjust timing and effects in the CSS animations section:

@keyframes float {
  /* Customize animation parameters */
}

📱 Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

🤝 Contributing

1. Fork the repository
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

🙏 Credits

• Design & Development: Ocdeed Codes
• Icons: Font Awesome
• Fonts: Google Fonts

🤔 Support

For support, email [email protected] or join our Slack channel.

---

Made with ⚡️ by Ocdeed Codes