urfu-2016 · nest-aka-swan · Nov 7, 2016 · Nov 7, 2016 · Nov 9, 2016 · Nov 9, 2016
diff --git a/images/cat1.jpeg b/images/cat1.jpeg
diff --git a/images/cat10.jpg b/images/cat10.jpg
diff --git a/images/cat2.jpeg b/images/cat2.jpeg
diff --git a/images/cat3.jpeg b/images/cat3.jpeg
diff --git a/images/cat4.jpg b/images/cat4.jpg
diff --git a/images/cat5.jpg b/images/cat5.jpg
diff --git a/images/cat6.jpg b/images/cat6.jpg
diff --git a/images/cat7.jpeg b/images/cat7.jpeg
diff --git a/images/cat8.jpg b/images/cat8.jpg
diff --git a/images/cat9.jpeg b/images/cat9.jpeg
diff --git a/index.css b/index.css
@@ -0,0 +1,150 @@
+.card
+{
+    width: 350px;
+    display: inline-block;
+    vertical-align: top;
+    margin-right: 12px;
+    margin-bottom: 10px;
+
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.card:hover
+{
+    box-shadow: 1px 4px 8px 0 rgba(0,0,0,.3), 0 6px 20px 0 rgba(0,0,0,.29);
+    transition: all 400ms ease-out;
+}
+
+.card-list
+{
+    width: 100%;
+    min-width: 360px;
+    text-align: justify;
+}
+
+.info,
+.description
+{
+    font-size: 16px;
+    text-align: left;
+    padding: 5px;
+    padding-top: 0;
+}
+
+.link
+{
+    font-size: 1.5em;
+    display: block;
+
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.link:hover
+{
+    text-shadow: 1px 1px 5px rgba(0, 0, 238, .5);
+}
+
+.category
+{
+    font-size: .8em;
+    color: #000;
+}
+
+.category a
+{
+    color: inherit;
+    opacity: .7;
+}
+
+.category a:hover
+{
+    opacity: 1;
+}
+
+.goodness
+{
+    font-size: 1.5em;
+}
+
+.current-price
+{
+    color: #a52a2a;
+    font-size: 1.5em;
+    margin-right: 4px;
+}
+
+.previous-price
+{
+    color: #919192;
+    font-size: 1.1em;
+    text-decoration: line-through;
+}
+
+.photo
+{
+    display: block;
+    filter: grayscale(.4) brightness(.8);
+}
+
+.photo:hover
+{
+    filter: grayscale(0) brightness(1);
+    transition: all 400ms ease-out;
+}
+
+.fake-checkbox
+{
+    display: none;
+}
+
+.fake-checkbox:checked ~ .card
+{
+    display: block;
+    width: 100%;
+
+    text-align: left;
+}
+
+.fake-checkbox:checked ~ .card > .photo,
+.fake-checkbox:checked ~ .card > .info,
+.fake-checkbox:checked ~ .card > .description
+{
+    display: inline-block;
+    vertical-align: top;
+}
+
+.fake-checkbox:checked ~ .card > .photo
+{
+    width: 19%;
+}
+
+.fake-checkbox:checked ~ .card > .info
+{
+    width: 29%;
+}
+
+.fake-checkbox:checked ~ .card > .description
+{
+    width: 49%;
+}
+
+.fake-button
+{
+    display: block;
+    padding: 2px 6px;
+    margin: 10px 0;
+    width: 250px;
+    text-align: center;
+
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+
+    -webkit-appearance: button;
+    -moz-appearance: button;
+    /* edge fallback */
+    background: #ddd;
+}
diff --git a/index.html b/index.html
@@ -1,8 +1,203 @@
 <!DOCTYPE html>
 <html lang="ru">
+
 <head>
+    <title>Мяндекс.Муррркет</title>
     <meta charset="utf-8">
+    <link rel="stylesheet" href="index.css">
 </head>
+
 <body>
+    <label class="fake-button" for="view-switcher">Переключить режим отображения</label>
+    <main class="card-list">
+        <input class="fake-checkbox" type="checkbox" name="view-switcher" id="view-switcher">
+        <div class="card">
+            <img class="photo" src="images/cat1.jpeg" alt="Мурзик">
+            <div class="info">
+                <a class="link" href="cat-1">Мурзик</a>
+                <div class="category">
+                    <a href="category-1">Мальчики</a> - <a href="category-2">Короткошерстные</a>
+                </div>
+                <div class="goodness">
+                    <span>★</span><span>★</span><span>★</span><span>★</span><span>☆</span>
+                </div>
+                <div class="price">
+                    <span class="current-price">1000₽</span>
+                </div>
+            </div>
+            <div class="description">Ленивый домашний кот, 4 месяца, приучен к лотку.
+                Питается сухим кормом.</div>
+        </div>
+        <!--
+        -->
+        <div class="card">
+            <img class="photo" src="images/cat2.jpeg" alt="Дуся">
+            <div class="info">
+                <a class="link" href="cat-2">Дуся</a>
+                <div class="category">
+                    <a href="category-1">Девочки</a> - <a href="category-2">Короткошерстные</a>
+                </div>
+                <div class="goodness">
+                    <span>★</span><span>★</span><span>★</span><span>☆</span><span>☆</span>
+                </div>
+                <div class="price">
+                    <span class="current-price">1200₽</span><span class="previous-price">1400₽</span>
+                </div>
+            </div>
+            <div class="description">Привередливая кошечка, 6 месяцев, приучена к лотку и когтеточке.</div>
+        </div>
+        <!--
+        -->
+        <div class="card">
+            <img class="photo" src="images/cat3.jpeg" alt="Китти">
+            <div class="info">
+                <a class="link" href="cat-3">Китти</a>
+                <div class="category">
+                    <a href="category-1">Девочки</a> - <a href="category-2">Короткошерстные</a>
+                </div>
+                <div class="goodness">
+                    <span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
+                </div>
+                <div class="price">
+                    <span class="current-price">1300₽</span><span class="previous-price">1800₽</span>
+                </div>
+            </div>
+            <div class="description">Веселая киса, очень жизнерадостная, 5 месяцев.
+                Подойдет для ловли мышей.</div>
+        </div>
+        <!--
+        -->
+        <div class="card">
+            <img class="photo" src="images/cat4.jpg" alt="Масяня">
+            <div class="info">
+                <a class="link" href="cat-4">Масяня</a>
+                <div class="category">
+                    <a href="category-1">Девочки</a> - <a href="category-2">Длинношерстные</a>
+                </div>
+                <div class="goodness">
+                    <span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
+                </div>
+                <div class="price">
+                    <span class="current-price">2100₽</span>
+                </div>
+            </div>
+            <div class="description">Молодая кошечка, привита, 2 месяца. От титулованных родителей.</div>
+        </div>
+        <!--
+        -->
+        <div class="card">
+            <img class="photo" src="images/cat5.jpg" alt="Барон">
+            <div class="info">
+                <a class="link" href="cat-5">Барон</a>
+                <div class="category">
+                    <a href="category-1">Мальчики</a> - <a href="category-2">Короткошерстные</a>
+                </div>
+                <div class="goodness">
+                    <span>★</span><span>★</span><span>★</span><span>★</span><span>☆</span>
+                </div>
+                <div class="price">
+                    <span class="current-price">2300₽</span>
+                </div>
+            </div>
+            <div class="description">Воспитанный домашний кот, 4 месяца. Дрессированный (знает команды "место"
+                и "лежать").</div>
+        </div>
+        <!--
+        -->
+        <div class="card">
+            <img class="photo" src="images/cat6.jpg" alt="Буся">
+            <div class="info">
+                <a class="link" href="cat-6">Буся</a>
+                <div class="category">
+                    <a href="category-1">Девочки</a> - <a href="category-2">Короткошерстные</a>
+                </div>
+                <div class="goodness">
+                    <span>★</span><span>★</span><span>★</span><span>★</span><span>☆</span>
+                </div>
+                <div class="price">
+                    <span class="current-price">1500₽</span><span class="previous-price">1700₽</span>
+                </div>
+            </div>
+            <div class="description">Привита, приучена к лотку и когтеточке, 2 месяца. Любит полакомиться
+                рыбой и огурцами.</div>
+        </div>
+        <!--
+        -->
+        <div class="card">
+            <img class="photo" src="images/cat7.jpeg" alt="Марсик">
+            <div class="info">
+                <a class="link" href="cat-7">Марсик</a>
+                <div class="category">
+                    <a href="category-1">Мальчики</a> - <a href="category-2">Длинношерстные</a>
+                </div>
+                <div class="goodness">
+                    <span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
+                </div>
+                <div class="price">
+                    <span class="current-price">1800₽</span><span class="previous-price">2000₽</span>
+                </div>
+            </div>
+            <div class="description">Жизнерадостный котенок, 2 месяца. Породистый, от титулованных
+                родителей.</div>
+        </div>
+        <!--
+        -->
+        <div class="card">
+            <img class="photo" src="images/cat8.jpg" alt="Пусик">
+            <div class="info">
+                <a class="link" href="cat-8">Пусик</a>
+                <div class="category">
+                    <a href="category-1">Мальчики</a> - <a href="category-2">Короткошерстные</a>
+                </div>
+                <div class="goodness">
+                    <span>★</span><span>★</span><span>★</span><span>☆</span><span>☆</span>
+                </div>
+                <div class="price">
+                    <span class="current-price">1000₽</span>
+                </div>
+            </div>
+            <div class="description">Своенравный котенок, кушает только вискас, 3 месяца. Приучен к
+                когтеточке.</div>
+        </div>
+        <!--
+        -->
+        <div class="card">
+            <img class="photo" src="images/cat9.jpeg" alt="Лизун">
+            <div class="info">
+                <a class="link" href="cat-9">Лизун</a>
+                <div class="category">
+                    <a href="category-1">Мальчики</a> - <a href="category-2">Короткошерстные</a>
+                </div>
+                <div class="goodness">
+                    <span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
+                </div>
+                <div class="price">
+                    <span class="current-price">1500₽</span>
+                </div>
+            </div>
+            <div class="description">Дружелюбный кот, 4 месяца. Любит общаться с детьми и играть с другими
+                котиками.</div>
+        </div>
+        <!--
+        -->
+        <div class="card">
+            <img class="photo" src="images/cat10.jpg" alt="Малыш">
+            <div class="info">
+                <a class="link" href="cat-10">Малыш</a>
+                <div class="category">
+                    <a href="category-1">Мальчики</a> - <a href="category-2">Короткошерстные</a>
+                </div>
+                <div class="goodness">
+                    <span>★</span><span>★</span><span>★</span><span>☆</span><span>☆</span>
+                </div>
+                <div class="price">
+                    <span class="current-price">800₽</span><span class="previous-price">900₽</span>
+                </div>
+            </div>
+            <div class="description">Дворовый котенок ищет хозяев! Прошел подготовку в приемнике, привит.
+                Аккуратный и чистоплотный, 5 месяцев.</div>
+        </div>
+    </main>
 </body>
+
 </html>