Фильтр фотографий
+ +Фотографии других пользователей
+ + +
+
+ 
+
+Получится вот так:
+
+
+
+#### 3. Клонируйте репозиторий на свой компьютер
+
+Будьте внимательны: нужно клонировать свой репозиторий (форк), а не репозиторий Академии. Также обратите внимание, что клонировать репозиторий нужно через SSH, а не через HTTPS. Нажмите зелёную кнопку в правой части экрана, чтобы скопировать SSH-адрес вашего репозитория:
+
+
+
+Клонировать репозиторий можно так:
+
+```
+git clone SSH-адрес_вашего_форка
+```
+
+Команда клонирует репозиторий на ваш компьютер и подготовит всё необходимое для старта работы.
+
+#### 4. Начинайте обучение!
+
+---
+
+
+
+Репозиторий создан для обучения на интенсивном онлайн‑курсе «[JavaScript. Профессиональная разработка веб-интерфейсов](https://htmlacademy.ru/intensive/javascript)» от [HTML Academy](https://htmlacademy.ru).
diff --git a/Workflow.md b/Workflow.md
new file mode 100644
index 0000000..e15f67c
--- /dev/null
+++ b/Workflow.md
@@ -0,0 +1,51 @@
+# Как работать над проектом
+
+## Окружение
+
+Для удобства работы над проектом используются инструменты из **Node.js** и **npm**. Все необходимые настройки произведены. Всё, что от вас требуется,— это убедиться, что на рабочем компьютере установлена **Node.js**, а после в терминале перейти в директорию с проектом и _единожды_ запустить команду:
+
+```bash
+npm install
+```
+
+Данная команда запустит процесс установки зависимостей проекта из **npm**.
+
+После успешной установки зависимостей вы сможете использовать инструменты для разработки, вроде **ESLint** и **Vite**, которые идут с проектом. Для этого в файле `package.json` предусмотрены следующие сценарии...
+
+### `npm run start`
+
+Запускает локальный сервер с помощью **Vite**. После запуска сайт будет доступен для просмотра в браузере по адресу `http://localhost:3000`.
+
+При сохранении изменений в любом js-файле в директории `/js` страница автоматически перезагрузится в браузере. Таким образом, вы можете следить за разработкой проекта в режиме реального времени.
+
+> Обратите внимание, после запуска **Vite** продолжит работу, пока вы самостоятельно не остановите его, нажав в терминале сочетание клавиш `Ctrl` + `C`.
+
+### `npm run lint`
+
+Запускает **ESLint** для линтинга js-файлов в директории `/js` по правилам и требованиям к JavaScript-коду, принятым в Академии.
+
+## Структура проекта
+
+### `css/`, `fonts/`, `img/`
+
+Директории со статическими файлами проекта: стилями, изображениями, шрифтами и т.д.
+
+### `photos/`
+
+Директория с фотографиями, которые нужно будет отобразить на странице в одном из заданий.
+
+### `js/`
+
+Ваша главная рабочая директория, в которой будут храниться все скрипты проекта.
+
+### `vendor/`
+
+Директория с кодом библиотек.
+
+### `index.html`
+
+Главная страница проекта.
+
+### Остальное
+
+Все остальные файлы в проекте являются служебными. Пожалуйста, не удаляйте и не изменяйте их самовольно. Только если того требует задание или наставник.
diff --git a/css/normalize.css b/css/normalize.css
new file mode 100644
index 0000000..6e49565
--- /dev/null
+++ b/css/normalize.css
@@ -0,0 +1,427 @@
+/*! normalize.scss v0.1.0 | MIT License | based on git.io/normalize */
+
+/**
+ * 1. Set default font family to sans-serif.
+ * 2. Prevent iOS text size adjust after orientation change, without disabling
+ * user zoom.
+ */
+
+html {
+ font-family: sans-serif; /* 1 */
+ -ms-text-size-adjust: 100%; /* 2 */
+ -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/**
+ * Remove default margin.
+ */
+
+body {
+ margin: 0;
+}
+
+/* HTML5 display definitions
+ ========================================================================== */
+
+/**
+ * Correct `block` display not defined for any HTML5 element in IE 8/9.
+ * Correct `block` display not defined for `details` or `summary` in IE 10/11
+ * and Firefox.
+ * Correct `block` display not defined for `main` in IE 11.
+ */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+section,
+summary {
+ display: block;
+}
+
+/**
+ * 1. Correct `inline-block` display not defined in IE 8/9.
+ * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
+ */
+
+audio,
+canvas,
+progress,
+video {
+ display: inline-block; /* 1 */
+ vertical-align: baseline; /* 2 */
+}
+
+/**
+ * Prevent modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+
+audio:not([controls]) {
+ display: none;
+ height: 0;
+}
+
+/**
+ * Address `[hidden]` styling not present in IE 8/9/10.
+ * Hide the `block-borderlate` element in IE 8/9/11, Safari, and Firefox < 22.
+ */
+
+[hidden],
+block-borderlate {
+ display: none;
+}
+
+/* Links
+ ========================================================================== */
+
+/**
+ * Remove the gray background color from active links in IE 10.
+ */
+
+a {
+ background-color: transparent;
+}
+
+/**
+ * Improve readability when focused and also mouse hovered in all browsers.
+ */
+
+a:active,
+a:hover {
+ outline: 0;
+}
+
+/* Text-level semantics
+ ========================================================================== */
+
+/**
+ * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
+ */
+
+abbr[title] {
+ border-bottom: 1px dotted;
+}
+
+/**
+ * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
+ */
+
+b,
+strong {
+ font-weight: bold;
+}
+
+/**
+ * Address styling not present in Safari and Chrome.
+ */
+
+dfn {
+ font-style: italic;
+}
+
+/**
+ * Address variable `h1` font-size and margin within `section` and `article`
+ * contexts in Firefox 4+, Safari, and Chrome.
+ */
+
+h1 {
+ font-size: 2em;
+ margin: 0.67em 0;
+}
+
+/**
+ * Address styling not present in IE 8/9.
+ */
+
+mark {
+ background: #ff0;
+ color: #000;
+}
+
+/**
+ * Address inconsistent and variable font size in all browsers.
+ */
+
+small {
+ font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` affecting `line-height` in all browsers.
+ */
+
+sub,
+sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+}
+
+sup {
+ top: -0.5em;
+}
+
+sub {
+ bottom: -0.25em;
+}
+
+/* Embedded content
+ ========================================================================== */
+
+/**
+ * Remove border when inside `a` element in IE 8/9/10.
+ */
+
+img {
+ border: 0;
+}
+
+/**
+ * Correct overflow not hidden in IE 9/10/11.
+ */
+
+svg:not(:root) {
+ overflow: hidden;
+}
+
+/* Grouping content
+ ========================================================================== */
+
+/**
+ * Address margin not present in IE 8/9 and Safari.
+ */
+
+figure {
+ margin: 1em 40px;
+}
+
+/**
+ * Address differences between Firefox and other browsers.
+ */
+
+hr {
+ -moz-box-sizing: content-box;
+ box-sizing: content-box;
+ height: 0;
+}
+
+/**
+ * Contain overflow in all browsers.
+ */
+
+pre {
+ overflow: auto;
+}
+
+/**
+ * Address odd `em`-unit font size rendering in all browsers.
+ */
+
+code,
+kbd,
+pre,
+samp {
+ font-family: monospace, monospace;
+ font-size: 1em;
+}
+
+/* Forms
+ ========================================================================== */
+
+/**
+ * Known limitation: by default, Chrome and Safari on OS X allow very limited
+ * styling of `select`, unless a `border` property is set.
+ */
+
+/**
+ * 1. Correct color not being inherited.
+ * Known issue: affects color of disabled elements.
+ * 2. Correct font properties not being inherited.
+ * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+ color: inherit; /* 1 */
+ font: inherit; /* 2 */
+ margin: 0; /* 3 */
+}
+
+/**
+ * Address `overflow` set to `hidden` in IE 8/9/10/11.
+ */
+
+button {
+ overflow: visible;
+}
+
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * All other form control elements do not inherit `text-transform` values.
+ * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
+ * Correct `select` style inheritance in Firefox.
+ */
+
+button,
+select {
+ text-transform: none;
+}
+
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ * and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type
+ * `input` and others.
+ */
+
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+ -webkit-appearance: button; /* 2 */
+ cursor: pointer; /* 3 */
+}
+
+/**
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+html input[disabled] {
+ cursor: default;
+}
+
+/**
+ * Remove inner padding and border in Firefox 4+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+ border: 0;
+ padding: 0;
+}
+
+/**
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+input {
+ line-height: normal;
+}
+
+/**
+ * It's recommended that you don't atblock-bordert to style these elements.
+ * Firefox's implementation doesn't respect box-sizing, padding, or width.
+ *
+ * 1. Address box sizing set to `content-box` in IE 8/9/10.
+ * 2. Remove excess padding in IE 8/9/10.
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+ box-sizing: border-box; /* 1 */
+ padding: 0; /* 2 */
+}
+
+/**
+ * Fix the cursor style for Chrome's increment/decrement buttons. For certain
+ * `font-size` values of the `input`, it causes the cursor style of the
+ * decrement button to change from `default` to `text`.
+ */
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+ height: auto;
+}
+
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
+ * (include `-moz` to future-proof).
+ */
+
+input[type="search"] {
+ -webkit-appearance: textfield; /* 1 */
+ -moz-box-sizing: content-box;
+ -webkit-box-sizing: content-box; /* 2 */
+ box-sizing: content-box;
+}
+
+/**
+ * Remove inner padding and search cancel button in Safari and Chrome on OS X.
+ * Safari (but not Chrome) clips the cancel button when the search input has
+ * padding (and `textfield` appearance).
+ */
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+ -webkit-appearance: none;
+}
+
+/**
+ * Define consistent border, margin, and padding.
+ */
+
+fieldset {
+ border: 1px solid #c0c0c0;
+ margin: 0 2px;
+ padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * 1. Correct `color` not being inherited in IE 8/9/10/11.
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ */
+
+legend {
+ border: 0; /* 1 */
+ padding: 0; /* 2 */
+}
+
+/**
+ * Remove default vertical scrollbar in IE 8/9/10/11.
+ */
+
+textarea {
+ overflow: auto;
+}
+
+/**
+ * Don't inherit the `font-weight` (applied by a rule above).
+ * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
+ */
+
+optgroup {
+ font-weight: bold;
+}
+
+/* Tables
+ ========================================================================== */
+
+/**
+ * Remove most spacing between table cells.
+ */
+
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+
+td,
+th {
+ padding: 0;
+}
diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..db02f03
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,1431 @@
+/* Общие стили. Каркас
+ ========================================================================== */
+
+@font-face {
+ font-family: "Open Sans";
+ src: url("../fonts/OpenSansCondensed-Bold.woff2") format("woff2"),
+ url("../fonts/OpenSansCondensed-Bold.woff") format("woff");
+ font-weight: 700;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: "Open Sans";
+ src: url("../fonts/OpenSans-Regular.woff2") format("woff2"),
+ url("../fonts/OpenSans-Regular.woff") format("woff");
+ font-weight: 400;
+ font-style: normal;
+ font-display: swap;
+}
+
+*,
+*::before,
+*::after {
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: "Open Sans", "Arial", sans-serif;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 20px;
+ color: #ffffff;
+ text-transform: uppercase;
+
+ background-color: #232321;
+}
+
+main {
+ position: relative;
+}
+
+.content-box-component {
+ -webkit-box-sizing: content-box;
+ box-sizing: content-box;
+}
+
+.container {
+ width: 1360px;
+ margin: 0 auto;
+}
+
+.modal-open {
+ height: 100vh;
+ overflow: hidden;
+}
+
+
+/**
+ * Кнопка закрытия модального окна
+ */
+
+.cancel {
+ display: block;
+ margin: 0;
+ padding: 0;
+
+ width: 42px;
+ height: 42px;
+
+ font-size: 0;
+
+ background-color: rgba(255, 255, 255, 0.2);
+ background-image: url("../img/icon-cross.svg");
+ background-position: center;
+ background-repeat: no-repeat;
+
+ border: 0;
+ border-radius: 2px;
+
+ opacity: 0.6;
+}
+
+.cancel:hover,
+.cancel:focus {
+ background-color: rgba(255, 255, 255, 0.4);
+ opacity: 1;
+}
+
+.cancel:active {
+ -webkit-transform: translateY(1px);
+ -ms-transform: translateY(1px);
+ transform: translateY(1px);
+}
+
+
+/**
+ * Оверлей под экранами
+ */
+
+.overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ z-index: 2;
+
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+
+ width: 100%;
+ height: 100%;
+ padding-top: 60px;
+ overflow: auto;
+
+ background-color: rgba(0, 0, 0, 0.8);
+}
+
+
+/* Блок с фильтрами изображений других пользователей
+ ========================================================================== */
+
+.img-filters {
+ padding: 20px 0;
+
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+}
+
+.img-filters--inactive {
+ opacity: 0;
+}
+
+.img-filters__button {
+ padding: 5px 15px;
+
+ font-family: "Open Sans", "Arial", sans-serif;
+ font-weight: 700;
+ font-size: 18px;
+ line-height: auto;
+ text-transform: uppercase;
+
+ cursor: pointer;
+ background-color: #232321;
+ border: none;
+}
+
+.img-filters__button:active,
+.img-filters__button--active {
+ color: #ff4e4e;
+
+ background-color: #ffffff;
+ border-radius: 2px;
+}
+
+.img-filters__label {
+ padding: 5px 15px;
+
+ font-family: "Open Sans", "Arial", sans-serif;
+ font-weight: 700;
+ font-size: 18px;
+ line-height: auto;
+
+ cursor: pointer;
+}
+
+.img-filters__radio:focus + .img-filters__label {
+ outline: auto 5px highlight;
+}
+
+.img-filters__radio:checked + .img-filters__label {
+ color: #ff4e4e;
+ text-decoration: none;
+
+ background-color: #ffffff;
+ border-radius: 2px;
+}
+
+
+/* Блок, в котором размещаются фотографии других пользователей
+ ========================================================================== */
+
+.pictures {
+ display: -ms-grid;
+ display: grid;
+ grid-gap: 10px;
+
+ -ms-grid-columns: (1fr)[7];
+ grid-template-columns: repeat(7, 1fr);
+}
+
+.picture {
+ position: relative;
+ line-height: 0;
+}
+
+.picture__img {
+ max-width: auto;
+ width: 100%;
+ height: auto;
+}
+
+.picture__info {
+ display: none;
+
+ margin: 0;
+ padding: 15px;
+ position: absolute;
+ bottom: 10px;
+ left: 50%;
+
+ background-color: rgba(0, 0, 0, 0.5);
+ border-radius: 5px;
+
+ -webkit-transform: translateX(-50%);
+ -ms-transform: translateX(-50%);
+ transform: translateX(-50%);
+}
+
+.picture:hover .picture__info,
+.picture:focus .picture__info {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+
+.picture__comments,
+.picture__likes {
+ padding-left: 30px;
+ position: relative;
+
+ font-family: "Open Sans", "Arial", sans-serif;
+ font-weight: 400;
+ color: #ffffff;
+}
+
+.picture__comments {
+ margin-right: 10px;
+}
+
+.picture__comments::before,
+.picture__likes::before {
+ content: "";
+ position: absolute;
+ left: 5px;
+ top: -7px;
+
+ background-image: url("../img/sprite.png");
+ background-repeat: no-repeat;
+}
+
+.picture__comments::before {
+ width: 20px;
+ height: 16px;
+
+ background-position: -5px -5px;
+}
+
+.picture__likes::before {
+ width: 20px;
+ height: 16px;
+
+ background-position: -5px -31px;
+}
+
+
+/* Поле для загрузки нового изображения
+ ========================================================================== */
+
+.img-upload {
+ -ms-grid-column: 3;
+ -ms-grid-column-span: 3;
+ grid-column: 3 / span 3;
+
+ -ms-grid-row: 1;
+ -ms-grid-row-span: 3;
+ grid-row: 1 / span 3;
+}
+
+.img-upload__wrapper {
+ margin: 0 auto;
+ padding-bottom: 60px;
+ width: 582px;
+
+ text-align: center;
+}
+
+.img-upload__form {
+ position: relative;
+ min-height: 569px;
+
+ background-color: #eed21e;
+ background-image: url("../img/logo-background-1.jpg");
+ background-repeat: no-repeat;
+ background-position: center;
+
+ border: none;
+}
+
+.img-upload__start {
+ position: relative;
+
+ margin: 0;
+ padding: 0;
+ min-height: 569px;
+
+ background-image: url("../img/logo-mask.png");
+ background-repeat: no-repeat;
+ background-position: center;
+
+ border: none;
+}
+
+.img-upload__label {
+ position: absolute;
+
+ top: 194px;
+ left: 203px;
+
+ width: 180px;
+ height: 181px;
+
+ font-size: 0;
+
+ background-image: url("../img/upload-button-bg.png");
+ background-repeat: no-repeat;
+ background-position: center;
+
+ cursor: pointer;
+}
+
+.img-upload__label::after {
+ content: "";
+ position: absolute;
+
+ top: 32px;
+ left: 47px;
+
+ width: 86px;
+ height: 114px;
+
+ background-image: url("../img/upload-button.svg");
+ background-repeat: no-repeat;
+ background-position: center;
+
+ -webkit-filter: drop-shadow(0 0 10px #943106);
+ filter: drop-shadow(0 0 10px #943106);
+}
+
+.img-upload__label:hover::after,
+.img-upload__label:active::after {
+ -webkit-filter: drop-shadow(0 0 10px #622104);
+ filter: drop-shadow(0 0 10px #622104);
+
+ -webkit-transform: scale(1.1);
+ -ms-transform: scale(1.1);
+ transform: scale(1.1);
+}
+
+.img-upload__input:focus + .img-upload__label {
+ outline: auto 5px highlight;
+}
+
+
+/* Окно для редактирования изображения
+ ========================================================================== */
+
+.img-upload__overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ z-index: 2;
+
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+
+ width: 100%;
+ height: 100%;
+
+ padding-top: 60px;
+ overflow: auto;
+
+ background-color: rgba(0, 0, 0, 0.8);
+}
+
+.img-upload__preview-container {
+ position: relative;
+ margin-bottom: 30px;
+}
+
+
+/**
+ * Кнопки изменения масштаба изобраения
+ */
+
+.img-upload__scale {
+ position: absolute;
+ top: 0;
+ left: 50%;
+ z-index: 1;
+
+ font-family: "Open Sans", "Arial", sans-serif;
+ font-weight: 400;
+
+ -webkit-transform: translateX(-50%);
+ -ms-transform: translateX(-50%);
+ transform: translateX(-50%);
+}
+
+.scale {
+ margin: 0;
+ padding: 10px;
+
+ font-size: 0;
+ border: 0;
+}
+
+.scale__control {
+ position: relative;
+
+ width: 33px;
+ height: 33px;
+ margin: 0;
+ padding: 0;
+
+ text-align: center;
+ vertical-align: middle;
+
+ background-color: rgba(0, 0, 0, 0.6);
+ border: 0;
+}
+
+.scale__control:hover,
+.scale__control:focus {
+ background-color: rgba(0, 0, 0, 0.3);
+}
+
+.scale__control:active {
+ -webkit-transform: translateY(1px);
+ -ms-transform: translateY(1px);
+ transform: translateY(1px);
+}
+
+.scale__control--smaller {
+ border-radius: 50% 0 0 50%;
+}
+
+.scale__control--smaller::before {
+ content: "–";
+ position: absolute;
+ top: 50%;
+ left: 50%;
+
+ font-size: 20px;
+ line-height: 0;
+ color: #ffffff;
+
+ -webkit-transform: translate(-50%, -50%);
+ -ms-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
+}
+
+.scale__control--value {
+ width: 60px;
+
+ font-size: 16px;
+ color: #ffffff;
+
+ border: solid rgba(255, 255, 255, 0.5);
+ border-width: 0 2px;
+}
+
+.scale__control--bigger {
+ border-radius: 0 50% 50% 0;
+}
+
+.scale__control--bigger::before {
+ content: "+";
+ position: absolute;
+ top: 50%;
+ left: 50%;
+
+ font-size: 20px;
+ line-height: 0;
+ color: #ffffff;
+
+ -webkit-transform: translate(-50%, -50%);
+ -ms-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
+}
+
+
+/**
+ * Превью изображения
+ */
+
+.img-upload__preview {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+
+ width: 600px;
+ height: 600px;
+
+ background-color: #ffffff;
+}
+
+.img-upload__preview img {
+ display: block;
+ max-width: 600px;
+ max-height: 600px;
+}
+
+
+/**
+ * Шкала регулирования глубины фильтра
+ */
+
+.effect-level {
+ position: absolute;
+ bottom: 9px;
+ left: 50%;
+
+ padding: 7px 11px 0;
+
+ width: 495px;
+ height: 34px;
+
+ font-size: 12px;
+ text-align: center;
+ color: #ffffff;
+ white-space: nowrap;
+
+ background-color: rgba(0, 0, 0, 0.6);
+ border-radius: 34px;
+
+ -webkit-transform: translateX(-50%);
+ -ms-transform: translateX(-50%);
+ transform: translateX(-50%);
+}
+
+.effect-level .noUi-target {
+ border-radius: 16px;
+}
+
+.effect-level .noUi-connects {
+ border-radius: 13px;
+}
+
+.effect-level .noUi-connect {
+ background: #ffe753;
+}
+
+.effect-level__value {
+ display: none;
+}
+
+
+/**
+ * Блок с эффектами, которые можно применить к изображению
+ */
+
+.effects {
+ margin: 0;
+ padding: 0;
+ margin-bottom: 30px;
+ border: none;
+}
+
+.effects__list {
+ margin: 0;
+ padding: 0;
+
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+
+ list-style: none;
+ text-align: center;
+}
+
+.effects__item {
+ margin-right: 5px;
+}
+
+.effects__label {
+ font-family: "Open Sans", "Arial", sans-serif;
+ font-weight: 700;
+
+ cursor: pointer;
+}
+
+.effects__label:hover,
+.effects__label:focus,
+.effects__radio:checked + .effects__label {
+ color: #ffe753;
+}
+
+.effects__preview {
+ display: block;
+ width: 70px;
+ height: 70px;
+ margin-bottom: 5px;
+
+ overflow: hidden;
+
+ font-size: 0;
+
+ background-color: #314359;
+ background-image: url("../img/upload-default-image.jpg");
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: 100% auto;
+
+ border: solid 5px transparent;
+ border-radius: 5px;
+}
+
+.effects__preview:last-of-type {
+ margin-right: 0;
+}
+
+.effects__radio:checked + .effects__label .effects__preview {
+ border: 5px solid #ffe753;
+}
+
+.effects__radio:focus + .effects__label .effects__preview {
+ outline: auto 5px highlight;
+}
+
+.effects__preview--chrome {
+ -webkit-filter: grayscale(1);
+ filter: grayscale(1);
+}
+
+.effects__preview--sepia {
+ -webkit-filter: sepia(1);
+ filter: sepia(1);
+}
+
+.effects__preview--marvin {
+ -webkit-filter: invert(100%);
+ filter: invert(100%);
+}
+
+.effects__preview--phobos {
+ -webkit-filter: blur(3px);
+ filter: blur(3px);
+}
+
+.effects__preview--heat {
+ -webkit-filter: brightness(3);
+ filter: brightness(3);
+}
+
+
+/**
+ * Блок добавления хэштегов и комментария к изображению
+ */
+
+.text {
+ margin: 0;
+ padding: 0;
+ margin-bottom: 30px;
+
+ text-align: center;
+ border: none;
+}
+
+.text__hashtags {
+ width: 450px;
+
+ margin: 0 auto;
+ margin-bottom: 20px;
+ padding: 5px 10px;
+
+ font-family: "Open Sans", "Arial", sans-serif;
+ font-weight: 400;
+ color: #000000;
+
+ border-radius: 5px;
+}
+
+.text__description {
+ width: 450px;
+ height: 100px;
+
+ margin: 0 auto;
+ padding: 15px 10px;
+
+ font-family: "Open Sans", "Arial", sans-serif;
+ font-weight: 400;
+ color: #000000;
+
+ border-radius: 5px;
+}
+
+.img-upload__field-wrapper--error {
+ background-color: #fd4d4b;
+ color:#ffffff;
+ font-size: 12px;
+ margin-top: -20px;
+ z-index: 10000;
+ position: relative;
+}
+
+
+/**
+ * Кнопка для отправки изображения
+ */
+
+.img-upload__submit {
+ padding: 10px 20px;
+
+ color: #ffe753;
+ text-align: center;
+ text-transform: uppercase;
+ font-family: "Open Sans", "Arial", sans-serif;
+ font-weight: 700;
+
+ background-color: rgba(255, 231, 82, 0.2);
+
+ border: 0;
+ border-radius: 4px;
+}
+
+.img-upload__submit:hover,
+.img-upload__submit:focus {
+ background-color: rgba(255, 231, 82, 0.4);
+}
+
+.img-upload__submit:active {
+ -webkit-transform: translateY(1px);
+ -ms-transform: translateY(1px);
+ transform: translateY(1px);
+}
+
+.img-upload__submit:disabled,
+.img-upload__submit--disabled {
+ opacity: 0.3;
+}
+
+
+/*
+ * Кнопка для закрытия окна редактирования изображения
+ */
+
+.img-upload__cancel {
+ position: absolute;
+ top: 0;
+ left: 610px;
+}
+
+.img-upload__cancel:active {
+ -webkit-transform: translateY(1px);
+ -ms-transform: translateY(1px);
+ transform: translateY(1px);
+}
+
+
+/* Окно полноэкранного просмотра изображения
+ ========================================================================== */
+
+.big-picture__preview {
+ position: absolute;
+ top: 60px;
+ left: 50%;
+
+ max-width: 600px;
+ min-height: 600px;
+
+ padding-bottom: 60px;
+
+ -webkit-transform: translateX(-50%);
+ -ms-transform: translateX(-50%);
+ transform: translateX(-50%);
+}
+
+.big-picture__img img {
+ display: block;
+}
+
+.social {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+
+ max-width: 600px;
+
+ color: #000000;
+ font-family: "Open Sans", "Arial", sans-serif;
+ font-weight: 400;
+ text-transform: none;
+
+ background-color: #ffffff;
+}
+
+
+/*
+ * Подпись к изображению
+ */
+
+.social__header {
+ padding: 15px 15px;
+
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+
+ -webkit-box-pack: start;
+ -ms-flex-pack: start;
+ justify-content: flex-start;
+
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+
+ border-bottom: 1px solid #cccccc;
+}
+
+.social__picture {
+ display: block;
+ -ms-flex-negative: 0;
+ flex-shrink: 0;
+ margin-right: 15px;
+}
+
+.social__caption {
+ margin: 0;
+ margin-right: 15px;
+}
+
+.social__likes {
+ margin: 0;
+ margin-left: auto;
+ min-width: 125px;
+}
+
+.likes-count {
+ position: relative;
+ padding-left: 30px;
+
+ color: #f48181;
+
+ cursor: pointer;
+}
+
+.likes-count:hover {
+ color: #e90000;
+}
+
+.likes-count::before {
+ content: "";
+ position: absolute;
+
+ top: 3px;
+ left: 5px;
+
+ width: 20px;
+ height: 18px;
+
+ background-image: url("../img/sprite.png");
+ background-repeat: no-repeat;
+
+ background-position: -5px -56px;
+ opacity: 0.5;
+}
+
+.likes-count:hover::before,
+.likes-count:focus::before {
+ opacity: 1;
+}
+
+.likes-count:active::before,
+.likes-count--active::before {
+ opacity: 1;
+ background-position: -5px -81px;
+}
+
+
+/*
+ * Комментарии к изображению
+ */
+
+.social__comments {
+ -ms-flex-preferred-size: 100%;
+ flex-basis: 100%;
+
+ list-style: none;
+
+ margin: 0;
+ padding: 0;
+ padding-top: 20px;
+}
+
+.social__comment {
+ padding-left: 15px;
+ padding-right: 15px;
+ padding-bottom: 20px;
+
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+
+.social__comment-count {
+ padding-top: 20px;
+ padding-left: 65px;
+}
+
+.social__comments-loader {
+ padding: 0;
+ padding-left: 65px;
+ padding-bottom: 20px;
+ position: relative;
+
+ text-align: left;
+ color: #3b77c0;
+
+ background: none;
+ border: none;
+}
+
+.comments-loader {
+ text-align: left;
+ color: #3b77c0;
+
+ background: none;
+ border: none;
+}
+
+.social__text {
+ margin: 0;
+}
+
+
+/**
+ * Спиннер загрузки комментариев и его анимация
+ */
+
+.spinner::after,
+.comments-loader:active::after {
+ content: "";
+ position: absolute;
+ left: 200px;
+ top: 7px;
+
+ color: #3b77c0;
+ font-size: 6px;
+
+ width: 1em;
+ height: 1em;
+ border-radius: 50%;
+
+ animation: spinner 1.3s infinite linear;
+ transform: translateZ(0);
+}
+
+@keyframes spinner {
+ 0%,
+ 100% {
+ box-shadow: 0em -2.6em 0em 0em #3b77c0, 1.8em -1.8em 0 0em rgba(51,102,204, 0.2), 2.5em 0em 0 0em rgba(51,102,204, 0.2), 1.75em 1.75em 0 0em rgba(51,102,204, 0.2), 0em 2.5em 0 0em rgba(51,102,204, 0.2), -1.8em 1.8em 0 0em rgba(51,102,204, 0.2), -2.6em 0em 0 0em rgba(51,102,204, 0.5), -1.8em -1.8em 0 0em rgba(51,102,204, 0.7);
+ }
+ 12.5% {
+ box-shadow: 0em -2.6em 0em 0em rgba(51,102,204, 0.7), 1.8em -1.8em 0 0em #3b77c0, 2.5em 0em 0 0em rgba(51,102,204, 0.2), 1.75em 1.75em 0 0em rgba(51,102,204, 0.2), 0em 2.5em 0 0em rgba(51,102,204, 0.2), -1.8em 1.8em 0 0em rgba(51,102,204, 0.2), -2.6em 0em 0 0em rgba(51,102,204, 0.2), -1.8em -1.8em 0 0em rgba(51,102,204, 0.5);
+ }
+ 25% {
+ box-shadow: 0em -2.6em 0em 0em rgba(51,102,204, 0.5), 1.8em -1.8em 0 0em rgba(51,102,204, 0.7), 2.5em 0em 0 0em #3b77c0, 1.75em 1.75em 0 0em rgba(51,102,204, 0.2), 0em 2.5em 0 0em rgba(51,102,204, 0.2), -1.8em 1.8em 0 0em rgba(51,102,204, 0.2), -2.6em 0em 0 0em rgba(51,102,204, 0.2), -1.8em -1.8em 0 0em rgba(51,102,204, 0.2);
+ }
+ 37.5% {
+ box-shadow: 0em -2.6em 0em 0em rgba(51,102,204, 0.2), 1.8em -1.8em 0 0em rgba(51,102,204, 0.5), 2.5em 0em 0 0em rgba(51,102,204, 0.7), 1.75em 1.75em 0 0em #3b77c0, 0em 2.5em 0 0em rgba(51,102,204, 0.2), -1.8em 1.8em 0 0em rgba(51,102,204, 0.2), -2.6em 0em 0 0em rgba(51,102,204, 0.2), -1.8em -1.8em 0 0em rgba(51,102,204, 0.2);
+ }
+ 50% {
+ box-shadow: 0em -2.6em 0em 0em rgba(51,102,204, 0.2), 1.8em -1.8em 0 0em rgba(51,102,204, 0.2), 2.5em 0em 0 0em rgba(51,102,204, 0.5), 1.75em 1.75em 0 0em rgba(51,102,204, 0.7), 0em 2.5em 0 0em #3b77c0, -1.8em 1.8em 0 0em rgba(51,102,204, 0.2), -2.6em 0em 0 0em rgba(51,102,204, 0.2), -1.8em -1.8em 0 0em rgba(51,102,204, 0.2);
+ }
+ 62.5% {
+ box-shadow: 0em -2.6em 0em 0em rgba(51,102,204, 0.2), 1.8em -1.8em 0 0em rgba(51,102,204, 0.2), 2.5em 0em 0 0em rgba(51,102,204, 0.2), 1.75em 1.75em 0 0em rgba(51,102,204, 0.5), 0em 2.5em 0 0em rgba(51,102,204, 0.7), -1.8em 1.8em 0 0em #3b77c0, -2.6em 0em 0 0em rgba(51,102,204, 0.2), -1.8em -1.8em 0 0em rgba(51,102,204, 0.2);
+ }
+ 75% {
+ box-shadow: 0em -2.6em 0em 0em rgba(51,102,204, 0.2), 1.8em -1.8em 0 0em rgba(51,102,204, 0.2), 2.5em 0em 0 0em rgba(51,102,204, 0.2), 1.75em 1.75em 0 0em rgba(51,102,204, 0.2), 0em 2.5em 0 0em rgba(51,102,204, 0.5), -1.8em 1.8em 0 0em rgba(51,102,204, 0.7), -2.6em 0em 0 0em #3b77c0, -1.8em -1.8em 0 0em rgba(51,102,204, 0.2);
+ }
+ 87.5% {
+ box-shadow: 0em -2.6em 0em 0em rgba(51,102,204, 0.2), 1.8em -1.8em 0 0em rgba(51,102,204, 0.2), 2.5em 0em 0 0em rgba(51,102,204, 0.2), 1.75em 1.75em 0 0em rgba(51,102,204, 0.2), 0em 2.5em 0 0em rgba(51,102,204, 0.2), -1.8em 1.8em 0 0em rgba(51,102,204, 0.5), -2.6em 0em 0 0em rgba(51,102,204, 0.7), -1.8em -1.8em 0 0em #3b77c0;
+ }
+}
+
+
+/*
+ * Форма для отправки комментария
+ */
+
+.social__footer {
+ border-top: 1px solid #cccccc;
+}
+
+.big-picture__cancel {
+ position: absolute;
+ top: 0;
+ left: 100%;
+
+ margin-left: 10px;
+}
+
+.social__footer {
+ position: relative;
+
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+
+ padding: 15px;
+}
+
+.social__footer-commentor {
+ display: block;
+
+ margin-right: 15px;
+}
+
+.social__footer-text {
+ width: 100%;
+
+ border: none;
+}
+
+.social__footer-btn {
+ position: absolute;
+ right: 15px;
+ top: 50%;
+
+ width: 34px;
+ height: 34px;
+
+ font-size: 0;
+
+ background-image: url("../img/sprite.png");
+ background-repeat: no-repeat;
+ background-position: -5px -106px;
+
+ opacity: 0.6;
+
+ -webkit-transform: translateY(-50%);
+ -ms-transform: translateY(-50%);
+ transform: translateY(-50%);
+
+ border: none;
+}
+
+.social__footer-btn:hover,
+.social__footer-btn:focus {
+ opacity: 1;
+}
+
+.social__footer-btn:active,
+.social__footer-btn--active {
+ opacity: 1;
+ background-position: -5px -149px;
+}
+
+
+/* Подвал сайта
+ ========================================================================== */
+
+.page-footer {
+ margin-top: 30px;
+ padding-top: 30px;
+ border-top: solid 1px #cccccc;
+}
+
+.page-footer__wrapper {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+
+ -webkit-box-align: start;
+ -ms-flex-align: start;
+ align-items: flex-start;
+
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+}
+
+
+/*
+ * Копирайт Академии
+ */
+
+.copyright {
+ font-size: 12px;
+}
+
+.copyright__link--image:hover,
+.copyright__link--image:focus {
+ opacity: 0.6;
+}
+
+.copyright__link--text {
+ color: #ffffff;
+}
+
+.copyright__link--text:hover,
+.copyright__link--text:focus {
+ opacity: 0.6;
+}
+
+.page-footer__contacts {
+ background-color: inherit;
+}
+
+
+/*
+ * Ссылки на социальные сети
+ */
+
+.contacts {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+
+.contacts__link {
+ display: block;
+
+ width: 29px;
+ height: 29px;
+ margin-left: 10px;
+
+ font-size: 0;
+
+ background-image: url("../img/sprite.png");
+ background-repeat: no-repeat;
+
+ opacity: 0.6;
+ cursor: pointer;
+}
+
+.contacts__link:hover,
+.contacts__link:focus {
+ opacity: 1;
+}
+
+.contacts__link--twitter {
+ background-position: -5px -270px;
+}
+
+.contacts__link--vk {
+ background-position: -5px -309px;
+}
+
+
+/* Экраны с сообщениями для пользователя
+ ========================================================================== */
+
+.img-upload__message {
+ position: absolute;
+ z-index: 2;
+ left: 50%;
+ top: 0;
+
+ padding-top: 250px;
+
+ width: 600px;
+ height: 100%;
+
+ font-family: "Open Sans", "Arial", sans-serif;
+ text-align: center;
+ font-weight: 700;
+ font-size: 20px;
+ color: #ffe753;
+
+ background-color: #3c3614;
+ transform: translateX(-50%);
+}
+
+
+/**
+ * Экраны ошибки и успеха загрузки изображения
+ */
+
+.error,
+.success {
+ position: fixed;
+ display: flex;
+ justify-content: center;
+ align-items: flex-start;
+
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ z-index: 10;
+
+ background-color: rgba(0, 0, 0, 0.8);
+}
+
+.error__inner,
+.success__inner {
+ position: relative;
+ width: 600px;
+ padding: 50px 20px;
+ padding-top: 150px;
+ margin-top: 200px;
+
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+
+ font-family: "Open Sans", "Arial", sans-serif;
+ text-align: center;
+ font-weight: 700;
+ font-size: 20px;
+ color: #ffe753;
+
+ background-color: #3c3614;
+ border-radius: 10px;
+}
+
+.success__inner {
+ padding: 100px 20px;
+ padding-bottom: 75px;
+}
+
+.error__title {
+ position: relative;
+
+ margin: 0;
+ margin-bottom: 50px;
+
+ font-size: 32px;
+}
+
+.success__title {
+ margin: 0;
+ margin-bottom: 50px;
+
+ font-size: 32px;
+}
+
+.error__title::before {
+ content: "";
+ position: absolute;
+
+ width: 59px;
+ height: 52px;
+
+ top: -100px;
+ left: 50%;
+
+ background-image: url("../img/icon-warning.svg");
+
+ -webkit-transform: translateX(-50%);
+ -ms-transform: translateX(-50%);
+ transform: translateX(-50%);
+}
+
+.error__button,
+.success__button {
+ padding: 5px 10px;
+
+ color: #ffffff;
+ text-transform: uppercase;
+
+ background: transparent;
+ border: 2px solid #ffffff;
+ border-radius: 5px;
+}
+
+.error__button:hover,
+.error__button:focus,
+.success__button:hover,
+.success__button:focus {
+ opacity: 0.8;
+}
+
+.error__button:active,
+.success__button:active {
+ opacity: 0.6;
+}
+
+
+/**
+ * Экран загрузки изображения
+ */
+
+.img-upload__message--loading::before {
+ content: "";
+ position: absolute;
+ bottom: 40%;
+ left: 50%;
+
+ width: 300px;
+ height: 10px;
+
+ background-color: #8a7d2d;
+
+ -webkit-transform: translateX(-50%);
+ -ms-transform: translateX(-50%);
+ transform: translateX(-50%);
+}
+
+.img-upload__message--loading::after {
+ content: "";
+ position: absolute;
+ bottom: 40%;
+ left: 50%;
+
+ width: 200px;
+ height: 10px;
+
+ background-color: #ffe753;
+
+ -webkit-transform: translateX(-50%);
+ -ms-transform: translateX(-50%);
+ transform: translateX(-50%);
+}
+
+.data-error {
+ position: absolute;
+ z-index: 100;
+ left: 0;
+ top: 0;
+ right: 0;
+ padding: 10px 3px;
+ font-size: 20px;
+ text-align: center;
+ background-color: #fd4d4b;
+}
+
+
+/* Адаптивности чуток
+ ========================================================================== */
+
+@media (min-width: 1024px) {
+ .img-upload__wrapper {
+ padding-bottom: 0;
+ }
+}
+
+@media (min-width: 1024px) and (max-width: 1359px) {
+ .container {
+ width: 980px;
+ }
+
+ .pictures {
+ -ms-grid-columns: (1fr)[5];
+ grid-template-columns: repeat(5, 1fr);
+ }
+
+ .img-upload {
+ -ms-grid-column: 2;
+ -ms-grid-column-span: 3;
+ grid-column: 2 / span 3;
+
+ -ms-grid-row: 1;
+ -ms-grid-row-span: 3;
+ grid-row: 1 / span 3;
+ }
+}
+
+@media (min-width: 0) and (max-width: 1023px) {
+ .container {
+ width: 600px;
+ }
+
+ .pictures {
+ -ms-grid-columns: (1fr)[3];
+ grid-template-columns: repeat(3, 1fr);
+ }
+
+ .img-upload {
+ -ms-grid-column: 1;
+ -ms-grid-column-span: 3;
+ grid-column: 1 / span 3;
+
+ -ms-grid-row: 1;
+ -ms-grid-row-span: 3;
+ grid-row: 1 / span 3;
+ }
+}
+
+.visually-hidden {
+ position: absolute;
+
+ width: 1px;
+ height: 1px;
+ margin: -1px;
+ border: 0;
+ padding: 0;
+
+ white-space: nowrap;
+
+ -webkit-clip-path: inset(100%);
+ clip-path: inset(100%);
+
+ clip: rect(0 0 0 0);
+ overflow: hidden;
+}
+
+.hidden {
+ display: none;
+}
diff --git a/favicon.ico b/favicon.ico
new file mode 100644
index 0000000..19b981a
Binary files /dev/null and b/favicon.ico differ
diff --git a/fonts/OpenSans-Regular.woff b/fonts/OpenSans-Regular.woff
new file mode 100644
index 0000000..76ad7ad
Binary files /dev/null and b/fonts/OpenSans-Regular.woff differ
diff --git a/fonts/OpenSans-Regular.woff2 b/fonts/OpenSans-Regular.woff2
new file mode 100644
index 0000000..2a13fed
Binary files /dev/null and b/fonts/OpenSans-Regular.woff2 differ
diff --git a/fonts/OpenSansCondensed-Bold.woff b/fonts/OpenSansCondensed-Bold.woff
new file mode 100644
index 0000000..8f4a086
Binary files /dev/null and b/fonts/OpenSansCondensed-Bold.woff differ
diff --git a/fonts/OpenSansCondensed-Bold.woff2 b/fonts/OpenSansCondensed-Bold.woff2
new file mode 100644
index 0000000..ea4e048
Binary files /dev/null and b/fonts/OpenSansCondensed-Bold.woff2 differ
diff --git a/img/avatar-1.svg b/img/avatar-1.svg
new file mode 100644
index 0000000..766cde7
--- /dev/null
+++ b/img/avatar-1.svg
@@ -0,0 +1,21 @@
+
diff --git a/img/avatar-2.svg b/img/avatar-2.svg
new file mode 100644
index 0000000..bd7193e
--- /dev/null
+++ b/img/avatar-2.svg
@@ -0,0 +1,18 @@
+
diff --git a/img/avatar-3.svg b/img/avatar-3.svg
new file mode 100644
index 0000000..bca9111
--- /dev/null
+++ b/img/avatar-3.svg
@@ -0,0 +1,18 @@
+
diff --git a/img/avatar-4.svg b/img/avatar-4.svg
new file mode 100644
index 0000000..65e32ae
--- /dev/null
+++ b/img/avatar-4.svg
@@ -0,0 +1,21 @@
+
diff --git a/img/avatar-5.svg b/img/avatar-5.svg
new file mode 100644
index 0000000..71f30ee
--- /dev/null
+++ b/img/avatar-5.svg
@@ -0,0 +1,18 @@
+
diff --git a/img/avatar-6.svg b/img/avatar-6.svg
new file mode 100644
index 0000000..77233fd
--- /dev/null
+++ b/img/avatar-6.svg
@@ -0,0 +1,18 @@
+
diff --git a/img/htmla-logo.svg b/img/htmla-logo.svg
new file mode 100644
index 0000000..d16aef1
--- /dev/null
+++ b/img/htmla-logo.svg
@@ -0,0 +1,3 @@
+
diff --git a/img/icon-arrow.png b/img/icon-arrow.png
new file mode 100644
index 0000000..140753c
Binary files /dev/null and b/img/icon-arrow.png differ
diff --git a/img/icon-cross.svg b/img/icon-cross.svg
new file mode 100644
index 0000000..5430645
--- /dev/null
+++ b/img/icon-cross.svg
@@ -0,0 +1,3 @@
+
diff --git a/img/icon-warning.svg b/img/icon-warning.svg
new file mode 100644
index 0000000..cbb0ca5
--- /dev/null
+++ b/img/icon-warning.svg
@@ -0,0 +1,23 @@
+
diff --git a/img/logo-background-1.jpg b/img/logo-background-1.jpg
new file mode 100644
index 0000000..8d46046
Binary files /dev/null and b/img/logo-background-1.jpg differ
diff --git a/img/logo-background-2.jpg b/img/logo-background-2.jpg
new file mode 100644
index 0000000..0da4894
Binary files /dev/null and b/img/logo-background-2.jpg differ
diff --git a/img/logo-background-3.jpg b/img/logo-background-3.jpg
new file mode 100644
index 0000000..339050b
Binary files /dev/null and b/img/logo-background-3.jpg differ
diff --git a/img/logo-mask.png b/img/logo-mask.png
new file mode 100644
index 0000000..706b8bf
Binary files /dev/null and b/img/logo-mask.png differ
diff --git a/img/spinner-blue.svg b/img/spinner-blue.svg
new file mode 100644
index 0000000..f8a3100
--- /dev/null
+++ b/img/spinner-blue.svg
@@ -0,0 +1,72 @@
+
diff --git a/img/spinner.svg b/img/spinner.svg
new file mode 100644
index 0000000..bf250a7
--- /dev/null
+++ b/img/spinner.svg
@@ -0,0 +1,80 @@
+
diff --git a/img/sprite.png b/img/sprite.png
new file mode 100644
index 0000000..3d0e7df
Binary files /dev/null and b/img/sprite.png differ
diff --git a/img/upload-button-bg.png b/img/upload-button-bg.png
new file mode 100644
index 0000000..9b1a852
Binary files /dev/null and b/img/upload-button-bg.png differ
diff --git a/img/upload-button.svg b/img/upload-button.svg
new file mode 100644
index 0000000..b561256
--- /dev/null
+++ b/img/upload-button.svg
@@ -0,0 +1,23 @@
+
diff --git a/img/upload-default-image.jpg b/img/upload-default-image.jpg
new file mode 100644
index 0000000..ba56046
Binary files /dev/null and b/img/upload-default-image.jpg differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..9fb6740
--- /dev/null
+++ b/index.html
@@ -0,0 +1,238 @@
+
+
+
+
+
+
+
+
+ + + +
+ + + + + +
+ 
+ 
+ 
+ 
+
+
+