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.

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

commit message #5064

Open
wants to merge 14 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 1 commit
Commits
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
29 changes: 29 additions & 0 deletions .github/workflows/test.yml-template
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
name: Test

on:
pull_request:
branches: [ master ]

jobs:
build:

runs-on: ubuntu-latest

strategy:
matrix:
node-version: [20.x]

steps:
- uses: actions/checkout@v2
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v1
with:
node-version: ${{ matrix.node-version }}
- run: npm install
- run: npm test
- name: Upload HTML report(backstop data)
if: ${{ always() }}
uses: actions/upload-artifact@v2
with:
name: report
path: backstop_data
9 changes: 5 additions & 4 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
"@mate-academy/backstop-config": "latest",
"@mate-academy/bemlint": "latest",
"@mate-academy/linthtml-config": "latest",
"@mate-academy/scripts": "^1.8.6",
"@mate-academy/scripts": "^1.9.12",
"@mate-academy/stylelint-config": "latest",
"@parcel/transformer-sass": "^2.12.0",
"backstopjs": "6.3.23",
Expand Down
4 changes: 2 additions & 2 deletions readme.md
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://Humenyuk1991.github.io/layout_product-cards/)
- [TEST REPORT LINK](https://Humenyuk1991.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
Binary file added src/images/Group 1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/images/Price.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/images/Product code_ 195434.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/images/Rectangle 4.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/images/Stars.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
92 changes: 87 additions & 5 deletions src/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,99 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<meta name="viewport" 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="anonymous"
>

Choose a reason for hiding this comment

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

The crossorigin attribute should be part of the <link> tag on line 9. It should be written as <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous">.

<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap"
rel="stylesheet">
<link
rel="stylesheet"
href="./styles/index.scss"
/>

Choose a reason for hiding this comment

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

Ensure that the SCSS file for the stars block is created and linked correctly. This is a core requirement as per the task description.

</head>
<body>
<h1>Product cards</h1>
<div class="card" data-qa="card">
<div class="card__image">
<img src="images/imac.jpeg" alt="Monitor">
</div>
</div>

Choose a reason for hiding this comment

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

There is an extra closing div tag on line 26 that does not match any opening tag. This could cause rendering issues.

<div class="card__content">
<h1 class="card__title">APPLE A1419 iMac 27" Retina <br>
5K Monoblock (MNED2UA/A)
</h1>
<h2 class="card__product"> Product code: 195434</h2>
<div class="card__rating-wrapper"
role="radiogroup"
aria-label="Star rating">

<a href="#" class="card__star card__star--5"
aria-label="5 stars"
data-value="5">
<svg xmlns="http://www.w3.org/2000/svg" width="13"
height="12" fill="none"
viewBox="0 0 13 12">
<path fill="#E5E5E5"
d="M5.792.356a.515.515 0 0 1 .98 0l1.13 3.477a.515.515 0 0 0 .49.356h3.656c.499 0 .707.639.303.932l-2.958 2.15a.515.515 0 0 0-.187.575l1.13 3.477a.515.515 0 0 1-.793.576L6.585 9.75a.515.515 0 0 0-.606 0L3.022 11.9a.515.515 0 0 1-.793-.577l1.13-3.477a.515.515 0 0 0-.188-.576L.213 5.121a.515.515 0 0 1 .303-.932h3.656a.515.515 0 0 0 .49-.356L5.792.356z" />
</svg>

</a>
<a href="#" class="card__star card__star--4"
aria-label="4 stars"
data-value="4">
<svg xmlns="http://www.w3.org/2000/svg" width="13"
height="12" fill="none"
viewBox="0 0 13 12">
<path fill="#E5E5E5"
d="M5.792.356a.515.515 0 0 1 .98 0l1.13 3.477a.515.515 0 0 0 .49.356h3.656c.499 0 .707.639.303.932l-2.958 2.15a.515.515 0 0 0-.187.575l1.13 3.477a.515.515 0 0 1-.793.576L6.585 9.75a.515.515 0 0 0-.606 0L3.022 11.9a.515.515 0 0 1-.793-.577l1.13-3.477a.515.515 0 0 0-.188-.576L.213 5.121a.515.515 0 0 1 .303-.932h3.656a.515.515 0 0 0 .49-.356L5.792.356z" />
</svg>
</a>
<a href="#" class="card__star card__star--3"
aria-label="3 stars"
data-value="3">
<svg xmlns="http://www.w3.org/2000/svg" width="13"
height="12" fill="none"
viewBox="0 0 13 12">
<path fill="#E5E5E5"
d="M5.792.356a.515.515 0 0 1 .98 0l1.13 3.477a.515.515 0 0 0 .49.356h3.656c.499 0 .707.639.303.932l-2.958 2.15a.515.515 0 0 0-.187.575l1.13 3.477a.515.515 0 0 1-.793.576L6.585 9.75a.515.515 0 0 0-.606 0L3.022 11.9a.515.515 0 0 1-.793-.577l1.13-3.477a.515.515 0 0 0-.188-.576L.213 5.121a.515.515 0 0 1 .303-.932h3.656a.515.515 0 0 0 .49-.356L5.792.356z" />
</svg>
</a>
<a href="#" class="card__star card__star--2"
aria-label="2 stars"
data-value="2">
<svg xmlns="http://www.w3.org/2000/svg" width="13"
height="12" fill="none"
viewBox="0 0 13 12">
<path fill="#E5E5E5"
d="M5.792.356a.515.515 0 0 1 .98 0l1.13 3.477a.515.515 0 0 0 .49.356h3.656c.499 0 .707.639.303.932l-2.958 2.15a.515.515 0 0 0-.187.575l1.13 3.477a.515.515 0 0 1-.793.576L6.585 9.75a.515.515 0 0 0-.606 0L3.022 11.9a.515.515 0 0 1-.793-.577l1.13-3.477a.515.515 0 0 0-.188-.576L.213 5.121a.515.515 0 0 1 .303-.932h3.656a.515.515 0 0 0 .49-.356L5.792.356z" />
</svg>
</a>
<a href="#" class="card__star card__star--1"
aria-label="1 stars"
data-value="1">
<svg xmlns="http://www.w3.org/2000/svg" width="13"
height="12" fill="none"
viewBox="0 0 13 12">
<path fill="#E5E5E5"
d="M5.792.356a.515.515 0 0 1 .98 0l1.13 3.477a.515.515 0 0 0 .49.356h3.656c.499 0 .707.639.303.932l-2.958 2.15a.515.515 0 0 0-.187.575l1.13 3.477a.515.515 0 0 1-.793.576L6.585 9.75a.515.515 0 0 0-.606 0L3.022 11.9a.515.515 0 0 1-.793-.577l1.13-3.477a.515.515 0 0 0-.188-.576L.213 5.121a.515.515 0 0 1 .303-.932h3.656a.515.515 0 0 0 .49-.356L5.792.356z" />
</svg>
</a>
<h3 class="card__reviews">Reviews: 5</h3>
</div>

<h3 class="card__price">Price: $2.199</h3>
</div>
<div class="card__actions">
<button type="submit" class="card__button"
data-qa="hover">
BUY
</button>
</div>
</div>

Choose a reason for hiding this comment

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

There is an extra closing div tag on line 98 that does not match any opening tag. This could cause rendering issues.

</body>
</html>
108 changes: 108 additions & 0 deletions src/styles/index.scss
Original file line number Diff line number Diff line change
@@ -1,3 +1,111 @@
body {
margin: 0;
font-family: Roboto, sans-serif;
text-align: left;
color: #060B35;
}

.card {
border: 1px solid #F3F3F3;
border-radius: 5px;
width: 198px;
height: 406px;

Choose a reason for hiding this comment

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

Don't need to write fixed height for the card

Suggested change
height: 406px;

position: relative;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
text-align: center;
}

.card__image {
background-image: url('../images/imac.jpeg');
background-size: cover;
background-position: center;
width: 160px;
position: absolute;
height: 134px;
top: 33px;
left: 20px;
}

.card__content {
padding: 20px 15px;
}

.card__title {
font-size: 12px;
font-weight: 500;
line-height: 1.5;
margin: 0 0 8px;
color: #060B35;
}
.card__product {
font-size: 10px;
font-weight: 400;
color:#060B35;
}

.card__rating-wrapper {
display: flex;
justify-content: center;
gap: 5px;
margin: 12px 0;
}

.card__star svg {
fill: #e5e5e5;
cursor: pointer;
}

.card__star:hover svg,
.card__star:hover~.card__star svg {
background-color: #FFDE6A;
stroke-width: 0;
}

Choose a reason for hiding this comment

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

The background-color property is not applicable to SVG elements. You might want to use fill to change the color of the SVG on hover.


.card__reviews {
font-size: 10px;
font-weight: 400;
color: #fff;

Choose a reason for hiding this comment

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

The color for .card__reviews is set to white. Ensure that the background where this text appears is not white, or change the text color to ensure it is visible.

}

.card__price {
font-size: 14px;
font-weight: 700;
margin: 12px 0;
color: #060B35;
}

.card__actions {
position: absolute;
bottom: 20px;
width: 100%;
text-align: center;
}

.card__button {
background-color: #00ACDC;
color: #fff;
font-weight: 700;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
text-transform: uppercase;
font-size: 12px;
}

.card__button:hover {
background-color: #fff;
color: #00ACDC;
border: 1px solid #00ACDC;
}










Loading