This project is a comprehensive and responsive web landing page designed to showcase a diverse range of products effectively. The layout incorporates a tabbed navigation system, which allows users to easily switch between different product categories and details. The design emphasizes user engagement with a clean and modern aesthetic, optimized for both desktop and mobile devices. By leveraging the BEM methodology, the project ensures a scalable and maintainable codebase, while the use of advanced CSS techniques and responsive design principles provides a seamless user experience. The project demonstrates a high standard of web development, combining functionality with visual appeal to create an impactful digital presence.
HTML5: Utilized for the structure and semantic -organization of the webpage.
CSS3: Employed for styling, layout, and visual design, leveraging Flexbox and Grid for responsive and adaptive layouts.
Sass: Adopted for managing stylesheets, enhancing maintainability and scalability through variables, nesting, and mixins.
BEM (Block Element Modifier): Applied for a clear and consistent CSS architecture, facilitating modular and reusable code.
Responsive Design Techniques: Implemented to ensure the webpage adapts seamlessly to various screen sizes and devices.
Webpack: Used for bundling and optimizing project assets and dependencies for efficient loading and performance.
To run this project locally, follow these steps:
Clone the repository: git clone https://github.com/MariiaSuper/eco_cosmetics_landing_page.git
Navigate to the project directory: cd eco_cosmetics_landing_page
Install the dependencies: npm install
Start the development server: npm start
Open your browser and go to: http://localhost:3000 to view and interact with the landing page.
This will launch the landing page on your local development server, allowing you to explore and test the project's features.