Conversation
L1s-is
left a comment
L1s-is
left a comment
There was a problem hiding this comment.
Все хорошо, обрати внимание на наличие адаптива, именование классов по БЭМ и верное использование тегов
| } | ||
|
|
||
| .header__logo { | ||
| padding-right: 66px; |
There was a problem hiding this comment.
Это здесь лишнее https://imgur.com/NZn1eYq
| <meta name="theme-color" content="#ffffff" /> | ||
| </head> | ||
| <body> | ||
| <div class="background__container"> |
There was a problem hiding this comment.
Нарушение методологии БЭМ, элемент background__container не может быть без блока background. Да и в целом немного странное решение использовать отдельный пустой див ради фона. Можно было просто навесить условный .background на body, либо сделать это изображение фоновым для первой секции, и абсолютно спозиционировать шапку сайта, либо с помощью transform спозиционировать первую секцию на уровень шапки, в общем, вариантов много)
| body { | ||
| min-inline-size: 375px; | ||
| max-inline-size: 1440px; | ||
| margin: 0 auto; |
There was a problem hiding this comment.
Не нужно навешивать подобные стили на body, можно было сделать условно класс-обертку для задания ширины контента
| <main> | ||
| <section class="hero"> | ||
| <div class="hero__content"> | ||
| <h2 class="hero__title"> |
There was a problem hiding this comment.
Наверно это все же h1 должен быть. Страница не должна оставаться без заголовка первого уровня
| Introduce Your Product Quickly & Effectively | ||
| </h2> | ||
| <div class="hero__text"> | ||
| <p class="hero__text-one"> |
There was a problem hiding this comment.
Не используй цифры в именовании классов. В целом это лишние классы, раз они не задают никаких стилей
| </section> | ||
| <!--detailes--> | ||
| <section class="detailes"> | ||
| <article class="detaile detaile__lotos"> |
There was a problem hiding this comment.
Наверно имелся в виду модификатор detaile detaile--lotos ? Также присутствует опечатка в слове detail
| <!--detailes--> | ||
| <section class="detailes"> | ||
| <article class="detaile detaile__lotos"> | ||
| <div class="detaile__image"><img class="detaile__image-pic detaile__lotos-image-pic" src="./images/detailes_lotos.png" alt="image"></div> |
There was a problem hiding this comment.
Бессмысленно в атрибуте alt писать "image" или что-то подобное. Содержимое alt выводится, если не подгрузилась картинка, он нужен, чтобы описать то, что на картинке происходит, а что это image(изображение) итак понятно
Если lotos это модификатор (а он должен быть им), то так именовать нельзя detaile__lotos-image-pic
Можно стилизовать как .detail--lotos .detail__image-pic {}
| </section> | ||
| <!--detailes--> | ||
| <section class="detailes"> | ||
| <article class="detaile detaile__lotos"> |
There was a problem hiding this comment.
Это скорее section, поскольку article является самостоятельным контентом, который можно вставить в любую часть сайта без потери смысла
| </li> | ||
| </ul> | ||
| </nav> | ||
| <nav class="footer__socials"> |
There was a problem hiding this comment.
Здесь не может использоваться тег nav, поскольку в nav может храниться только навигация по сайту, список социальных сетей это явно не то)
| <nav class="header__nav nav"> | ||
| <ul class="header__nav-list nav-list"> | ||
| <li class="header__nav-item nav-item"> | ||
| <a href="#" class="header__nav-link nav-link">Home</a> |
There was a problem hiding this comment.
nav-list, nav-item, nav-link - это все не по БЭМ, должно быть nav__list итд по аналогии
2 participants
This landing page has a structured and modern layout that includes several key sections. At the top there is a site header with a logo, navigation and a call to action (CTA) button. The main background contains an image that gives the site visual appeal. The “Hero” section includes a large headline, text, and two CTA buttons that call to action. This is followed by blocks with the features and benefits of the product, equipped with icons and descriptions. The details section contains information about specific offers with buttons for interaction. The page ends with a section with prices and a call to purchase, as well as a footer with information about the company and social network icons.