mountain123

:before и :after добавляет контент к содержимому элемента, а у img же как такового содержимого нет.
Решение - завернуть img в div и к нему уже применять псевдоэлементы.

Также псевдоэлементы нельзя применить к input

Вот реальное решение, а не так называемое решение из упомянутого линка, где советуют user-scalable=no
НИКОГДА не делайте user-scalable=no !!!!!

# Mobile first
input, textarea, select {
  font-size: 16px;
}

# Tablet upwards
@media (min-width: 768px) {
  font-size: 14px;
}

ИБО:
Телефон будет слегка увеличивать поля формы, если для текста установлено значение менее 16 пикселей. Я бы предложил настроить текст поля мобильной формы на 16 пикселей, а затем переопределять размер при просмотре с декстопных компьютеров.

$('#menu').css({ [v]: '0' });

Можете попробовать написать программу на Python. С помощью Selenium.

Сделайте простой парсер который ищет ответы на вопросы.
Рекомендую изпользовать Python + Selenium.

p.s если вопросы школьные - рекомендую парсить https://znanija.com/
если вопросы другой тематики - рекомендую парсить https://otvet.mail.ru/
вообще таких сайтов очень много

Набор текст можно на js запилить, кривые линии и фигуры - смотрите в сторону библиотек работающих с canvas. Pixi.js например

Я бы рекомендовал попробовать сверстать собственный макет самостоятельно, к примеру, на том же bootstrap. На своем опыте оцените, есть ли недостатки.

Из правил:

1. Дизайн не должен мешать пользователю. Чем меньше шума, тем лучше. В идеале - ничего лишнего на экране. И как можно меньше анимации.
   
2. Функциональность превыше эффектов - сначала содержимое, только потом украшения
   
3. Мыслить от абстрактного к конкретному, мыслить модульно - чистый холст делим на части (в пропорциях), потом добавляем компоненты в виде сплошных фигур, потом детализируем компоненты. Так мыслит и верстальщик, и программист. Хранить компоненты в отдельных файлах.
   
4. Красивый дизайн - логичный дизайн. Все должно быть упорядоченно, иметь обоснованные размеры, отступы, цвета и эффекты
   
5. Постоянство - одна цветовая схема, пропорции, типографика, элементы
   
6. Стандарты и традиции. Поведение предсказуемо. Стрелка вниз на панели означает, что панель развернется вниз, а не вверх. Красный - опасное действие, зеленый - безопасное. Используйте стандартные иконки, вместо никому не знакомых.
   
7. Смотрите на дизайн чужими глазами - наложите черно-белый фильтр или размытие и убедитесь, что содержимое не растворилось, акценты на месте. Продумайте, что случится с колонкой или меню, если текста будет слишком много или мало.
   
8. Растровая графика для фотографий и многоцветных изображений. Все что может быть описано в векторе - делается в векторе.
   
9. На каждое правило бывают исключения
   

Книги и материлаы

1. Design for Hackers: Reverse Engineering Beauty - технический взгляд на элементы дизайна
   
2. Прочие книги по UX и web-design в списках бестселлеров amazon / ozon
   
3. behance и dribbble - для анализа лучших практик
   
4. Руководства по стилям: Google Material Design, Modern UI, Apple Human Interface Guidelines, ibm design. Тоже для анализа практик и правил для конкретной платформы.
   

$subject = "яблоко красное и [зеленое] яблоко и еще [одно] красное яблоко и [еще] одно яблоко, зеленое";
$pattern = '/\[(.+?)\]/';
preg_match_all($pattern, substr($subject,3), $matches);
print_r($matches);

Во-первых, вам нужно использовать ленивый квантификатор - добавить знак вопроса после ".+". Таким образом поиск будет производится до первого совпадения, а не до последнего.
Во-вторых, нужно использовать preg_match_all, если вам нужны все совпадения.

flaticon.com

Добрый день!
Как то работал с highslide js, там такакя функция точно была!