diff --git a/images/1.jpg b/images/1.jpg new file mode 100644 index 0000000..4b7dec7 Binary files /dev/null and b/images/1.jpg differ diff --git a/images/10.jpg b/images/10.jpg new file mode 100644 index 0000000..4cb6730 Binary files /dev/null and b/images/10.jpg differ diff --git a/images/2.jpg b/images/2.jpg new file mode 100644 index 0000000..7caa378 Binary files /dev/null and b/images/2.jpg differ diff --git a/images/3.jpg b/images/3.jpg new file mode 100644 index 0000000..91470be Binary files /dev/null and b/images/3.jpg differ diff --git a/images/4.jpg b/images/4.jpg new file mode 100644 index 0000000..8f99766 Binary files /dev/null and b/images/4.jpg differ diff --git a/images/5.jpg b/images/5.jpg new file mode 100644 index 0000000..387a4aa Binary files /dev/null and b/images/5.jpg differ diff --git a/images/6.jpg b/images/6.jpg new file mode 100644 index 0000000..c967df1 Binary files /dev/null and b/images/6.jpg differ diff --git a/images/7.jpg b/images/7.jpg new file mode 100644 index 0000000..867d4c6 Binary files /dev/null and b/images/7.jpg differ diff --git a/images/8.jpg b/images/8.jpg new file mode 100644 index 0000000..594f6d3 Binary files /dev/null and b/images/8.jpg differ diff --git a/images/9.jpg b/images/9.jpg new file mode 100644 index 0000000..088a41f Binary files /dev/null and b/images/9.jpg differ diff --git a/index.css b/index.css index e69de29..0f5dd37 100644 --- a/index.css +++ b/index.css @@ -0,0 +1,136 @@ +div.cats-set +{ + border: 1px solid lightgrey; + display: table; +} + +div.cats-set article.cat-info +{ + width: 300px; + min-height: 400px; + border: 1px solid lightgrey; + float: left; + padding: 10px; + margin: 15px; + overflow: hidden; + text-overflow: ellipsis; +} + +article.cat-info:hover +{ + box-shadow: 0 14px 28px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.25); +} + +article.cat-info img +{ + width: 100%; + height: 300px; +} + +article.cat-info img:hover +{ + transform: scale(1.3, 1.3); + transition: 1s; +} + +article.cat-info a +{ + text-align: center; + text-decoration: none; + color: black; + font-size: 30px; +} + +.name +{ + font-size: 24px; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; +} + +article.cat-info a:hover +{ + color: lime; +} + +article.cat-info div.short-description +{ + font-size: 15px; + color: slategrey; +} + +article.cat-info div.short-description p +{ + margin: 0; +} + +article.cat-info div.full-description +{ + font-size: 15px; + color: slategrey; + display: none; +} + +input.show-list +{ + display: none; +} + +label.list-disabled +{ + font-size: 50px; + float: left; + width: 100%; + padding: 10px; +} + +label.list-enabled +{ + width: 100%; + font-size: 50px; + display: none; + float: left; + padding: 10px; +} + +.show-list:checked ~ label.list-disabled +{ + display: none; +} + +.show-list:checked ~ label.list-enabled +{ + display: inline; +} + +div.switch-block +{ + padding: 10px; +} + +.show-list:checked ~ article.cat-info div.full-description +{ + display: inline; +} + +.show-list:checked ~ article.cat-info div.short-description +{ + display: none; +} + +.show-list:checked ~ article.cat-info +{ + float: none; + width: 600px; + min-width: 600px; + height: 100%; + margin: 0; + border: none; + border-bottom: 1px solid lightgrey; +} + +.show-list:checked ~ article.cat-info:last-child +{ + border-bottom: none; +} diff --git a/index.html b/index.html index e0daf3e..ffa13dd 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,203 @@ Задача «Про котиков» + +
+ + + +
+ котик 1 +

Гель

+
+

Возраст: около 6 месяцев

+

Порода: нет

+

Болезни: нет

+
+

Статус: ищет хозяина

+
+
+

