diff --git a/images/cat1.jpeg b/images/cat1.jpeg new file mode 100644 index 0000000..6641b0c Binary files /dev/null and b/images/cat1.jpeg differ diff --git a/images/cat10.jpg b/images/cat10.jpg new file mode 100644 index 0000000..7960e0e Binary files /dev/null and b/images/cat10.jpg differ diff --git a/images/cat2.jpeg b/images/cat2.jpeg new file mode 100644 index 0000000..73f1ec0 Binary files /dev/null and b/images/cat2.jpeg differ diff --git a/images/cat3.jpeg b/images/cat3.jpeg new file mode 100644 index 0000000..f09b85d Binary files /dev/null and b/images/cat3.jpeg differ diff --git a/images/cat4.jpg b/images/cat4.jpg new file mode 100644 index 0000000..1beaed6 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..4a7c472 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..c402aab Binary files /dev/null and b/images/cat6.jpg differ diff --git a/images/cat7.jpeg b/images/cat7.jpeg new file mode 100644 index 0000000..89f594c Binary files /dev/null and b/images/cat7.jpeg differ diff --git a/images/cat8.jpg b/images/cat8.jpg new file mode 100644 index 0000000..8bf7dc9 Binary files /dev/null and b/images/cat8.jpg differ diff --git a/images/cat9.jpeg b/images/cat9.jpeg new file mode 100644 index 0000000..6aabccd Binary files /dev/null and b/images/cat9.jpeg differ diff --git a/index.css b/index.css index e69de29..cd79f14 100644 --- a/index.css +++ b/index.css @@ -0,0 +1,160 @@ +.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; +} + +.card-list:after +{ + width: 100%; + height: 0; + visibility: hidden; + content: ''; + display: inline-block; +} + +.info, +.description +{ + font-size: 16px; + text-align: left; + padding: 5px; + padding-top: 0; +} + +.link +{ + font-size: 1.5em; + display: inline-block; + max-width: 100%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +.photo:hover + .info .link, +.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: .2em; +} + +.previous-price +{ + color: #919192; + font-size: 1.1em; + text-decoration: line-through; +} + +.photo +{ + filter: grayscale(.4) brightness(.8); +} + +.photo img +{ + width: 100%; +} + +.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 index d810ba7..bcde6b9 100644 --- a/index.html +++ b/index.html @@ -1,8 +1,205 @@ + + Мяндекс.Муррркет + + + +
+ +
+
+ Мурзик +
+
+ Мурзик +
+ Мальчики - Короткошерстные +
+
+ ★★★★☆ +
+
+ 1000₽ +
+
+
Ленивый домашний кот, 4 месяца, приучен к лотку. + Питается сухим кормом.
+
+
+ Дуся +
+
+ Дуся +
+ Девочки - Короткошерстные +
+
+ ★★★☆☆ +
+
+ 1200₽1400₽ +
+
+
Привередливая кошечка, 6 месяцев, приучена к лотку и когтеточке.
+
+
+ Китти +
+
+ Китти +
+ Девочки - Короткошерстные +
+
+ ★★★★★ +
+
+ 1300₽1800₽ +
+
+
Веселая киса, очень жизнерадостная, 5 месяцев. + Подойдет для ловли мышей.
+
+
+ Масяня +
+
+ Масяня +
+ Девочки - Длинношерстные +
+
+ ★★★★★ +
+
+ 2100₽ +
+
+
Молодая кошечка, привита, 2 месяца. От титулованных родителей.
+
+
+ Барон +
+
+ Барон +
+ Мальчики - Короткошерстные +
+
+ ★★★★☆ +
+
+ 2300₽ +
+
+
Воспитанный домашний кот, 4 месяца. Дрессированный (знает команды "место" + и "лежать").
+
+
+ Буся +
+
+ Буся +
+ Девочки - Короткошерстные +
+
+ ★★★★☆ +
+
+ 1500₽1700₽ +
+
+
Привита, приучена к лотку и когтеточке, 2 месяца. Любит полакомиться + рыбой и огурцами.
+
+
+ Марсик +
+
+ Марсик +
+ Мальчики - Длинношерстные +
+
+ ★★★★★ +
+
+ 1800₽2000₽ +
+
+
Жизнерадостный котенок, 2 месяца. Породистый, от титулованных + родителей.
+
+
+ Пусик +
+
+ Пусик +
+ Мальчики - Короткошерстные +
+
+ ★★★☆☆ +
+
+ 1000₽ +
+
+
Своенравный котенок, кушает только вискас, 3 месяца. Приучен к + когтеточке.
+
+
+ Лизун +
+
+ Лизун +
+ Мальчики - Короткошерстные +
+
+ ★★★★★ +
+
+ 1500₽ +
+
+
Дружелюбный кот, 4 месяца. Любит общаться с детьми и играть с другими + котиками.
+
+
+ Малыш +
+
+ Малыш +
+ Мальчики - Короткошерстные +
+
+ ★★★☆☆ +
+
+ 800₽900₽ +
+
+
Дворовый котенок ищет хозяев! Прошел подготовку в приемнике, привит. + Аккуратный и чистоплотный, 5 месяцев.
+
+
+