Merge pull request #1 from mokhov/master

Выложить задание 5

.editorconfig

@@ -0,0 +1,15 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+indent_size = 4
+indent_style = space
+trim_trailing_whitespace = true
+
+[*.json]
+indent_size = 2
+
+[*.md]
+trim_trailing_whitespace = false

.gitignore

@@ -0,0 +1,8 @@
+.DS_Store
+.git
+.idea
+
+*.log
+*.swp
+
+node_modules

.htmllintrc

@@ -0,0 +1,45 @@
+{
+  "attr-bans": [
+    "align",
+    "background",
+    "bgcolor",
+    "border",
+    "frameborder",
+    "style"
+  ],
+  "attr-name-style": "lowercase",
+  "attr-no-dup": true,
+  "attr-quote-style": "double",
+  "attr-req-value": false,
+  "class-no-dup": true,
+  "class-style": false,
+  "doctype-first": true,
+  "doctype-html5": true,
+  "fig-req-figcaption": true,
+  "focusable-tabindex-style": true,
+  "head-req-title": true,
+  "html-req-lang": true,
+  "id-class-style": false,
+  "id-no-dup": true,
+  "img-req-src": true,
+  "img-req-alt": "allownull",
+  "indent-width": 4,
+  "indent-width-cont": true,
+  "label-req-for": true,
+  "line-max-len": 110,
+  "spec-char-escape": true,
+  "tag-bans": [
+    "b",
+    "i",
+    "u",
+    "center",
+    "style",
+    "marquee",
+    "font",
+    "s"
+  ],
+  "tag-name-lowercase": true,
+  "tag-name-match": true,
+  "tag-self-close": "never",
+  "title-no-dup": true
+}

.npmrc

@@ -0,0 +1,2 @@
+save=true
+save-exact=true

.stylelintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "stylelint-config-hrundel"
+}

.travis.yml

@@ -0,0 +1,3 @@
+language: node_js
+node_js:
+  - "6"

README.md

@@ -1 +1,76 @@
-Задача «Мяндекс.Муррркет»
+
+
+# Задача «Мяндекс.Муррркет»
+
+Перед выполнением задания внимательно прочитайте:
+
+- [О всех этапах проверки задания](https://github.com/urfu-2016/guides/blob/master/workflow/extra.md)
+- [Как отправить пулл](https://github.com/urfu-2016/guides/blob/master/workflow/pull.md)
+- [Как пройти тесты](https://github.com/urfu-2016/guides/blob/master/workflow/test.md)
+- Правила оформления [JavaScript](https://github.com/urfu-2016/guides/blob/master/codestyle/js.md), [HTML](https://github.com/urfu-2016/guides/blob/master/codestyle/html.md) и [CSS](https://github.com/urfu-2016/guides/blob/master/codestyle/css.md) кода
+
+## Основное задание
+
+:warning: Задание необходимо решить __без использования JS и flex/grid__ (если вы знаете, что это)
+
+У моей бабуленьки очень много котиков (=^･ｪ･^=), обычно она как-то «справлялась»
+с этим, но потом доброта взяла верх: она подошла к внучку с просьбой помочь.
+И так как «яжпрограмист», я предложил ей запустить интернет-магазин добрых котиков.
+
+Название-то нашлось сразу – «Мяндекс.Муррркет». А вот с вёрсткой проблемы,
+да и дизайнера нет. Макеты дизайна я решил взять с одного известного магазина
+(картинки кликабельны).
+
+На среднем экране:  
+<a href="https://cloud.githubusercontent.com/assets/357689/10816073/f482985c-7e51-11e5-8dcb-bcc832f80e86.png" target="_blank">
+    <img src="https://cloud.githubusercontent.com/assets/357689/10816073/f482985c-7e51-11e5-8dcb-bcc832f80e86.png" width="300">
+</a>
+
+На большом:  
+<a href="https://cloud.githubusercontent.com/assets/357689/10816080/fefe442a-7e51-11e5-805a-e9f4ba9274e6.png" target="_blank">
+    <img src="https://cloud.githubusercontent.com/assets/357689/10816080/fefe442a-7e51-11e5-805a-e9f4ba9274e6.png" width="300">
+</a>
+
+Эти макеты демонстрируют поведение блоков-карточек котиков.
+При растягивании экрана количество вмещаемых в строку котиков увеличивается,
+при уменьшении, соответственно, уменьшается.
+
+Плюс возможность посмотреть в виде списка:  
+<a href="https://cloud.githubusercontent.com/assets/357689/10817444/9dc17254-7e5b-11e5-93e7-943e04381ef6.png" target="_blank">
+    <img src="https://cloud.githubusercontent.com/assets/357689/10817444/9dc17254-7e5b-11e5-93e7-943e04381ef6.png" width="300">
+</a>
+
+Будет любезно с вашей стороны помочь бабуленьке сверстать магазинчик по этим
+макетам. Только не забывайте, что магазин о котиках (=｀ω´=), а значит нужно
+найти картинки с котиками и информацию о них (не меньше 10 котиков).
+
+Карточка должна содержать фоточку и некоторую информацию о котике:
+
+* Имя котика (ссылка)
+* Категория котика (понятия не имеем что это)
+* Уровень доброты котика по 5-бальной шкале (как звёздочки на макетах)
+* Стоимость котика (и старая стоимость, если она есть)
+* Описание котика
+
+От вас дополнительно требуется:
+
+* Обрезать длинные имена котиков (=^ ◡ ^=)
+* Реализовать переключатель вывода котиков: плитками или списком
+* Реализовать эффекты при наведении на имя котика, фото,
+  категорию, и плитку в целом
+
+### Дополнительное задание (+54 к мурчанию)
+
+:warning: Задание необходимо решить __без использования JS и flex/grid__ (если вы знаете, что это)
+
+Внимательные верстальщики заметили, что в макете используется интересное выравнивание
+по нижней линии фоточки котика <(￣︶￣)>	. То есть все карточки выровнены так, что нижние границы
+их изображений находятся на одной линии друг относительно друга. Будет здорово, если вы
+реализуете и это поведение.
+
+А еще будет ощутимо фантастически, если вы сможете научить шкалу доброты
+работать так: при наведении курсора на шкалу, пользователь
+выбирает количество звезд, которые он хочет поставить (обратите внимание, что есть
+оценка в ползвезды), а по клику шкала запоминает его оценку.
+
+![](https://cloud.githubusercontent.com/assets/357689/19887293/6a45aa1a-a049-11e6-8f02-56d8d5815873.jpg)

index.html

@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="utf-8">
+</head>
+<body>
+</body>
+</html>

package.json

@@ -0,0 +1,16 @@
+{
+  "private": true,
+  "scripts": {
+    "test": "npm run lint && mocha ./node_modules/html-tests/task-stub/test",
+    "lint": "stylelint *.css **/*.css && html-validator --file index.html --verbose && htmllint *.html"
+  },
+  "dependencies": {
+    "html-tests": "latest",
+    "html-validator-cli": "3.0.2",
+    "htmllint-cli-alpha": "0.0.6",
+    "mocha": "3.1.0",
+    "should": "11.1.0",
+    "stylelint": "7.3.1",
+    "stylelint-config-hrundel": "latest"
+  }
+}