urfu-2018 · agrossers · Nov 1, 2018 · Nov 1, 2018 · Nov 1, 2018 · Nov 1, 2018
diff --git a/01.jpg b/01.jpg
diff --git a/02.jpg b/02.jpg
diff --git a/03.jpg b/03.jpg
diff --git a/04.jpg b/04.jpg
diff --git a/05.jpg b/05.jpg
diff --git a/06.jpg b/06.jpg
diff --git a/07.jpg b/07.jpg
diff --git a/08.jpg b/08.jpg
diff --git a/09.jpg b/09.jpg
diff --git a/10.jpg b/10.jpg
diff --git a/index.css b/index.css
@@ -0,0 +1,102 @@
+p
+{
+    margin: 3px;
+}
+
+h2
+{
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+h2:hover
+{
+    color: red;
+    transform: scale(.98);
+    transition: .5s all;
+}
+
+p:hover
+{
+    color: orange;
+    transform: scale(1.01);
+    transition: .5s all;
+}
+
+.goriz,
+.full
+{
+    display: none;
+}
+
+.vert,
+.goriz
+{
+    font-size: 200%;
+    margin-left: 20px;
+}
+
+input
+{
+    display: none;
+}
+
+input:checked + label > .goriz
+{
+    display: block;
+}
+
+input:checked + label > .vert
+{
+    display: none;
+}
+
+input:checked + label ~ div.card > div.sample
+{
+    display: none;
+}
+
+input:checked + label ~ div.card > div.full
+{
+    display: block;
+}
+
+input:checked + label ~ div.card
+{
+    max-width: 600px;
+}
+
+.card
+{
+    display: inline-block;
+    max-width: 300px;
+    margin: 20px;
+    border: double 3px black;
+    border-radius: 5%;
+}
+
+img
+{
+    -webkit-transition: -webkit-transform .8s ease-in-out;
+    transition: transform .8s ease-in-out;
+    width: 100%;
+    height: 100%;
+    border-radius: 10%;
+    margin-top: 10px;
+}
+
+img:hover
+{
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+}
+
+.card:hover
+{
+    transform: scale(1.05);
+    box-shadow: 0 0 10px rgba(0, 0, 0, .5);
+    transition: .5s all;
+    z-index: 1000;
+    background: #98b6f0;
+}
diff --git a/index.html b/index.html
@@ -2,8 +2,165 @@
 <html lang="ru">
 <head>
     <meta charset="utf-8">
+    <link rel="stylesheet" type="text/css" href="index.css">
     <title>Задача «Про котиков»</title>
 </head>
 <body>
+    <input type="checkbox" id="btnControl">
+    <label class="btn" for="btnControl"><span class="vert">|||</span><span class="goriz">≡</span></label>
+    <div class="card">
+        <img src="01.jpg" alt="cat">
+        <h2>Бенгальский чёрт под кроватью</h2>
+        <div class="sample">
+            <p>Возраст: 2 месяца</p>
+            <p>Болезни: нет</p>
+            <p>Порода: бенгалький котэ</p><br>
+            <p>Статус: ищет хозяина</p>
+        </div>
+        <div class="full">
+            <p>Возраст: 65 дней</p>
+            <p>Игривый</p>
+            <p>Много ест. По ночам орёт на весь дом. В туалет ходит туда, где захочется.</p>
+        </div>
+    </div>
+    <div class="card">
+        <img src="02.jpg" alt="cat">
+        <h2>Фараон</h2>
+        <div class="sample">
+            <p>Возраст: 5 лет</p>
+            <p>Болезни: нет</p>
+            <p>Порода: сфинкс</p><br>
+            <p>Статус: ищет хозяина</p>
+        </div>
+        <div class="full">
+            <p>Возраст: чуть меньше 5ти лет</p>
+            <p>Надёжный, величественный</p>
+            <p>Любит финики. Сидит вегда в подъезде у входа в квартиру. 
+            Никого не пускает внутрь, даже хозяев.</p>
+        </div>
+    </div>
+    <div class="card">
+        <img src="03.jpg" alt="cat">
+        <h2>Чаёвник</h2>
+        <div class="sample">
+            <p>Возраст: 2 года</p>
+            <p>Болезни: нет</p>
+            <p>Порода: британский котэ</p><br>
+            <p>Статус: ищет хозяина</p>
+        </div>
+        <div class="full">
+            <p>Возраст: 660 дней</p>
+            <p>Мстительный</p>
+            <p>В послеобеденной время требует чашечку чая. 
+            Если не дать, то обязательно напрудит в ботинок.</p>
+        </div>
+    </div>
+    <div class="card">
+        <img src="04.jpg" alt="cat">
+        <h2>Персик</h2>
+        <div class="sample">
+            <p>Возраст: 3 месяца</p>
+            <p>Болезни: нет</p>
+            <p>Порода: персидский котэ</p><br>
+            <p>Статус: ищет хозяина</p>
+        </div>
+        <div class="full">
+            <p>Возраст: 140 дней</p>
+            <p>Любвиобильный</p>
+            <p>Весной собирает гарем из кошечек и не только. 
+            До самой осени вам предстоит заботится о 20+ животных.</p>
+        </div>
+    </div>
+    <div class="card">
+        <img src="05.jpg" alt="cat">
+        <h2>Одноглазый Джо</h2>
+        <div class="sample">
+            <p>Возраст: 3 года</p>
+            <p>Болезни: нет</p>
+            <p>Порода: мейн</p><br>
+            <p>Статус: ищет хозяина</p>
+        </div>
+        <div class="full">
+            <p>Возраст: 654 дня</p>
+            <p>Боевой</p>
+            <p>По ночам выходит на охоту. Его присутствие подавляет даже крупных хищников.</p>
+        </div>
+    </div>
+    <div class="card">
+        <img src="06.jpg" alt="cat">
+        <h2>Хот-Дог</h2>
+        <div class="sample">
+            <p>Возраст: 5 месяцев</p>
+            <p>Болезни: нет</p>
+            <p>Порода: манкача</p><br>
+            <p>Статус: ищет хозяина</p>
+        </div>
+        <div class="full">
+            <p>Возраст: почти полгода</p>
+            <p>Ленивый</p>
+            <p>Ничего не делает. Только ест и спит. Спит по 22 часа в день.</p>
+        </div>
+    </div>
+    <div class="card">
+        <img src="07.jpg" alt="cat">
+        <h2>Бора-бора</h2>
+        <div class="sample">
+            <p>Возраст: 2 месяца</p>
+            <p>Болезни: нет</p>
+            <p>Порода: нет</p><br>
+            <p>Статус: ищет хозяина</p>
+        </div>
+        <div class="full">
+            <p>Возраст: 65 дней</p>
+            <p>Ручной, покладистый</p>
+            <p>Требует много внимания. 
+            Играть может с кем угодно: детьми, взрослыми, другой животинкой.</p>
+        </div>
+    </div>
+    <div class="card">
+        <img src="08.jpg" alt="cat">
+        <h2>Мохнатый снежок</h2>
+        <div class="sample">
+            <p>Возраст: 2 месяца</p>
+            <p>Болезни: нет</p>
+            <p>Порода: рэгдолл</p><br>
+            <p>Статус: ищет хозяина</p>
+        </div>
+        <div class="full">
+            <p>Возраст: 65 дней</p>
+            <p>Пушистый, упругий, спокойный</p>
+            <p>Можно использовать в качестве подушки.</p>
+        </div>
+    </div>
+    <div class="card">
+        <img src="09.jpg" alt="cat">
+        <h2>Котэ-несси</h2>
+        <div class="sample">
+            <p>Возраст: 2 месяца</p>
+            <p>Болезни: нет</p>
+            <p>Порода: шотландский котэ</p><br>
+            <p>Статус: ищет хозяина</p>
+        </div>
+        <div class="full">
+            <p>Возраст: 65 дней</p>
+            <p>Скромный</p>
+            <p>Хорошо прячется. Скорее всего вы не заметите его существования.</p>
+        </div>
+    </div>
+    <div class="card">
+        <img src="10.jpg" alt="cat">
+        <h2>Борис</h2>
+        <div class="sample">
+            <p>Возраст: 2 месяца</p>
+            <p>Болезни: нет</p>
+            <p>Порода: сиамский котэ</p><br>
+            <p>Статус: ищет хозяина</p>
+        </div>
+        <div class="full">
+            <p>Возраст: 65 дней</p>
+            <p>Умный</p>
+            <p>Можно использовать в качестве подушки.</p>
+        </div>
+    </div>
 </body>
-</html>
+</html>