Conversation
| <link rel="stylesheet" href="styles.css" /> | ||
| </head> | ||
| <body> | ||
| <div class="container"> |
There was a problem hiding this comment.
Хотелось бы, чтобы верстка смотрелась красиво в том числе и на планшетных/мобильных разрешениях, даже если это первое задание учебного проекта ;)
| <div class="shape square"></div> | ||
| <div class="shape circle"></div> | ||
| <div class="shape ellipse"></div> | ||
| <div class="shape triangle"></div> |
There was a problem hiding this comment.
При стилизации компонентов в данном задании (да и во всех остальных тоже) необходимо использовать методологию БЭМ, в теоретических материалах к этому модулю https://docs.google.com/document/d/1cF6Ho0bRKAPAcIuoBJTeYq9VIVL-q5p8dI3_TyhHncI/edit была такая глава, так что уверена, что не нужно объяснять, что это и для чего используется, но если вдруг что-то непонятно, можешь написать в телеграм.
В данном случае shape является у тебя Б - блоком, в котором присутствуют общие стили всех фигур, а square, circle итд - М - модификаторы, в которых уже содержатся уникальные стили каждой конкретной фигуры. Модификаторы в БЭМ обозначаются с помощью двойного дефиса, т.е. по логике БЭМ названия классов должны выглядеть так: "shape shape--square", "shape shape--circle" итд
| height: 100px; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; |
There was a problem hiding this comment.
Я думаю, стили на 18-20 строках здесь лишние, внутри фигур нечего центровать и если эти стили убрать - ничего не изменится.
Так же хотелось бы увидеть стили для сглаживания(transition) перехода между состояниями обычным и наведения(hover), сейчас переход выглядит очень резким
| } | ||
|
|
||
| .shape:hover { | ||
| cursor: pointer; |
There was a problem hiding this comment.
Нет смысла писать свойство cursor внутри псевдокласса :hover т.к это свойство само по себе будет срабатывать в том числе и при наведении курсора, при условии, что оно добавлено в "дефолтное" состояние класса(в данном случае .shape), так что стоит это свойство перенести в .shape
| background-color: #ffff00; | ||
| } | ||
|
|
||
| .square { |
There was a problem hiding this comment.
С точки зрения методологии БЭМ ошибочно в класс с названием square добавлять стили, которые влияют не на форму фигуры, а на цвет. Соответственно, в данном случае название класса должно быть именовано по цвету.
| } | ||
|
|
||
| .circle { | ||
| background-color: #0000ff; |
There was a problem hiding this comment.
Тут та же ошибка, необходимо разделить на 2 модификатора, первый - со стилями фигуры, второй - по цвету
2 participants
A simple HTML/CSS code has been created that displays various shapes (square, circle, ellipse, triangle) in a flexible container located in the center of the web page both vertically and horizontally. Each shape has its own CSS class that defines its appearance, such as color and size. In addition, the effect of hovering the mouse cursor over the shapes has been added (the color of the shape changes when hovering).