noname12

Сразу начинай изучать scss, забей на css. Вот маленький пример с твоего кода, как можно написать на scss.

$green: #1abc9c; // можешь потом везде его использовать, и в других файлах scsc.
$green2: #18a68a;
$blue: #3498db;
$blue2: #2e85bf;
.button { // дай общий класс для двух div-ок
	padding: 15px 0px;
	border-radius: 4px;
	border: none;
	color:#fff;
	cursor: pointer;
	font: 14pt SlimSansSerif;
	width: 166px;
}
.btn1{
	background-color: &green;
        &:hover{
	      background-color: &green2;
        }
}
.btn2{
	background-color: $blue;
        &:hover{
          	background-color: &blue2;
        }
}

И еще, пиши в отдельном файле все media стили.

По внешнему виду:
Адаптивность есть, это хорошо. Есть мелкие проблемы, которые портят впечатление (где-то что-то обломалось, где-то что-то не влезло):

и.т.д. Также стрелка снизу кажется не по центру, отступы какие-то странные местами (макет не смотрел, это чисто личное впечатление). Фокус на элементах практически не заметен. Стоит поработать над этим. Обводка синим - бяка.

По коду:
- Отсутствует система в именовании классов. Почитайне про БЭМ или RSCSS.
- Использовать #id в CSS не стоит. Это дурной тон и источник проблем.
- Из-за вышеупомянутого отсутствия системы классов CSS читать невозможно + потенциальные проблемы с перебиванием стилей в неожиданных местах.
- Много магических чисел в CSS (321px, 44.148936%, 381px...). Практически всегда можно избежать этого.
- Нет ресета/нормалайза. Тоже потенциальные проблемы.

Поправьте вышеупомянутые проблемы. После этого приходите к использованию препроцессоров (можно начать с LESS - он самый простой, но в 99% случаев его возможностей достаточно). Ну и JS изучайте, без него верстальщику не выжить.