1. Политех
2. htmlacademy (Да, вы хотели ходить пешком, а это онлайн. Зато и время сэкономите и результат получите (если не будете халявить, разумеется))
3. Индивидуальные занятия. (Всё для вас, в удобное время и в удобном месте, но выйдет дороже. Хотя тут тоже можно оптимизировать, зависит от наставника и вашей способности учиться)
варианты для ИЕ9
- оставить как есть и полоска будет отодвигать только первую полосу
- заменить псевдоэлемент на list-style-image в который инлайново сложить svg
- заменить flex на table
ну или еще что-нибудь типа префиксов с полифилами
Либо бэкэнд либо js выясняет текущий урл, сравнивает его с урлом в ссылке и при совпадении дописывает ссылке (или ее родителю, как укажете) класс.
Этот класс раскрашивается в CSS.
Я бы сделала это табами. Тогда не будет дублирования контента. Но будут 2 вкладки.
Примерно так: https://jsfiddle.net/n6zvbpyq/
Дальше самостоятельно раскрасьте.
Советы:
1. Не используйте height в px, лучше min-height. Тогда если пользователь изменит размер шрифта или количество контента изменится, то будет не так страшно, как с height.
2. Не используйте important. Почитайте про специфичность селекторов htmlbook.ru/samcss/kaskadirovanie
На CSS только дурь в голову приходит, типа .done + .in_progress и этой конструкции задавать ::before с left 100% и 50% шириной которое перекроет половинку покрашенного в предыдущем шаге.
На JS это делается в 1 понятную строчку добавлением еще одного класса.
И у последнего заполненного для ::after задавайте ширину 50% и right вместо left
Для самого последнего заполненного, чтобы шакала вся оказалась светлой, снова верните 100%
2. htmlacademy (Да, вы хотели ходить пешком, а это онлайн. Зато и время сэкономите и результат получите (если не будете халявить, разумеется))
3. Индивидуальные занятия. (Всё для вас, в удобное время и в удобном месте, но выйдет дороже. Хотя тут тоже можно оптимизировать, зависит от наставника и вашей способности учиться)