Ivan Stroykin

Issues в репозитории angular/material2 по поводу Range Slider - ссылка
Как понятно по ответам, данный функционал пока не планируется добавлять

Pull request по добавлению Range Slider - ссылка
Можете просто на основе реализации автора сделать свой range slider

Вот вам пример реализации игры на двоих - ссылка используя Angular и Pusher

Ответ на ваш вопрос

Для этого необходимо использовать [overlapTrigger]="false"

Пример кода:

<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu" [overlapTrigger]="false">
    <button mat-menu-item>Item 1</button>
    <button mat-menu-item>Item 2</button>
</mat-menu>

Пример готовой реализации:

Пример

Например, jQuery Before/After Plugin или TwentyTwenty, или Before-After Slider&Banner

Пример

Маленький банальный пример. От вас - улучшить его

var width = document.documentElement.clientWidth;
if (width > 992) {
    document.location.href = "http://google.com";
}

codepen.io/StivinKing/pen/bgePye

<div class="header">
  <nav class="navbar navbar_visible">
  <ul>
    <li><a href="#">Visible</a></li>
    <li><a href="#">Hidden</a></li>
  </ul>
</nav>
<button class="btn">the btn</button>
</div>

$(document).ready(function(){
	$(".btn").click(function(){
		$(".navbar").slideToggle(500);
	})
	$(".btn").click(function(){
  	$(".navbar").removeClass("navbar_visible").addClass("navbar_hidden")
  })
});

1 div, 1 class
codepen.io/StivinKing/pen/PWzmJB
p.s. лучше для кнопки использовать button

• Пользователь зашел на страницу -> сделали запись в БД. К примеру: id пользователя и время
  
• Как только пользователь нажал на кнопку делаем запрос к базе и сравниваем: время когда он нажал на кнопку и время из базы (первое минус второе). Если меньше чем нужно, выкидываем ошибку, если больше или ровно то задание выполнено
  

Влияет. Каждый файл это дополнительный запрос.
Но раскидывая стили по файлам удобнее за ними следить и править.
Что же делать? Правильно. Раскидывать по файлам, и работать с ними. А при загрузке на сервер пропускать через сборщик проектов (к примеру gulp), который объединит все css файлы в один, а так же сожмет их

Немного грубый вариант, думаю уж наведение допилите ссылка

Дополнил ваш код ссылка
Чтобы понять, что да как, просто сравните.
p.s. Рекомендую описывать элементы сверху вниз. К примеру, в вашем случае сначала родитель: "card", ниже дочерние: заголовок, цена, список, кнопка
И зачем "item-price" делать списком?

1. Скрыть
   
2. Кинуть списком в footer
   
3. Сделать одно меню выпадающим, другое выдвигающимся. p.s. глупо, но вариант
   

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

Не обижайте codepen)
Ссылка

PerfectPixel by WellDoneCode
Сам пользуюсь

В алфавитном порядке не нужно.
Сначала "reset" свойства
Ниже основные правила (такие как работа со шрифтами и прочее)
Ниже правила для основных компонентов (заголовки, параграфы, формы и прочее, что не меняется из страницы к странице)
А дальше предпочитаю делить на блоки, к примеру:

/*-- TOPBAR --*/
.topbar {
    /* правила */
}
/*-- TOPBAR --*/

/*-- SIDEBAR--*/
.sidebar {
    /* правила */
}
.sidebar-box {
    /* дочерний элемент прописывается ниже родительского */
}
/*-- SIDEBAR--*/