Room-Homepage

KO | EN

gitlite — search

#python #ai #llm #android #machine-learning #rust #linux #docker #java #awesome-list #vue #security #openai #open-source

(★ 13)

A modern, fully responsive furniture e-commerce homepage featuring an interactive image slider, mobile navigation, and CSS Grid layout. Built with semantic HTML5, advanced CSS3, and vanilla JavaScript following mobile-first design principles.

Room-Homepage Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Room Homepage

## 📖 Overview

Room Homepage is a fully responsive e-commerce landing page that showcases modern furniture with an emphasis on clean design and user experience. The project demonstrates advanced CSS Grid layouts, interactive JavaScript components, and mobile-first responsive design principles.

![Room Homepage Preview](https://raw.githubusercontent.com/Ayokanmi-Adejola/Room-Homepage/main/preview.jpg)

### Challenge Requirements

Users should be able to:
- ✅ View the optimal layout for the site depending on their device's screen size
- ✅ See hover states for all interactive elements on the page
- ✅ Navigate the slider using either their mouse/trackpad or keyboard
- ✅ Experience smooth transitions and animations
- ✅ Access the site on mobile devices with touch-friendly navigation

## ✨ Features

### Core Functionality
- **Interactive Image Slider**: Navigate through 3 hero images with smooth transitions
- **Responsive Navigation**: Mobile hamburger menu with overlay navigation
- **Keyboard Accessibility**: Arrow key navigation for the image slider
- **Touch-Friendly**: Optimized for mobile and tablet interactions
- **Semantic HTML**: Proper accessibility attributes and structure

### Design Elements
- **CSS Grid Layout**: Advanced grid system for precise positioning
- **Custom Typography**: League Spartan font with optimized spacing
- **Hover Effects**: Interactive states for buttons and navigation
- **Mobile-First Design**: Responsive breakpoints for all device sizes
- **Performance Optimized**: Efficient CSS and JavaScript implementation

## 🛠 Technologies Used

### Frontend
- **HTML5**: Semantic markup with accessibility features
- **CSS3**: Advanced Grid, Flexbox, and custom properties
- **Vanilla JavaScript**: ES6+ features for interactive components
- **Google Fonts**: League Spartan typography

### Development Tools
- **Git**: Version control
- **GitHub**: Repository hosting and deployment
- **VS Code**: Development environment

## 📦 Installation

### Prerequisites
- Modern web browser (Chrome, Firefox, Safari, Edge)
- Git (for cloning the repository)

### Quick Start

1. **Clone the repository**
   ```bash
   git clone https://github.com/Ayokanmi-Adejola/Room-Homepage
   cd room-homepage
   ```

2. **Open in browser**
   ```bash
   # Option 1: Direct file opening
   open index.html

# Option 2: Using a local server (recommended)
   python -m http.server 8000
   # Then visit http://localhost:8000
   ```

3. **Start developing**
   - Edit `index.html` for structure changes
   - Modify `style.css` for styling updates
   - Update `script.js` for functionality enhancements

## 🎯 Usage

### Navigation
- **Desktop**: Click navigation links in the header
- **Mobile**: Tap the hamburger menu icon to reveal navigation

### Image Slider
- **Mouse**: Click the arrow buttons at the bottom-right of images
- **Keyboard**: Use left/right arrow keys to navigate
- **Touch**: Swipe gestures (if implemented)

### Responsive Breakpoints
- **Mobile**: 375px and up
- **Desktop**: 768px and up

## 📁 Project Structure

```
room-homepage/
├── index.html              # Main HTML file
├── style.css              # Stylesheet with responsive design
├── script.js              # JavaScript functionality
├── README.md              # Project documentation
├── style-guide.md         # Design specifications
├── images/                # Image assets
│   ├── desktop-image-hero-1.jpg
│   ├── desktop-image-hero-2.jpg
│   ├── desktop-image-hero-3.jpg
│   ├── mobile-image-hero-1.jpg
│   ├── mobile-image-hero-2.jpg
│   ├── mobile-image-hero-3.jpg
│   ├── image-about-dark.jpg
│   ├── image-about-light.jpg
│   ├── icon-arrow.svg
│   ├── icon-angle-left.svg
│   ├── icon-angle-right.svg
│   ├── icon-hamburger.svg
│   └── icon-close.svg
└── design/                # Design reference files
    ├── desktop-design.jpg
    ├── desktop-preview.jpg
    ├── mobile-design.jpg
    └── mobile-navigation.jpg
```

## 🎨 Design Specifications

### Color Palette
- **Dark Gray**: hsl(0, 0%, 63%)
- **Black**: hsl(0, 0%, 0%)
- **White**: hsl(0, 0%, 100%)
- **Very Dark Gray**: hsl(0, 0%, 27%)

### Typography
- **Font Family**: League Spartan
- **Font Weights**: 500, 600, 700
- **Base Font Size**: 12px

### Layout
- **Mobile**: 375px design width
- **Desktop**: 1440px design width

## 🌐 Browser Support

- ✅ Chrome (latest)
- ✅ Firefox (latest)
- ✅ Safari (latest)
- ✅ Edge (latest)
- ✅ Mobile browsers (iOS Safari, Chrome Mobile)

### Development Guidelines
1. Fork the repository
2. Create a 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

## 🙏 Acknowledgments

- [Frontend Mentor](https://www.frontendmentor.io) for providing the design challenge
- [Google Fonts](https://fonts.google.com) for the League Spartan typography

Room-Homepage

Room-Homepage Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Room-Homepage

Room-Homepage Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README