Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/filonenkodima/yavin-office-design
Yavin-Office-Design is a responsive website built to showcase a modern office design concept. The project highlights sleek design principles, offering users an engaging experience as they explore office layouts, features, and architectural elements.
https://github.com/filonenkodima/yavin-office-design
bootstrap clean-code frontend htmlcssjs responsive-web-design
Last synced: 8 days ago
JSON representation
Yavin-Office-Design is a responsive website built to showcase a modern office design concept. The project highlights sleek design principles, offering users an engaging experience as they explore office layouts, features, and architectural elements.
- Host: GitHub
- URL: https://github.com/filonenkodima/yavin-office-design
- Owner: FilonenkoDima
- Created: 2024-10-15T14:15:32.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-10-16T09:32:10.000Z (4 months ago)
- Last Synced: 2024-12-21T07:14:47.552Z (2 months ago)
- Topics: bootstrap, clean-code, frontend, htmlcssjs, responsive-web-design
- Language: HTML
- Homepage: https://yavin-office-design-df.netlify.app/
- Size: 20.6 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Yavin-Office-Design
## What is this project about?
Yavin-Office-Design is a responsive website built to showcase a modern office design concept. The project highlights sleek design principles, offering users an engaging experience as they explore office layouts, features, and architectural elements.
## Why this project?
- Practicing **HTML5**, **CSS3**, and **JavaScript** to create responsive and interactive web designs.
- Learning how to work with **Bootstrap** to structure responsive layouts and components.
- Enhancing knowledge of **CSS Grid** and **Flexbox**.
- Utilizing **SCSS** for modular and maintainable styles.
- Improving design skills by working with professional UI components and modern design principles.
## Demo Link
[Demo of Yavin-Office-Design](https://yavin-office-design-df.netlify.app/)
## Installation and Setup Instructions
1. Clone the repository:
```bash
git clone https://github.com/FilonenkoDima/Yavin-Office-Design.git
```
2. Navigate to the project directory:
```bash
cd Yavin-Office-Design
```
3. Install the dependencies (if any):
```bash
npm install
```
4. Build the project (if needed):
```bash
npm run sass:build
```
5. Start the project:
```bash
npm run sass:watch
```
6. Open your browser and go to: `http://localhost:3000`
## Project Structure
- `css/` — compiled CSS files for styling the website.
- `scss/` — SCSS files for managing modular styles.
- `images/` — stores all image assets used in the project.
- `js/` — contains JavaScript files for user interactivity (e.g., smooth scrolling, animations).
- `index.html` — the main page showcasing the office design.
- `.gitignore` — specifies which files and directories should be ignored by Git.
- `package.json` and `package-lock.json` — files for managing project dependencies and metadata.
## Features
- **Bootstrap Integration**: Utilizes **Bootstrap** for a responsive grid system and modern UI components.
- **Responsive Design**: The website is optimized for mobile, tablet, and desktop viewing.
- **Office Showcase**: Displays high-quality images and details about office layouts and features.
- **Smooth Transitions**: Uses JavaScript for smooth scrolling and page transitions.
- **SCSS-Based Styling**: Modular and maintainable styles to ensure scalability.