solution #4956

NataliiaVdovyna · 2024-12-27T08:12:53Z

DEMO LINK
TEST REPORT LINK
All components follow BEM and use SCSS
Repeated sizes and special colors are put to variables
Grid is used for the columns
Cards are shown in 1, 2, 3, or 4 columns based on screen resolution
All changes on :hover are smooth
Code follows all the Code Style Rules ❗️

mateacademy-ai-mentor

Thank you for your hard work on this project! 😊 While you've made great progress, there are a few critical issues that need to be addressed before we can approve the pull request:

SCSS Variables and Mixins: Several SCSS variables like $button-color, $background-color-special-white, $other-text-color, $margin-inline, and $main-text-color are referenced but not defined. Similarly, mixins like on-screen2, on-screen3, and on-screen4 need to be defined to ensure responsive design. Please ensure these are defined in your stylesheets.
Image and Link Paths: The src attributes for images and the href attribute in the logo link need to be checked and corrected to ensure they point to the correct files relative to the HTML file location.
Layout and Hover Effects: The use of fixed column widths and hover transformations might cause layout issues on smaller screens. Consider using responsive units or media queries to adjust the layout and ensure there is enough space for hover effects.
Overflow Property: The overflow-x: auto on the navigation bar might cause unwanted scrollbars. Please verify if this behavior is intended.

Please address these issues, and feel free to reach out if you need any help. Once these are resolved, we can move forward with the approval. Keep up the great work! 🚀

✨ 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.

mateacademy-ai-mentor · 2024-12-27T08:15:48Z

src/index.html

+      <a
+        href="/src/images/logo.png"


The href attribute in the <a> tag should link to a webpage, not directly to an image file. Consider changing this to a valid URL or a section within the page.

mateacademy-ai-mentor · 2024-12-27T08:15:49Z

src/index.html

+        class="header__logo-link"
+      >
+        <img
+          src="/src/images/logo.png"


Ensure that the src attribute for the image points to the correct path relative to the HTML file. Currently, it points to /src/images/logo.png, which may not be correct if the HTML file is in the src directory.

mateacademy-ai-mentor · 2024-12-27T08:15:49Z

src/index.html

+        <section class="card__top">
+          <img
+            class="card__top-image"
+            src="../src/images/imac.jpeg"


Check the src attribute for the image. It uses a relative path ../src/images/imac.jpeg, which may not be correct depending on the location of the HTML file. Ensure the path is correct.

mateacademy-ai-mentor · 2024-12-27T08:15:49Z

src/styles/blocks/card.scss

