wqertAnna

https://codepen.io/anon/pen/WqgrPK

https://codepen.io/anon/pen/agKYNa

Вот реализация без js и svg, только css
и без @keyframes)

В моей компании используют препроцессоры и компонентный подход. К сожалению, приходится поддерживать и проекты, в которых стили представлены css, но это просто неприятная необходимость и все это понимают.

Я влюблена в sass, очень лаконичный синтаксис, что существенно ускоряет верстку, а также очень легко читается, особенно, учитывая, что в компании приняты именования классов по БЭМ.

Мне кажется, группа людей в вашей компании, которая против препроцессоров не стремиться понуждать себя к изучению чего-то нового. К тому же ещё придется изучить сборщики.

Большая часть передовых компаний сделала свой выбор в пользу препроцессоров, мне кажется, это должно быть некоторым аргументом в их пользу.

И да, поддерживать css хоть немного в приличном состоянии намного сложнее.

Я просто не понимаю, как можно вот это

.header-sub-menu

		&__link
			display: block
			padding: 9px 8px 9px 18px
			color: $dark-gray
			+max-width($tablet)
				padding: 9px 20px 9px 40px
				// анимация
				opacity: 0
				transform: translateY(-25px)
				transition: transform .4s .4s, opacity .4s .4s


			&:hover
				background-color: rgba(56, 65, 79, 0.04)
				color: $dark-gray
				+max-width($tablet)
					background-color: transparent


		&__link-item
			font: bold 13px $font
			color: $dark-gray
			+max-width($tablet)
				font-size: 17px

сравнить в этим

.header-bottom .header-sub-menu__link {
  display: block;
  padding: 9px 8px 9px 18px;
  color: #38414f;
}
@media only screen and (max-width: 992px) {
  .header-bottom .header-sub-menu__link {
    padding: 9px 20px 9px 40px;
    opacity: 0;
    transform: translateY(-25px);
    transition: transform 0.4s 0.4s, opacity 0.4s 0.4s;
  }
}
.header-bottom .header-sub-menu__link:hover {
  background-color: rgba(56, 65, 79, 0.04);
  color: #38414f;
}
@media only screen and (max-width: 992px) {
  .header-bottom .header-sub-menu__link:hover {
    background-color: transparent;
  }
}
.header-bottom .header-sub-menu__link-item {
  font: bold 13px "Roboto Condensed", sans-serif;
  color: #38414f;
}
@media only screen and (max-width: 992px) {
  .header-bottom .header-sub-menu__link-item {
    font-size: 17px;
  }
}

Я понимаю, что приведенный мной css это скомпилированный sass и если изначально писать на css, то это выглядит приличнее, но всё равно, это не сильно меняет картину.

Разберитесь, как этот слайдер работает (тот, что на скрине).
По сути у вас просто 2 связанных слайдера.


https://kenwheeler.github.io/slick/

Мой вариант на основе регулярных выражений
https://codepen.io/anon/pen/orEzbE

const string = `<div draggable="true" ondragstart="drag(event)" id="item_col-2" class="layout_el col-2 gap">
    <div class="g-grid" ondrop="drop(event, this)" ondragover="allowDrop(event)">123</div>
    <div class="g-grid" ondrop="drop(event, this)" ondragover="allowDrop(event)">321</div>
</div>`;

const reg = /<\w+|class=".+?"|>|<\/\w+>|[^>]+?(?=<)|/igm;
const result = string.match(reg).join(" ").replace(/\s\s+/g, ' ');

console.log(result);

Просто поместите нужную вам строку в переменную string

Вообще-то есть один вариант изменить это в css
Я понимаю, что ситуации бывают разные, но выглядит это немного по-извращенски)

div[style="position: fixed; top: 0px; left: 0px; z-index: 100001; display: none;"] {
	position: absolute !important;
}

1. отзывчивый интерфейс!
Это безумно важно.
Всё что интерактивно, должно реагировать на действия пользователей
нужны стили для псевдокласса :hover на кнопки
при наведении на ссылки соц.сетей, они тоже должны как-то реагировать. Например, самое простое opacity: .8
И также не забудьте про cursor: pointer для всего с чем можно взаимодействовать

2. не видела макет, но Вы уверены, что у кнопок должен быть этот серый сомнительный border?
Мне кажется, так лучше (зеленая стрелка) border: 0
уберите оранжевый outline при :focus (синяя стрелка)


3. телефон должен быть ссылкой и тогда он кликабельный
<a href="tel:+74956660266">+7 (495) 666-02-66</a>
4. КАК НАС НАЙТИ? в footer, как я понимаю, это тоже должны быть ссылка

5. я бы убрала outline у input при focus
и placeholder должен исчезать, когда курсор в поле, а он исчезает у вас только при вводе

Вы правильно сделали padding-left у полей ввода, но почему нет padding-right. В общем, это не очень красиво.


Правильно делаете, что используете тег time)

Насчет семантики
В общем, зеленые стрелки означают, что вы правильно использовали теги h2 и p
Красные говорят о неправильном использовании этих тегов


Там где красные стрелки я бы посоветовала использовать div и span
Смотрите div и span это просто строительные блоки без семантики

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

Когда я начинала, старший наставник скинул это сообщение:

Параграфы/Абзацы на уровне семантики должны быть использованы исключительно для разметки контента, не должен использоваться в сквозных блоках, т.к. они контентом не являются.
По сути параграф/абзац это та же самая штука что и в русском языке, и должны использовать исключительно для разметки текста.

6. footer не прижат к низу