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

Шмонина Ирина #39

Open
wants to merge 13 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
124 changes: 124 additions & 0 deletions index.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,124 @@
body
{
min-width: 550px;
margin: 2%;

Choose a reason for hiding this comment

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

Для чего задавать вертикальные марджины в процентах?

}

header,
h3,
h4,
p
{
margin: 0;
padding: 0;
}

header
{
text-align: center;
font-size: 2em;
}

h1::first-letter
{
color: #f00;
}

h3
{
white-space: nowrap;
overflow: hidden;
text-align: center;
}

Copy link

Choose a reason for hiding this comment

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

лишняя пустая строка

h4
{
font-weight: 600;
display: inline-block;
}

.oldCost
{
text-align: right;
text-decoration: line-through;
color: #c0c0c0;
font-size: .8em;
display: inline-block;
}

.newCost
{
text-align: right;
font-size: 1em;
color: #f00;
display: inline-block;
}

.сost
{
font-size: 1em;
display: inline-block;
}

.cat
{
width: 22.45%;
padding: 1%;

Choose a reason for hiding this comment

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

Зачем задавать вертикальные паддинги в процентах

display: inline-block;
vertical-align: top;
}

.cat p
{
display: inline-block;
}

.cat img
{
display: block;
width: 100%;
height: auto;
}

.list-view:checked ~ .market .cat
{
width: 90%;
}

.list-view:checked ~ .market .cat img
{
margin: 4px;
width: 20%;
text-align: left;
display: inline-block;
}

.list-view:checked ~ .market .cat .comment
{
display: inline-block;
width: 70%;
vertical-align: top;
}

.star:before
{
content: '\2605';
position: absolute;
color: yellow;
}

.сost:hover,
.newCost:hover
{
color: #000080;
}

img:hover
{
-webkit-filter: contrast(185%);
}

.cat:hover
{
background: #e6ffff;
}
243 changes: 243 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,250 @@
<html lang="ru">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="index.css">
<title>Мяндекс.Муррркет</title>
</head>
<body>
<input type="radio" name="view" class="tile-view" checked>Обычный вид<br>
<input type="radio" name="view" class="list-view">Список<br>
<main class="market">
<header>
<h1>Мяндекс.Муррркет</h1>
</header>
<div class="cat">

Choose a reason for hiding this comment

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

Не семантичная верстка

<h3>Даша</h3>
<img src="http://obretudom.ru/wp-content/files_mf/1478517418noidIMG_9882.JPG"
width="350" height="250" alt="catDasha">
<div class="comment">
<h4>Категория:</h4><p>котенок</p>
<br>
<p class="rating">
<span class="star">&#9734;</span>
<span class="star">&#9734;</span>
<span class="star">&#9734;</span>
<span class="star">&#9734;</span>
<span class="starEmpty">&#9734;</span>
</p>
<br>
<h4>Цена:</h4>
<p class="oldCost">1000 руб.</p>
<p class="newCost">500 руб.</p>
<br>
<h4>Описание:</h4>
<p>Котёнок - девочка. Здоровая, весёлая, приучена к лотку, ест сухой и влажный корм.</p>
</div>
</div>
<div class="cat">
<h3>Мурзилка</h3>
<img src="http://obretudom.ru/wp-content/files_mf/1478516028noid_DSC8946.JPG"
width="350" height="250" alt="catMurzilka">
<div class="comment">
<h4>Категория:</h4><p>котенок</p>
<br>
<p class="rating">
<span class="star">&#9734;</span>
<span class="star">&#9734;</span>
<span class="starEmpty">&#9734;</span>
<span class="starEmpty">&#9734;</span>
<span class="starEmpty">&#9734;</span>
</p>
<br>

Choose a reason for hiding this comment

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

для чего здесь br?

<h4>Цена:</h4>
<p class="newCost">Бесплатно</p>
<br>

Choose a reason for hiding this comment

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

Зачем?

