-
Notifications
You must be signed in to change notification settings - Fork 62
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
base: master
Are you sure you want to change the base?
Шаламова Лилия #16
Changes from 6 commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,102 @@ | ||
.block | ||
{ | ||
margin: 10px; | ||
padding: 5px; | ||
display: inline-block; | ||
vertical-align: top; | ||
width: 270px; | ||
} | ||
|
||
.cat-photo | ||
{ | ||
width: 270px; | ||
height: auto; | ||
} | ||
|
||
.card | ||
{ | ||
white-space: nowrap; | ||
overflow: hidden; | ||
text-overflow: ellipsis; | ||
} | ||
|
||
.block:hover | ||
{ | ||
box-shadow: 0 0 10px #0078ff; | ||
} | ||
|
||
.cost | ||
{ | ||
color: red; | ||
font: bold 110% serif; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. ставишь абсолютно любой шрифт семейства? Может задать конкретный шрифт, а потом уже указывать семейство? |
||
} | ||
|
||
span.cost | ||
{ | ||
color: #000; | ||
font: normal; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. чет я незнаю такого значения у font |
||
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; | ||
} | ||
|
||
.string:checked ~ main .block | ||
{ | ||
display: block; | ||
width: 100%; | ||
} | ||
|
||
.string:checked ~ main .card, | ||
.string:checked ~ main .photo | ||
{ | ||
margin: 5px; | ||
vertical-align: middle; | ||
width: 30%; | ||
height: auto; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Зачем? |
||
display: inline-block; | ||
} | ||
|
||
.string:checked ~ main .description | ||
{ | ||
margin: 5px; | ||
vertical-align: middle; | ||
width: 20%; | ||
display: inline-block; | ||
} | ||
|
||
.description | ||
{ | ||
hyphens: manual; | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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" name="string" value="string" class="string"> | ||
<p>Вывод котиков списком</p> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. label ? |
||
<hr> | ||
<main> | ||
<article class="block"> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. обычно называют item |
||
<section class="photo"> | ||
<img alt="cat1" src="cats/1.jpg" title="Это безумная Буся" class="cat-photo"> | ||
</section> | ||
<section class="card"> | ||
<a href="" class="name">Безумная Бусяяяяяяяяяяяяяяяяяяяяяяяяяяяяяяяяяяяяяяяяя</a><br> | ||
<a href="" class="category">Безумный</a> | ||
<section class="rating"> | ||
<span>☆</span> | ||
<span>☆</span> | ||
<span>☆</span> | ||
<span>☆</span> | ||
<span>☆</span> | ||
</section> | ||
<p class="cost">$1000.99 <span class="cost">$1500.99</span></p> | ||
</section> | ||
<section class="description"> | ||
Забери меняяяя к себееееее. Со мной тебе будет весело, обещаю | ||
</section> | ||
</article> | ||
|
||
<article class="block"> | ||
<section class="photo"> | ||
<img alt="cat2" src="cats/2.jpg" title="Это Лорд" class="cat-photo"> | ||
</section> | ||
<section class="card"> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Мне кажется, что section не очень здесь подходит, попробуй подобрать другой элемент |
||
<a href="" class="name">Лорд</a><br> | ||
<a href="" class="category">Пугливый</a> | ||
<section class="rating"> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. section не семантично для данного элемента |
||
<span>☆</span> | ||
<span>☆</span> | ||
<span>☆</span> | ||
<span>☆</span> | ||
<span>☆</span> | ||
</section> | ||
<p class="cost">$100.99 <span class="cost">$150.99</span></p> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Есть семантичные элемента для удаленных текстов. |
||
</section> | ||
<section class="description"> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
для текста есть тег p There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. тоже и к фото |
||
Я очень пугливый, но если со мной будешь ты, мне ничего не страшно | ||
</section> | ||
</article> | ||
|
||
<article class="block"> | ||
<section class="photo"> | ||
<img alt="cat1" src="cats/3.jpg" title="Это Маруся" class="cat-photo"> | ||
</section> | ||
<section class="card"> | ||
<a href="" class="name">Маруся</a><br> | ||
<a href="" class="category">Пушистая</a> | ||
<section class="rating"> | ||
<span>☆</span> | ||
<span>☆</span> | ||
<span>☆</span> | ||
<span>☆</span> | ||
<span>☆</span> | ||
</section> | ||
<p class="cost">$150.99 <span class="cost">$200</span></p> | ||
</section> | ||
<section class="description"> | ||
Мяяяяяяя­яяяяуууу­уууууу­уууу­ууу­уууууууу­уууу­ууууууууу | ||
­ууууу | ||
</section> | ||
</article> | ||
|
||
<article class="block"> | ||
<section class="photo"> | ||
<img alt="cat1" src="cats/4.jpg" title="Это Алиса" class="cat-photo"> | ||
</section> | ||
<section class="card"> | ||
<a href="" class="name">Алиса</a><br> | ||
<a href="" class="category">Голубоглазая</a> | ||
<section class="rating"> | ||
<span>☆</span> | ||
<span>☆</span> | ||
<span>☆</span> | ||
<span>☆</span> | ||
<span>☆</span> | ||
</section> | ||
<p class="cost">$1000000 <span class="cost">$1500000</span></p> | ||
</section> | ||
<section class="description"> | ||
Посмотри в мои глаза и ты все поймешь | ||
</section> | ||
</article> | ||
|
||
<article class="block"> | ||
<section class="photo"> | ||
<img alt="cat1" src="cats/5.jpg" title="Это Степа" class="cat-photo"> | ||
</section> | ||
<section class="card"> | ||
<a href="" class="name">Степа</a><br> | ||
<a href="" class="category">Смешной</a> | ||
<section class="rating"> | ||
<span>☆</span> | ||
<span>☆</span> | ||
<span>☆</span> | ||
<span>☆</span> | ||
<span>☆</span> | ||
</section> | ||
<p class="cost">$100.99 <span class="cost">$150.99</span></p> | ||
</section> | ||
<section class="description"> | ||
Буду следить за тем, чтобы ты надевал шап­ку и не за­бо­лел | ||
</section> | ||
</article> | ||
|
||
<article class="block"> | ||
<section class="photo"> | ||
<img alt="cat1" src="cats/6.jpg" title="Это Макар" class="cat-photo"> | ||
</section> | ||
<section class="card"> | ||
<a href="" class="name">Макар</a><br> | ||
<a href="" class="category">Ленивый</a> | ||
<section class="rating"> | ||
<span>☆</span> | ||
<span>☆</span> | ||
<span>☆</span> | ||
<span>☆</span> | ||
<span>☆</span> | ||
</section> | ||
<p class="cost">$100.99 <span class="cost">$150.99</span></p> | ||
</section> | ||
<section class="description"> | ||
Давай вместе валяться и смот­реть се­ри­аль­чи­ки | ||
</section> | ||
</article> | ||
|
||
<article class="block"> | ||
<section class="photo"> | ||
<img alt="cat1" src="cats/7.jpg" title="Это Солнышко" class="cat-photo"> | ||
</section> | ||
<section class="card"> | ||
<a href="" class="name">Солнышко</a><br> | ||
<a href="" class="category">Сладенький</a> | ||
<section class="rating"> | ||
<span>☆</span> | ||
<span>☆</span> | ||
<span>☆</span> | ||
<span>☆</span> | ||
<span>☆</span> | ||
</section> | ||
<p class="cost">$100.99 <span class="cost">$150.99</span></p> | ||
</section> | ||
<section class="description"> | ||
Хочу на ручкиии | ||
</section> | ||
</article> | ||
|
||
<article class="block"> | ||
<section class="photo"> | ||
<img alt="cat1" src="cats/8.jpg" title="Это Мурка" class="cat-photo"> | ||
</section> | ||
<section class="card"> | ||
<a href="" class="name">Мурка</a><br> | ||
<a href="" class="category">Дарит любовь</a> | ||
<section class="rating"> | ||
<span>☆</span> | ||
<span>☆</span> | ||
<span>☆</span> | ||
<span>☆</span> | ||
<span>☆</span> | ||
</section> | ||
<p class="cost">$100.99 <span class="cost">$150.99</span></p> | ||
</section> | ||
<section class="description"> | ||
Со мной в тво­ем до­ме бу­дет теп­ло и уют­но | ||
</section> | ||
</article> | ||
|
||
<article class="block"> | ||
<section class="photo"> | ||
<img alt="cat1" src="cats/9.jpg" title="Это Адель и Арнольд" class="cat-photo"> | ||
</section> | ||
<section class="card"> | ||
<a href="" class="name">Адель и Арнольд</a><br> | ||
<a href="" class="category">Двойняшки</a> | ||
<section class="rating"> | ||
<span>☆</span> | ||
<span>☆</span> | ||
<span>☆</span> | ||
<span>☆</span> | ||
<span>☆</span> | ||
</section> | ||
<p class="cost">$100.99 <span class="cost">$150.99</span></p> | ||
</section> | ||
<section class="description"> | ||
Всегда вместе | ||
</section> | ||
</article> | ||
|
||
<article class="block"> | ||
<section class="photo"> | ||
<img alt="cat1" src="cats/10.jpg" title="Это Алька" class="cat-photo"> | ||
</section> | ||
<section class="card"> | ||
<a href="" class="name">Алька</a><br> | ||
<a href="" class="category">Голубые глазки</a> | ||
<section class="rating"> | ||
<span>☆</span> | ||
<span>☆</span> | ||
<span>☆</span> | ||
<span>☆</span> | ||
<span>☆</span> | ||
</section> | ||
<p class="cost">$100.99 <span class="cost">$150.99</span></p> | ||
</section> | ||
<section class="description"> | ||
Люблю обнимаашки. Когда тебе будет грустно, буду тебя обнимать, равзлекать и мурлыкать | ||
</section> | ||
</article> | ||
|
||
</main> | ||
</body> | ||
</html> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Зачем?