add tast solution #5192

serhii-lesik · 2025-01-17T16:58:54Z

mateacademy-ai-mentor

Thank you for your hard work on this project! 😊 However, there are a few critical issues that need to be addressed to meet the task requirements:

Class Name Typo: There is a consistent typo in the class name 'card__buttom'. It should be corrected to 'card__button' across all files to ensure styles are applied correctly and consistently.
Opacity Value: The opacity property for .card__image is incorrectly set to '0px'. It should be a value between 0 and 1. If you want the image to be fully transparent, use opacity: 0;.
SCSS Variables and Structure: The task requires the use of SCSS variables and a separate file for them, as well as the implementation of two BEM blocks (card and stars) in their own files. These are currently missing.
SCSS Nesting: The SCSS file should demonstrate the use of nesting for elements, modifiers, and pseudo-classes, which is not currently shown.
Background Image URL: Ensure that the background-image: url() is relative to index.scss and starts with ../images, instead of using absolute paths.
Link Styles on Hover: The task specifies changing link styles on :hover, which is not currently implemented.

Please address these issues to ensure the functionality and requirements of the task are fully met. 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.

mateacademy-ai-mentor · 2025-01-17T17:00:14Z

src/index.html

+          <div class="card__priceText">Price:</div>
+          <div class="card__priceValue">$2,199</div>
+        </div>
+        <div class="card__buttom" data-qa="hover">Buy</div>


There is a typo in the class name 'card__buttom'. It should be 'card__button' to maintain consistency and avoid potential styling issues.

mateacademy-ai-mentor · 2025-01-17T17:00:14Z

src/styles/index.css

+  background-size: cover;
+  width: 160px;
+  height: 134px;
+  opacity: 0px;


The 'opacity' property should be a value between 0 and 1, not '0px'. If you want the image to be fully transparent, use 'opacity: 0;'.

mateacademy-ai-mentor · 2025-01-17T17:00:14Z

src/styles/index.css