<h4>Описание:</h4>
<p>Отдается в добрые руки котенок-девочка
Мурзилка, возраст 6 мес.
Черно-белого окраса типа "мики-маус", глдкш.
Ласковая, в меру игривая, спокойная, ручная.
Можно в компанию к молодому активному котэ.
Не труслива и не агрессивна, абсолютно адекватна.</p>
</div>
</div>
<div class="cat">
<h3>Зефир</h3>
<img src="http://obretudom.ru/wp-content/files_mf/1478515849noid01_NS_1606_sm.jpg"
width="350" height="250" alt="catZefir">
<div class="comment">
<h4>Категория:</h4><p>котенок</p>
<br>
<p class="rating">
<span class="star">&#9734;</span>
<span class="star">&#9734;</span>
<span class="star">&#9734;</span>
<span class="star">&#9734;</span>
<span class="star">&#9734;</span>
</p>
<br>
<h4>Цена:</h4>
<p class="сost">100 руб.</p>
<br>
<h4>Описание:</h4><p>Котик Зефир, 6-7 мес. ... такой сладенький, такой нежный,
такой белоснежный и
воздушный, что даже имя у него соответствующее! Чудесное создание с небесно-голубыми
глазами!</p>
</div>
</div>
<div class="cat">
<h3>Барон Гумберт фон Зиккинген младший</h3>
<img src="http://obretudom.ru/wp-content/files_mf/1478514199_DSC8993.JPG" width="350"
height="250" alt="catBaronGumbert">
<div class="comment">
<h4>Категория:</h4><p>котенок</p>
<br>
<p class="rating">
<span class="star">&#9734;</span>
<span class="star">&#9734;</span>
<span class="star">&#9734;</span>
<span class="star">&#9734;</span>
<span class="star">&#9734;</span>
</p>
<br>
<h4>Цена:</h4>
<p class="newCost">Бесплатно</p>
<br>
<h4>Описание:</h4><p>Отдам в добрые руки котенка-мальчика. Барон очень
активный, ласковый, ручной. Не труслив и не агрессивен. Можно в компанию к другому
активному коту. Здоров, кастрирован. Возраст 4 месяца.</p>
</div>
</div>
<div class="cat">
<h3>Миша</h3>
<img src="http://obretudom.ru/wp-content/files_mf/1478165447noid5%D0%9C%D0%B8%D1%88%D0%B0.JPG"
width="350" height="250" alt="catMisha">
<div class="comment">
<h4>Категория:</h4><p>котенок</p>
<br>
<p class="rating">
<span class="star">&#9734;</span>
<span class="star">&#9734;</span>
<span class="star">&#9734;</span>
<span class="starEmpty">&#9734;</span>
<span class="starEmpty">&#9734;</span>
</p>
<br>
<h4>Цена:</h4>
<p class="oldCost">2000 руб.</p>
<p class="newCost">1750 руб.</p>
<br>
<h4>Описание:</h4><p>Игривый, милый и просто очаровательный малыш в возрасте 2
месяцев ищет любящих хозяев. Котик очень похож на мишку. Он непоседа и юла.</p>
</div>
</div>
<div class="cat">
<h3>Кузя</h3>
<img src="http://obretudom.ru/wp-content/files_mf/1477977952_DSC8808.JPG"
width="350" height="250" alt="catKuza">
<div class="comment">
<h4>Категория:</h4><p>котенок</p>
<br>
<p class="rating">
<span class="star">&#9734;</span>
<span class="star">&#9734;</span>
<span class="star">&#9734;</span>
<span class="star">&#9734;</span>
<span class="star">&#9734;</span>
</p>
<br>
<h4>Цена:</h4>
<p class="oldCost">500 руб.</p>
<p class="newCost">250 руб.</p>
<br>
<h4>Описание:</h4><p>Окрас "камышовый", возраст не более 4 мес.
Питается сухим кормом для кошек, но вообще в еде неприхотлив. Активный,
в меру игривый, ласковый-ручной-контактный.</p>
</div>
</div>
<div class="cat">
<h3>Маслинка</h3>
<img src="https://lifehacker.ru/wp-content/uploads/2015/09/11_1442481044.jpg"
width="350" height="250" alt="catMaslinka">
<div class="comment">
<h4>Категория:</h4><p>котенок</p>
<br>
<p class="rating">
<span class="star">&#9734;</span>
<span class="star">&#9734;</span>
<span class="star">&#9734;</span>
<span class="star">&#9734;</span>
<span class="starEmpty">&#9734;</span>
</p>
<br>
<h4>Цена:</h4>
<p class="сost">100 руб.</p>
<br>
<h4>Описание:</h4><p>Котодевочка Маслинка, задорная и игривая, готова
весь день провести в играх и забавах. Маслинка очень самостоятельная, предпочитает
больше бегать и играть, хотя и на ручках посидеть не прочь.</p>
</div>
</div>
<div class="cat">
<h3>Оливка</h3>
<img src="http://vsookoshkax.ru/okrasi/trox.jpg"
width="350" height="250" alt="catOlivka">
<div class="comment">
<h4>Категория:</h4><p>котенок</p>
<br>
<p class="rating">
<span class="star">&#9734;</span>
<span class="star">&#9734;</span>
<span class="star">&#9734;</span>
<span class="star">&#9734;</span>
<span class="star">&#9734;</span>
</p>
<br>
<h4>Цена:</h4>
<p class="сost">100 руб.</p>
<br>
<h4>Описание:</h4><p>Котодевочка Оливка, задорная и игривая, готова весь
день провести в играх и забавах. Оливка очень ласковая кошечка, очень любит сидеть
на руках, как только заберется, сразу начинает тарахтеть свои песенки на все лады.</p>
</div>
</div>
<div class="cat">
<h3>Шаня</h3>
<img src="http://obretudom.ru/wp-content/files_mf/1475422829noidIMG_1709.JPG"
width="350" height="250" alt="catShana">
<div class="comment">
<h4>Категория:</h4><p>котенок</p>
<br>
<p class="rating">
<span class="star">&#9734;</span>
<span class="star">&#9734;</span>
<span class="star">&#9734;</span>
<span class="star">&#9734;</span>
<span class="star">&#9734;</span>
</p>
<br>
<h4>Цена:</h4>
<p class="сost">100 руб.</p>
<br>
<h4>Описание:</h4><p>Кошечка ищет дом! Возраст ориентировочно 4-5 мес.,
очень ласковая, игривая, общительная, контактная. Кушает все, к лотку приучена..</p>
</div>
</div>
<div class="cat">
<h3>Буся</h3>
<img src="http://obretudom.ru/wp-content/files_mf/1472733892noidIMG_20160825_093641.jpg"
width="350" height="250" alt="catBusa">
<div class="comment">
<h4>Категория:</h4><p>котенок</p>
<br>
<p class="rating">
<span class="star">&#9734;</span>
<span class="star">&#9734;</span>
<span class="star">&#9734;</span>
<span class="star">&#9734;</span>
<span class="star">&#9734;</span>
</p>
<br>
<h4>Цена:</h4>
<p class="сost">100 руб.</p>
<br>
<h4>Описание:</h4><p>Кошечка ищет дом! Возраст ориентировочно 4-5 мес.,
очень ласковая, игривая, общительная, контактная. Кушает все, к лотку приучена..</p>
</div>
</div>
</main>
</body>
</html>