Как заставить проиграть css анимацию после клика по кноке до конца?

Rad Cor: на jquery незнаю как сделать. Вот на js примерно как должно быть:
https://jsfiddle.net/0gy22ozL/1/

Добавь эту функцию на сайт перед закрывающимся тегом body
Еще я подредактировал твой css немного для демонстрационных целей.
И при копировании функции, удали последнюю строку с комментарием.

Как заставить проиграть css анимацию после клика по кноке до конца?

Rad Cor: тебе надо чтобы при нажатии ставился лайк с анимацией, а при повторном - сердечко снова становилось серым?

Как заставить проиграть css анимацию после клика по кноке до конца?

Rad Cor: выбирай)
Оба способа описывать лень)
Если джаваскрипт можно использовать - там одна строка кода (присвоить/убрать класс со свойством animation-play-state: paused;)

Кто-нибудь заморачивается с вертикальным ритмом?

Heik: я это знаю. Но есть люди которые хотят это в требования записать))

Кто-нибудь заморачивается с вертикальным ритмом?

Heik: в том то и дело, что я против этой темы)
Я за выравнивание внутри одного блока, хотя вертикальный ритм изначально в типографике подразумевает выравнивание всего текста на странице по этим вертикальным линиям

Кто-нибудь заморачивается с вертикальным ритмом?

Heik: вероятно не так поняли) возьмите к примеру расширение к хрому baseliner, поставьте какую-нибудь высоту линии, и попробуйте разместить текст так, чтобы все буквы стояли ровно на линии. При попытке добавить заголовки вся система начнет рушиться, а при попытке ее настроить - расстояние между строками будет увеличиваться больше желаемого.

Кто-нибудь заморачивается с вертикальным ритмом?

Хотелось бы взглянуть на реализацию)
Как решили проблему с адаптивными картинками и со small тегом?

Кто-нибудь заморачивается с вертикальным ритмом?

Про ритм элементов это отдельная тема и тоже спорная. Я имел ввиду ритм в тексте (leading). Мне было бы интересно посмотреть как это реализуется без костылей, ибо в вебе мы очень ограничены в инструментах по настройке параметров шрифта.

Как построить такой layout на флексбоксе?

Андрей: а что там делать то?)
Мне было интересно возможно ди это в принципе и, судя по всему - нет. Одним флексом этого не добиться.

Как построить такой layout на флексбоксе?

Николай: я так и думал. Нашел способ только с position: absolute и то работает лишь при определенном условии

Как построить такой layout на флексбоксе?

Николай: к сожалению, это не то ((
Нужно перемещать блок, который посередине

Как построить такой layout на флексбоксе?

Mikhail Osher: я вот тоже думаю что невозможно, но на всякий случай решил спросить у людей - вдруг что-то упускаю.

Как построить такой layout на флексбоксе?

к сожалению, не так, как требуется ((
Во первых - высота блоков должна быть автоматическая.
Во вторых - высота контейнера должна быть автоматическая.
Если первый блок имеет допустим высоту 200 пикселей, а третий - 300, то второй блок должен растягиваться на всю высоту контейнера через какой-нибудь align-items: stretch; или типа того.

Как построить такой layout на флексбоксе?

не адаптируется что-то ((
да и расположение блоков не такое, как требуется

Как построить такой layout на флексбоксе?

А как flex-wrap будет работать если у блока нет фиксированной высоты?

Верстальщики, как по современному выполняете свою работу?

Можно и одним пэйнтом обойтись)

Flexbox. Не понимаю, как сверстать?

Andy_Francev: боюсь, что так не получится. Хотя я никогда не искал способа это реализовать таким образом, ибо привык все делить колонками.

Code review верстки новичка + вопросы?

Оптимус Пьян: mdn и w3c. Это в общем самое основное и авторитетное.

Code review верстки новичка + вопросы?

Nevada18: ок, напишу тогда ща отдельным ответом

Code review верстки новичка + вопросы?

Nevada18: в коде очень много ошибок, с точки зрения всяких best practices. Обьяснять все здесь очень геморрно. Со временем просто придет понимание того, как надо делать "правильно"(по настоящему правильно никто почти не делает, так как это не эффективно). В общем продолжай читать книги и туториалы и сам через годик примерно поймешь как оно делается все.