+ Дружелюбный, ласковый, ручной.
+ Возвраст ~6 месяцев.
+ С другими котами в дружных отношениях, можно взять в пару к домашнему + питомцу, или взять в паре с его сестричкой Вали. +

+
+
+
+ котик 2 +

Гейр

+
+

Возраст: около 7 месяцев

+

Порода: нет

+

Болезни: нет

+
+

Статус: ищет хозяина

+
+
+

+ Дружелюбный, ласковый, ручной.
+ Возвраст ~7 месяцев.
+ С другими котами в дружных отношениях, можно взять в пару к домашнему + питомцу, или взять в паре с его сестричкой Вали. +

+
+
+
+ котик 3 +

Гейрахёд

+
+

Возраст: около 8 месяцев

+

Порода: нет

+

Болезни: нет

+
+

Статус: ищет хозяина

+
+
+

+ Дружелюбный, ласковый, ручной.
+ Возвраст ~8 месяцев.
+ С другими котами в дружных отношениях, можно взять в пару к домашнему + питомцу, или взять в паре с его сестричкой Вали. +

+
+
+
+ котик 4 +

ГейрскёгульГейрскёгуль

+
+

Возраст: около 9 месяцев

+

Порода: нет

+

Болезни: нет

+
+

Статус: ищет хозяина

+
+
+

+ Дружелюбный, ласковый, ручной.
+ Возвраст ~9 месяцев.
+ С другими котами в дружных отношениях, можно взять в пару к домашнему + питомцу, или взять в паре с его сестричкой Вали. +

+
+
+
+ котик 5 +

Гёндуль

+
+

Возраст: около 10 месяцев

+

Порода: нет

+

Болезни: нет

+
+

Статус: ищет хозяина

+
+
+

+ Дружелюбный, ласковый, ручной.
+ Возвраст ~10 месяцев.
+ С другими котами в дружных отношениях, можно взять в пару к домашнему + питомцу, или взять в паре с его сестричкой Вали. +

+
+
+
+ котик 6 +

Гондукк

+
+

Возраст: около 5 месяцев

+

Порода: нет

+

Болезни: нет

+
+

Статус: ищет хозяина

+
+
+

+ Дружелюбный, ласковый, ручной.
+ Возвраст ~5 месяцев.
+ С другими котами в дружных отношениях, можно взять в пару к домашнему + питомцу, или взять в паре с его сестричкой Вали. +

+
+
+
+ котик 7 +

Гунн

+
+

Возраст: около 6 месяцев

+

Порода: нет

+

Болезни: нет

+
+

Статус: ищет хозяина

+
+
+

+ Дружелюбный, ласковый, ручной.
+ Возвраст ~6 месяцев.
+ С другими котами в дружных отношениях, можно взять в пару к домашнему + питомцу, или взять в паре с его сестричкой Вали. +

+
+
+
+ котик 8 +

Мист

+
+

Возраст: около 6 месяцев

+

Порода: нет

+

Болезни: нет

+
+

Статус: ищет хозяина

+
+
+

+ Дружелюбный, ласковый, ручной.
+ Возвраст ~6 месяцев.
+ С другими котами в дружных отношениях, можно взять в пару к домашнему + питомцу, или взять в паре с его сестричкой Вали. +

+
+
+
+ котик 9 +

Скульд

+
+

Возраст: около 7 месяцев

+

Порода: нет

+

Болезни: нет

+
+

Статус: ищет хозяина

+
+
+

+ Дружелюбный, ласковый, ручной.
+ Возвраст ~7 месяцев.
+ С другими котами в дружных отношениях, можно взять в пару к домашнему + питомцу, или взять в паре с его сестричкой Вали. +

+
+
+
+ котик 10 +

Хлекк

+
+

Возраст: около 8 месяцев

+

Порода: нет

+

Болезни: нет

+
+

Статус: ищет хозяина

+
+
+

+ Дружелюбный, ласковый, ручной.
+ Возвраст ~8 месяцев.
+ С другими котами в дружных отношениях, можно взять в пару к домашнему + питомцу, или взять в паре с его сестричкой Вали. +

+
+
+