Гомзяков Андрей

markup-task-2/README.md

@@ -0,0 +1,28 @@
+# Задача «Ацссорти»
+
+Перед выполнением задания внимательно прочитайте:
+
+- [О всех этапах проверки задания](https://github.com/urfu-2018/guides/blob/master/workflow/overall.md)
+- [Как отправить пулл](https://github.com/urfu-2018/guides/blob/master/workflow/pull.md)
+- [Как пройти тесты](https://github.com/urfu-2018/guides/blob/master/workflow/test.md)
+- Правила оформления [javascript](https://github.com/urfu-2018/guides/blob/master/codestyle/js.md), [HTML](https://github.com/urfu-2018/guides/blob/master/codestyle/html.md) и [CSS](https://github.com/urfu-2018/guides/blob/master/codestyle/css.md) кода
+
+## Основное задание
+
+В папке `tasks` подготовлено 20 заданий на использование различных селекторов.  
+Вы должны поменять только содержимое тега `<style>` так, чтобы левая половина совпала с картинкой справа, либо с условиями, которые там описаны.  
+Каждую задачу можно решить небольшим количеством кода, главное – подобрать правильный селектор.  
+
+## Примечание
+
+Для быстрого перехода между задачами можно пользоваться ссылками либо стрелками на клавиатуре.  
+
+Используемые цвета:
+
+![](https://dummyimage.com/15/ff6698.jpg?text=+)`#ff6698`  
+![](https://dummyimage.com/15/ffb366.jpg?text=+)`#ffb366`  
+![](https://dummyimage.com/15/ffff66.jpg?text=+)`#ffff66`  
+![](https://dummyimage.com/15/98ff66.jpg?text=+)`#98ff66`  
+![](https://dummyimage.com/15/6698ff.jpg?text=+)`#6698ff`
+
+<img src="https://user-images.githubusercontent.com/11533472/46813130-8af30580-cd8f-11e8-82b1-39b7a7def8b5.png">

markup-task-2/global.css

@@ -0,0 +1,180 @@
+body
+{
+    font: 15px Helvetica, Arial;
+    margin: 0;
+    padding: 20px;
+}
+
+code
+{
+    background-color: #eee;
+    border-radius: 2px;
+    padding: 0 4px;
+}
+
+.global-heading
+{
+    margin: 0 0 20px;
+}
+
+.global-results
+{
+    font-size: 0;
+}
+
+.global-result
+{
+    display: inline-block;
+    width: 450px;
+    height: 450px;
+    font-size: 1rem;
+    border-radius: 10px;
+    border: 2px solid #eee;
+    margin: 0 10px 0 0;
+    vertical-align: top;
+    padding: 10px;
+}
+
+.global-nav
+{
+    margin: 40px 0 0;
+}
+
+.global-prev
+{
+    margin: 0 10px 0 0;
+}
+
+.global-prev:before
+{
+    content: '← ';
+}
+
+.global-next:after
+{
+    content: ' →';
+}
+
+.global-scope
+{
+    display: flex;
+    flex-wrap: wrap;
+
+    width: 250px;
+}
+
+.global-scope a
+{
+    text-decoration: none;
+}
+
+.global-scope_4,
+.global-scope_5,
+.global-scope_15
+{
+    display: block;
+}
+
+.global-scope_16 div
+{
+    background-color: #fff;
+}
+
+.global-scope_16 div.c2.c3.c4.c5.c6
+{
+    background-color: #fff;
+}
+
+.global-scope_4 article
+{
+    padding: 10px 0;
+}
+
+.global-scope_4 hr
+{
+    margin: 0;
+}
+
+.global-scope_10
+{
+    width: 100%;
+}
+
+.global-scope_12,
+.global-scope_13,
+.global-scope_18
+{
+    width: 330px;
+}
+
+.global-scope_18 div
+{
+    background-color: #ff6698;
+}
+
+.global-scope_17
+{
+    width: 400px;
+}
+
+.global-scope input
+{
+    outline: none;
+    margin: 10px;
+}
+
+.global-scope a
+{
+    width: 100%;
+    margin: 10px;
+}
+
+.global-scope ul
+{
+    list-style-type: none;
+    padding: 0;
+}
+
+.global-scope button
+{
+    margin: 10px;
+}
+
+.global-scope > div > img
+{
+    width: 100px;
+    height: 100px;
+}
+
+.global-scope > div,
+.global-scope > aside
+{
+    display: inline-flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    align-items: center;
+    width: 100px;
+    height: 100px;
+    margin: 5px;
+    border-radius: 10px;
+    box-shadow: 0 0 0 1px #eee;
+    box-sizing: border-box;
+    overflow: hidden;
+}
+
+.global-scope > div > div,
+.global-scope > aside > div,
+.global-scope > div > aside,
+.global-scope > aside > aside
+{
+    display: inline-block;
+    vertical-align: top;
+    text-align: center;
+    line-height: 30px;
+    width: 30px;
+    height: 30px;
+    margin: 5px;
+    border-radius: 5px;
+    box-shadow: 0 0 0 1px #eee;
+    box-sizing: border-box;
+}

markup-task-2/global.js

@@ -0,0 +1,35 @@
+(function (window, document) {
+    var n = window.location.href.match(/(\d+)\.html/)[1];
+
+    var count = 20;
+    var next = +n + 1;
+    var prev = +n - 1;
+
+    document.querySelector('.global-heading').innerHTML = 'Задача №' + n;
+
+    var prevHref = (next > count ? 1 : next) + '.html';
+    var nextHref = (prev < 1 ? count : prev) + '.html';
+
+    document.querySelector('.global-next').href = prevHref;
+    document.querySelector('.global-prev').href = nextHref;
+
+    document.querySelector('.global-scope').classList.add('global-scope_' + n);
+
+    var goal = document.querySelector('.global-goal');
+
+    goal.src = '../goals/' + n + '.png';
+    goal.alt = 'Цель ' + n;
+
+    window.addEventListener('keydown', function (event) {
+        switch (event.keyCode) {
+            case 37:
+                window.location.href = nextHref;
+
+                break;
+            case 39:
+                window.location.href = prevHref;
+
+                break;
+        }
+    });
+})(window, document);

markup-task-2/index.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8">
+    <title>Задача «Ацссорти»</title>
+</head>
+<body>
+    <h2>Задача «Ацссорти»</h2>
+    <ul>
+        <li><a href="./tasks/1.html">Задание #1</a></li>
+        <li><a href="./tasks/2.html">Задание #2</a></li>
+        <li><a href="./tasks/3.html">Задание #3</a></li>
+        <li><a href="./tasks/4.html">Задание #4</a></li>
+        <li><a href="./tasks/5.html">Задание #5</a></li>
+        <li><a href="./tasks/6.html">Задание #6</a></li>
+        <li><a href="./tasks/7.html">Задание #7</a></li>
+        <li><a href="./tasks/8.html">Задание #8</a></li>
+        <li><a href="./tasks/9.html">Задание #9</a></li>
+        <li><a href="./tasks/10.html">Задание #10</a></li>
+        <li><a href="./tasks/11.html">Задание #11</a></li>
+        <li><a href="./tasks/12.html">Задание #12</a></li>
+        <li><a href="./tasks/13.html">Задание #13</a></li>
+        <li><a href="./tasks/14.html">Задание #14</a></li>
+        <li><a href="./tasks/15.html">Задание #15</a></li>
+        <li><a href="./tasks/16.html">Задание #16</a></li>
+        <li><a href="./tasks/17.html">Задание #17</a></li>
+        <li><a href="./tasks/18.html">Задание #18</a></li>
+        <li><a href="./tasks/19.html">Задание #19</a></li>
+        <li><a href="./tasks/20.html">Задание #20</a></li>
+    </ul>
+</body>
+</html>