Skip to content

Игнатенко Алексей #25

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Alexxxir wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Игнатенко Алексей #25

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b4b48ab
test
Oct 31, 2018
1420d58
test
Oct 31, 2018
16aeaf6
test
Dec 19, 2018
eaee025
Update index.css
Alexxxir Dec 21, 2018
b087f8b
test
Dec 21, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added images/1.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/10.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/2.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/3.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/4.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/5.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/6.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/7.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/8.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/9.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
136 changes: 136 additions & 0 deletions index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
196 changes: 196 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,203 @@
<head>
<meta charset="utf-8">
<title>Задача «Про котиков»</title>
<link rel="stylesheet" type="text/css" href="index.css" >
</head>
<body>
<div class="cats-set">
<input type="checkbox" name="show-list" id="show-list" class="show-list">
<label class="list-disabled" for="show-list">☰</label>
<label class="list-enabled" for="show-list">|||</label>
<article class="cat-info">
<a href="images/1.jpg"><img src="images/1.jpg" alt="котик 1"></a>
<h1 class="name">Гель</h1>
<div class="short-description">
<p>Возраст: около 6 месяцев</p>
<p>Порода: нет</p>
<p>Болезни: нет</p>
<br>
<p>Статус: ищет хозяина</p>
</div>
<div class="full-description">
<p>
Дружелюбный, ласковый, ручной.<br>
Возвраст ~6 месяцев.<br>
С другими котами в дружных отношениях, можно взять в пару к домашнему
питомцу, или взять в паре с его сестричкой Вали.
</p>
</div>
</article>
<article class="cat-info">
<a href="images/2.jpg"><img src="images/2.jpg" alt="котик 2"></a>
<h1 class="name">Гейр</h1>
<div class="short-description">
<p>Возраст: около 7 месяцев</p>
<p>Порода: нет</p>
<p>Болезни: нет</p>
<br>
<p>Статус: ищет хозяина</p>
</div>
<div class="full-description">
<p>
Дружелюбный, ласковый, ручной.<br>
Возвраст ~7 месяцев.<br>
С другими котами в дружных отношениях, можно взять в пару к домашнему
питомцу, или взять в паре с его сестричкой Вали.
</p>
</div>
</article>
<article class="cat-info">
<a href="images/3.jpg"><img src="images/3.jpg" alt="котик 3"></a>
<h1 class="name">Гейрахёд</h1>
<div class="short-description">
<p>Возраст: около 8 месяцев</p>
<p>Порода: нет</p>
<p>Болезни: нет</p>
<br>
<p>Статус: ищет хозяина</p>
</div>
<div class="full-description">
<p>
Дружелюбный, ласковый, ручной.<br>
Возвраст ~8 месяцев.<br>
С другими котами в дружных отношениях, можно взять в пару к домашнему
питомцу, или взять в паре с его сестричкой Вали.
</p>
</div>
</article>
<article class="cat-info">
<a href="images/4.jpg"><img src="images/4.jpg" alt="котик 4"></a>
<h1 class="name">ГейрскёгульГейрскёгуль</h1>
<div class="short-description">
<p>Возраст: около 9 месяцев</p>
<p>Порода: нет</p>
<p>Болезни: нет</p>
<br>
<p>Статус: ищет хозяина</p>
</div>
<div class="full-description">
<p>
Дружелюбный, ласковый, ручной.<br>
Возвраст ~9 месяцев.<br>
С другими котами в дружных отношениях, можно взять в пару к домашнему
питомцу, или взять в паре с его сестричкой Вали.
</p>
</div>
</article>
<article class="cat-info">
<a href="images/5.jpg"><img src="images/5.jpg" alt="котик 5"></a>
<h1 class="name">Гёндуль</h1>
<div class="short-description">
<p>Возраст: около 10 месяцев</p>
<p>Порода: нет</p>
<p>Болезни: нет</p>
<br>
<p>Статус: ищет хозяина</p>
</div>
<div class="full-description">
<p>
Дружелюбный, ласковый, ручной.<br>
Возвраст ~10 месяцев.<br>
С другими котами в дружных отношениях, можно взять в пару к домашнему
питомцу, или взять в паре с его сестричкой Вали.
</p>
</div>
</article>
<article class="cat-info">
<a href="images/6.jpg"><img src="images/6.jpg" alt="котик 6"></a>
<h1 class="name">Гондукк</h1>
<div class="short-description">
<p>Возраст: около 5 месяцев</p>
<p>Порода: нет</p>
<p>Болезни: нет</p>
<br>
<p>Статус: ищет хозяина</p>
</div>
<div class="full-description">
<p>
Дружелюбный, ласковый, ручной.<br>
Возвраст ~5 месяцев.<br>
С другими котами в дружных отношениях, можно взять в пару к домашнему
питомцу, или взять в паре с его сестричкой Вали.
</p>
</div>
</article>
<article class="cat-info">
<a href="images/7.jpg"><img src="images/7.jpg" alt="котик 7"></a>
<h1 class="name">Гунн</h1>
<div class="short-description">
<p>Возраст: около 6 месяцев</p>
<p>Порода: нет</p>
<p>Болезни: нет</p>
<br>
<p>Статус: ищет хозяина</p>
</div>
<div class="full-description">
<p>
Дружелюбный, ласковый, ручной.<br>
Возвраст ~6 месяцев.<br>
С другими котами в дружных отношениях, можно взять в пару к домашнему
питомцу, или взять в паре с его сестричкой Вали.
</p>
</div>
</article>
<article class="cat-info">
<a href="images/8.jpg"><img src="images/8.jpg" alt="котик 8"></a>
<h1 class="name">Мист</h1>
<div class="short-description">
<p>Возраст: около 6 месяцев</p>
<p>Порода: нет</p>
<p>Болезни: нет</p>
<br>
<p>Статус: ищет хозяина</p>
</div>
<div class="full-description">
<p>
Дружелюбный, ласковый, ручной.<br>
Возвраст ~6 месяцев.<br>
С другими котами в дружных отношениях, можно взять в пару к домашнему
питомцу, или взять в паре с его сестричкой Вали.
</p>
</div>
</article>
<article class="cat-info">
<a href="images/9.jpg"><img src="images/9.jpg" alt="котик 9"></a>
<h1 class="name">Скульд</h1>
<div class="short-description">
<p>Возраст: около 7 месяцев</p>
<p>Порода: нет</p>
<p>Болезни: нет</p>
<br>
<p>Статус: ищет хозяина</p>
</div>
<div class="full-description">
<p>
Дружелюбный, ласковый, ручной.<br>
Возвраст ~7 месяцев.<br>
С другими котами в дружных отношениях, можно взять в пару к домашнему
питомцу, или взять в паре с его сестричкой Вали.
</p>
</div>
</article>
<article class="cat-info">
<a href="images/10.jpg"><img src="images/10.jpg" alt="котик 10"></a>
<h1 class="name">Хлекк</h1>
<div class="short-description">
<p>Возраст: около 8 месяцев</p>
<p>Порода: нет</p>
<p>Болезни: нет</p>
<br>
<p>Статус: ищет хозяина</p>
</div>
<div class="full-description">
<p>
Дружелюбный, ласковый, ручной.<br>
Возвраст ~8 месяцев.<br>
С другими котами в дружных отношениях, можно взять в пару к домашнему
питомцу, или взять в паре с его сестричкой Вали.
</p>
</div>
</article>
</div>
</body>
</html>