diff --git a/images/cat-star.png b/images/cat-star.png new file mode 100644 index 0000000..6bd638f Binary files /dev/null and b/images/cat-star.png differ diff --git a/images/cat_01.jpg b/images/cat_01.jpg new file mode 100644 index 0000000..ee8e9ba Binary files /dev/null and b/images/cat_01.jpg differ diff --git a/images/cat_02.jpg b/images/cat_02.jpg new file mode 100644 index 0000000..7c11b81 Binary files /dev/null and b/images/cat_02.jpg differ diff --git a/images/cat_03.jpg b/images/cat_03.jpg new file mode 100644 index 0000000..b1ce4f5 Binary files /dev/null and b/images/cat_03.jpg differ diff --git a/images/cat_04.jpg b/images/cat_04.jpg new file mode 100644 index 0000000..51887e7 Binary files /dev/null and b/images/cat_04.jpg differ diff --git a/images/cat_05.jpg b/images/cat_05.jpg new file mode 100644 index 0000000..1edbcc1 Binary files /dev/null and b/images/cat_05.jpg differ diff --git a/images/cat_06.jpg b/images/cat_06.jpg new file mode 100644 index 0000000..0aa05e9 Binary files /dev/null and b/images/cat_06.jpg differ diff --git a/images/cat_07.jpg b/images/cat_07.jpg new file mode 100644 index 0000000..d25e51c Binary files /dev/null and b/images/cat_07.jpg differ diff --git a/images/cat_08.jpg b/images/cat_08.jpg new file mode 100644 index 0000000..19733ad Binary files /dev/null and b/images/cat_08.jpg differ diff --git a/images/cat_09.jpg b/images/cat_09.jpg new file mode 100644 index 0000000..e32d2bd Binary files /dev/null and b/images/cat_09.jpg differ diff --git a/images/cat_10.jpg b/images/cat_10.jpg new file mode 100644 index 0000000..3ec72a1 Binary files /dev/null and b/images/cat_10.jpg differ diff --git a/index.css b/index.css index e69de29..415b2d7 100644 --- a/index.css +++ b/index.css @@ -0,0 +1,320 @@ +.cat-details +{ + display: inline-block; + position: relative; + width: inherit; + vertical-align: bottom; + text-align: center; +} + +.output-switch +{ + float: left; +} + +.cat +{ + padding-right: 20px; + padding-bottom: 15px; + padding-left: 20px; + width: 250px; + display: inline-block; + vertical-align: top; + overflow: hidden; + margin-left: 2%; + -webkit-transition-duration: .3s; + transition-duration: .3s; + -webkit-transition-property: box-shadow; + transition-property: box-shadow; + -webkit-transform: translateZ(0); + transform: translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); +} + +.output-switch:checked ~ .cat +{ + width: 1200px; + overflow: hidden; + margin: 20px 10px 20px 30px; + padding-top: 10px; + padding-bottom: 10px; + -webkit-transition-duration: .3s; + transition-duration: .3s; + -webkit-transition-property: box-shadow; + transition-property: box-shadow; + -webkit-transform: translateZ(0); + transform: translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); +} + +.output-switch:checked ~ .cat .cat-details +{ + display: inline-block; + vertical-align: top; + width: 30%; + position: relative; +} + +.output-switch:checked ~ .cat .cat-photo +{ + vertical-align: top; + position: relative; + width: 25%; + display: inline-block; + box-sizing: border-box; +} + +.output-switch:checked ~ .cat .cat-photo img +{ + vertical-align: top; + right: 10%; + width: 80%; + top: 0; + -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,.2); + -moz-box-shadow: 4px 4px 4px rgba(0,0,0,.2); + box-shadow: 4px 4px 4px rgba(0,0,0,.2); + -webkit-transition: all .5s ease-out; + -moz-transition: all .5s ease; + -o-transition: all .5s ease; +} + +.output-switch:checked ~ .cat .description +{ + width: 400px; + display: inline-block; + text-align: left; + font-size: 100%; + color: #696969; +} + +.output-switch:checked ~ .cat .cat-details .cat-stars +{ + padding-right: 20%; + display: inline-block; + *zoom: 1; + position: static; + padding-bottom: 15px; +} + +.output-switch:checked ~ .cat .cat-details .price +{ + display: block; + position: relative; + text-align: left; +} + +.cat:hover, +.cat:focus, +.cat:active +{ + box-shadow: 2px 2px 8px rgba(0, 0, 0, .6); +} + +.cat-photo +{ + width: inherit; + min-height: 300px; + position: relative; + box-sizing: border-box; +} + +img +{ + width: inherit; + position: absolute; + bottom: 0; + -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,.2); + -moz-box-shadow: 4px 4px 4px rgba(0,0,0,.2); + box-shadow: 4px 4px 4px rgba(0,0,0,.2); + -webkit-transition: all .5s ease-out; + -moz-transition: all .5s ease; + -o-transition: all .5s ease; +} + +img:hover +{ + -webkit-transform: scale(1.1); + transform: scale(1.1); +} + +.description +{ + text-align: left; + font-size: 100%; + color: #696969; +} + +p +{ + text-align: left; + overflow: hidden; + text-overflow: ellipsis; + color: dimgrey; +} + +.price +{ + text-align: left; +} + +.current-price +{ + font-weight: bold; + display: inline-block; + font-size: 150%; + color: #e84a5f; +} + +.old-price +{ + font-size: 120%; + display: inline-block; + color: #88304e; + font-weight: bold; + text-decoration: line-through; +} + +.name-effect +{ + display: inline; + text-align: left; +} + +.name-effect a +{ + width: 100%; + color: #00b8a9; + font-size: 150%; + font-weight: bold; + text-decoration: none; + white-space: nowrap; +} + +a +{ + text-align: left; + width: inherit; +} + +.name-effect a::after +{ + position: absolute; + top: 25%; + left: 0; + width: inherit; + height: 1px; + background: #00b8a9; + content: ''; + opacity: 0; + -webkit-transition: height .3s, opacity .3s, -webkit-transform .3s; + -moz-transition: height .3s, opacity .3s, -moz-transform .3s; + transition: height .3s, opacity .3s, transform .3s; + -webkit-transform: translateY(-10px); + -moz-transform: translateY(-10px); + transform: translateY(-10px); +} + +.name-effect a:hover::after, +.name-effect a:focus::after +{ + height: 5px; + opacity: 1; + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + transform: translateY(0); +} + +a.category +{ + font-size: 90%; + -moz-transition: color .2s .02s ease; + -o-transition: color .2s .02s ease; + -webkit-transition: color .2s .02s ease; + color: #222; +} + +a.category :hover +{ + color: #1fa2e1; +} + +.cat-stars input :checked ~ label, +.cat-stars label, +.cat-stars label :hover, +.cat-stars label :hover ~ label +{ + background: url('images/cat-star.png') no-repeat; +} + +.cat-stars +{ + overflow: hidden; + *zoom: 1; + position: static; + float: left; + padding-bottom: 15px; +} + +.cat-stars input +{ + opacity: 0; + width: 19px; + height: 160px; + position: absolute; + z-index: 0; +} + +.cat-stars input:checked ~ label.left-star +{ + background-position: 0 -40px; + height: 37px; + width: 19px; +} + +.cat-stars input:checked ~ label.right-star +{ + background-position: 0 -120px; + height: 37px; + width: 19px; +} + +.cat-stars label.left-star +{ + background-position: 0 0; + height: 37px; + width: 19px; + float: right; + cursor: pointer; + position: relative; + z-index: 1; + padding-top: 3px; +} + +.cat-stars label.right-star +{ + background-position: 0 -80px; + height: 37px; + width: 19px; + float: right; + cursor: pointer; + position: relative; + z-index: 1; + padding-top: 3px; + padding-right: 5px; +} + +.cat-stars label.left-star:hover, +.cat-stars label:hover ~ label.left-star +{ + background-position: 0 -40px; + height: 37px; + width: 19px; +} + +.cat-stars label:hover, +.cat-stars label:hover ~ label.right-star +{ + background-position: 0 -120px; + height: 37px; + width: 19px; +} diff --git a/index.html b/index.html index d810ba7..8d82f30 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,529 @@ + + Мяндекс Муррркет + +

Включить отображение списком

+
+
+ Мурзик +
+
+ +

Кошки для сна

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
5 000 руб.
+
5 900 руб.
+
+
+
+ Мягкий пушистый проводник в Царство снов. Согреет в любую, даже самую холодную + ночь. Поможет уснуть, если Вам не спится. Любит рыбку. +
+
+
+
+ Тоня +
+
+ +

+ Кошки для настроения +

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
3 200 руб.
+
+ +
+
+ Очень весёлая и задорная любительница молока. Постоянно бегает и играет с попавшимися + под лапу вещами. Не оставляйте Ваши носки на видном месте, иначе она их найдёт. +
+
+
+
+ Сима +
+
+ +

Лечебные кошки

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
7 800 руб.
+
+
+
+ Может часами лежать на Ваших коленях, пока вы работаете за компьютером. Помиотрит + с Вами хоть всю "Игру престолов". Правда, может уснуть в процессе. +
+
+
+
+ Яша +
+
+ +

Кошки для походов

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
5 400 руб.
+
+
+
+ Озорной милый котик. Очень любит путешествия. Куда бы ни пошёл хозяин, везде + стремится пойти за ним. Внимательно проверьте свои сумки перед отъехдом в командировку! +
+
+
+
+ Викки +
+
+ +

Лечебные кошки

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
2 900 руб.
+
+
+
+ Ещё с детства она любила подолгу лежать на людях. Когда Викки лежит на + коленях, головные боли и прочие недуги словно рукой снимает. +
+
+
+
+ Сэм +
+
+ + + +

Кошки для настроения

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
8 300 руб.
+
+
+
+ Любит играть так, что сносит всё на своём пути. Очень добродушный котик, + но иногда может покапризничать. Скучать с ним точно не придётся. +
+
+
+
+ Марфа +
+
+ +

Кошки для детей

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
4 800 руб.
+
+
+
+ Очень терпеливая и спокойная кошка. Готова терпеть любые тискания. Способна + вытерпеть любого ребёнка. +
+
+
+
+ Рима +
+
+ +

Кошки для сна

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
5 900 руб.
+
6 300 руб.
+
+
+
+ Будет с Вами везде и всегда, как только Вы приляжете на диван. Из-за неё + может быть очень трудно вставать на работу/учёбу рано утром. +
+
+
+
+ Рэй +
+
+ +

Кошки для походов

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
4 100 руб.
+
+
+
+ Этот малыш родился и привык к улице. Не может постоянно сидеть дома, поэтому несказанно + радуется, когда его берут на прогулку. +
+
+
+
+ Федя +
+
+ +

Кошки для настроения

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
5 800 руб.
+
+
+
+ Этот кот только кажется спокойным милый домоседом. На самом деле он постоянно + ищет приключения... И находит их. Его жизнерадостность заразит кого угодно. +
+