clicktronix / indipixel Goto Github PK

При маленьких разрешениях окна съезжает верстка. Селект растягивается. Если скрываешь фото, то неплохо бы и текст выравнять ближе к центру.
И зеленые полоски на фоне съезжают

Убери margin-top с b-description__tagline и перенеси его в b-description.

Убери лишнюю обертку с кнопки "know more".

Ссылку оформить таким образом:
<a href="mailto:[email protected]">Jon Doe</a>

Ошибка: Полоски при разном масштабировании экрана съезжают.
Рекомендации: Чтобы это исправить тебе нужно задать контейнеру в котором находятся полоски position: relative. Почитай: ссылка.

Делай все коммиты на английском.

Ошибка: Использование разных единиц измерений.
Рекомендации: Используй только одни единицы измерений для отступов. У тебя в верстке присутствуют отступы в процентах и пикселях используй, что-то одно.

Медиа переписать в следующий синтаксис @media screen and (max-width: 768px) { ваши стили }.

В main.styl все еще хранятся стили из блоков.

Опять не БЭМ. Отсутствуют классы у блоков это не допустимо.

Как запустить твой проект через вебпак?

Задай cursor: default;

Убрать лишние обертки с логотипа и ссылки.

Оформить ссылкой.

Неплохо было бы добавить семантические теги :)

Проверь весь свой код и убери лишние стили которые не работают.

Делай коммиты чаще, за каждый 1-2 ишью, можно делать коммит.

Полоска расположена неверно. Почитай про это.

Используй margin для отступов текста. У тебя используются паддинги для заголовка "lets talk". Переделай на марджины.

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

Всегда использовать как минимум один запасной шрифт и одно запасное семейство.

В нем не работают флексы, зачем вставлял?

Пока все еще структуру проекта надо улучшить.
Все для одного компонента должно лежать по сути в одной папке. В css должен быть один блок. Ни html, ни css не должны быть разбросаны по разным местам. Папка, в которой лежит блок, и сам блок должны совпадать названиями для согласованности.
Т.е. если в одной папке у тебя объявляется два разных блока, например, .form и .request-form, то это вероятно два блока и их надо разнести. Или возможно .request-form можно сделать элементом (.form__request).

Модификаторы, которые отмечаются одним подчеркиванием, не могут применяться, если не применен элемент (например, у тебя есть такое request-form_text-input-area). На этих страницах они вероятно и не нужны.

Постарайся избегать классов не названных по бэму типа g-container.
Под @media screen стоит удалить название класса. Стилус поймет и так.

Отличия от макета. Подогнать точнее.
В файерфоксе верстка съезжает. Лучше, что бы отличий при просмотре между браузерами не было. Некоторые незначительные различия допускаются, но небольшие.
Это же относится и к резюме

Добавить в input атрибут name:

<input type="text" name="fname">

Выпадающему списку добавить:

background: #fff;

Сделать send кнопкой, а не дивом. Убери лишнюю обертку с кнопки.

Только сегодня заметил, что у тебя стрелочка в селекте не кастомная (зеленая).

При разрешении 500px и меньше у тебя футер не прибит к низу страницы.
Читай тут как это сделать.

Убери лишние обертки с копирайта и эмайла.

Копирайт при 1110px начинает очень сильно прижиматься к левому краю. Это тоже нужно исправить.

#Структуру можно еще улучшить. В одном компоненте за некоторыми исключениями должен быть только один класс(блок). Вместе со стилусом css может выглядеть как-то так:

.form
  display: block
  &__header
     font-size: 20px
  &__button
       margin: 5px
      &_active
           color: blue

Отсутствует понимания БЭМа. Стоит перечитать документацию.

Зачем используешь clearfix? Он у тебя даже не работает.

Отсутствуют классы у тэгов которые ты стилизуешь. Нельзя явно задавать css правила. Используй классы.

Хорошо:

 <input class='info'>

.info{
    font-size: 20px;
}

Плохо:

<input>

input{
    font-size: 20px;
}