urfu-2016 · Uliana1997 · Nov 21, 2016 · Nov 21, 2016 · Nov 21, 2016 · Nov 21, 2016
diff --git a/img/abis.jpg b/img/abis.jpg
diff --git a/img/ashera1.jpg b/img/ashera1.jpg
diff --git a/img/ashera2.jpg b/img/ashera2.jpg
diff --git a/img/ashera3.jpg b/img/ashera3.jpg
diff --git a/img/brit1.jpg b/img/brit1.jpg
diff --git a/img/brit2.jpg b/img/brit2.jpg
diff --git a/img/pers1.jpg b/img/pers1.jpg
diff --git a/img/pers2.jpg b/img/pers2.jpg
diff --git a/index.css b/index.css
@@ -0,0 +1,207 @@
+html
+{
+    background-color: #d3d3d3;
+}
+
+h1
+{
+    text-align: center;
+}
+
+.content
+{
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    justify-content: center;
+}
+
+.name
+{
+    position: relative;
+}
+
+.content .name:hover::after
+{
+    content: attr(title);
+    position: absolute;
+    left: 20px;
+    bottom: 20%;
+    background: #a9a9a9;
+    height: 50px;
+    align-content: center;
+    opacity: .7;
+}
+
+span
+{
+    margin-left: 20px;
+    margin-top: 15px;
+    text-transform: uppercase;
+}
+
+.left
+{
+    display: flex;
+    flex-direction: column;
+    background-color: #dcdcdc;
+}
+
+.footer
+{
+    position: relative;
+    bottom: 0;
+    background-color: rgba(169, 169, 169);
+    width: 100%;
+}
+
+.rating
+{
+    display: flex;
+    flex-direction: column;
+    background-color: #dcdcdc;
+}
+
+.main
+{
+    display: flex;
+    flex-direction: row;
+    align-content: space-around;
+}
+
+.sort-ratings:checked ~ .rating10
+{
+    order: 1;
+}
+
+.sort-ratings:checked ~ .rating9
+{
+    order: 2;
+}
+
+.sort-ratings:checked ~ .rating8
+{
+    order: 3;
+}
+
+.sort-ratings:checked ~ .rating4
+{
+    order: 4;
+}
+
+.rating-9
+{
+    height: 20px;
+    background: linear-gradient(to left, #fefcea, #f1da36);
+    width: 90%;
+}
+
+.rating-10
+{
+    height: 20px;
+    background: linear-gradient(to left, #fefcea, #008000);
+    width: 100%;
+}
+
+.rating-4
+{
+    height: 20px;
+    background: linear-gradient(to left, #fefcea, #f00);
+    width: 40%;
+}
+
+.rating-8
+{
+    height: 20px;
+    background: linear-gradient(to left, #fefcea, #800080);
+    width: 80%;
+}
+
+.ratings
+{
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+    width: 300px;
+}
+
+.label
+{
+    display: flex;
+    width: 300px;
+    height: 50px;
+    position: relative;
+    background: #a9a9a9;
+    box-shadow: inset 0 1px 1px #000, 0 1px 3px rgba(0, 0, 0, .5);
+}
+
+.cat-img:nth-of-type(8n+2),
+.cat-img:nth-of-type(8n+6)
+{
+    flex: 2 0 64%;
+}
+
+.cat-img:nth-of-type(8n)
+{
+    flex: 3 0 98%;
+}
+
+.cat-img
+{
+    padding: 0 1% 1%;
+    flex: 1 0 31%;
+    position: relative;
+}
+
+.cat-img img
+{
+    width: 100%;
+    height: calc(100% - 5px);
+    border: 1px solid #000;
+}
+
+.breed-in:checked ~ .content div
+{
+    opacity: .3;
+}
+
+input[id='pers']:checked ~ .content div:not(.pers):hover::after,
+input[id='ashera']:checked ~ .content div:not(.ashera):hover::after,
+input[id='abis'] ~ .content div:not(.abis):hover::after,
+input[id='brit'] ~ .content div:not(.brit):hover::after
+{
+    content: '';
+}
+
+input[id='pers']:checked ~ .content div:not(.pers),
+input[id='pers']:checked ~ .content div:not(.pers),
+input[id='pers']:checked ~ .content div:not(.pers)
+{
+    opacity: .3;
+}
+
+input[id='ashera']:checked ~ .content div:not(.ashera),
+input[id='ashera']:checked ~ .content div:not(.ashera),
+input[id='ashera']:checked ~ .content div:not(.ashera)
+{
+    opacity: .3;
+}
+
+input[id='abis']:checked ~ .content div:not(.abis),
+input[id='abis']:checked ~ .content div:not(.abis),
+input[id='abis']:checked ~ .content div:not(.abis)
+{
+    opacity: .3;
+}
+
+input[id='brit']:checked ~ .content div:not(.brit),
+input[id='brit']:checked ~ .content div:not(.brit),
+input[id='brit']:checked ~ .content div:not(.brit)
+{
+    opacity: .3;
+}
+
+input[type='radio']
+{
+    display: none;
+}
diff --git a/index.html b/index.html
@@ -2,7 +2,84 @@
 <html lang="ru">
 <head>
     <meta charset="utf-8">
+    <link rel="stylesheet" href="index.css">
+    <title>Бабуленькины котятки^^</title>
 </head>
 <body>
+    <h1>Бабуленькины котятки</h1>
+    <div class="main">
+        <input type="radio" class="breed" name="breed" id="all" checked>
+        <input type="radio" class="breed" name="breed" id="pers">
+        <input type="radio" class="breed" name="breed" id="ashera">
+        <input type="radio" class="breed" name="breed" id="brit">
+        <input type="radio" class="breed" name="breed" id="abis">
+        <div class="type_selectors">
+            <label class="label" for="all">Все типы</label>
+            <label class="label" for="pers">Персидская</label>
+            <label class="label" for="ashera">Ашера</label>
+            <label class="label" for="brit">Британская</label>
+            <label class="label" for="abis">Абиссинская</label>
+        </div>
+        <div class="content">
+            <div class="name ashera cat-img" title="Ксюша, 2 года">
+                <img src="img/ashera1.jpg"
+                alt="Ашера, Ксюша 2 года">
+            </div>
+            <div class="name brit cat-img" title="Кинг, 2 года">
+                <img src="img/brit1.jpg"
+                alt="Британец, Кинг 2 года">
+            </div>
+            <div class="name pers cat-img" title="Дари, 3 года">
+                <img src="img/pers1.jpg"
+                alt="Перс, Дари 3 года">
+            </div>
+            <div class="name ashera cat-img" title="Ник, 0,5 года">
+                <img src="img/ashera2.jpg"
+                alt="Ашера, Ник 0,5 года">
+            </div>
+            <div class="name abis cat-img" title="Лора, 2 года">
+                <img src="img/abis.jpg"
+                alt="Абиссинская, Лора 2 года">
+            </div>
+            <div class="name pers cat-img" title="Даник, 2 года">
+                <img src="img/pers2.jpg"
+                alt="Перс, Даник 2 года">
+            </div>
+            <div class="name ashera cat-img" title="Ми, 2 года">
+                <img src="img/ashera3.jpg"
+                alt="Ашера, Ми 2 года">
+            </div>
+            <div class="name brit cat-img" title="Киндер, 2 года">
+                <img src="img/brit2.jpg"
+                alt="Британец, Киндер 2 года">
+            </div>
+        </div>
+        <div class="ratings">
+            <h2>РЕЙТИНГ</h2>
+            <div class="ratings">
+                <input class="sort-ratings" id="sort-ratings"
+                type="checkbox"><label for="sort-ratings" class="sort">По убыванию</label>
+                <div class="rating4">
+                    Абиссинская
+                    <div class="rating-4">4</div>
+                </div>
+                <div class="rating10">
+                    Персидская
+                    <div class="rating-10">10</div>
+                </div>
+                <div class="rating9">
+                    Ашера
+                    <div class="rating-9">9</div>
+                </div>
+                <div class="rating8">
+                    Британская
+                    <div class="rating-8">8</div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <footer class="footer">
+            <p class="copyright">&copy; Бабуленькины котятки, 2016</p>
+    </footer>
 </body>
 </html>