urfu-2016 · artemychernykh · Nov 8, 2016 · Nov 8, 2016 · Nov 8, 2016 · Nov 8, 2016
diff --git a/cats/Thumbs.db b/cats/Thumbs.db
diff --git a/cats/cat1.jpg b/cats/cat1.jpg
diff --git a/cats/cat10.jpg b/cats/cat10.jpg
diff --git a/cats/cat11.jpg b/cats/cat11.jpg
diff --git a/cats/cat12.jpg b/cats/cat12.jpg
diff --git a/cats/cat13.jpg b/cats/cat13.jpg
diff --git a/cats/cat14.jpg b/cats/cat14.jpg
diff --git a/cats/cat2.jpg b/cats/cat2.jpg
diff --git a/cats/cat3.jpg b/cats/cat3.jpg
diff --git a/cats/cat4.jpg b/cats/cat4.jpg
diff --git a/cats/cat5.jpg b/cats/cat5.jpg
diff --git a/cats/cat6.jpg b/cats/cat6.jpg
diff --git a/cats/cat7.jpg b/cats/cat7.jpg
diff --git a/cats/cat8.jpg b/cats/cat8.jpg
diff --git a/cats/cat9.jpg b/cats/cat9.jpg
diff --git a/cats/mini_size/Gav.jpg b/cats/mini_size/Gav.jpg
diff --git a/cats/mini_size/Thumbs.db b/cats/mini_size/Thumbs.db
diff --git a/cats/mini_size/cat1.jpg b/cats/mini_size/cat1.jpg
diff --git a/cats/mini_size/cat10.jpg b/cats/mini_size/cat10.jpg
diff --git a/cats/mini_size/cat11.jpg b/cats/mini_size/cat11.jpg
diff --git a/cats/mini_size/cat12.jpg b/cats/mini_size/cat12.jpg
diff --git a/cats/mini_size/cat13.jpg b/cats/mini_size/cat13.jpg
diff --git a/cats/mini_size/cat14.jpg b/cats/mini_size/cat14.jpg
diff --git a/cats/mini_size/cat2.jpg b/cats/mini_size/cat2.jpg
diff --git a/cats/mini_size/cat3.jpg b/cats/mini_size/cat3.jpg
diff --git a/cats/mini_size/cat4.jpg b/cats/mini_size/cat4.jpg
diff --git a/cats/mini_size/cat5.jpg b/cats/mini_size/cat5.jpg
diff --git a/cats/mini_size/cat6.jpg b/cats/mini_size/cat6.jpg
diff --git a/cats/mini_size/cat7.jpg b/cats/mini_size/cat7.jpg
diff --git a/cats/mini_size/cat8.jpg b/cats/mini_size/cat8.jpg
diff --git a/cats/mini_size/cat9.jpg b/cats/mini_size/cat9.jpg
diff --git a/index.css b/index.css
@@ -0,0 +1,136 @@
+body
+{
+    padding: 0;
+}
+
+.note
+{
+    width: 250px;
+    height: 410px;
+    display: inline-block;
+    vertical-align: top;
+    text-overflow: ellipsis;
+    padding: 5px;
+    margin: 1px;
+    position: relative;
+}
+
+.note:hover
+{
+    background-color: #fa0;
+    transform: scale(1.05);
+    border: 3px black solid;
+}
+
+.cat
+{
+    min-width: 250px;
+    height: 200px;
+    position: relative;
+}
+
+.cat img:hover
+{
+    opacity: 1;
+}
+
+.cat img
+{
+    position: absolute;
+    bottom: 0;
+    opacity: .8;
+}
+
+.note section
+{
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.note a
+{
+    font-size: 2.2em;
+    text-overflow: ellipsis;
+}
+
+.note small span
+{
+    text-decoration: underline;
+    cursor: pointer;
+}
+
+.price
+{
+    color: #b00;
+    font: bold 1.5em sans-serif;
+
+}
+
+.price::after
+{
+    content: attr(dataoldprice);
+    font-size: .75em;
+    color: black;
+    text-decoration: line-through;
+
+}
+
+.price:hover
+{
+    text-shadow: 1px  1px 1px #000;
+    cursor: pointer;
+}
+
+.info,
+.description
+{
+    vertical-align: top;
+}
+
+.description
+{
+    padding: 0;
+    margin: 0;
+}
+
+.description-head
+{
+    display: block;
+    font: bold 1.05em serif;
+}
+
+.list:checked ~ .note
+{
+    display: block;
+    min-width: 100%;
+    height: 100%;
+    vertical-align: top;
+    position: relative;
+}
+
+.list:checked ~ .note:hover
+{
+    transform: scaleX(1);
+}
+
+.list:checked ~ .note .cat
+{
+    display: inline-block;
+}
+
+.list:checked ~ .note .cat img
+{
+    top: 0;
+}
+
+.list:checked ~ .note .info,
+.list:checked ~ .note .description
+{
+    width: 35%;
+}
+
+.list:checked ~ .note section
+{
+    display: inline-block;
+    padding-left: 30px;
+}
diff --git a/index.html b/index.html
@@ -2,7 +2,252 @@
 <html lang="ru">
 <head>
     <meta charset="utf-8">
+    <title>Мяндекс.Муррркет</title>
+    <link rel="stylesheet" type="text/css" href="index.css">
 </head>
 <body>
+    <input type="radio" name="view" value="grid" checked>Плитка
+    <input type="radio" name="view" value="list" class="list">Список
+    <br>
+    <br>
+    <article class="note">
+        <div class="cat">
+            <img src="cats/mini_size/cat1.jpg" alt="Пушок">
+        </div>
+        <section class="info">
+            <a href="cats/cat1.jpg">Пушок</a>
+            <br>
+            <small>
+                <span>пушистый</span> - <span>нехлеб</span>
+            </small>
+            <br>
+            <img src="starfull.png" alt="star full">
+            <img src="starfull.png" alt="star full">
+            <img src="starfull.png" alt="star full">
+            <img src="starfull.png" alt="star full">
+            <img src="starempty.png" alt="star empty">
+            <br>
+            <span class="price">150р</span>
+        </section>
+        <section class="description">
+            Хороший кот, только любит царапать мебель.
+        </section>
+    </article>
+
+    <article class="note">
+        <div class="cat">
+            <img src="cats/mini_size/Gav.jpg" alt="Гав">
+        </div>
+        <section class="info">
+            <a href="https://www.youtube.com/watch?v=HORAvz3e738">Гав</a>
+            <br>
+            <small>
+                <span>сиамский</span> - <span>анимационный</span>
+            </small>
+            <br>
+            <img src="starfull.png" alt="star full">
+            <img src="starfull.png" alt="star full">
+            <img src="starfull.png" alt="star full">
+            <img src="starfull.png" alt="star full">
+            <img src="starfull.png" alt="star full">
+            <br>
+            <span class="price">1 котлета</span>
+        </section>
+        <section class="description">
+            Знает, как правильно делить сосиски, зачем нужен тайный язык и почему бояться
+            грозы нужно вместе с другом на чердаке.
+        </section>
+    </article>
+
+    <article class="note">
+    <div class="cat">
+        <img src="cats/mini_size/cat2.jpg" alt="Котозавр">
+    </div>
+    <section class="info">
+        <a href="cats/cat2.jpg">Котозавр</a>
+        <br>
+        <small>
+            <span>пушистый</span> - <span>грустный</span>
+        </small>
+        <br>
+        <img src="starfull.png" alt="star full">
+        <img src="starfull.png" alt="star full">
+        <img src="starfull.png" alt="star full">
+        <img src="starempty.png" alt="star empty">
+        <img src="starempty.png" alt="star empty">
+        <br>
+        <span class="price">1337р</span>
+    </section>
+    <section class="description">
+        Грустный кот с большими глазами.
+    </section>
+    </article>
+
+    <article class="note">
+        <div class="cat">
+            <img src="cats/mini_size/cat3.jpg" alt="Навукотоносор">
+        </div>
+        <section class="info">
+            <a href="cats/cat3.jpg">Навукотоносор</a>
+            <br>
+            <small>
+                <span>полосатый</span>
+            </small>
+            <br>
+            <img src="starfull.png" alt="star full">
+            <img src="starfull.png" alt="star full">
+            <img src="starfull.png" alt="star full">
+            <img src="starfull.png" alt="star full">
+            <img src="starempty.png" alt="star empty">
+            <br>
+            <span class="price" id="1000&dollar;">322&dollar;</span>
+        </section>
+        <section class="description">
+            Милый котик.
+        </section>
+    </article>
+    <article class="note">
+        <div class="cat">
+            <img src="cats/mini_size/cat5.jpg" alt="Кот с длинным именем">
+        </div>
+        <section class="info">
+            <a href="cats/cat5.jpg">КотСДлиннымИменем</a>
+            <br>
+            <small>
+                <span>рыжий</span>
+            </small>
+            <br>
+            <img src="starfull.png" alt="star full">
+            <img src="starfull.png" alt="star full">
+            <img src="starfull.png" alt="star full">
+            <img src="starempty.png" alt="star empty">
+            <img src="starempty.png" alt="star empty">
+            <br>
+            <span class="price">322&dollar;</span>
+        </section>
+        <section class="description">
+            БЕСПЛАТНАЯ доставка
+            <span class="description-head">Описание товара</span>
+            У этого кота длинное имя.
+        </section>
+    </article>
+    <article class="note">
+        <div class="cat">
+            <img src="cats/mini_size/cat14.jpg" alt="Бутеркот">
+        </div>
+        <section class="info">
+            <a href="cats/cat14.jpg">Бутеркот</a>
+            <br>
+            <small>
+                <span>большой</span> - <span>серый</span>
+            </small>
+            <br>
+            <img src="starfull.png" alt="star full">
+            <img src="starfull.png" alt="star full">
+            <img src="starfull.png" alt="star full">
+            <img src="starfull.png" alt="star full">
+            <img src="starfull.png" alt="star full">
+            <br>
+            <span class="price">Бесплатно</span>
+        </section>
+        <section class="description">
+            Мясистый кот. Вес: 12 кг. У родителей было вкусное мясо. Сам бы съесл, да стал веганом.
+        </section>
+    </article>
+
+    <article class="note">
+        <div class="cat">
+            <img src="cats/mini_size/cat4.jpg" alt="Кiт">
+        </div>
+        <section class="info">
+            <a href="cats/cat4.jpg">Кiт</a>
+            <br>
+            <small>
+                <span>маленький</span> - <span>не серый</span>
+            </small>
+            <br>
+            <img src="starfull.png" alt="star full">
+            <img src="starfull.png" alt="star full">
+            <img src="starfull.png" alt="star full">
+            <img src="starempty.png" alt="star empty">
+            <img src="starempty.png" alt="star empty">
+            <br>
+            <span class="price">20 гривень</span>
+        </section>
+        <section class="description">
+            Надоело быть кiтом. Переименуйте меня пожалуйста!
+        </section>
+    </article>
+
+    <article class="note">
+        <div class="cat">
+            <img src="cats/mini_size/cat7.jpg" alt="Барсик">
+        </div>
+        <section  class="info">
+            <a href="cats/cat7.jpg">Барсик</a>
+            <br>
+            <small>
+                <span>без категории</span>
+            </small>
+            <br>
+            <img src="starfull.png" alt="star full">
+            <img src="starfull.png" alt="star full">
+            <img src="starfull.png" alt="star full">
+            <img src="starfull.png" alt="star full">
+            <img src="starempty.png" alt="star empty">
+            <br>
+            <span class="price" id="3000p">199.99р</span>
+        </section>
+        <section class="description">
+            <span class="description-head">Описание товара</span>
+            У этого кота отсутствует описание.
+        </section>
+    </article>
+    <article class="note">
+        <div class="cat">
+            <img src="cats/mini_size/cat11.jpg" alt="Шавермокот">
+        </div>
+        <section class="info">
+            <a href="cats/cat11.jpg">Шавермокот</a>
+            <br>
+            <small>
+                <span>слоистый</span>
+            </small>
+            <br>
+            <img src="starfull.png" alt="star full">
+            <img src="starfull.png" alt="star full">
+            <img src="starfull.png" alt="star full">
+            <img src="starempty.png" alt="star empty">
+            <img src="starempty.png" alt="star empty">
+            <br>
+            <span class="price">199.99р</span>
+        </section>
+        <section class="description">
+            Эту породу кошек рекомедуют лучшие шаурмье.
+        </section>
+    </article>
+    <article class="note">
+        <div class="cat">
+            <img src="cats/mini_size/cat12.jpg" alt="Серьезный кот">
+        </div>
+        <section class="info">
+            <a href="cats/cat12.jpg">Серьезный кот</a>
+            <br>
+            <small>
+                <span>нешутник</span>
+            </small>
+            <br>
+            <img src="starfull.png" alt="star full">
+            <img src="starfull.png" alt="star full">
+            <img src="starfull.png" alt="star full">
+            <img src="starfull.png" alt="star full">
+            <img src="starfull.png" alt="star full">
+            <br>
+            <span class="price">9999.99р</span>
+        </section>
+        <section class="description">
+            Ты думаешь я с тобой шутки шучу?
+        </section>
+    </article>
 </body>
 </html>
diff --git a/starempty.png b/starempty.png
diff --git a/starfull.png b/starfull.png