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.
- 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.
- Clone the repository:
git clone https://github.com/FilonenkoDima/Yavin-Office-Design.git
- Navigate to the project directory:
cd Yavin-Office-Design - Install the dependencies (if any):
npm install
- Build the project (if needed):
npm run sass:build
- Start the project:
npm run sass:watch
- Open your browser and go to:
http://localhost:3000
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.jsonandpackage-lock.json— files for managing project dependencies and metadata.
- 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.