diff --git a/.eslintrc b/.eslintrc
index ae31524..501d38d 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -1,3 +1,3 @@
-{
- "extends": "hrundel/browser"
-}
+{
+ "extends": "hrundel/browser"
+}
diff --git a/.gitignore b/.gitignore
index 552f221..64abc4e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,2 @@
-node_modules/
-*.log
+node_modules/
+*.log
diff --git a/.htmllintrc b/.htmllintrc
index fbd6d94..fb99f0d 100644
--- a/.htmllintrc
+++ b/.htmllintrc
@@ -1,45 +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
-}
+{
+ "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
+}
diff --git a/.npmrc b/.npmrc
index 32ef673..f10cac4 100644
--- a/.npmrc
+++ b/.npmrc
@@ -1,2 +1,2 @@
-registry=https://registry.npmjs.org/
-save-exact=true
+registry=https://registry.npmjs.org/
+save-exact=true
diff --git a/.stylelintrc b/.stylelintrc
index 083c9a0..b5b512b 100644
--- a/.stylelintrc
+++ b/.stylelintrc
@@ -1,3 +1,3 @@
-{
- "extends": "stylelint-config-hrundel"
-}
+{
+ "extends": "stylelint-config-hrundel"
+}
diff --git a/.travis.yml b/.travis.yml
index efb0983..3cba083 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,3 +1,3 @@
-language: node_js
-node_js:
- - "8"
+language: node_js
+node_js:
+ - "8"
diff --git a/README.md b/README.md
index c906bea..5bbfe37 100644
--- a/README.md
+++ b/README.md
@@ -1,72 +1,72 @@
-# Задача «Тим слишком занят»
-
-Перед выполнением задания внимательно прочитайте:
-
-- [О всех этапах проверки задания](https://github.com/urfu-2017/guides/blob/master/workflow/overall.md)
-- [Как отправить пулл](https://github.com/urfu-2017/guides/blob/master/workflow/pull.md)
-- [Как пройти тесты](https://github.com/urfu-2017/guides/blob/master/workflow/test.md)
-- Правила оформления [javascript](https://github.com/urfu-2017/guides/blob/master/codestyle/js.md), [HTML](https://github.com/urfu-2017/guides/blob/master/codestyle/html.md) и [CSS](https://github.com/urfu-2017/guides/blob/master/codestyle/css.md) кода
-
-## Основное задание
-
-:warning: Задание необходимо решить __без использования внешних библиотек__
-
-Билли вернулся из путешествия и привез с собой сувениры. Слишком много сувениров...
-Поэтому он решил продать все это добро, а чтобы ускорить процесс ему пришла в голову идея создать интернет магазин "Билли.Маркет".
-
-В своих путешествиях Билли заметил, что окружающие его люди не выпускают из рук свои телефоны.
-Поэтому он решил, что его магазин будет удобен для использования на всевозможных устройствах.
-Билли подумал: "Кто разбирается в мобилках лучше, чем Тим, мой старый друг!"
-Билли решил обратиться за помощью к нему.
-Но Тим слишком занят своим проектом "XI" и поэтому Билли просит вас помочь.
-
-### Требования
-
-На странице присутствует пять основных блоков: шапка, навигация, список популярных сувениров, блок с карточками предлагаемых сувениров и форма заказа сувенира.
-В шапке расположены логотип Билли.Маркета и поле для ввода поискового запроса.
-На макетах представлено расположение этих блоков на десктопах, планшетах и мобильных устройствах.
-
-
-##### На десктопах (большой экран):
-
-
-
-* Содержимое сервиса разбито на три колонки
-* Блок предлагаемых сувениров и форма заказа расположены в центральной колонке, меню - в левой, а список популярных сувениров - в правой
-
-
-##### На планшетах (средний экран):
-
-
-
-* Поле для ввода поискового запроса появляется при нажатии на иконку "Поиск", а при потере фокуса пропадает
-* Меню сервиса расположено над блоком с предлагаемыми сувенирами
-* Список популярных сувениров смещен под блок с сувенирами
-* Форма заказа сувенира находится внизу страницы
-* Меню, список предлагаемых сувениров и список популярных сувениров растянуты на ширину экрана
-* Допускается наличие отступов от края экрана
-
-
-##### На мобильных устройствах (маленький экран):
-
-
-
-
-
-* В шапке находится логотип сервиса и "бутерброд"
-* Список популярных сувениров находится над блоком с предлагаемыми сувенирами
-* Карточки предлагаемых сувениров расположены в одну колонку
-* После карточек предлагаемых сувениров нужно разместить форму заказа сувенира
-* Меню появляется в двух случаях:
- * при нажатии на "бутерброд"
- * при свайпе справа налево
-* Меню имеет фиксированное расположение
-* При открытом меню содержимое страницы не скроллится
-* Список популярных сувениров и блок с предлагаемыми сувенирами растянуты на ширину экрана (Отступы с краев допускаются)
-* Поиск должен находиться в шапке, под логотипом магазина
-
-
+# Задача «Тим слишком занят»
+
+Перед выполнением задания внимательно прочитайте:
+
+- [О всех этапах проверки задания](https://github.com/urfu-2017/guides/blob/master/workflow/overall.md)
+- [Как отправить пулл](https://github.com/urfu-2017/guides/blob/master/workflow/pull.md)
+- [Как пройти тесты](https://github.com/urfu-2017/guides/blob/master/workflow/test.md)
+- Правила оформления [javascript](https://github.com/urfu-2017/guides/blob/master/codestyle/js.md), [HTML](https://github.com/urfu-2017/guides/blob/master/codestyle/html.md) и [CSS](https://github.com/urfu-2017/guides/blob/master/codestyle/css.md) кода
+
+## Основное задание
+
+:warning: Задание необходимо решить __без использования внешних библиотек__
+
+Билли вернулся из путешествия и привез с собой сувениры. Слишком много сувениров...
+Поэтому он решил продать все это добро, а чтобы ускорить процесс ему пришла в голову идея создать интернет магазин "Билли.Маркет".
+
+В своих путешествиях Билли заметил, что окружающие его люди не выпускают из рук свои телефоны.
+Поэтому он решил, что его магазин будет удобен для использования на всевозможных устройствах.
+Билли подумал: "Кто разбирается в мобилках лучше, чем Тим, мой старый друг!"
+Билли решил обратиться за помощью к нему.
+Но Тим слишком занят своим проектом "XI" и поэтому Билли просит вас помочь.
+
+### Требования
+
+На странице присутствует пять основных блоков: шапка, навигация, список популярных сувениров, блок с карточками предлагаемых сувениров и форма заказа сувенира.
+В шапке расположены логотип Билли.Маркета и поле для ввода поискового запроса.
+На макетах представлено расположение этих блоков на десктопах, планшетах и мобильных устройствах.
+
+
+##### На десктопах (большой экран):
+
+
+
+* Содержимое сервиса разбито на три колонки
+* Блок предлагаемых сувениров и форма заказа расположены в центральной колонке, меню - в левой, а список популярных сувениров - в правой
+
+
+##### На планшетах (средний экран):
+
+
+
+* Поле для ввода поискового запроса появляется при нажатии на иконку "Поиск", а при потере фокуса пропадает
+* Меню сервиса расположено над блоком с предлагаемыми сувенирами
+* Список популярных сувениров смещен под блок с сувенирами
+* Форма заказа сувенира находится внизу страницы
+* Меню, список предлагаемых сувениров и список популярных сувениров растянуты на ширину экрана
+* Допускается наличие отступов от края экрана
+
+
+##### На мобильных устройствах (маленький экран):
+
+
+
+
+
+* В шапке находится логотип сервиса и "бутерброд"
+* Список популярных сувениров находится над блоком с предлагаемыми сувенирами
+* Карточки предлагаемых сувениров расположены в одну колонку
+* После карточек предлагаемых сувениров нужно разместить форму заказа сувенира
+* Меню появляется в двух случаях:
+ * при нажатии на "бутерброд"
+ * при свайпе справа налево
+* Меню имеет фиксированное расположение
+* При открытом меню содержимое страницы не скроллится
+* Список популярных сувениров и блок с предлагаемыми сувенирами растянуты на ширину экрана (Отступы с краев допускаются)
+* Поиск должен находиться в шапке, под логотипом магазина
+
+
diff --git a/i.png b/i.png
new file mode 100644
index 0000000..12f458f
Binary files /dev/null and b/i.png differ
diff --git a/index.css b/index.css
index e69de29..47ec23c 100644
--- a/index.css
+++ b/index.css
@@ -0,0 +1,172 @@
+body
+{
+ background: #ddd;
+ margin: 0;
+}
+
+.header
+{
+ height: 60px;
+ background: #fff;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.sandwich
+{
+ cursor: pointer;
+ display: none;
+}
+
+.logo
+{
+ margin-left: 10px;
+ text-decoration: none;
+ font-size: 1.5em;
+ font-weight: 700;
+ color: #000;
+}
+
+.search
+{
+ margin-right: 100px;
+}
+
+.search__input
+{
+ width: 200px;
+}
+
+.search__reveal
+{
+ display: none;
+}
+
+.logo__image
+{
+ height: 60px;
+}
+
+.content
+{
+ display: flex;
+ justify-content: space-between;
+ margin-top: 50px;
+}
+
+.menu
+{
+ padding: 10px;
+ height: 100px;
+ width: 280px;
+ margin-left: 50px;
+ background: #fff;
+ position: relative;
+}
+
+.menu__close
+{
+ color: #000;
+ text-decoration: none;
+ display: none;
+ position: absolute;
+ top: 10px;
+ right: 10px;
+}
+
+.menu-list
+{
+ list-style: none;
+}
+
+.menu-list__link
+{
+ text-decoration: none;
+ color: blue;
+}
+
+.suggestions
+{
+ height: 100px;
+ padding: 10px;
+ background: #fff;
+ width: 280px;
+ margin-right: 50px;
+ margin-left: 50px;
+}
+
+.main
+{
+ min-width: 500px;
+ margin-left: 50px;
+}
+
+.items
+{
+ display: flex;
+ flex-wrap: wrap;
+}
+
+.item
+{
+ width: 228px;
+ background: #fff;
+ border: 1px solid #bbb;
+ padding: 20px;
+}
+
+.item__image
+{
+ width: 90%;
+}
+
+.item__title
+{
+ padding: 5px 0;
+ text-decoration: none;
+ color: blue;
+ font-size: 1.3em;
+}
+
+.item__price
+{
+ padding: 5px 0;
+ font-weight: bold;
+}
+
+.rating
+{
+ padding: 5px 0;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.item__rate
+{
+ display: inline-block;
+ background: #359c00;
+ padding: 6px;
+}
+
+.order-form
+{
+ background: #fff;
+ width: 500px;
+ margin: 20px auto;
+ padding: 10px 100px;
+}
+
+.form-input-line
+{
+ padding: 5px 0;
+ display: flex;
+ justify-content: space-between;
+}
+
+.form-buttons-line
+{
+ display: flex;
+ justify-content: space-between;
+}
diff --git a/index.html b/index.html
index 97f19ec..f239359 100644
--- a/index.html
+++ b/index.html
@@ -2,9 +2,116 @@
Задача «Тим слишком занят»
+
+
+
+
+
+
Title
+
100$
+
+ 4
+ 111 reviews
+
+
+
+
+
+
Title
+
100$
+
+ 4
+ 111 reviews
+
+
+
+
+
+
Title
+
100$
+
+ 4
+ 111 reviews
+
+
+
+
+
+
+
+ 
-
-
-
-* Поле для ввода поискового запроса появляется при нажатии на иконку "Поиск", а при потере фокуса пропадает
-* Меню сервиса расположено над блоком с предлагаемыми сувенирами
-* Список популярных сувениров смещен под блок с сувенирами
-* Форма заказа сувенира находится внизу страницы
-* Меню, список предлагаемых сувениров и список популярных сувениров растянуты на ширину экрана
-* Допускается наличие отступов от края экрана
-
-
-##### На мобильных устройствах (маленький экран):
-
- 
-
-
- 
-
-
-* В шапке находится логотип сервиса и "бутерброд"
-* Список популярных сувениров находится над блоком с предлагаемыми сувенирами
-* Карточки предлагаемых сувениров расположены в одну колонку
-* После карточек предлагаемых сувениров нужно разместить форму заказа сувенира
-* Меню появляется в двух случаях:
- * при нажатии на "бутерброд"
- * при свайпе справа налево
-* Меню имеет фиксированное расположение
-* При открытом меню содержимое страницы не скроллится
-* Список популярных сувениров и блок с предлагаемыми сувенирами растянуты на ширину экрана (Отступы с краев допускаются)
-* Поиск должен находиться в шапке, под логотипом магазина
-
-
+# Задача «Тим слишком занят»
+
+Перед выполнением задания внимательно прочитайте:
+
+- [О всех этапах проверки задания](https://github.com/urfu-2017/guides/blob/master/workflow/overall.md)
+- [Как отправить пулл](https://github.com/urfu-2017/guides/blob/master/workflow/pull.md)
+- [Как пройти тесты](https://github.com/urfu-2017/guides/blob/master/workflow/test.md)
+- Правила оформления [javascript](https://github.com/urfu-2017/guides/blob/master/codestyle/js.md), [HTML](https://github.com/urfu-2017/guides/blob/master/codestyle/html.md) и [CSS](https://github.com/urfu-2017/guides/blob/master/codestyle/css.md) кода
+
+## Основное задание
+
+:warning: Задание необходимо решить __без использования внешних библиотек__
+
+Билли вернулся из путешествия и привез с собой сувениры. Слишком много сувениров...
+Поэтому он решил продать все это добро, а чтобы ускорить процесс ему пришла в голову идея создать интернет магазин "Билли.Маркет".
+
+В своих путешествиях Билли заметил, что окружающие его люди не выпускают из рук свои телефоны.
+Поэтому он решил, что его магазин будет удобен для использования на всевозможных устройствах.
+Билли подумал: "Кто разбирается в мобилках лучше, чем Тим, мой старый друг!"
+Билли решил обратиться за помощью к нему.
+Но Тим слишком занят своим проектом "XI" и поэтому Билли просит вас помочь.
+
+### Требования
+
+На странице присутствует пять основных блоков: шапка, навигация, список популярных сувениров, блок с карточками предлагаемых сувениров и форма заказа сувенира.
+В шапке расположены логотип Билли.Маркета и поле для ввода поискового запроса.
+На макетах представлено расположение этих блоков на десктопах, планшетах и мобильных устройствах.
+
+
+##### На десктопах (большой экран):
+
+