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.

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

Шаламова Лилия #16

Open
wants to merge 10 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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 cats/1.jpg
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 cats/10.jpg
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 cats/2.jpg
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 cats/3.jpg
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 cats/4.jpg
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 cats/5.jpg
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 cats/6.jpg
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 cats/7.jpg
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 cats/8.jpg
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 cats/9.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
112 changes: 112 additions & 0 deletions index.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@
main
{
text-align: center;
}

.item
{
margin: 15px;
padding: 5px;
display: inline-block;
vertical-align: top;
width: 270px;
}

.cat-photo
{
width: 100%;
height: auto;

Choose a reason for hiding this comment

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

Зачем?

}

.card
{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.item:hover
{
box-shadow: 0 0 10px #0078ff;
}

.cost
{
color: red;
font: bold 110% serif;

Choose a reason for hiding this comment

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

ставишь абсолютно любой шрифт семейства? Может задать конкретный шрифт, а потом уже указывать семейство?

}

span.cost
{
color: #000;
text-decoration: line-through;
}

.category
{
color: #a9a9a9;
}

.rating
{
text-align: left;
color: blue;
unicode-bidi: bidi-override;
direction: rtl;
}

.rating > span
{
display: inline-block;
position: relative;
width: 2em;
}

.rating > span:hover:before,
.rating > span:hover ~ span:before
{
content: '\2605';
position: absolute;
}

a:hover
{
text-decoration: none;
color: #fff;
background: #e24486;
}

.list:checked ~ main .item
{
display: block;
width: 95%;

Choose a reason for hiding this comment

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

почему 95?

}

.list:checked ~ main .card,
.list:checked ~ main .photo
{
margin: 5px;
vertical-align: middle;
width: 30%;
height: auto;

Choose a reason for hiding this comment

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

Зачем?

display: inline-block;
}

.list:checked ~ main .description
{
margin: 5px;
vertical-align: middle;
width: 30%;
display: inline-block;
}

.description
{
hyphens: manual;
}

.list:checked ~ .item .photo
{
position: relative;
width: 50%;
}
218 changes: 218 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,225 @@
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Мяндекс.Муррркет</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<input type="checkbox" class="list" id="list">
<label for="list">Вывод котиков списком</label>
<hr>
<main>
<article class="item">
<div class="photo">

Choose a reason for hiding this comment

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

Не нашлось семантичного элемента?подсказка: я рассказывал про него

<img alt="cat1" src="cats/1.jpg" title="Это безумная Буся" class="cat-photo">
</div>
<section class="card">
<a href="" class="name">Безумная Бусяяяяяяяяяяяяяяяяяяяяяяяяяяяяяяяяяяяяяяяяя</a><br>
<a href="" class="category">Безумный</a>
<div class="rating">

Choose a reason for hiding this comment

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

Я бы хотел увидеть звездочки по которым можно нажимать

<span>&#9734;</span>
<span>&#9734;</span>
<span>&#9734;</span>
<span>&#9734;</span>
<span>&#9734;</span>
</div>
<p class="cost">&#036;1000.99 <span class="cost">&#036;1500.99</span></p>
</section>
<p class="description">
Забери меняяяя к себееееее. Со мной тебе будет весело, обещаю
</p>
</article>

<article class="item">
<div class="photo">
<img alt="cat2" src="cats/2.jpg" title="Это Лорд" class="cat-photo">
</div>
<section class="card">

Choose a reason for hiding this comment

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

Мне кажется, что section не очень здесь подходит, попробуй подобрать другой элемент

<a href="" class="name">Лорд</a><br>
<a href="" class="category">Пугливый</a>
<div class="rating">
<span>&#9734;</span>
<span>&#9734;</span>
<span>&#9734;</span>
<span>&#9734;</span>
<span>&#9734;</span>
</div>
<p class="cost">&#036;100.99 <span class="cost">&#036;150.99</span></p>

Choose a reason for hiding this comment

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

Есть семантичные элемента для удаленных текстов.

</section>
<p class="description">
Я очень пугливый, но если со мной будешь ты, мне ничего не страшно
</p>
</article>

<article class="item">
<div class="photo">
<img alt="cat1" src="cats/3.jpg" title="Это Маруся" class="cat-photo">
</div>
<section class="card">
<a href="" class="name">Маруся</a><br>
<a href="" class="category">Пушистая</a>
<div class="rating">
<span>&#9734;</span>
<span>&#9734;</span>
<span>&#9734;</span>
<span>&#9734;</span>
<span>&#9734;</span>
</div>
<p class="cost">&#036;150.99 <span class="cost">&#036;200</span></p>
</section>
<p class="description">
Мяяяяяяя&shy;яяяяуууу&shy;уууууу&shy;уууу&shy;ууу&shy;уууууууу&shy;уууу&shy;ууууууууу
&shy;ууууу
</p>
</article>

<article class="item">
<div class="photo">
<img alt="cat1" src="cats/4.jpg" title="Это Алиса" class="cat-photo">
</div>
<section class="card">
<a href="" class="name">Алиса</a><br>
<a href="" class="category">Голубоглазая</a>
<div class="rating">
<span>&#9734;</span>
<span>&#9734;</span>
<span>&#9734;</span>
<span>&#9734;</span>
<span>&#9734;</span>
</div>
<p class="cost">&#036;1000000 <span class="cost">&#036;1500000</span></p>
</section>
<p class="description">
Посмотри в мои глаза и ты все поймешь
</p>
</article>

<article class="item">
<div class="photo">
<img alt="cat1" src="cats/5.jpg" title="Это Степа" class="cat-photo">
</div>
<section class="card">
<a href="" class="name">Степа</a><br>
<a href="" class="category">Смешной</a>
<div class="rating">
<span>&#9734;</span>
<span>&#9734;</span>
<span>&#9734;</span>
<span>&#9734;</span>
<span>&#9734;</span>
</div>
<p class="cost">&#036;100.99 <span class="cost">&#036;150.99</span></p>
</section>
<p class="description">
Буду следить за тем, чтобы ты надевал шап&shy;ку и не за&shy;бо&shy;лел
</p>
</article>

<article class="item">
<div class="photo">
<img alt="cat1" src="cats/6.jpg" title="Это Макар" class="cat-photo">
</div>
<section class="card">
<a href="" class="name">Макар</a><br>
<a href="" class="category">Ленивый</a>
<div class="rating">
<span>&#9734;</span>
<span>&#9734;</span>
<span>&#9734;</span>
<span>&#9734;</span>
<span>&#9734;</span>
</div>
<p class="cost">&#036;100.99 <span class="cost">&#036;150.99</span></p>
</section>
<p class="description">
Давай вместе валяться и смот&shy;реть се&shy;ри&shy;аль&shy;чи&shy;ки
</p>
</article>

<article class="item">
<div class="photo">
<img alt="cat1" src="cats/7.jpg" title="Это Солнышко" class="cat-photo">
</div>
<section class="card">
<a href="" class="name">Солнышко</a><br>
<a href="" class="category">Сладенький</a>
<div class="rating">
<span>&#9734;</span>
<span>&#9734;</span>
<span>&#9734;</span>
<span>&#9734;</span>
<span>&#9734;</span>
</div>
<p class="cost">&#036;100.99 <span class="cost">&#036;150.99</span></p>
</section>
<p class="description">
Хочу на ручкиии
</p>
</article>

<article class="item">
<div class="photo">
<img alt="cat1" src="cats/8.jpg" title="Это Мурка" class="cat-photo">
</div>
<section class="card">
<a href="" class="name">Мурка</a><br>
<a href="" class="category">Дарит любовь</a>
<div class="rating">
<span>&#9734;</span>
<span>&#9734;</span>
<span>&#9734;</span>
<span>&#9734;</span>
<span>&#9734;</span>
</div>
<p class="cost">&#036;100.99 <span class="cost">&#036;150.99</span></p>
</section>
<p class="description">
Со мной в тво&shy;ем до&shy;ме бу&shy;дет теп&shy;ло и уют&shy;но
</p>
</article>

<article class="item">
<div class="photo">
<img alt="cat1" src="cats/9.jpg" title="Это Адель и Арнольд" class="cat-photo">
</div>
<section class="card">
<a href="" class="name">Адель и Арнольд</a><br>
<a href="" class="category">Двойняшки</a>
<div class="rating">
<span>&#9734;</span>
<span>&#9734;</span>
<span>&#9734;</span>
<span>&#9734;</span>
<span>&#9734;</span>
</div>
<p class="cost">&#036;100.99 <span class="cost">&#036;150.99</span></p>
</section>
<p class="description">
Всегда вместе
</p>
</article>

<article class="item">
<div class="photo">
<img alt="cat1" src="cats/10.jpg" title="Это Алька" class="cat-photo">
</div>
<section class="card">
<a href="" class="name">Алька</a><br>
<a href="" class="category">Голубые глазки</a>
<div class="rating">
<span>&#9734;</span>
<span>&#9734;</span>
<span>&#9734;</span>
<span>&#9734;</span>
<span>&#9734;</span>
</div>
<p class="cost">&#036;100.99 <span class="cost">&#036;150.99</span></p>
</section>
<p class="description">
Люблю обнимаашки. Когда тебе будет грустно, буду тебя обнимать, равзлекать и мурлыкать
</p>
</article>

</main>
</body>
</html>