Consulting Agency Website

Это демонстрационный сайт консалтинговой компании, созданный с целью продемонстрировать навыки HTML, CSS и адаптивной верстки на высоком уровне. Проект включает несколько разделов: главную страницу, информацию о компании, отзывы клиентов, форму записи на консультацию и контактную информацию.

Проект разработан с акцентом на:

• Адаптивность: Корректное отображение на всех устройствах (desktop, tablet, mobile).
• Семантическая верстка: Использование современных HTML-элементов для лучшей доступности и SEO.
• Производительность: Оптимизация кода для быстрой загрузки и плавной работы.
• CSS-анимации: Плавные переходы и эффекты с использованием @keyframes.
• Псевдоэлементы: Эффективное использование ::before и ::after для стилизации.
• BEM (БЭМ): Строгая организация классов для масштабируемости и поддерживаемости.

Технологии

• HTML5: Для структуры страниц.
• CSS3: Для стилизации и адаптивного дизайна.
  • Flexbox & Grid: Для гибкой верстки.
  • Media Queries: Для обеспечения адаптивности на разных устройствах.
  • CSS-анимации: @keyframes для плавных переходов.
  • Псевдоэлементы: ::before и ::after для дополнительной стилизации.
  • Псевдоклассы: Использование таких псевдоклассов, как :hover, :focus, :nth-child, :first-of-type и др. для интерактивности и точного позиционирования элементов.
• BEM (БЭМ): Методология написания классов для чистого и масштабируемого CSS.
• Семантическая верстка: Использование правильных HTML-элементов для лучшей доступности и SEO.

Как запустить проект

1. Клонируйте репозиторий:

   git clone https://github.com/Nurashka16/consulting-agency.git

2. Перейдите в директорию проекта:

   cd consulting-agency

3. Откройте файл index.html в браузере:

   • Можно использовать любой локальный сервер (например, Live Server в VS Code) или просто дважды кликнуть по index.html.

Адаптивность

Проект полностью адаптивен и корректно отображается на следующих устройствах:

• Desktop: Широкоформатные экраны (1920px+).
• Tablet: Планшеты (768px–1024px).
• Mobile: Мобильные телефоны (320px–767px).

Для проверки адаптивности можно использовать:

• Разные размеры окна браузера.
• Инструменты разработчика в браузере (Device Toolbar).
• Сервисы тестирования адаптивности, такие как Responsinator или Am I Responsive?.

Использованные инструменты

В процессе разработки были использованы следующие инструменты:

• VS Code: Редактор кода.
• Live Server: Расширение для быстрого запуска локального сервера.
• Google Chrome DevTools: Для отладки и проверки адаптивности.
• Font Awesome: Иконки для улучшения интерфейса.
• Normalize.css: Сброс стилей для кросс-браузерной совместимости.
• Media Queries: Для создания адаптивного дизайна.
• CSS-анимации: @keyframes для плавных переходов.
• Псевдоэлементы: ::before и ::after для дополнительной стилизации.

Структура проекта

consulting-agency/
├── css/
│   └── style.css          # Файл со стилями
├── images/                # Изображения
│   ├── logo.png           # Логотип
│   ├── team.jpg           # Изображение команды
│   └── ...
├── js/                    # JavaScript файлы (если есть)
│   └── script.js          # Вспомогательные скрипты
├── index.html             # Главный HTML файл
└── README.md              # Этот файл

Особенности реализации

1. Семантическая верстка

• Использованы правильные HTML-элементы, такие как <header>, <nav>, <main>, <footer> и др., для лучшей доступности и SEO.

2. BEM (БЭМ)

• Классы организованы согласно методологии БЭМ (Block-Element-Modifier). Например:

  <div class="block__element block--modifier"></div>
  

• Это позволяет легко масштабировать и поддерживать CSS.

3. CSS-анимации

• Использованы @keyframes для создания плавных переходов и эффектов. Например:

  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

4. Псевдоэлементы

• ::before и ::after активно используются для добавления декоративных элементов без необходимости добавлять лишние HTML-элементы. Например:

  .button::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
  }

5. Оптимизация производительности

• Минимизированное использование CSS и JS.
• Сжатие изображений для уменьшения размера файла.
• Оптимизация запросов к серверу.

Автор

• Имя: Тилепова Нурайым
• Ссылка на проект: Consulting agency
• GitHub: Nurashka16
• Email: tilepovanura@example.com

---