add task solution #5137
add task solution #5137
Conversation
There was a problem hiding this comment.
Thank you for your hard work on this project! 😊 While your code is mostly on point, there are a few critical issues that need to be addressed before we can approve the pull request. Specifically, several SCSS variables such as $font-family, $card-buy-color, $card-secondary-color, $card-main-color, and $card-width are used but not defined in the relevant files. This could lead to styling issues and affect the functionality of your code. Please ensure these variables are defined in the variables.scss file or another imported file. Once these issues are resolved, your code will be in great shape! Keep up the great work, and feel free to reach out if you need any help. 🚀
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
🔄 Fix the issues, commit the changes, and then re-request my review using the Re-request review button in the Reviewers tab.
| @@ -0,0 +1,120 @@ | |||
| .card { | |||
| box-sizing: border-box; | |||
| width: $card-width; | |||
There was a problem hiding this comment.
The variable $card-width is used here, but it's not defined within this file. Ensure that it is defined in a file that is imported before this one or within this file itself.
| text-align: left; | ||
| text-underline-position: from-font; | ||
| text-decoration-skip-ink: none; | ||
| color: $card-main-color; |
There was a problem hiding this comment.
The variable $card-main-color is used here, but it's not defined within this file. Ensure that it is defined in a file that is imported before this one or within this file itself.
| text-align: left; | ||
| text-underline-position: from-font; | ||
| text-decoration-skip-ink: none; | ||
| color: $card-secondary-color; |
There was a problem hiding this comment.
The variable $card-secondary-color is used here, but it's not defined within this file. Ensure that it is defined in a file that is imported before this one or within this file itself.
| justify-content: center; | ||
| align-items: center; | ||
| height: 40px; | ||
| background-color: $card-buy-color; |
There was a problem hiding this comment.
The variable $card-buy-color is used here, but it's not defined within this file. Ensure that it is defined in a file that is imported before this one or within this file itself.
| body { | ||
| margin: 0; | ||
| font-family: $font-family; |
There was a problem hiding this comment.
The variable $font-family is used here, but it's not defined within this file. Ensure that it is defined in the variables.scss file or another imported file.
There was a problem hiding this comment.
Great job on addressing the previous issues regarding the undefined SCSS variables! 🎉 All necessary variables, including $font-family, $card-buy-color, $card-secondary-color, $card-main-color, $card-width, and $card-border-color, are now correctly defined in the variables.scss file. This ensures that your styles are consistent and maintainable across your project.
Your code is well-structured and meets the task requirements. While there were initial concerns about undefined variables, you've successfully resolved them, ensuring no compilation errors. Moving forward, always ensure that all variables are defined in the appropriate files to avoid similar issues. Keep up the excellent work and continue learning from each task! 🚀
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
| @@ -0,0 +1,120 @@ | |||
| .card { | |||
| box-sizing: border-box; | |||
| width: $card-width; | |||
There was a problem hiding this comment.
The variable $card-width is used but not defined in this file. Ensure it is defined in variables.scss or another imported file.
| .card { | ||
| box-sizing: border-box; | ||
| width: $card-width; | ||
| border: 1px solid $card-border-color; |
There was a problem hiding this comment.
The variable $card-border-color is used but not defined in this file. Ensure it is defined in variables.scss or another imported file.
| } | ||
|
|
||
| &__name { | ||
| font-family: $font-family; |
There was a problem hiding this comment.
The variable $font-family is used but not defined in this file. Ensure it is defined in variables.scss or another imported file.
| text-align: left; | ||
| text-underline-position: from-font; | ||
| text-decoration-skip-ink: none; | ||
| color: $card-main-color; |
There was a problem hiding this comment.
The variable $card-main-color is used but not defined in this file. Ensure it is defined in variables.scss or another imported file.
| text-align: left; | ||
| text-underline-position: from-font; | ||
| text-decoration-skip-ink: none; | ||
| color: $card-secondary-color; |
There was a problem hiding this comment.
The variable $card-secondary-color is used but not defined in this file. Ensure it is defined in variables.scss or another imported file.
| text-align: right; | ||
| text-underline-position: from-font; | ||
| text-decoration-skip-ink: none; | ||
| color: $card-main-color; |
There was a problem hiding this comment.
The variable $card-main-color is used again here. Ensure it is defined in variables.scss or another imported file.
| justify-content: center; | ||
| align-items: center; | ||
| height: 40px; | ||
| background-color: $card-buy-color; |
There was a problem hiding this comment.
The variable $card-buy-color is used but not defined in this file. Ensure it is defined in variables.scss or another imported file.
| box-sizing: border-box; | ||
| text-decoration: none; | ||
| border-radius: 5px; | ||
| font-family: $font-family; |
There was a problem hiding this comment.
The variable $font-family is used again here. Ensure it is defined in variables.scss or another imported file.
| text-transform: uppercase; | ||
|
|
||
| &:hover { | ||
| border: 1px solid $card-buy-color; |
There was a problem hiding this comment.
The variable $card-buy-color is used again here. Ensure it is defined in variables.scss or another imported file.
| &:hover { | ||
| border: 1px solid $card-buy-color; | ||
| background-color: rgba(243, 243, 243, 1); | ||
| color: $card-buy-color; |
There was a problem hiding this comment.
The variable $card-buy-color is used again here. Ensure it is defined in variables.scss or another imported file.
DEMO LINK
TEST REPORT LINK
[x ] there 2 BEM blocks
cardandstarseach in their own file[ x] SCSS Nesting is used for
elements,modifiersandpseudo-classes[ x] SCSS Variables are used for main values and placed in a separate file
[x ] all
stars--Nmodifiers work as expected (Highlight firstNstars)[ x] Code follows all the Code Style Rules ❗️