Skip to content
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.

Sign up for GitHub

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 #5077

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

add task solution #5077

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f4ed095
add task solution
wiltonmartinsdev Dec 17, 2024
709f9e6
add task solution
wiltonmartinsdev Dec 19, 2024
43fe5ca
add task solution
wiltonmartinsdev Dec 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,8 @@ This is possible because [we use the Parcel library](https://en.parceljs.org/scs

❗️ Replace `<your_account>` with your GitHub username and copy the links to the `Pull Request` description:

- [DEMO LINK](https://<your_account>.github.io/layout_product-cards/)
- [TEST REPORT LINK](https://<your_account>.github.io/layout_product-cards/report/html_report/)
- [DEMO LINK](https://wiltonmartinsdev.github.io/layout_product-cards/)
- [TEST REPORT LINK](https://wiltonmartinsdev.github.io/layout_product-cards/report/html_report/)

❗️ Copy this `Checklist` to the `Pull Request` description after links, and put `- [x]` before each point after you checked it.

Expand Down
75 changes: 74 additions & 1 deletion src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,86 @@
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<link
rel="preconnect"
href="https://fonts.googleapis.com"
/>
<link
rel="preconnect"
href="https://fonts.gstatic.com"
crossorigin="anonymous"
/>
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;1,100;1,300;1,400;1,500;1,700&display=swap"
rel="stylesheet"
/>
<title>Product cards</title>
<link
rel="stylesheet"
href="./styles/index.scss"
/>
</head>
<body>
<h1>Product cards</h1>
<div
class="product-card"
data-qa="card"
>
<div class="product-card__image-container">
<img
src="./images/imac.jpeg"
alt="imac"
class="product-card__image"
/>
</div>
<h1 class="product-card__title">
APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
</h1>
<h2 class="product-card__code">Product code: 195434</h2>

<div class="product-card__reviews">
<svg
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What is this svg doing here?
You should have used the same code as for the Stars task done before. The stars should be added using css and work exactly as the previous task (you can literally copy-paste most of it)

class="product-card__stars"
width="96"
height="16"
viewBox="0 0 96 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7.52447 1.46352C7.67415 1.00287 8.32585 1.00287 8.47553 1.46352L9.68386 5.18236C9.75079 5.38837 9.94277 5.52785 10.1594 5.52785H14.0696C14.554 5.52785 14.7554 6.14766 14.3635 6.43236L11.2001 8.73073C11.0248 8.85805 10.9515 9.08373 11.0184 9.28975L12.2268 13.0086C12.3764 13.4692 11.8492 13.8523 11.4573 13.5676L8.29389 11.2692C8.11865 11.1419 7.88135 11.1419 7.70611 11.2692L4.54267 13.5676C4.15081 13.8523 3.62357 13.4692 3.77325 13.0086L4.98157 9.28975C5.04851 9.08373 4.97518 8.85805 4.79994 8.73073L1.6365 6.43236C1.24464 6.14766 1.44603 5.52785 1.93039 5.52785H5.84062C6.05723 5.52785 6.24921 5.38837 6.31614 5.18236L7.52447 1.46352Z"
fill="#FFDE6A"
/>
<path
d="M27.5245 1.46352C27.6742 1.00287 28.3259 1.00287 28.4755 1.46352L29.6839 5.18237C29.7508 5.38838 29.9428 5.52786 30.1594 5.52786H34.0696C34.554 5.52786 34.7554 6.14767 34.3635 6.43237L31.2001 8.73075C31.0248 8.85807 30.9515 9.08375 31.0184 9.28976L32.2268 13.0086C32.3765 13.4693 31.8492 13.8523 31.4574 13.5676L28.2939 11.2693C28.1187 11.1419 27.8814 11.1419 27.7061 11.2693L24.5427 13.5676C24.1508 13.8523 23.6236 13.4693 23.7733 13.0086L24.9816 9.28976C25.0485 9.08375 24.9752 8.85807 24.7999 8.73075L21.6365 6.43237C21.2446 6.14767 21.446 5.52786 21.9304 5.52786H25.8406C26.0572 5.52786 26.2492 5.38838 26.3162 5.18237L27.5245 1.46352Z"
fill="#FFDE6A"
/>
<path
d="M47.5245 1.46352C47.6742 1.00287 48.3259 1.00287 48.4755 1.46352L49.6839 5.18237C49.7508 5.38838 49.9428 5.52786 50.1594 5.52786H54.0696C54.554 5.52786 54.7554 6.14767 54.3635 6.43237L51.2001 8.73075C51.0248 8.85807 50.9515 9.08375 51.0184 9.28976L52.2268 13.0086C52.3765 13.4693 51.8492 13.8523 51.4574 13.5676L48.2939 11.2693C48.1187 11.1419 47.8814 11.1419 47.7061 11.2693L44.5427 13.5676C44.1508 13.8523 43.6236 13.4693 43.7733 13.0086L44.9816 9.28976C45.0485 9.08375 44.9752 8.85807 44.7999 8.73075L41.6365 6.43237C41.2446 6.14767 41.446 5.52786 41.9304 5.52786H45.8406C46.0572 5.52786 46.2492 5.38838 46.3162 5.18237L47.5245 1.46352Z"
fill="#FFDE6A"
/>
<path
d="M67.5245 1.46352C67.6742 1.00287 68.3259 1.00287 68.4756 1.46352L69.6839 5.18237C69.7509 5.38838 69.9429 5.52786 70.1595 5.52786H74.0697C74.5541 5.52786 74.7555 6.14767 74.3636 6.43237L71.2001 8.73075C71.0249 8.85807 70.9516 9.08375 71.0185 9.28976L72.2268 13.0086C72.3765 13.4693 71.8493 13.8523 71.4574 13.5676L68.294 11.2693C68.1187 11.1419 67.8814 11.1419 67.7062 11.2693L64.5427 13.5676C64.1509 13.8523 63.6236 13.4693 63.7733 13.0086L64.9816 9.28976C65.0486 9.08375 64.9753 8.85807 64.8 8.73075L61.6366 6.43237C61.2447 6.14767 61.4461 5.52786 61.9305 5.52786H65.8407C66.0573 5.52786 66.2493 5.38838 66.3162 5.18237L67.5245 1.46352Z"
fill="#FFDE6A"
/>
<path
d="M87.5246 1.46352C87.6743 1.00287 88.326 1.00287 88.4757 1.46352L89.684 5.18237C89.7509 5.38838 89.9429 5.52786 90.1595 5.52786H94.0698C94.5541 5.52786 94.7555 6.14767 94.3637 6.43237L91.2002 8.73075C91.025 8.85807 90.9516 9.08375 91.0186 9.28976L92.2269 13.0086C92.3766 13.4693 91.8493 13.8523 91.4575 13.5676L88.294 11.2693C88.1188 11.1419 87.8815 11.1419 87.7062 11.2693L84.5428 13.5676C84.1509 13.8523 83.6237 13.4693 83.7734 13.0086L84.9817 9.28976C85.0486 9.08375 84.9753 8.85807 84.8001 8.73075L81.6366 6.43237C81.2448 6.14767 81.4462 5.52786 81.9305 5.52786H85.8408C86.0574 5.52786 86.2493 5.38838 86.3163 5.18237L87.5246 1.46352Z"
fill="#E5E5E5"
/>
</svg>
<p class="product-card__reviews-text">Reviews: 5</p>
</div>

<div class="product-card__price">
<p class="product-card__price-label">Price:</p>
<p class="product-card__price-value">$2,199</p>
</div>
<button
type="button"
class="product-card__buy-button"
data-qa="hover"
>
BUY
</button>
</div>
</body>
</html>
121 changes: 121 additions & 0 deletions src/styles/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,124 @@
$main-accent-color: #060b35;
$secondary-color: #616070;
$blue-accent-color: #00acdc;

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Missing declare:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the tip, I'll make the adjustments

body {
margin: 0;

color: $main-accent-color;

font-family: Roboto, sans-serif;
font-size: 16px;
}

.product-card {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe the height of your card is wrong and it is causing most fails in the test

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you, i will make the adjustments.

width: 165px;

padding: 32px 16px 16px;

background-color: #fff;
color: $main-accent-color;

border: 1px solid #f3f3f3;
border-radius: 5px;

&__image-container {
display: flex;
justify-content: center;
width: 100%;
}

&__image {
width: 160px;
height: 134px;

margin-bottom: 30px;
}

&__title {
font-size: 12px;
font-weight: 500;
line-height: 18px;
text-align: left;

width: 166px;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We avoid using these broken numbers. If you saw a number like this in the design, it must certainly comes from another styling, like width: 100% or something like that

}

&__code {
color: $secondary-color;

font-size: 10px;
font-weight: 400;
line-height: 14px;
text-align: left;
}

&__reviews {
display: flex;
justify-content: space-between;
align-items: center;
}

&__price {
display: flex;
justify-content: space-between;
align-items: center;
}

&__star {
width: 20px;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't believe this is the right size.
And as I said before, you can use the code from Stars' task

height: 20px;
}

&__reviews-text {
font-size: 10px;

margin-left: 8px;
}

&__price-label {
font-size: 12px;
line-height: 18px;
font-weight: 400;

color: $secondary-color;
}

&__price-value {
font-size: 16px;
line-height: 18px;

font-weight: 700;

color: #000;
}

&__buy-button {
width: 100%;
height: 40px;

border-radius: 5px;
border: none;

background: var(--blue-accent-color, #00acdc);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The use of var(--blue-accent-color, #00acdc) is incorrect because the variable --blue-accent-color is not defined in the SCSS file. Instead, you should use the SCSS variable $blue-accent-color directly: background: $blue-accent-color;.

color: #fff;

margin-top: 8px;
padding: 8px 16px;

font-size: 14px;
line-height: 16px;
font-weight: 700;
text-decoration: none;
text-transform: uppercase;

cursor: pointer;

&:hover {
background-color: #fff;
color: $blue-accent-color;

border: 1px solid $blue-accent-color;
}
}
}
Loading