+  color: #060B35;
+}
+
+.card__buttom {


There is a typo in the class name 'card__buttom'. It should be 'card__button' to match the HTML and ensure styles are applied correctly.

mateacademy-ai-mentor · 2025-01-17T17:00:14Z

src/styles/index.css

+  transition: transform 0.3s ease;
+}
+
+.card__buttom:hover {


The hover selector '.card__buttom:hover' contains a typo. It should be '.card__button:hover' to match the corrected class name.

mateacademy-ai-mentor · 2025-01-17T17:00:15Z

src/styles/index.min.css

@@ -0,0 +1,2 @@
+body{margin:0;font-family:Roboto,sans-serif}.card{box-sizing:border-box;width:200px;height:408px;display:flex;flex-direction:column;align-items:center}.card__image{margin-top:32px;box-sizing:border-box;background-image:url(/src/images/imac.jpeg);background-size:cover;width:160px;height:134px;opacity:0px}.card__info{box-sizing:border-box;display:flex;flex-direction:column;margin-left:17px;margin-right:17px}.card__name{margin-top:40px;font-size:12px;font-weight:500;line-height:18px;text-align:left;color:#000}.card__code{font-size:10px;font-weight:400;line-height:14px;text-align:left;color:#616070;margin-top:4px}.card__rating{margin-top:16px;display:flex;justify-content:space-between}.card__stars{display:flex;flex-direction:row;justify-content:space-between}.card__star{box-sizing:border-box;width:16px;height:16px;background-image:url(/src/images/star.svg);background-repeat:no-repeat;background-size:cover;display:flex;flex-direction:row;margin-right:4px}.card__reviews{font-size:10px;font-weight:400;line-height:14px;text-align:right}.card__price{margin-top:24px;display:flex;flex-direction:row;justify-content:space-between}.card__priceText{font-size:12px;font-weight:400;line-height:18px;color:#616070}.card__priceValue{font-size:16px;font-weight:700;line-height:18px;color:#060b35}.card__buttom{box-sizing:border-box;margin-top:16px;background-color:#00acdc;font-size:14px;line-height:16px;width:166px;height:40px;border-radius:5px;display:flex;justify-content:center;align-items:center;color:#fff;text-transform:uppercase}.card .card__star:nth-child(-n+4){background-image:url(/src/images/star-active.svg);transition:transform .3s ease}.card__buttom:hover{box-sizing:border-box;background-color:#fff;color:#00acdc;border-radius:5px;border:1px solid #00acdc}


The 'opacity' property for '.card__image' should be a value between 0 and 1, not '0px'. Use 'opacity: 0;' if you want the image to be fully transparent.

mateacademy-ai-mentor · 2025-01-17T17:00:15Z

src/styles/index.min.css

@@ -0,0 +1,2 @@
+body{margin:0;font-family:Roboto,sans-serif}.card{box-sizing:border-box;width:200px;height:408px;display:flex;flex-direction:column;align-items:center}.card__image{margin-top:32px;box-sizing:border-box;background-image:url(/src/images/imac.jpeg);background-size:cover;width:160px;height:134px;opacity:0px}.card__info{box-sizing:border-box;display:flex;flex-direction:column;margin-left:17px;margin-right:17px}.card__name{margin-top:40px;font-size:12px;font-weight:500;line-height:18px;text-align:left;color:#000}.card__code{font-size:10px;font-weight:400;line-height:14px;text-align:left;color:#616070;margin-top:4px}.card__rating{margin-top:16px;display:flex;justify-content:space-between}.card__stars{display:flex;flex-direction:row;justify-content:space-between}.card__star{box-sizing:border-box;width:16px;height:16px;background-image:url(/src/images/star.svg);background-repeat:no-repeat;background-size:cover;display:flex;flex-direction:row;margin-right:4px}.card__reviews{font-size:10px;font-weight:400;line-height:14px;text-align:right}.card__price{margin-top:24px;display:flex;flex-direction:row;justify-content:space-between}.card__priceText{font-size:12px;font-weight:400;line-height:18px;color:#616070}.card__priceValue{font-size:16px;font-weight:700;line-height:18px;color:#060b35}.card__buttom{box-sizing:border-box;margin-top:16px;background-color:#00acdc;font-size:14px;line-height:16px;width:166px;height:40px;border-radius:5px;display:flex;justify-content:center;align-items:center;color:#fff;text-transform:uppercase}.card .card__star:nth-child(-n+4){background-image:url(/src/images/star-active.svg);transition:transform .3s ease}.card__buttom:hover{box-sizing:border-box;background-color:#fff;color:#00acdc;border-radius:5px;border:1px solid #00acdc}


There is a typo in the class name 'card__buttom'. It should be 'card__button' to match the HTML and ensure styles are applied correctly.

mateacademy-ai-mentor · 2025-01-17T17:00:15Z

src/styles/index.min.css

@@ -0,0 +1,2 @@
+body{margin:0;font-family:Roboto,sans-serif}.card{box-sizing:border-box;width:200px;height:408px;display:flex;flex-direction:column;align-items:center}.card__image{margin-top:32px;box-sizing:border-box;background-image:url(/src/images/imac.jpeg);background-size:cover;width:160px;height:134px;opacity:0px}.card__info{box-sizing:border-box;display:flex;flex-direction:column;margin-left:17px;margin-right:17px}.card__name{margin-top:40px;font-size:12px;font-weight:500;line-height:18px;text-align:left;color:#000}.card__code{font-size:10px;font-weight:400;line-height:14px;text-align:left;color:#616070;margin-top:4px}.card__rating{margin-top:16px;display:flex;justify-content:space-between}.card__stars{display:flex;flex-direction:row;justify-content:space-between}.card__star{box-sizing:border-box;width:16px;height:16px;background-image:url(/src/images/star.svg);background-repeat:no-repeat;background-size:cover;display:flex;flex-direction:row;margin-right:4px}.card__reviews{font-size:10px;font-weight:400;line-height:14px;text-align:right}.card__price{margin-top:24px;display:flex;flex-direction:row;justify-content:space-between}.card__priceText{font-size:12px;font-weight:400;line-height:18px;color:#616070}.card__priceValue{font-size:16px;font-weight:700;line-height:18px;color:#060b35}.card__buttom{box-sizing:border-box;margin-top:16px;background-color:#00acdc;font-size:14px;line-height:16px;width:166px;height:40px;border-radius:5px;display:flex;justify-content:center;align-items:center;color:#fff;text-transform:uppercase}.card .card__star:nth-child(-n+4){background-image:url(/src/images/star-active.svg);transition:transform .3s ease}.card__buttom:hover{box-sizing:border-box;background-color:#fff;color:#00acdc;border-radius:5px;border:1px solid #00acdc}


The hover selector '.card__buttom:hover' contains a typo. It should be '.card__button:hover' to match the corrected class name.

mateacademy-ai-mentor · 2025-01-17T17:00:15Z

src/styles/index.scss

+  background-size: cover;
+  width: 160px;
+  height: 134px;
+  opacity: 0px;


The 'opacity' property should be a value between 0 and 1, not '0px'. If you want the image to be fully transparent, use 'opacity: 0;'.

mateacademy-ai-mentor · 2025-01-17T17:00:15Z

src/styles/index.scss

+  color: #060B35;
+}
+
+.card__buttom {


There is a typo in the class name 'card__buttom'. It should be 'card__button' to match the HTML and ensure styles are applied correctly.

mateacademy-ai-mentor · 2025-01-17T17:00:15Z

src/styles/index.scss

+  transition: transform 0.3s ease;
+}
+
+.card__buttom:hover {


The hover selector '.card__buttom:hover' contains a typo. It should be '.card__button:hover' to match the corrected class name.

mateacademy-ai-mentor

Great job on addressing some of the issues from the previous review! 🎉 While there are still a few critical points to address, such as implementing SCSS variables and nesting, and correcting the background-image URLs to be relative, your progress is commendable. Remember to remove unnecessary files and links to streamline your project. Keep up the good work, and use the feedback to enhance your skills further. Your dedication to improving your code is evident, and I'm confident you'll tackle these issues effectively. Happy coding! 🚀

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

mateacademy-ai-mentor · 2025-01-17T17:10:06Z

src/index.html

@@ -7,12 +8,41 @@
      content="width=device-width, initial-scale=1.0"
    />
    <title>Product cards</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
    <link
      rel="stylesheet"
      href="./styles/index.scss"


Linking to the SCSS file directly in HTML is unnecessary if you are already linking to the compiled CSS file. The Parcel bundler should handle the SCSS compilation, so you can remove this line to avoid redundancy.

mateacademy-ai-mentor · 2025-01-17T17:10:06Z

src/styles/index.css

+.card__image {
+  margin-top: 32px;
+  box-sizing: border-box;
+  background-image: url(/src/images/imac.jpeg);


The background-image URL should be relative to the CSS file location. Consider changing it to ../images/imac.jpeg to ensure it works correctly when deployed.

mateacademy-ai-mentor · 2025-01-17T17:10:06Z

src/styles/index.css

+  box-sizing: border-box;
+  width: 16px;
+  height: 16px;
+  background-image: url(/src/images/star.svg);


The background-image URL for the star should also be relative. Change it to ../images/star.svg to ensure proper loading.

mateacademy-ai-mentor · 2025-01-17T17:10:07Z

src/styles/index.css

+}
+
+.card .card__star:nth-child(-n+4) {
+  background-image: url(/src/images/star-active.svg);


Similarly, update the background-image URL for the active star to ../images/star-active.svg to maintain consistency and ensure the image loads correctly.

mateacademy-ai-mentor · 2025-01-17T17:10:07Z

src/styles/index.min.css

@@ -0,0 +1,2 @@
+body{margin:0;font-family:Roboto,sans-serif}.card{box-sizing:border-box;width:200px;height:408px;display:flex;flex-direction:column;align-items:center}.card__image{margin-top:32px;box-sizing:border-box;background-image:url(/src/images/imac.jpeg);background-size:cover;width:160px;height:134px}.card__info{box-sizing:border-box;display:flex;flex-direction:column;margin-left:17px;margin-right:17px}.card__name{margin-top:40px;font-size:12px;font-weight:500;line-height:18px;text-align:left;color:#000}.card__code{font-size:10px;font-weight:400;line-height:14px;text-align:left;color:#616070;margin-top:4px}.card__rating{margin-top:16px;display:flex;justify-content:space-between}.card__stars{display:flex;flex-direction:row;justify-content:space-between}.card__star{box-sizing:border-box;width:16px;height:16px;background-image:url(/src/images/star.svg);background-repeat:no-repeat;background-size:cover;display:flex;flex-direction:row;margin-right:4px}.card__reviews{font-size:10px;font-weight:400;line-height:14px;text-align:right}.card__price{margin-top:24px;display:flex;flex-direction:row;justify-content:space-between}.card__priceText{font-size:12px;font-weight:400;line-height:18px;color:#616070}.card__priceValue{font-size:16px;font-weight:700;line-height:18px;color:#060b35}.card__button{box-sizing:border-box;margin-top:16px;background-color:#00acdc;font-size:14px;line-height:16px;width:166px;height:40px;border-radius:5px;display:flex;justify-content:center;align-items:center;color:#fff;text-transform:uppercase}.card .card__star:nth-child(-n+4){background-image:url(/src/images/star-active.svg);transition:transform .3s ease}.card__button:hover{box-sizing:border-box;background-color:#fff;color:#00acdc;border-radius:5px;border:1px solid #00acdc}


The background-image URLs should be relative. Update /src/images/imac.jpeg, /src/images/star.svg, and /src/images/star-active.svg to ../images/imac.jpeg, ../images/star.svg, and ../images/star-active.svg respectively to ensure they load correctly.

mateacademy-ai-mentor · 2025-01-17T17:10:07Z

src/styles/index.scss

+.card__image {
+  margin-top: 32px;
+  box-sizing: border-box;
+  background-image: url(/src/images/imac.jpeg);


The background-image URL should be relative to the SCSS file location. Change it to ../images/imac.jpeg to ensure it works correctly when deployed.

mateacademy-ai-mentor · 2025-01-17T17:10:07Z

src/styles/index.scss

+  box-sizing: border-box;
+  width: 16px;
+  height: 16px;
+  background-image: url(/src/images/star.svg);


The background-image URL for the star should also be relative. Change it to ../images/star.svg to ensure proper loading.

mateacademy-ai-mentor · 2025-01-17T17:10:07Z

src/styles/index.scss

+}
+
+.card .card__star:nth-child(-n+4) {
+  background-image: url(/src/images/star-active.svg);


Similarly, update the background-image URL for the active star to ../images/star-active.svg to maintain consistency and ensure the image loads correctly.

mateacademy-ai-mentor · 2025-01-17T17:10:07Z

src/styles/index.scss

+  box-sizing: border-box;
+  background-image: url(/src/images/imac.jpeg);
+  background-size: cover;
+  width: 160px;
+  height: 134px;
+}
+
+.card__info {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  margin-left: 17px;
+  margin-right: 17px;
+}
+
+.card__name {
+  margin-top: 40px;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 18px;
+  text-align: left;
+  color: #000000;
+}
+
+.card__code {
+  font-size: 10px;
+  font-weight: 400;
+  line-height: 14px;
+  text-align: left;
+  color: #616070;
+  margin-top: 4px;
+}
+
+.card__rating {
+  margin-top: 16px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.card__stars {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.card__star {
+  box-sizing: border-box;
+  width: 16px;
+  height: 16px;
+  background-image: url(/src/images/star.svg);
+  background-repeat: no-repeat;
+  background-size: cover;
+  display: flex;
+  flex-direction: row;
+  margin-right: 4px;
+}
+
+.card__reviews {
+  font-size: 10px;
+  font-weight: 400;
+  line-height: 14px;
+  text-align: right;
+}
+
+.card__price {
+  margin-top: 24px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.card__priceText {
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 18px;
+  color: #616070;
+}
+
+.card__priceValue {
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 18px;
+  color: #060B35;
+}
+
+.card__button {
+  box-sizing: border-box;
+  margin-top: 16px;
+  background-color: #00ACDC;
+  font-size: 14px;
+  line-height: 16px;
+  width: 166px;
+  height: 40px;
+  border-radius: 5px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #FFFFFF;
+  text-transform: uppercase;
+}


Consider using SCSS variables for repeated values like colors, font sizes, and dimensions. This will make your code more maintainable and easier to update.

mateacademy-ai-mentor · 2025-01-17T17:10:07Z

src/styles/index.scss

+  box-sizing: border-box;
+  background-image: url(/src/images/imac.jpeg);
+  background-size: cover;
+  width: 160px;
+  height: 134px;
+}
+
+.card__info {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  margin-left: 17px;
+  margin-right: 17px;
+}
+
+.card__name {
+  margin-top: 40px;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 18px;
+  text-align: left;
+  color: #000000;
+}
+
+.card__code {
+  font-size: 10px;
+  font-weight: 400;
+  line-height: 14px;
+  text-align: left;
+  color: #616070;
+  margin-top: 4px;
+}
+
+.card__rating {
+  margin-top: 16px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.card__stars {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.card__star {
+  box-sizing: border-box;
+  width: 16px;
+  height: 16px;
+  background-image: url(/src/images/star.svg);
+  background-repeat: no-repeat;
+  background-size: cover;
+  display: flex;
+  flex-direction: row;
+  margin-right: 4px;
+}
+
+.card__reviews {
+  font-size: 10px;
+  font-weight: 400;
+  line-height: 14px;
+  text-align: right;
+}
+
+.card__price {
+  margin-top: 24px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.card__priceText {
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 18px;
+  color: #616070;
+}
+
+.card__priceValue {
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 18px;
+  color: #060B35;
+}
+
+.card__button {
+  box-sizing: border-box;
+  margin-top: 16px;
+  background-color: #00ACDC;
+  font-size: 14px;
+  line-height: 16px;
+  width: 166px;
+  height: 40px;
+  border-radius: 5px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #FFFFFF;
+  text-transform: uppercase;
+}


Implement SCSS nesting to better organize your styles. For example, nest the styles for .card__image, .card__info, etc., inside the .card block.

vadiimvooo

Seems like you forgot to deploy your solution. Please feel free to ask for help in fe_chat

add tast solution

58b65f8

mateacademy-ai-mentor suggested changes Jan 17, 2025

View reviewed changes

add second task solution

dc312db

serhii-lesik requested a review from mateacademy-ai-mentor January 17, 2025 17:08

mateacademy-ai-mentor approved these changes Jan 17, 2025

View reviewed changes

add third task solution

ca64c2b

serhii-lesik requested a review from mateacademy-ai-mentor January 17, 2025 17:22

vadiimvooo suggested changes Jan 17, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

add tast solution #5192

add tast solution #5192

serhii-lesik commented Jan 17, 2025

mateacademy-ai-mentor left a comment

mateacademy-ai-mentor Jan 17, 2025

mateacademy-ai-mentor Jan 17, 2025

mateacademy-ai-mentor Jan 17, 2025

mateacademy-ai-mentor Jan 17, 2025

mateacademy-ai-mentor Jan 17, 2025

mateacademy-ai-mentor Jan 17, 2025

mateacademy-ai-mentor Jan 17, 2025

mateacademy-ai-mentor Jan 17, 2025

mateacademy-ai-mentor Jan 17, 2025

mateacademy-ai-mentor Jan 17, 2025

mateacademy-ai-mentor left a comment

mateacademy-ai-mentor Jan 17, 2025

mateacademy-ai-mentor Jan 17, 2025

mateacademy-ai-mentor Jan 17, 2025

mateacademy-ai-mentor Jan 17, 2025

mateacademy-ai-mentor Jan 17, 2025

mateacademy-ai-mentor Jan 17, 2025

mateacademy-ai-mentor Jan 17, 2025

mateacademy-ai-mentor Jan 17, 2025

mateacademy-ai-mentor Jan 17, 2025

mateacademy-ai-mentor Jan 17, 2025

vadiimvooo left a comment

		@@ -0,0 +1,2 @@
		body{margin:0;font-family:Roboto,sans-serif}.card{box-sizing:border-box;width:200px;height:408px;display:flex;flex-direction:column;align-items:center}.card__image{margin-top:32px;box-sizing:border-box;background-image:url(/src/images/imac.jpeg);background-size:cover;width:160px;height:134px;opacity:0px}.card__info{box-sizing:border-box;display:flex;flex-direction:column;margin-left:17px;margin-right:17px}.card__name{margin-top:40px;font-size:12px;font-weight:500;line-height:18px;text-align:left;color:#000}.card__code{font-size:10px;font-weight:400;line-height:14px;text-align:left;color:#616070;margin-top:4px}.card__rating{margin-top:16px;display:flex;justify-content:space-between}.card__stars{display:flex;flex-direction:row;justify-content:space-between}.card__star{box-sizing:border-box;width:16px;height:16px;background-image:url(/src/images/star.svg);background-repeat:no-repeat;background-size:cover;display:flex;flex-direction:row;margin-right:4px}.card__reviews{font-size:10px;font-weight:400;line-height:14px;text-align:right}.card__price{margin-top:24px;display:flex;flex-direction:row;justify-content:space-between}.card__priceText{font-size:12px;font-weight:400;line-height:18px;color:#616070}.card__priceValue{font-size:16px;font-weight:700;line-height:18px;color:#060b35}.card__buttom{box-sizing:border-box;margin-top:16px;background-color:#00acdc;font-size:14px;line-height:16px;width:166px;height:40px;border-radius:5px;display:flex;justify-content:center;align-items:center;color:#fff;text-transform:uppercase}.card .card__star:nth-child(-n+4){background-image:url(/src/images/star-active.svg);transition:transform .3s ease}.card__buttom:hover{box-sizing:border-box;background-color:#fff;color:#00acdc;border-radius:5px;border:1px solid #00acdc}

add tast solution #5192

Are you sure you want to change the base?

add tast solution #5192

Conversation

serhii-lesik commented Jan 17, 2025

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

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

vadiimvooo left a comment

Choose a reason for hiding this comment