AbcBuildingCompany

A landing page for "ABC Company", a construction firm. This website serves as a digital business card, showcasing the company's services, projects, and contact information. The project is designed to attract potential clients and demonstrate the company's expertise in the construction industry.

Note: This is an educational project created to practice and demonstrate web development skills. It does not represent a real company.

Technologies Used

The project is built using fundamental web technologies without any third-party frameworks or libraries.

• HTML5: Semantic markup.
• CSS3: Modular styling, responsive design (Flexbox), and animations.
• JavaScript (ES6+): Powers interactive elements such as counter animations, parallax effects, and the burger menu.

Project Structure

The project is organized to separate resources from source code:

AbcBuildingCompany/
├── public/
│   └── img/            # Images (optimized .webp and source .png files)
├── src/
│   ├── index.html      # Main HTML file
│   ├── js/
│   │   └── index.js    # Logic for interactive elements
│   └── styles/         # CSS styles, separated by component
│       ├── index.css
│       ├── header.css
│       ├── footer.css
│       └── ...
├── .gitignore
├── LICENSE             # License file (GPL-3.0)
└── package.json

Installation

This project does not require any special installation or build steps.

1. Clone the repository:

   git clone https://github.com/your-username/AbcBuildingCompany.git

2. Navigate to the project directory:

   cd AbcBuildingCompany

Running the project

This project is a static website and doesn't require a server. Simply open the src/index.html file in your web browser to view it.

Features

• Responsive Design: The website displays correctly on various devices, from mobile phones to desktops.
• Interactive Elements:
  • Animated counters for statistics (years of experience, number of projects).
  • Parallax effect on images during scrolling.
  • Interactive project gallery.
  • Smooth scrolling to different sections of the site.
  • Burger menu for easy navigation on mobile devices.
• SEO Optimization: Use of semantic HTML5 tags.
• Map Integration: An embedded interactive map from Yandex.Maps shows the office location.