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

Трушков Валерий #50

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open
Changes from 1 commit
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 images/cat1.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 images/cat10.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 images/cat2.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 images/cat3.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 images/cat4.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 images/cat5.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 images/cat6.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 images/cat7.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 images/cat8.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 images/cat9.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
167 changes: 167 additions & 0 deletions index.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,167 @@
input[name='style-switcher']:checked ~ .products .products-item
{
display: block;
width: 100%;
}

input[name='style-switcher']:checked ~ .products .products-item-image
{
display: inline-block;
width: 20%;
margin-right: 5%;
vertical-align: top;
}

input[name='style-switcher']:checked ~ .products .products-item-info
{
display: inline-block;
vertical-align: top;
margin-right: 5%;
width: 30%;
}

input[name='style-switcher']:checked ~ .products .products-item-description
{
display: inline-block;
vertical-align: top;
Copy link

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;

Лучше объединить их в одном блоке, записав селекторы через запятую. А потом отдельно дописывать различающиеся значения

width: 30%;
}

.products
{
font-size: 0;
}

.products-item
{
display: inline-block;
font-size: 1rem;
Copy link

Choose a reason for hiding this comment

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

Почему именно rem?

margin: 1%;
vertical-align: top;
width: 31%;
}

.products-item .products-item-image img
Copy link

Choose a reason for hiding this comment

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

Может лучше поставить картинкам класс, и использовать селектор по одному этому классу?

{
width: 100%;
height: 200px;
}

.products-item-info .title a
{
font-size: 1.3rem;
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.products-item-info .categories
{
margin: .31rem 0;
padding: 0;
color: #555;
}

.products-item-info .categories li
{
list-style: none;
display: inline-block;
}

.products-item-info .categories li + li:before
{
content: '-';
margin-right: 3px;
}

.products-item-info .rank
{
margin: .31rem 0;
}

.products-item-info .price
{
margin: .31rem 0;
Copy link

Choose a reason for hiding this comment

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

Часто повторяется это значение, надо убрать в один блок

}

.products-item-info .price .current-price
{
color: #d60004;
font-size: 1.3rem;
}

.products-item-info .price .old-price
{
color: #555;
text-decoration: line-through;
margin-left: .31rem;
}

.rank
{
border: 0;
direction: rtl;
font-size: 0;
text-align: left;
}

.rank input
{
display: none;
}

.rank legend
{
overflow: hidden;
height: 0;
}

.rank label
{
cursor: pointer;
display: inline-block;
font-size: 1.3rem;
height: 1rem;
line-height: 1.3rem;
overflow: hidden;
position: relative;
text-align: center;
text-indent: 100%;
width: 1.2rem;
}

.rank label:before
{
bottom: 0;
color: #d69d00;
content: '☆';
left: 0;
line-height: 1rem;
position: absolute;
right: 0;
text-indent: 0;
top: 0;
Copy link

Choose a reason for hiding this comment

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

Лучше top, right, bottom и left записать подряд, а то они чередуются с остальными свойствами

}

.rank label:hover:before,
.rank label:hover ~ label:before,
.rank input:checked ~ label:before
{
color: #ffbb04;
content: '★';
}

.rank label:active
{
position: relative;
top: 1px;
}

@media only screen and (min-width: 768px)
{
.products-item
{
width: 23%;
}
}
Loading