Eco Cosmetic Website

Welcome to a new way to beauty!

This project involves the development of a one-page website for Eco Cosmetic, an eco-friendly brand offering natural and sustainable beauty products.

What users will find:

• An engaging slider showcasing our products.
• Detailed information about the products. Learn about ingredients and benefits.
• Hassle-free shopping experience. Add products to your cart and pay securely.
• Contact form. Contact us if you have any questions or would like to receive personalized recommendations.

Technologies Used

• HTML: The fundamental structure of the website is crafted using well-organized and semantic HTML.

• BEM (Block Element Modifier): CSS classes are structured according to the BEM methodology to enhance maintainability and minimize style conflicts, using the Block__Element--Modifier format.

• SCSS (Sassy CSS): Improves code maintainability and readability through features such as:

  • Mixins: Reusable code fragments to adhere to the DRY (Don't Repeat Yourself) principle.

  • Variables: Consistent values stored in variables for easy global changes.

  • Nesting: Nested selectors for better visual management of complex layouts.

  • CSS Rules: Extensive rules encompassing layout, typography, colors, and more.

  • Adaptive Layout: Responsive design implemented with media queries to ensure optimal - viewing across all devices (desktop, tablet, mobile).

  • Style Reset: A basic CSS reset to standardize default browser styles, providing a consistent starting point.

• JavaScript (Minimal Usage): Light JavaScript usage for minor interactive elements or functionalities (e.g., burger menu).

Additionally, the project includes the creation and implementation of:

• Custom Product Slider: A personalized slider for showcasing products.
• Product Card: Detailed product cards displaying essential information.
• Shopping Cart: A shopping cart feature with a simulated payment process.

Demo

Click the button below to experience the Eco Cosmetic landing page:

DEMO

DESIGN

Run Locally

This project uses Node.js 14. Switching to it ensures compatibility with project dependencies. Refer to Node.js download for installation instructions.

Clone the project

  git clone https://github.com/julwer1k/eco-cosmetic_landing.git

Go to the project directory

  cd eco-cosmetic_landing

Install dependencies

  npm install

Start the server

  npm run start

Check linter [HTML, JavaScript, CSS]

  npm run lint