TASK-5 create "Solar Solutions" landing page

[pollyv]

The provided HTML and CSS code styles a comprehensive landing page with several distinct sections, each with its own design and purpose. Here's an overview of what has been implemented:

Header:

1. A flex container for the header, aligning items center and spacing them evenly.
2. A logo section with uppercase text and specific font styling.
3. A navigation menu that uses uppercase text and adjusts on hover with a smooth transition effect.

Hero Section:

1. A large hero section with padding and a gradient overlay on an image background.
2. A prominent title that scales slightly on hover for emphasis.
3. Highlighted text within the hero title for additional visual interest.

Expertise Section:

1. A column-based layout displaying various expertise areas.
2. Each expertise item has a hover effect that translates it upward and adds a shadow, creating a sense of depth.
3. Background images are applied with gradient overlays to ensure text readability.

Why Choose Us:

1. A grid layout with multiple rows and columns for presenting reasons to choose the company.
2. Each item has hover effects similar to the expertise items, enhancing interactivity.
3. Some items are highlighted to stand out more.

Who We Are:

1. A two-column layout featuring textual content and images.
2. Buttons styled with smooth background color transitions on hover.
3. Positioned images for visual interest and layering.

Our Services:

1. A grid layout with specific areas designated for different services.
2. Each service item has padding and a hover effect similar to other interactive elements on the page.
3. Centralized images for visual balance.

Footer:

1. A footer with a top section including a description and a bottom section for additional links and contact information.
2. A dark background with lighter text for contrast.
3. Social media links with color transitions on hover.

Overall, the design follows modern web design principles, using CSS flexbox and grid for layout, smooth transitions for interactivity, and specific typography and color choices to maintain a consistent brand identity across the page. This approach ensures the landing page is both visually appealing and user-friendly​​.

[L1s-is]

Хорошо справилась, но нужно было добавить адаптив и в некоторых местах есть вопросы по использованию тегов и стилизации

[L1s-is]

Не может быть заголовка внутри логотипа, это просто текст, параграф
P.S. Если текст жирный и крупный, это не значит, что обязательно будет заголовком :)

[L1s-is]

По общему виду:

• отсутствует адаптив
• В цветных секциях как будто бы просится, чтобы цветная часть растягивалась на всю ширину экрана пользователя https://imgur.com/nSrSGwg https://imgur.com/GkCeupy
• Прикольно, что добавила уместные анимации на карточки

[L1s-is]

Мы не должны использовать br, забудь про его существование. Перенос текста осуществляется ограничением ширины контейнера с текстом)

[L1s-is]

Тут все же стоило задать min-height вместо огромного нижнего padding, поскольку если чуть увеличить размер текста одной из карточек получается фигня https://imgur.com/zrcw7D3

[L1s-is]

• Модификатор стоит указывать через двойной дефис expertise__list-item--solar
• Именование самого элемента можно было указать как .expertise__item, оно бы тоже было уникальным(ведь БЭМ и придумали, чтобы проще и упорядоченнее было именование классов), при этом именование последующих элементов выглядело бы аккуратнее и проще .expertise__item-title итд

[L1s-is]

Я бы не сказала, что это article, поскольку article можно вынести в любое место сайта без потери смысла, тут же это невозможно

[L1s-is]

Про br уже говорила, тут аналогично

[L1s-is]

Это скорее должна быть кнопка, а не ссылка

[L1s-is]

Правый padding тут все же лишний, стоило убрать https://imgur.com/fwr6Bgh