Eco cosmetics landing page

Landing page was implemented according to Figma design

• It uses BEM and SCSS for structured and modular CSS.

Demo

You can see the landing page live at the following link: DEMO

Technologies Used

• HTML: For the basic structure of the webpage.
• CSS (SCSS): For styling, with SCSS providing advanced features like variables, nested rules, and mixins.
• JavaScript: For dynamic interactions and functionality.
• BEM (Block Element Modifier): For a modular and reusable CSS code structure.
• Figma: The design tool used to create the visual layout of the landing page.

Responsive Design

The page is adapted for the following screen sizes:

• Desktop: 1440px
• Small Desktop: 1280px
• Tablet: 640px
• Mobile: > 320px

Structure:

1. Header with nav.
2. Brand of eco-cosmetics and magic candles block.
3. If you choose the gifts of nature and care about it’s - scroll down block.
4. About our brand block.
5. Shop block:

• tabs
• slider

6. About the creators block.
7. Ayurvedic Tooth Powder block.
8. Contact us block.
9. Footer.

Running the Project Locally

To run this project locally, follow these steps:

• Clone the Repository:

git clone https://github.com/SvitlanaRamanauskas/Eco_cosmetics_landing_page_Portfolio.git
cd Eco_cosmetics_landing_page_Portfolio

• Install Dependencies:

Install dependences using npm (Node Package Manager). Ensure you have Node.js installed on your machine. This project uses Node v14.

npm install

• Run the Project:

Start the development server with live reloading:

npm start

Alternatively, you can use any other local server setup you prefer, such as Live Server for VS Code.

• Open the Project in Your Browser:

Visit http://localhost:5000 or the port your server specifies to see the landing page in action.

Contributing

If you would like to contribute to this project, please fork the repository and submit a pull request. Contributions are always welcome!