diff --git a/images/cat1.jpg b/images/cat1.jpg new file mode 100644 index 0000000..764b5df Binary files /dev/null and b/images/cat1.jpg differ diff --git a/images/cat10.jpg b/images/cat10.jpg new file mode 100644 index 0000000..c46baff Binary files /dev/null and b/images/cat10.jpg differ diff --git a/images/cat2.jpg b/images/cat2.jpg new file mode 100644 index 0000000..93588ae Binary files /dev/null and b/images/cat2.jpg differ diff --git a/images/cat3.jpg b/images/cat3.jpg new file mode 100644 index 0000000..bce9644 Binary files /dev/null and b/images/cat3.jpg differ diff --git a/images/cat4.jpg b/images/cat4.jpg new file mode 100644 index 0000000..6a63c1b Binary files /dev/null and b/images/cat4.jpg differ diff --git a/images/cat5.jpg b/images/cat5.jpg new file mode 100644 index 0000000..c64e3ad Binary files /dev/null and b/images/cat5.jpg differ diff --git a/images/cat6.jpg b/images/cat6.jpg new file mode 100644 index 0000000..9bb8d77 Binary files /dev/null and b/images/cat6.jpg differ diff --git a/images/cat7.jpg b/images/cat7.jpg new file mode 100644 index 0000000..5481e6a Binary files /dev/null and b/images/cat7.jpg differ diff --git a/images/cat8.jpg b/images/cat8.jpg new file mode 100644 index 0000000..685e376 Binary files /dev/null and b/images/cat8.jpg differ diff --git a/images/cat9.jpg b/images/cat9.jpg new file mode 100644 index 0000000..a5cf52f Binary files /dev/null and b/images/cat9.jpg differ diff --git a/index.css b/index.css index e69de29..0fcc05b 100644 --- a/index.css +++ b/index.css @@ -0,0 +1,179 @@ +input[name='style-switcher']:checked ~ .products .products-item +{ + display: block; + width: 95%; +} + +input[name='style-switcher']:checked ~ .products .products-item-image, +input[name='style-switcher']:checked ~ .products .products-item-info, +input[name='style-switcher']:checked ~ .products .products-item-description, +.products-item +{ + display: inline-block; +} + +input[name='style-switcher']:checked ~ .products .title, +input[name='style-switcher']:checked ~ .products .products-item-description, +input[name='style-switcher']:checked ~ .products .products-item-info +{ + top: 6%; + position: absolute; + width: 30%; +} + +input[name='style-switcher']:checked ~ .products .products-item-image +{ + width: 20%; +} + +input[name='style-switcher']:checked ~ .products .title +{ + left: 22.5%; +} + +input[name='style-switcher']:checked ~ .products .products-item-info +{ + left: 22.5%; + top: 20%; +} + +input[name='style-switcher']:checked ~ .products .products-item-description +{ + left: 55%; +} + +.m-y-1 +{ + margin-top: 5px; + margin-bottom: 5px; +} + +.products +{ + font-size: 0; +} + +.products-item +{ + font-size: 16px; + margin: 1%; + width: 28.5%; + border: 1px solid transparent; + padding: 1%; + position: relative; +} + +.products-item:hover +{ + border-color: #000; +} + +.products-item-image +{ + width: 100%; + height: auto; +} + +.products-item .title +{ + font-size: 21px; + display: block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.products-item-info .categories +{ + padding: 0; + color: #555; +} + +.products-item-info .categories li +{ + list-style: none; + display: inline-block; +} + +.products-item-info .categories li + li:before +{ + content: '-'; + margin-right: 3px; +} + +.products-item-info .price +{ + clear: both; +} + +.products-item-info .price .current-price +{ + color: #d60004; + font-size: 21px; +} + +.products-item-info .price .old-price +{ + color: #555; + text-decoration: line-through; + margin-left: 5px; +} + +.rank +{ + float: left; + display: block; + direction: rtl; +} + +.rank input +{ + display: none; +} + +.rank label +{ + color: #ddd; +} + +.rank label:before +{ + content: '★'; + float: right; + overflow: hidden; + white-space: nowrap; + cursor: pointer; +} + +.rank input:checked ~ label +{ + color: #ff8f1f; +} + +.rank label:hover, +.rank label:hover ~ label +{ + color: #ffdcbd; +} + +.rank input:checked + label:hover, +.rank input:checked + label:hover ~ label, +.rank input:checked ~ label:hover, +.rank input:checked ~ label:hover ~ label, +.rank label:hover ~ input:checked ~ label +{ + color: #ffc08a; +} + +a:hover +{ + color: #f00; +} + +@media only screen and (min-width: 768px) +{ + .products-item + { + width: 20.5%; + } +} diff --git a/index.html b/index.html index d810ba7..73f80ad 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,369 @@ + + Мяндекс.Муррркет + + +
+
+ + котик +
Котиков очень очень очень очень очень многоооооо
+ +
+ +
+ + + + + + + + + + +
+
+ $999 + $1000 +
+
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem omnis, + numquam optio aliquam aspernatur laudantium quis veritatis, eveniet + dicta obcaecati excepturi. Quasi unde, nostrum, dolorem alias laboriosam + dicta sequi accusantium! +
+
+
+ + котик +
Котик #2
+ +
+ +
+ + + + + + + + + + +
+
+ $100 + $120 +
+
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem omnis, + numquam optio aliquam aspernatur laudantium quis veritatis, eveniet + dicta obcaecati excepturi. Quasi unde, nostrum, dolorem alias laboriosam + dicta sequi accusantium! +
+
+
+ + котик +
Котик #3
+ +
+ +
+ + + + + + + + + + +
+
+ $123 +
+
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem omnis, + numquam optio aliquam aspernatur laudantium quis veritatis, eveniet + dicta obcaecati excepturi. Quasi unde, nostrum, dolorem alias laboriosam + dicta sequi accusantium! +
+
+
+ + котик +
Котик #4
+ +
+ +
+ + + + + + + + + + +
+
+ $999 + $1000 +
+
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem omnis, + numquam optio aliquam aspernatur laudantium quis veritatis, eveniet + dicta obcaecati excepturi. Quasi unde, nostrum, dolorem alias laboriosam + dicta sequi accusantium! +
+
+
+ + котик +
Котик #5
+ +
+ +
+ + + + + + + + + + +
+
+ $214 + $234 +
+
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem omnis, + numquam optio aliquam aspernatur laudantium quis veritatis, eveniet + dicta obcaecati excepturi. Quasi unde, nostrum, dolorem alias laboriosam + dicta sequi accusantium! +
+
+
+ + котик +
Котик #6
+ +
+ +
+ + + + + + + + + + +
+
+ $123 + $500 +
+
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem omnis, + numquam optio aliquam aspernatur laudantium quis veritatis, eveniet + dicta obcaecati excepturi. Quasi unde, nostrum, dolorem alias laboriosam + dicta sequi accusantium! +
+
+
+ + котик +
Котик #7
+ +
+ +
+ + + + + + + + + + +
+
+ $562 + $863 +
+
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem omnis, + numquam optio aliquam aspernatur laudantium quis veritatis, eveniet + dicta obcaecati excepturi. Quasi unde, nostrum, dolorem alias laboriosam + dicta sequi accusantium! +
+
+
+ + котик +
Котик #8
+ +
+ +
+ + + + + + + + + + +
+
+ $321 + $423 +
+
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem omnis, + numquam optio aliquam aspernatur laudantium quis veritatis, eveniet + dicta obcaecati excepturi. Quasi unde, nostrum, dolorem alias laboriosam + dicta sequi accusantium! +
+
+
+ + котик +
Котик #9
+ +
+ +
+ + + + + + + + + + +
+
+ $1243 +
+
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem omnis, + numquam optio aliquam aspernatur laudantium quis veritatis, eveniet + dicta obcaecati excepturi. Quasi unde, nostrum, dolorem alias laboriosam + dicta sequi accusantium! +
+
+
+ + котик +
Котик #10
+ +
+ +
+ + + + + + + + + + +
+
+ $643 +
+
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem omnis, + numquam optio aliquam aspernatur laudantium quis veritatis, eveniet + dicta obcaecati excepturi. Quasi unde, nostrum, dolorem alias laboriosam + dicta sequi accusantium! +
+
+