diff --git a/images/h-view.jpg b/images/h-view.jpg new file mode 100644 index 0000000..ecc148c Binary files /dev/null and b/images/h-view.jpg differ diff --git a/images/stars/goldFullStar.png b/images/stars/goldFullStar.png new file mode 100644 index 0000000..9c57c6a Binary files /dev/null and b/images/stars/goldFullStar.png differ diff --git a/images/stars/goldHalfStar.png b/images/stars/goldHalfStar.png new file mode 100644 index 0000000..1a47941 Binary files /dev/null and b/images/stars/goldHalfStar.png differ diff --git a/images/stars/grayFullStar.png b/images/stars/grayFullStar.png new file mode 100644 index 0000000..691d3d1 Binary files /dev/null and b/images/stars/grayFullStar.png differ diff --git a/images/stars/grayHalfStar.png b/images/stars/grayHalfStar.png new file mode 100644 index 0000000..602b924 Binary files /dev/null and b/images/stars/grayHalfStar.png differ diff --git a/images/v-view.jpg b/images/v-view.jpg new file mode 100644 index 0000000..c754525 Binary files /dev/null and b/images/v-view.jpg differ diff --git a/index.css b/index.css index e69de29..9589cfb 100644 --- a/index.css +++ b/index.css @@ -0,0 +1,275 @@ +.radio-view +{ + display: none; +} + +.header +{ + box-shadow: 0 20px 20px -20px #888; + min-width: 700px; + margin: 0 0 5px; +} + +.header p +{ + margin: 0; + text-align: right; +} + +.logo +{ + font: 35px Comic Sans MS; + margin: 0; + text-align: center; +} + +.logo > span +{ + font-family: Verdana; +} + +.logo:first-letter +{ + color: #f00; +} + +.cat:hover +{ + box-shadow: 8px -5px 8px -5px #ffd700, -8px -5px 8px -5px #ffd700; +} + +.cat +{ + font-size: 0; + box-shadow: 5px 0 10px #ddd, -5px 0 10px #ddd; + position: relative; +} + +.cat:after +{ + content: ''; + position: absolute; + width: 100%; + height: 5%; + bottom: 0; + left: 0; + background: linear-gradient(to bottom, #fff, #bbb 100%); +} + +.female img:hover +{ + box-shadow: -10px 2px 10px -8px #ff4e40, 10px 2px 10px -8px #ff4e40; +} + +.male img:hover +{ + box-shadow: -10px 2px 10px -8px blue, 10px 2px 10px -8px blue; +} + +.img-content +{ + padding: 12px; + box-sizing: border-box; + vertical-align: bottom; + text-align: center; + width: 300px; +} + +.img-content img +{ + max-height: 100%; + max-width: 100%; +} + +.info +{ + font-size: 15px; + box-sizing: border-box; +} + +figure, +.info p, +.info h2 +{ + margin: 0; +} + +.main-info +{ + text-align: left; + padding: 0; +} + +.main-info h2 +{ + font-size: 1em; + font-weight: normal; +} + +.main-info p, +.info h2 +{ + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; +} + +.kindness +{ + color: #ffd700; + font-size: 1.5em; +} + +.name:hover, +.category:hover +{ + color: #f00; +} + +.name +{ + font-size: 1.2em; +} + +.category +{ + color: #ddd; +} + +.price:after +{ + content: '₽'; +} + +.price.current-price +{ + color: green; + font-size: 1.5em; +} + +.price.old-price +{ + text-decoration: line-through; +} + +.description +{ + overflow: hidden; + position: relative; +} + +.horizontal-card:checked ~ .main +{ + width: 1000px; + margin: 0 auto; +} + +.horizontal-card:checked ~ .main .cat +{ + display: block; + width: 1000px; + height: 250px; + margin: 15px 0; +} + +.horizontal-card:checked ~ .main .img-content +{ + height: 100%; + display: inline-block; +} + +.horizontal-card:checked ~ .main .info +{ + display: inline-block; + vertical-align: top; + padding: 10px; +} + +.horizontal-card:checked ~ .main .main-info +{ + padding-left: 30px; + width: 300px; +} + +.horizontal-card:checked ~ .main .description +{ + width: 400px; +} + +.vertical-card:checked ~ .main .cat +{ + display: inline-block; + width: 300px; + margin: 10px; + vertical-align: top; + height: 550px; +} + +.vertical-card:checked ~ .main .info +{ + display: block; + padding: 0 10px; +} + +.vertical-card:checked ~ .main .img-content +{ + height: 350px; + display: table-cell; + max-width: 300px; +} + +.vertical-card:checked ~ .main .main-info +{ + height: 120px; +} + +.vertical-card:checked ~ .main .description +{ + max-height: 80px; +} + +.footer +{ + box-shadow: 0 -20px 10px -20px #888; + min-width: 700px; + height: 50px; +} + +.kindness +{ + font-size: 0; + width: 130px; +} + +.kindness > input +{ + display: none; +} + +.kindness > .half:after, +div.kindness:hover > label.half:after, +.kindness:hover > .half:hover:after +{ + content: url('images/stars/goldHalfStar.png'); +} + +.kindness > .full:after, +div.kindness:hover > label.full:after, +.kindness:hover > .full:after +{ + content: url('images/stars/goldFullStar.png'); +} + +.kindness > input:checked ~ .half:after, +.kindness:hover > .half:hover ~ .half:after, +.kindness:hover > .full:hover ~ .half:after +{ + content: url('images/stars/grayHalfStar.png'); +} + +.kindness > input:checked ~ .full:after, +.kindness:hover > .full:hover ~ .full:after, +.kindness:hover > .half:hover ~ .full:after +{ + content: url('images/stars/grayFullStar.png'); +} diff --git a/index.html b/index.html index d810ba7..1b1dc64 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,434 @@ + + Мяндекс.Муррркет + + +
+

Мяндекс.Муррркет

+

+ + +

+
+
+
+
+ Генрих 4 +
+
+

Генрих IV (Henri IV, Henri le Grand). Born in 2014 year

+

Кошка с черных окрасом

+

Мальчик

+
+ + + + + + + + + + + + + + + + + + + + + +
+

1000

+
+
+

+ Самодостаточный кот. +

+
+
+
+
+ Василий +
+
+

Василий

+

Сибирская кошка

+

Мальчик

+
+ + + + + + + + + + + + + + + + + + + + + +
+

+ 1000 1500 +

+
+
+

+ Суровый кот, без вредных привычек. +

+
+
+
+
+ Барсик +
+
+

Барсик

+

Сибирская кошка

+

Мальчик

+
+ + + + + + + + + + + + + + + + + + + + + +
+

+ 1200 +

+
+
+

+ Стиснительный и лаксковый кот. Любит забираться на повыше. +

+
+
+
+
+ Даша +
+
+

Даша

+

Бирманская кошка

+

Девочка

+
+ + + + + + + + + + + + + + + + + + + + + +
+

+ 1300 1400 +

+
+
+

+ Очень любит коробки. +

+
+
+
+
+ Василиса +
+
+

Василиса

+

Сиамская кошка

+

Девочка

+
+ + + + + + + + + + + + + + + + + + + + + +
+

+ 1500 1700 +

+
+
+

+ Красаица, умница. Любит фотографироваться. +

+
+
+
+
+ Котя +
+
+

Котя

+

Рыжая кошка

+

Мальчик

+
+ + + + + + + + + + + + + + + + + + + + + +
+

+ 250 300 +

+
+
+

+ Игривый котенок. +

+
+
+
+
+ Базилио +
+
+

Базилио

+

Серый кот

+

Мальчик

+
+ + + + + + + + + + + + + + + + + + + + + +
+

+ 2000 +

+
+
+

+ Сердитый кот. +

+
+
+
+
+ Маруся +
+
+

Маруся

+

Трехцветная кошка

+

Девочка

+
+ + + + + + + + + + + + + + + + + + + + + +
+

+ 1300 1350 +

+
+
+

+ Добрая, весела кошка. С ней вам всегда будет не скучно. +

+
+
+
+
+ Варя +
+
+

Варя

+

Рыжая кошка

+

Девочка

+
+ + + + + + + + + + + + + + + + + + + + + +
+

+ 1400 +

+
+
+

+ Любит сидеть на окне. +

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

Мурзик

+

Сибирская кошка

+

Мальчик

+
+ + + + + + + + + + + + + + + + + + + + + +
+

+ 1099 +

+
+
+

+ Любопытный кот. +

+
+
+
+