Air Agency - Landing Page

This project implements a landing page based on a Figma design, utilizing BEM and SCSS methodologies.

View Demo | Project Repository

Project Goals

The main objectives of this project are:

• To practice and understand the use of BEM (Block Element Modifier) methodology.
• To implement SCSS (Sassy CSS) for efficient and modular styling, using mixins, extends, nesting, variables, and style blocking on blocks.
• To create a responsive web page that adapts seamlessly across various screen sizes.

Responsive Design

The landing page is designed to adapt to the following screen sizes:

• Large screens: 2560px
• Design width: 1600px
• Desktop: 1280px
• Small desktop: 1024px
• Tablet: 640px
• Mobile: > 320px

Benefits of BEM

Using BEM (Block Element Modifier) provides several benefits for building scalable and maintainable web pages:

• Scalability: Allows easy expansion and scaling of the project.
• Reusability: Components can be reused across different parts of the project.
• Maintainability: Simplifies updating and maintaining the codebase with a clear naming convention.
• Readability: Makes the project structure easier to understand, beneficial for new developers.

SCSS Features

In this project, SCSS has been used to enhance the styling process with the following features:

• Mixins: For reusable chunks of CSS.
• Extends: To share a set of CSS properties from one selector to another.
• Nesting: To nest your CSS selectors in a way that follows the same visual hierarchy of your HTML.
• Variables: To store values that you reuse throughout your CSS.
• Style Blocking: To keep styles organized and specific to blocks.

How to Run the Project Locally

To run this project on your local machine, follow these steps:

1. Clone the repository:

git clone https://github.com/SrTrace/Air-landing.git

2. Navigate to the project directory:

cd Air-landing

3. Install dependencies:

npm install

or

yarn install

4. Run the project:

   If you are using a local server setup like Live Server in VS Code or a simple HTTP server, start it to view the project. Alternatively, if your project uses a specific build or start command, run:

   npm start

   or

   yarn start

5. Open the project in your browser:

   Visit http://localhost:3000 (or the port specified by your server) to see the landing page in action.

Demo

You can view the final result on the View Demo.

Project Link

Project Repository