+.card {
+  box-sizing: border-box;
+  width: 200px;
+  background-color: $background-color-special-white;


Ensure that the SCSS variable $background-color-special-white is defined in your stylesheets. If not, you need to define it or replace it with a valid color value.

mateacademy-ai-mentor · 2024-12-27T08:15:49Z

src/styles/blocks/card.scss

+    margin-top: 4px;
+    font-size: 10px;
+    line-height: 14px;
+    color: $other-text-color;


Ensure that the SCSS variable $other-text-color is defined in your stylesheets. If not, you need to define it or replace it with a valid color value.

mateacademy-ai-mentor · 2024-12-27T08:15:51Z

src/styles/blocks/price.scss

+      color: $button-color;
+      background-color: $background-color-special-white;
+      border: 1px solid $button-color;


Ensure that the SCSS variables $button-color and $background-color-special-white are defined in your stylesheets. If not, you need to define them or replace them with valid color values.

mateacademy-ai-mentor · 2024-12-27T08:15:51Z

src/styles/blocks/stars.scss

+  width: 96px;
+
+  &__star {
+    background-image: url(../images/star-active.svg);


Ensure that the path ../images/star-active.svg is correct relative to the location of the compiled CSS file. If the path is incorrect, adjust it accordingly.

mateacademy-ai-mentor · 2024-12-27T08:15:51Z

src/styles/blocks/stars.scss

+  }
+
+  &__star:last-child {
+    background-image: url(../images/star.svg);


Ensure that the path ../images/star.svg is correct relative to the location of the compiled CSS file. If the path is incorrect, adjust it accordingly.

mateacademy-ai-mentor · 2024-12-27T08:15:51Z

src/styles/index.scss

-body {
-  margin: 0;
-}
+@import './utils/variables';


Ensure that the file ./utils/variables exists and contains the necessary variable definitions used across your stylesheets.

mateacademy-ai-mentor · 2024-12-27T08:15:51Z

src/styles/index.scss

@@ -4,0 +1,8 @@
+@import './utils/variables';
+@import './utils/mixins';


Ensure that the file ./utils/mixins exists and contains the necessary mixin definitions used across your stylesheets.

mateacademy-ai-mentor

Sorry, the pull request review was unsuccessful for the following reasons:

Warning

No changes were made in the pull request since the last review. Please make sure that you have added files to the pull request and committed the changes.
_{[CODE: 7]}

If the issue is within your control, please address it.
The next review attempt will automatically launch in 1 hour.
If you believe this is an error or need assistance, please contact the support team.

mateacademy-ai-mentor

Great job on addressing the issues in your project! 🎉 You've made significant progress by defining the necessary SCSS variables and mixins, ensuring that your styles are applied correctly. The image and link paths have been corrected, and your layout is responsive, which is fantastic.

However, remember to always verify that all SCSS variables and mixins are defined to avoid any styling issues. Also, ensure that the src and href attributes are correctly set to avoid broken links or images. The overflow-x: auto on the navigation bar should be checked to ensure it doesn't cause unwanted scrollbars unless intended.

Keep up the good work, and continue to learn from these experiences. Addressing these points will help you avoid similar issues in the future and improve your coding skills. Keep pushing forward! 🚀

✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨

mateacademy-ai-mentor · 2024-12-27T09:42:29Z

src/index.html

+    <!-- #region header -->
+    <header class="header">
+      <a
+        href="/src/images/logo.png"


The href attribute in the logo link should not point to an image file. It should link to a page or section within your website. Consider changing this to a valid URL or path.

mateacademy-ai-mentor · 2024-12-27T09:42:29Z

src/index.html

+        class="header__logo-link"
+      >
+        <img
+          src="/src/images/logo.png"


The src attribute for the logo image should be checked to ensure it points to the correct file relative to the HTML file location. Verify the path is correct.

mateacademy-ai-mentor · 2024-12-27T09:42:29Z

src/index.html

+        <section class="card__top">
+          <img
+            class="card__top-image"
+            src="../src/images/imac.jpeg"


The src attribute for the card image should be checked to ensure it points to the correct file relative to the HTML file location. Verify the path is correct.

mateacademy-ai-mentor · 2024-12-27T09:42:29Z

src/styles/blocks/card.scss

+.card {
+  box-sizing: border-box;
+  width: 200px;
+  background-color: $background-color-special-white;


The variable $background-color-special-white is used but not defined. Please define this variable to ensure the background color is applied correctly.

mateacademy-ai-mentor · 2024-12-27T09:42:29Z

src/styles/blocks/card.scss

+    margin-top: 4px;
+    font-size: 10px;
+    line-height: 14px;
+    color: $other-text-color;


The variable $other-text-color is used but not defined. Please define this variable to ensure the text color is applied correctly.

mateacademy-ai-mentor · 2024-12-27T09:42:30Z

src/styles/blocks/price.scss

+
+    align-items: center;
+    margin-block: 24px 16px;
+    margin-inline: $margin-inline;


The variable $margin-inline is used but not defined. Please define this variable to ensure the margin is applied correctly.

mateacademy-ai-mentor · 2024-12-27T09:42:30Z

src/styles/blocks/price.scss

+    font-size: 12px;
+    font-weight: 400;
+    line-height: 18px;
+    color: $other-text-color;


The variable $other-text-color is used but not defined. Please define this variable to ensure the text color is applied correctly.

mateacademy-ai-mentor · 2024-12-27T09:42:30Z

src/styles/blocks/price.scss

+    display: block;
+    margin-inline: $margin-inline;
+
+    background-color: $button-color;


The variable $button-color is used but not defined. Please define this variable to ensure the background color is applied correctly.

mateacademy-ai-mentor · 2024-12-27T09:42:30Z

src/styles/blocks/price.scss

+    font-weight: 700;
+    line-height: 16px;
+    align-content: center;
+    color: $background-color-special-white;


The variable $background-color-special-white is used but not defined. Please define this variable to ensure the text color is applied correctly.

mateacademy-ai-mentor · 2024-12-27T09:42:30Z

src/styles/blocks/price.scss

+      color: $button-color;
+      background-color: $background-color-special-white;
+      border: 1px solid $button-color;


The variables $button-color and $background-color-special-white are used but not defined. Please define these variables to ensure the hover styles are applied correctly.

VitaliyBondarenko1982

something went wrong with styles on demo link.
try to deploy again and check demo link before next re-request.

if will have some questions - feel free to ask in chat.

NataliiaVdovyna added 2 commits December 27, 2024 09:55

add solution

f3795c4

add solution

eb12afc

mateacademy-ai-mentor suggested changes Dec 27, 2024

View reviewed changes

NataliiaVdovyna requested a review from mateacademy-ai-mentor December 27, 2024 08:32

mateacademy-ai-mentor reviewed Dec 27, 2024

View reviewed changes

add solution

6650586

NataliiaVdovyna requested a review from mateacademy-ai-mentor December 27, 2024 08:39

mateacademy-ai-mentor approved these changes Dec 27, 2024

View reviewed changes

VitaliyBondarenko1982 suggested changes Dec 27, 2024

View reviewed changes

NataliiaVdovyna added 4 commits December 28, 2024 11:42

solution

bc0fd57

solution

6391375

solution

c31061a

solution

f0f57ab

etojeDenys approved these changes Dec 28, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

solution #4956

solution #4956

NataliiaVdovyna commented Dec 27, 2024

mateacademy-ai-mentor left a comment

mateacademy-ai-mentor Dec 27, 2024

mateacademy-ai-mentor Dec 27, 2024

mateacademy-ai-mentor Dec 27, 2024

mateacademy-ai-mentor Dec 27, 2024

mateacademy-ai-mentor Dec 27, 2024

mateacademy-ai-mentor Dec 27, 2024

mateacademy-ai-mentor Dec 27, 2024

mateacademy-ai-mentor Dec 27, 2024

mateacademy-ai-mentor Dec 27, 2024

mateacademy-ai-mentor Dec 27, 2024

mateacademy-ai-mentor left a comment

mateacademy-ai-mentor left a comment

mateacademy-ai-mentor Dec 27, 2024

mateacademy-ai-mentor Dec 27, 2024

mateacademy-ai-mentor Dec 27, 2024

mateacademy-ai-mentor Dec 27, 2024

mateacademy-ai-mentor Dec 27, 2024

mateacademy-ai-mentor Dec 27, 2024

mateacademy-ai-mentor Dec 27, 2024

mateacademy-ai-mentor Dec 27, 2024

mateacademy-ai-mentor Dec 27, 2024

mateacademy-ai-mentor Dec 27, 2024

VitaliyBondarenko1982 left a comment

		@@ -4,0 +1,8 @@
		@import './utils/variables';
		@import './utils/mixins';

solution #4956

Are you sure you want to change the base?

solution #4956

Conversation

NataliiaVdovyna commented Dec 27, 2024

mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

VitaliyBondarenko1982 left a comment

Choose a reason for hiding this comment