Кужелев Евгений

index.css

@@ -0,0 +1,139 @@
+html,
+body,
+div,
+img,
+a,
+p
+{
+    margin: 0;
+    padding: 0;
+}
+
+body
+{
+    padding: 20px;
+}
+
+.hidden
+{
+    display: none;
+}
+
+.cat
+{
+    font-size: .85rem;
+    vertical-align: top;
+    margin: 15px;
+    padding: 15px;
+    border: 5px ridge #d3e2ed;
+}
+
+.list-view
+{
+    display: block;
+}
+
+.list-view:not(:checked) ~ .cat
+{
+    width: 250px;
+    display: inline-block;
+}
+
+.cat:hover
+{
+    box-shadow: 0 0 10px
+        #a9a2ed, 0 0 25px #80ed90;
+}
+
+.cat > a,
+.cat > div,
+.cat > p
+{
+    margin: auto;
+    width: 100%;
+    height: auto;
+}
+
+.list-view:checked ~ .cat > a,
+.list-view:checked ~ .cat > div,
+.list-view:checked ~ .cat > p
+{
+    display: inline-block;
+    width: 31%;
+    height: auto;
+    vertical-align: top;
+}
+
+.cat-img img
+{
+    width: 100%;
+    height: auto;
+}
+
+.cat-img:hover
+{
+    box-shadow: 0 0 3px
+        #a9a2ed, 0 0 10px #80ed90;
+}
+
+.cat-img:hover + div .name
+{
+    text-shadow: 0 0 7px #d6dced;
+}
+
+.name:hover
+{
+    text-shadow: 0 0 7px #d6dced;
+}
+
+.breed:hover
+{
+    text-decoration: underline;
+}
+
+.name
+{
+    font-size: 1.1rem;
+    white-space: nowrap;
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.breed
+{
+    font-size: .9rem;
+}
+
+.cat .kindness
+{
+    background: url('kind.png');
+    height: 30px;
+}
+
+.kind-3
+{
+    width: 90px;
+}
+
+.kind-4
+{
+    width: 120px;
+}
+
+.kind-5
+{
+    width: 150px;
+}
+
+.price
+{
+    font-size: 1.2rem;
+    color: red;
+}
+
+.oldprice
+{
+    color: #edcf1d;
+    text-decoration: line-through;
+}