Skip to content
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

Лебедев Никита #33

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

Лебедев Никита #33

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
7bee796
initial commit
nest-aka-swan Nov 7, 2016
551316e
ratings, cat info
nest-aka-swan Nov 7, 2016
9b7185a
style fixes
nest-aka-swan Nov 9, 2016
998da4b
text-align last line fix
nest-aka-swan Nov 9, 2016
12737e2
comment fix
nest-aka-swan Nov 11, 2016
70f3528
link and hover
nest-aka-swan Nov 11, 2016
91b55b9
link fix
nest-aka-swan Nov 14, 2016
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/cat1.jpeg
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/cat10.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/cat2.jpeg
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/cat3.jpeg
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/cat4.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/cat5.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/cat6.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/cat7.jpeg
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/cat8.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/cat9.jpeg
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.
160 changes: 160 additions & 0 deletions index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,160 @@
.card
{
width: 350px;
display: inline-block;
vertical-align: top;
margin-right: 12px;
margin-bottom: 10px;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Можно записать кратко, но не обязательно

font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.card:hover
{
box-shadow: 1px 4px 8px 0 rgba(0,0,0,.3), 0 6px 20px 0 rgba(0,0,0,.29);
transition: all 400ms ease-out;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

}

.card-list
{
width: 100%;
min-width: 360px;
text-align: justify;
}

.card-list:after
{
width: 100%;
height: 0;
visibility: hidden;
content: '';
display: inline-block;
}

.info,
.description
{
font-size: 16px;
text-align: left;
padding: 5px;
padding-top: 0;
}

.link
{
font-size: 1.5em;
display: inline-block;
max-width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

.photo:hover + .info .link,
.link:hover
{
text-shadow: 1px 1px 5px rgba(0, 0, 238, .5);
}

.category
{
font-size: .8em;
color: #000;
}

.category a
{
color: inherit;
opacity: .7;
}

.category a:hover
{
opacity: 1;
}

.goodness
{
font-size: 1.5em;
}

.current-price
{
color: #a52a2a;
font-size: 1.5em;
margin-right: .2em;
}

.previous-price
{
color: #919192;
font-size: 1.1em;
text-decoration: line-through;
}

.photo
{
filter: grayscale(.4) brightness(.8);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Очень здорово 👍

}

.photo img
{
width: 100%;
}

.photo:hover
{
filter: grayscale(0) brightness(1);
transition: all 400ms ease-out;
}

.fake-checkbox
{
display: none;
}

.fake-checkbox:checked ~ .card
{
display: block;
width: 100%;
text-align: left;
}

.fake-checkbox:checked ~ .card > .photo,
.fake-checkbox:checked ~ .card > .info,
.fake-checkbox:checked ~ .card > .description
{
display: inline-block;
vertical-align: top;
}

.fake-checkbox:checked ~ .card > .photo
{
width: 19%;
}

.fake-checkbox:checked ~ .card > .info
{
width: 29%;
}

.fake-checkbox:checked ~ .card > .description
{
width: 49%;
}

.fake-button
{
display: block;
padding: 2px 6px;
margin: 10px 0;
width: 250px;
text-align: center;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-appearance: button;
-moz-appearance: button;
/* edge fallback */
background: #ddd;
}
197 changes: 197 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,205 @@
<!DOCTYPE html>
<html lang="ru">

<head>
<title>Мяндекс.Муррркет</title>
<meta charset="utf-8">
<link rel="stylesheet" href="index.css">
</head>

<body>
<label class="fake-button" for="view-switcher">Переключить режим отображения</label>
<main class="card-list">
<input class="fake-checkbox" type="checkbox" name="view-switcher" id="view-switcher">
<div class="card">
<div class="photo">
<a href="cat-1"><img src="images/cat1.jpeg" alt="Мурзик"></a>
</div>
<div class="info">
<a class="link" href="cat-1">Мурзик</a>
<div class="category">
<a href="category-1">Мальчики</a> - <a href="category-2">Короткошерстные</a>
</div>
<div class="goodness">
<span>★</span><span>★</span><span>★</span><span>★</span><span>☆</span>
</div>
<div class="price">
<span class="current-price">1000₽</span>
</div>
</div>
<div class="description">Ленивый домашний кот, 4 месяца, приучен к лотку.
Питается сухим кормом.</div>
</div><!--
--><div class="card">
<div class="photo">
<a href="cat-2"><img src="images/cat2.jpeg" alt="Дуся"></a>
</div>
<div class="info">
<a class="link" href="cat-2">Дуся</a>
<div class="category">
<a href="category-1">Девочки</a> - <a href="category-2">Короткошерстные</a>
</div>
<div class="goodness">
<span>★</span><span>★</span><span>★</span><span>☆</span><span>☆</span>
</div>
<div class="price">
<span class="current-price">1200₽</span><span class="previous-price">1400₽</span>
</div>
</div>
<div class="description">Привередливая кошечка, 6 месяцев, приучена к лотку и когтеточке.</div>
</div><!--
--><div class="card">
<div class="photo">
<a href="cat-3"><img src="images/cat3.jpeg" alt="Китти"></a>
</div>
<div class="info">
<a class="link" href="cat-3">Китти</a>
<div class="category">
<a href="category-1">Девочки</a> - <a href="category-2">Короткошерстные</a>
</div>
<div class="goodness">
<span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
</div>
<div class="price">
<span class="current-price">1300₽</span><span class="previous-price">1800₽</span>
</div>
</div>
<div class="description">Веселая киса, очень жизнерадостная, 5 месяцев.
Подойдет для ловли мышей.</div>
</div><!--
--><div class="card">
<div class="photo">
<a href="cat-4"><img src="images/cat4.jpg" alt="Масяня"></a>
</div>
<div class="info">
<a class="link" href="cat-4">Масяня</a>
<div class="category">
<a href="category-1">Девочки</a> - <a href="category-2">Длинношерстные</a>
</div>
<div class="goodness">
<span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
</div>
<div class="price">
<span class="current-price">2100₽</span>
</div>
</div>
<div class="description">Молодая кошечка, привита, 2 месяца. От титулованных родителей.</div>
</div><!--
--><div class="card">
<div class="photo">
<a href="cat-5"><img src="images/cat5.jpg" alt="Барон"></a>
</div>
<div class="info">
<a class="link" href="cat-5">Барон</a>
<div class="category">
<a href="category-1">Мальчики</a> - <a href="category-2">Короткошерстные</a>
</div>
<div class="goodness">
<span>★</span><span>★</span><span>★</span><span>★</span><span>☆</span>
</div>
<div class="price">
<span class="current-price">2300₽</span>
</div>
</div>
<div class="description">Воспитанный домашний кот, 4 месяца. Дрессированный (знает команды "место"
и "лежать").</div>
</div><!--
--><div class="card">
<div class="photo">
<a href="cat-6"><img src="images/cat6.jpg" alt="Буся"></a>
</div>
<div class="info">
<a class="link" href="cat-6">Буся</a>
<div class="category">
<a href="category-1">Девочки</a> - <a href="category-2">Короткошерстные</a>
</div>
<div class="goodness">
<span>★</span><span>★</span><span>★</span><span>★</span><span>☆</span>
</div>
<div class="price">
<span class="current-price">1500₽</span><span class="previous-price">1700₽</span>
</div>
</div>
<div class="description">Привита, приучена к лотку и когтеточке, 2 месяца. Любит полакомиться
рыбой и огурцами.</div>
</div><!--
--><div class="card">
<div class="photo">
<a href="cat-7"><img src="images/cat7.jpeg" alt="Марсик"></a>
</div>
<div class="info">
<a class="link" href="cat-7">Марсик</a>
<div class="category">
<a href="category-1">Мальчики</a> - <a href="category-2">Длинношерстные</a>
</div>
<div class="goodness">
<span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
</div>
<div class="price">
<span class="current-price">1800₽</span><span class="previous-price">2000₽</span>
</div>
</div>
<div class="description">Жизнерадостный котенок, 2 месяца. Породистый, от титулованных
родителей.</div>
</div><!--
--><div class="card">
<div class="photo">
<a href="cat-8"><img src="images/cat8.jpg" alt="Пусик"></a>
</div>
<div class="info">
<a class="link" href="cat-8">Пусик</a>
<div class="category">
<a href="category-1">Мальчики</a> - <a href="category-2">Короткошерстные</a>
</div>
<div class="goodness">
<span>★</span><span>★</span><span>★</span><span>☆</span><span>☆</span>
</div>
<div class="price">
<span class="current-price">1000₽</span>
</div>
</div>
<div class="description">Своенравный котенок, кушает только вискас, 3 месяца. Приучен к
когтеточке.</div>
</div><!--
--><div class="card">
<div class="photo">
<a href="cat-9"><img src="images/cat9.jpeg" alt="Лизун"></a>
</div>
<div class="info">
<a class="link" href="cat-9">Лизун</a>
<div class="category">
<a href="category-1">Мальчики</a> - <a href="category-2">Короткошерстные</a>
</div>
<div class="goodness">
<span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
</div>
<div class="price">
<span class="current-price">1500₽</span>
</div>
</div>
<div class="description">Дружелюбный кот, 4 месяца. Любит общаться с детьми и играть с другими
котиками.</div>
</div><!--
--><div class="card">
<div class="photo">
<a href="cat-10"><img src="images/cat10.jpg" alt="Малыш"></a>
</div>
<div class="info">
<a class="link" href="cat-10">Малыш</a>
<div class="category">
<a href="category-1">Мальчики</a> - <a href="category-2">Короткошерстные</a>
</div>
<div class="goodness">
<span>★</span><span>★</span><span>★</span><span>☆</span><span>☆</span>
</div>
<div class="price">
<span class="current-price">800₽</span><span class="previous-price">900₽</span>
</div>
</div>
<div class="description">Дворовый котенок ищет хозяев! Прошел подготовку в приемнике, привит.
Аккуратный и чистоплотный, 5 месяцев.</div>
</div>
</main>
</body>

</html>