diff --git a/index.css b/index.css index e69de29..da6dec5 100644 --- a/index.css +++ b/index.css @@ -0,0 +1,98 @@ +header +{ + position: relative; +} + +article +{ + padding: 10px 20px; + border: 1px solid #b5b5b5; + width: 400px; + margin: auto; + transition-duration: .5s; +} + +.name +{ + width: 400px; +} + +section +{ + width: 400px; +} + +.image_container +{ + width: 100%; + height: 400px; + overflow: hidden; +} + +img +{ + width: 100%; + height: 100%; +} + +.small_description +{ + display: none; +} + +.hamburger +{ + cursor: pointer; + font-size: 30px; + display: inline-block; + transition-duration: .5s; +} + +.view +{ + display: none; +} + +.view:checked ~ header .hamburger +{ + transform: rotate(90deg); +} + +.view:checked ~ article +{ + display: inline-block; +} + +.view:checked ~ article section .small_description +{ + display: inline; +} + +.view:checked ~ article +{ + border: 1px solid #b5b5b5; + width: 350px; + transition-duration: .5s; + padding: 0; + margin: 4px; +} + +.view:checked ~ article section +{ + padding: 5px; +} + +.view:checked ~ article:hover +{ + box-shadow: 0 1px 9px 0 #00000087; +} + +.view:checked ~ article .image_container +{ + height: 300px; +} + +.view:checked ~ article section .description +{ + display: none; +} diff --git a/index.html b/index.html index e0daf3e..3ce7aa6 100644 --- a/index.html +++ b/index.html @@ -2,8 +2,294 @@ + Задача «Про котиков» + +
+ +
+
+
+ salem +
+

Сергей

+
+

+ Возраст: 29 лет
+ Порода: коттерьер
+ Болезни: нет
+
+ Статус: активен +

+

+ Работает менеджером среднего звена в отделе логистики, с 8:00 до 18:00 5 дней в неделю
+ Возраст ~ 29 лет
+ С другими котами контактирует только в деловых отношениях, личной жизни нет, + как и времени на обычную жизнь, + по выходным работает сверхурочно, чтобы погасить кредит за квартиру.
+
+ Статус: пока еще двигается. +

+
+
+
+
+ salem +
+

Альбина

+
+

+ Возраст: 19 лет
+ Порода: таксакот
+ Болезни: нет
+
+ Статус: активен +

+

+ Учится в университете на гуманитария, но не знает, + что будет потом делать, возможно, поедет к маме в деревню
+ Возраст ~ 19 лет
+ Очень много подружек с которыми она общается, ей нравится один парень, + но она боится к нему подойти, вдруг он подумает, + что она странная
+
+ Статус: все еще учится +

+
+
+
+
+ salem +
+

Салем-качек

+
+

+ Возраст: неизвестно
+ Порода: волшебник
+ Болезни: волшебность
+
+ Статус: активен +

+

+ Качается, с 8:00 до 18:00 5 дней в неделю
+ Возраст ~ неизвестнот
+ Он набирает мышцы
+
+ Статус: в качалке. +

+
+
+
+
+ salem +
+

Салем-наМассе

+
+

+ Возраст: неизвестнот
+ Порода: волшебник
+ Болезни: волшебность
+
+ Статус: активен +

+

+ Для того чтобы накачатся, он набирает массу, + но всегда останавливается на половине пути...
+ Возраст ~ неизвестно
+ Ему нужна еда
+
+ Статус: пока еще двигается. +

+
+
+
+
+ salem +
+

Салем-лепс

+
+

+ Возраст: неизвестнот
+ Порода: волшебник
+ Болезни: волшебность
+
+ Статус: активен +

+

+ ТОООЛЬКААА
+ РЮМКА ВОДКИ НА СТОЛЕЕЕЕ
+ ВЕТЕР ПЛАЧЕТ ЗА ОКНООООМ
+ ТИХООЙ БООЛЬЮЮ
+
+

+
+
+
+
+ salem +
+

Салем-афтерлепс

+
+

+ Возраст: неизвестнот
+ Порода: волшебник
+ Болезни: волшебность
+
+ Статус: активен +

+

+ Болит голова
+ Сильно
+ И горло болит
+
+ Статус: пока еще двигается. +

+
+
+
+
+ salem +
+

Салем-афтер-афтерлепс

+
+

+ Возраст: неизвестнот
+ Порода: волшебник
+ Болезни: волшебность
+
+ Статус: активен +

+

+ Голова все еще болит
+ Парацетомол не помог
+ Таблетки в аптечке заканчиваются
+
+ Статус: уже не двигается. +

+
+
+
+
+ salem +
+

Салем-привидение

+
+

+ Возраст: неизвестнот
+ Порода: волшебник
+ Болезни: волшебность
+
+ Статус: активен +

+

+ Поздравляет с хеллуином
+ Желает самых страшных дедлайнов
+ ВЫ ПРОКЛЯТЫ
+
+ Статус: пока еще двигается. +

+
+
+
+
+ salem +
+

РЕПГАД

+
+

+ Возраст: неизвестнот
+ Порода: волшебник
+ Болезни: волшебность
+
+ Статус: активен +

+

+ Младший брат эминема, несмотря на то что он черный
+ Возраст ~ 29 лет
+ Тусуется с реперами, не любит белых
+
+ Статус: читает реп. +

+
+
+
+
+ salem +
+

9-хвостый

+
+

+ Возраст: неизвестнот
+ Порода: студент
+ Болезни: волшебность
+
+ Статус: рожден в дедлайне +

+

+ Работает менеджером среднего звена в отделе логистики, + с 8:00 до 18:00 5 дней в неделю
+ Возраст ~ 29 лет
+ С другими котами контактирует только в деловых отношениях, + личной жизни нет, как и времени на обычную жизнь, + по выходным работает сверхурочно, чтобы погасить кредит за квартиру.
+
+ Статус: пока еще двигается. +

+
+
+
+
+ salem +
+

Мой компилятор

+
+

+ Возраст: неизвестнот
+ Порода: волшебник
+ Болезни: волшебность
+
+ Статус: активен +

+

+ Работает менеджером среднего звена в отделе логистики, с 8:00 до 18:00 5 дней в неделю
+ Возраст ~ 29 лет
+ С другими котами контактирует только в деловых отношениях, + личной жизни нет, как и времени на обычную жизнь, + по выходным работает сверхурочно, чтобы погасить кредит за квартиру.
+
+ Статус: пока еще двигается. +

+
+
+
+
+ salem +
+

Сергей

+
+

+ Возраст: 29 лет
+ Порода: коттерьер
+ Болезни: нет
+
+ Статус: активен +

+

+ Работает менеджером среднего звена в отделе логистики, с 8:00 до 18:00 5 дней в неделю
+ Возраст ~ 29 лет
+ С другими котами контактирует только в деловых отношениях, + личной жизни нет, как и времени на обычную жизнь, + по выходным работает сверхурочно, чтобы погасить кредит за квартиру.
+
+ Статус: пока еще двигается. +

+
+