add task solution #5100
add task solution #5100
Conversation
WhiteP8wder8
commented
Dec 23, 2024
WhiteP8wder8
commented
- DEMO LINK
- TEST REPORT LINK
There was a problem hiding this comment.
Great job on your submission! 🎉 Your code meets most of the task requirements and constraints, and you've done well in structuring your HTML and SCSS files. Here are some key points and areas for improvement:
- BEM Blocks: You've correctly implemented the
cardandstarsblocks in their respective SCSS files. - SCSS Nesting and Variables: Your use of SCSS nesting is effective, and you've placed variables in a separate
variables.scssfile. However, ensure that$main-color,$second-color, and$blueare defined and correctly imported to avoid any issues. - Attributes and Styles: You've added the required
data-qaattributes and implemented hover styles for links. The card width is set correctly, and the font is imported from Google Fonts. - Browser Default Margins: Remember to reset the browser's default margins to meet the task requirements.
While there are minor issues, such as ensuring all SCSS variables are defined and resetting browser margins, these do not prevent your code from being functional. Please review the comments to improve your code further. 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! ✨
| line-height: 18px; | ||
| margin: 0; | ||
| padding-bottom: 4px; | ||
| color: $main-color; |
There was a problem hiding this comment.
The variable $main-color is used here, but it's not defined in this file. Ensure that it is defined in a file that is imported into this one, or define it here.
| line-height: 14px; | ||
| margin: 0; | ||
| padding-bottom: 16px; | ||
| color: $second-color; |
There was a problem hiding this comment.
The variable $second-color is used here, but it's not defined in this file. Ensure that it is defined in a file that is imported into this one, or define it here.
| font-weight: 400; | ||
| line-height: 14px; | ||
| text-align: right; | ||
| color: $main-color; |
There was a problem hiding this comment.
The variable $main-color is used here, but it's not defined in this file. Ensure that it is defined in a file that is imported into this one, or define it here.
| text-align: left; | ||
| font-size: 12px; | ||
| line-height: 18px; | ||
| color: $second-color; |
There was a problem hiding this comment.
The variable $second-color is used here, but it's not defined in this file. Ensure that it is defined in a file that is imported into this one, or define it here.
| line-height: 18px; | ||
| text-align: right; | ||
| font-weight: 700; | ||
| color: $main-color; |
There was a problem hiding this comment.
The variable $main-color is used here, but it's not defined in this file. Ensure that it is defined in a file that is imported into this one, or define it here.
| &__button { | ||
| box-sizing: border-box; | ||
| border-radius: 5px; | ||
| background-color: $blue; |
There was a problem hiding this comment.
The variable $blue is used here, but it's not defined in this file. Ensure that it is defined in a file that is imported into this one, or define it here.
|
|
||
| &:hover { | ||
| background-color: #fff; | ||
| color: $blue; |
There was a problem hiding this comment.
The variable $blue is used here, but it's not defined in this file. Ensure that it is defined in a file that is imported into this one, or define it here.
| &:hover { | ||
| background-color: #fff; | ||
| color: $blue; | ||
| border: 1px solid $blue; |
There was a problem hiding this comment.
The variable $blue is used here, but it's not defined in this file. Ensure that it is defined in a file that is imported into this one, or define it here.
