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

Conversation

LiliyaShalamova
Copy link

@LiliyaShalamova LiliyaShalamova commented Nov 5, 2016

@honest-hrundel
Copy link

🍅 Не пройден линтинг или базовые тесты

@honest-hrundel
Copy link

🍅 Не пройден линтинг или базовые тесты

@honest-hrundel
Copy link

🍅 Не пройден линтинг или базовые тесты

@honest-hrundel
Copy link

🍅 Не пройден линтинг или базовые тесты

@honest-hrundel
Copy link

🍏 Пройден линтинг и базовые тесты

@LiliyaShalamova
Copy link
Author

🍏

Copy link

@savichev-igor savichev-igor left a comment

Choose a reason for hiding this comment

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

Жаль, что не сделала красивую переключалку, а оставила серый input :<
image

Также неплохо было бы убрать это дёрганье контента при появлении рамки.

Ещё попробуй пересмотреть цвета, а то этот жёлтый почти не видно на белом фоне.

Ну и вообще сделай интереснее... Вдруг я тебе 50 тысяч отдал за эту страницу, а ты мне такое сверстала... Я бы в суд подал)

@@ -0,0 +1,100 @@
main
{
width: 900;

Choose a reason for hiding this comment

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

А пиксели куда пропали =)?


.category
{
color: darkgrey;

Choose a reason for hiding this comment

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

Лучше в hexцвета указывать =)

<p>Вывод котиков списком</p>
<hr>
<main>
<div class="block">

Choose a reason for hiding this comment

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

Опять div'ы, где семантические тэги :< ?

<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>

Choose a reason for hiding this comment

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

С переносами бы хоть их сделала)

<p class="cost">$100.99 <span class="cost">$150.99</span></p>
</div>
<div class="description">
Мяяяяяяя&shy;яяяяуууу&shy;уууууу&shy;уууу&shy;ууу&shy;уууууууу&shy;уууу&shy;ууууууууу&shy;ууууу

Choose a reason for hiding this comment

The 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="Это Алиса">

Choose a reason for hiding this comment

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

Ширину и высоту лучше задавать через классы, и вообще нужно указывать только одну сторону, иначе сломаешь пропорции

@savichev-igor
Copy link

🚀

@honest-hrundel
Copy link

🍏 Пройден линтинг и базовые тесты

@LiliyaShalamova
Copy link
Author

🍏

</head>
<body>
<input type="checkbox" name="string" value="string" class="string">
<p>Вывод котиков списком</p>
Copy link

Choose a reason for hiding this comment

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

label ?

<p>Вывод котиков списком</p>
<hr>
<main>
<article class="block">
Copy link

Choose a reason for hiding this comment

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

обычно называют item

<section class="card">
<a href="" class="name">Лорд</a><br>
<a href="" class="category">Пугливый</a>
<section class="rating">
Copy link

Choose a reason for hiding this comment

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

section не семантично для данного элемента

</section>
<p class="cost">&#036;100.99 <span class="cost">&#036;150.99</span></p>
</section>
<section class="description">
Copy link

@meded90 meded90 Nov 14, 2016

Choose a reason for hiding this comment

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

Задаёт раздел документа, может применяться для блока новостей, контактной информации, глав текста, вкладок в диалоговом окне и др. Раздел обычно содержит заголовок. Допускается вкладывать один тег section внутрь другого.

для текста есть тег p

Copy link

Choose a reason for hiding this comment

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

тоже и к фото

@meded90
Copy link

meded90 commented Nov 14, 2016

2016-11-14 14-57-16

span.cost
{
color: #000;
font: normal;
Copy link

Choose a reason for hiding this comment

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

чет я незнаю такого значения у font

@meded90
Copy link

meded90 commented Nov 14, 2016

🍅

@honest-hrundel
Copy link

🍏 Пройден линтинг и базовые тесты

@LiliyaShalamova
Copy link
Author

Я делала без доп. задания
Звездочки есть, но состояние не сохраняется при нажатии

@meded90
Copy link

meded90 commented Nov 14, 2016

2016-11-14 19-00-47

@meded90
Copy link

meded90 commented Nov 14, 2016

2016-11-14 19-01-26

@meded90
Copy link

meded90 commented Nov 14, 2016

2016-11-14 19-03-05

пустое место

@meded90
Copy link

meded90 commented Nov 14, 2016

🍅

@honest-hrundel
Copy link

🍅 Не пройден линтинг или базовые тесты

@honest-hrundel
Copy link

🍏 Пройден линтинг и базовые тесты

@LiliyaShalamova
Copy link
Author

🍏

@voychitskaya voychitskaya assigned trixartem and unassigned meded90 Nov 14, 2016
@honest-hrundel
Copy link

🍏 Пройден линтинг и базовые тесты

@LiliyaShalamova
Copy link
Author

🍏

@trixartem
Copy link

Замечания по макету:

  • Далековато от макета, выглядит не очень красиво. Я бы рекомендовал повторить макет, раз не получилось сделать что-то свое
  • при сжати экрана начинаю всплывать всяки артефакты, попробуй их избежать
    _5
  • Не увидел эффекта при наведении на фото
  • На больших экранах все расползатся. Я бы ограничил ширину и выравнял по центру

Copy link

@trixartem trixartem left a comment

Choose a reason for hiding this comment

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

🍅

.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.

Зачем?

.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.

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

.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?

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.

Зачем?

<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.

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

<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>
</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.

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

<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 не очень здесь подходит, попробуй подобрать другой элемент

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants