Spots

A responsive web application showcasing a clean design and intuitive layout for various screen sizes. The Spots project emphasizes accessibility, user experience, and modern design principles, ensuring that all elements are displayed correctly across popular devices.

---

🚀 Project Overview

Responsive Design

• The app adapts seamlessly to various screen sizes:
  • Mobile View (320px - 626px): Special profile layout with one card per row.
  • Small Tablets (627px - 884px): Maintains a single card per row.
  • Large Tablets (885px - 1320px): Displays two cards per row.
  • Desktop View (1321px - 1440px): Features three cards per row, with a content restriction at 1440px for optimal readability.

Tech Highlights

• Modal Design: Includes an overlay, a content area, and a close button for enhanced user interaction.
• validateURL Function: Checks input against a URL pattern and displays error messages for invalid entries.
• Responsive Hover Effects: Adds interactive animations to enhance user experience.
• Overflow Management: Ensures that all content remains accessible across devices.

---

🛠️ Technology Stack

• HTML: Semantic structure for better accessibility.
• CSS: Responsive design and hover effects for a visually appealing layout.
• JavaScript: Interactive features, including modals and validation.
• Webpack: Optimized bundling and build process.

---

🎯 Key Features

• Responsive Layout: Designed for all popular screen sizes, from mobile to desktop.
• Clean User Interface: Focused on accessibility and simplicity.
• Interactive Modals: Engages users with an overlay and smooth close interactions.
• Validation: Includes custom URL validation for precise error handling.
• Hover Effects: Adds depth and interactivity to visual elements.

---

📂 Project Structure

• Files and Folders:
  • .vscode: Settings for project configuration.
  • src: Source files, including responsive elements and reusable components.
  • project 9: Cleaned and described elements, ready for deployment.
  • webpack.config.js: Manages bundling and module dependencies.

---

🌐 Deployment

This project is live and deployed to GitHub Pages: Visit Here

---

📸 Sneak Peek

Views:

• Desktop View: Optimized for larger screens with a three-card layout.
• Tablet Views: Features a two-card or one-card layout based on screen size.
• Mobile View: Single-card layout with a special profile design.

---

🤝 Contributions

Contributions are welcome! Feel free to fork the repository, make updates, and submit pull requests.

---

📜 License

This project is open-source and licensed under the MIT License.