При объявлении свойства timers[timer]//undefined
Естественно, при сложении времени выполнения c undefined будет равно NaN. Вот и идет проверка if (!timers[timer]) timers[timer] = 0;
P.S. Наверное не совсем понятно в связи с тем, что практики в таких вещах еще нет, как и у меня:)
Вот сверстано ужасно и на скорую руку, но суть, думаю, понятна. Просто нужны skew z-index и after. А чтобы изменить цвет нижнего блока в зависимости от активной ссылки, нужен JS:)
codepen.io/vlad7576/pen/xZWZdQ?editors=1100 . Уменьшайте экран, все вроде все как в windows. Возможно, это своеобразные костыли и при увеличении количества блоков верстка падает, но, может, натолкнет на мысль :)
вот в первом блоке через градиент, во втором через after. У градиента есть небольшой минус- это плохое сглаживание, зачастую наблюдается при контрасте, а вот через after, такого не нет.Да и after поддерживается IE 9,8 ;)
Это связано с низким разрешением экрана. И сделать тут скорее всего ничего нельзя. По крайней мере, гугление ничего не дало. Можно поменять border на 2px, или увеличить width и height до 35px, если это, конечно, не принципиально:)
Чтобы добавить внутреннюю тень надо написать inset в конце box-shadow. Но это не внутренняя тень, в внешняя только без рассеивания и сдвига. Здесь все подробнее htmlbook.ru/css/box-shadow
Вот полностью готовый. Пришлось использовать impact, более похожего не нашел. Но скорее всего там при наведении еще и картинка менялась, потому что надпись "180 дней премиум аккаунта" в первой картинке, при наведении теряется https://jsfiddle.net/c2xg10af/2/