-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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
add task solution #4896
base: master
Are you sure you want to change the base?
add task solution #4896
Conversation
Welbrn
commented
Oct 18, 2024
- DEMO LINK
- TEST REPORT LINK
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.
Great work on organizing the SCSS imports and implementing the mixins and variables correctly! 🎉 There are a few typos in class names and potential improvements for the 'flex' mixin parameters, so please review the comments to enhance your code. Addressing these will help you avoid similar issues in the future. Keep up the good work and continue learning from these experiences!
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
<link | ||
rel="stylesheet" | ||
href="./styles/index.scss" | ||
/> | ||
</head> | ||
<body> | ||
<h1>Product cards</h1> | ||
<body class="page__budy"> |
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.
There is a typo in the class name 'page__budy'. It should be 'page__body'.
<div class="stars__star"></div> | ||
</div> | ||
|
||
<p class="card__reviw">Reviews: 5</p> |
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.
There is a typo in the class name 'card__reviw'. It should be 'card__review'.
margin-top: 16px; | ||
} | ||
|
||
&__reviw { |
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.
There seems to be a typo in the class name '&__reviw'. It should probably be '&__review' to match the intended naming convention.
} | ||
|
||
&__price { | ||
@include flex('', space-between); |
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.
The first parameter in the 'flex' mixin is an empty string. If the mixin expects a specific value for alignment, you should provide it. Otherwise, consider removing the empty string.
} | ||
|
||
.page { | ||
&__budy { |
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.
There seems to be a typo in the class name &__budy
. It should probably be &__body
if you intended to style the body of the page.
@@ -0,0 +1,19 @@ | |||
.stars { | |||
@include flex(center, ''); |
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.
The second parameter of the 'flex' mixin is an empty string. If this is intentional, consider removing it or replacing it with a more meaningful value to improve code readability.
height: 16px; | ||
background-position: center; | ||
background-repeat: no-repeat; | ||
background-image: url(/src/images/star.svg); |
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.
The path to the image should be relative to the CSS file location. Ensure that the path '/src/images/star.svg' is correct and accessible from the CSS file's location.
} | ||
|
||
&.stars--4 .stars__star:nth-child(-n + 4) { | ||
background-image: url(/src/images/star-active.svg); |
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.
Similar to line 9, ensure that the path '/src/images/star-active.svg' is correct and accessible from the CSS file's location.