-
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 5 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,100 @@ | ||
main | ||
{ | ||
width: 900; | ||
} | ||
|
||
.block | ||
{ | ||
padding: 10px; | ||
display: inline-block; | ||
vertical-align: top; | ||
width: 280px; | ||
} | ||
|
||
.card | ||
{ | ||
white-space: nowrap; | ||
overflow: hidden; | ||
text-overflow: ellipsis; | ||
} | ||
|
||
.block:hover | ||
{ | ||
border: 1px solid #000; | ||
} | ||
|
||
.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: darkgrey; | ||
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. Лучше в |
||
} | ||
|
||
.rating | ||
{ | ||
text-align: left; | ||
color: yellow; | ||
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,194 @@ | |
<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> | ||
<div 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. Опять |
||
<div class="photo"> | ||
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. Не нашлось семантичного элемента?подсказка: я рассказывал про него |
||
<img alt="cat1" src="cats/1.jpg" width="270" height="270" title="Это безумная Буся"> | ||
</div> | ||
<div class="card"> | ||
<a href="" class="name">Безумная Бусяяяяяяяяяяяяяяяяяяяяяяяяяяяяяяяяяяяяяяяяя</a><br> | ||
<a href="" class="category">Безумный</a> | ||
<div 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. Я бы хотел увидеть звездочки по которым можно нажимать |
||
<span>☆</span><span>☆</span><span>☆</span><span>☆</span> | ||
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>☆</span> | ||
</div> | ||
<p class="cost">$100.99 <span class="cost">$150.99</span></p> | ||
</div> | ||
<div class="description"> | ||
Забери меняяяя к себееееее | ||
</div> | ||
</div> | ||
|
||
<div class="block"> | ||
<div class="photo"> | ||
<img alt="cat2" src="cats/2.jpg" width="270" height="270" title="Это Лорд"> | ||
</div> | ||
<div class="card"> | ||
<a href="" class="name">Лорд</a><br> | ||
<a href="" class="category">Пугливый</a> | ||
<div class="rating"> | ||
<span>☆</span><span>☆</span><span>☆</span><span>☆</span> | ||
<span>☆</span> | ||
</div> | ||
<p class="cost">$100.99 <span class="cost">$150.99</span></p> | ||
</div> | ||
<div class="description"> | ||
Я тебе доверюсь, только не обижай меня | ||
</div> | ||
</div> | ||
|
||
<div class="block"> | ||
<div class="photo"> | ||
<img alt="cat1" src="cats/3.jpg" width="270" height="270" title="Это Маруся"> | ||
</div> | ||
<div class="card"> | ||
<a href="" class="name">Маруся</a><br> | ||
<a href="" class="category">Пушистая</a> | ||
<div class="rating"> | ||
<span>☆</span><span>☆</span><span>☆</span><span>☆</span> | ||
<span>☆</span> | ||
</div> | ||
<p class="cost">$100.99 <span class="cost">$150.99</span></p> | ||
</div> | ||
<div 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.
|
||
</div> | ||
</div> | ||
|
||
<div class="block"> | ||
<div class="photo"> | ||
<img alt="cat1" src="cats/4.jpg" width="270" height="270" title="Это Алиса"> | ||
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. Ширину и высоту лучше задавать через классы, и вообще нужно указывать только одну сторону, иначе сломаешь пропорции |
||
</div> | ||
<div class="card"> | ||
<a href="" class="name">Алиса</a><br> | ||
<a href="" class="category">Голубоглазая</a> | ||
<div class="rating"> | ||
<span>☆</span><span>☆</span><span>☆</span><span>☆</span> | ||
<span>☆</span> | ||
</div> | ||
<p class="cost">$100.99 <span class="cost">$150.99</span></p> | ||
</div> | ||
<div class="description"> | ||
Посмотри в мои глаза и ты все поймешь | ||
</div> | ||
</div> | ||
|
||
<div class="block"> | ||
<div class="photo"> | ||
<img alt="cat1" src="cats/5.jpg" width="270" height="270" title="Это Степа"> | ||
</div> | ||
<div class="card"> | ||
<a href="" class="name">Степа</a><br> | ||
<a href="" class="category">Смешной</a> | ||
<div class="rating"> | ||
<span>☆</span><span>☆</span><span>☆</span><span>☆</span> | ||
<span>☆</span> | ||
</div> | ||
<p class="cost">$100.99 <span class="cost">$150.99</span></p> | ||
</div> | ||
<div class="description"> | ||
Буду следить за тем, чтобы ты надевал шап­ку и не за­бо­лел | ||
</div> | ||
</div> | ||
|
||
<div class="block"> | ||
<div class="photo"> | ||
<img alt="cat1" src="cats/6.jpg" width="270" height="270" title="Это Макар"> | ||
</div> | ||
<div class="card"> | ||
<a href="" class="name">Макар</a><br> | ||
<a href="" class="category">Ленивый</a> | ||
<div class="rating"> | ||
<span>☆</span><span>☆</span><span>☆</span><span>☆</span> | ||
<span>☆</span> | ||
</div> | ||
<p class="cost">$100.99 <span class="cost">$150.99</span></p> | ||
</div> | ||
<div class="description"> | ||
Давай вместе валяться и смот­реть се­ри­аль­чи­ки | ||
</div> | ||
</div> | ||
|
||
<div class="block"> | ||
<div class="photo"> | ||
<img alt="cat1" src="cats/7.jpg" width="270" height="270" title="Это Солнышко"> | ||
</div> | ||
<div class="card"> | ||
<a href="" class="name">Солнышко</a><br> | ||
<a href="" class="category">Сладенький</a> | ||
<div class="rating"> | ||
<span>☆</span><span>☆</span><span>☆</span><span>☆</span> | ||
<span>☆</span> | ||
</div> | ||
<p class="cost">$100.99 <span class="cost">$150.99</span></p> | ||
</div> | ||
<div class="description"> | ||
Хочу на ручкиии | ||
</div> | ||
</div> | ||
|
||
<div class="block"> | ||
<div class="photo"> | ||
<img alt="cat1" src="cats/8.jpg" width="270" height="270" title="Это Мурка"> | ||
</div> | ||
<div class="card"> | ||
<a href="" class="name">Мурка</a><br> | ||
<a href="" class="category">Дарит любовь</a> | ||
<div class="rating"> | ||
<span>☆</span><span>☆</span><span>☆</span><span>☆</span> | ||
<span>☆</span> | ||
</div> | ||
<p class="cost">$100.99 <span class="cost">$150.99</span></p> | ||
</div> | ||
<div class="description"> | ||
Со мной в тво­ем до­ме бу­дет теп­ло и уют­но | ||
</div> | ||
</div> | ||
|
||
<div class="block"> | ||
<div class="photo"> | ||
<img alt="cat1" src="cats/9.jpg" width="270" height="270" title="Это Адель и Арнольд"> | ||
</div> | ||
<div class="card"> | ||
<a href="" class="name">Адель и Арнольд</a><br> | ||
<a href="" class="category">Двойняшки</a> | ||
<div class="rating"> | ||
<span>☆</span><span>☆</span><span>☆</span><span>☆</span> | ||
<span>☆</span> | ||
</div> | ||
<p class="cost">$100.99 <span class="cost">$150.99</span></p> | ||
</div> | ||
<div class="description"> | ||
Всегда вместе | ||
</div> | ||
</div> | ||
|
||
<div class="block"> | ||
<div class="photo"> | ||
<img alt="cat1" src="cats/10.jpg" width="270" height="270" title="Это Адель и Арнольд"> | ||
</div> | ||
<div class="card"> | ||
<a href="" class="name">Алька</a><br> | ||
<a href="" class="category">Голубые глазки</a> | ||
<div class="rating"> | ||
<span>☆</span><span>☆</span><span>☆</span><span>☆</span> | ||
<span>☆</span> | ||
</div> | ||
<p class="cost">$100.99 <span class="cost">$150.99</span></p> | ||
</div> | ||
<div class="description"> | ||
Люблю обнимаашки | ||
</div> | ||
</div> | ||
|
||
</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.
А пиксели куда пропали =)?