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

Jump to bottom

Develop #4815

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

Develop #4815

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
54d38ab
add task solution
taniavozniuk Oct 5, 2024
e3c1ea3
add task solution
taniavozniuk Oct 5, 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 @@ -20,8 +20,8 @@ Create a pages with product card using `flexbox`, `BEM` and `SCSS` based on [thi

❗️ Replace `<your_account>` with your Github username and copy the links to `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://taniavozniuk.github.io/layout_product-cards/)
- [TEST REPORT LINK](https://taniavozniuk.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
53 changes: 52 additions & 1 deletion src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,63 @@
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"
/>
Comment on lines +10 to +17
Copy link

Choose a reason for hiding this comment

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

According to the Code Style Rules ❗️, you should combine the preconnect link tags into one. You can specify multiple href attributes separated by a comma.

<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="./styles/index.scss"
Copy link

Choose a reason for hiding this comment

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

The href attribute should point to a .css file, not a .scss file. Ensure that the SCSS files are being compiled to CSS and that the compiled CSS file is correctly linked in the href attribute.

/>
</head>
<body>
<h1>Product cards</h1>
<header class="header">
<div
class="card"
data-qa="card"
>
<a
href="#"
class="images"
></a>
Comment on lines +35 to +36
Copy link

Choose a reason for hiding this comment

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

Empty links are not allowed. If this is supposed to be an image container, you should include an img tag inside the a tag with the appropriate src and alt attributes.

<h3 class="card__title">
APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
</h3>
<p class="card__sudtitle">Product code: 195434</p>
Copy link

Choose a reason for hiding this comment

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

There is a typo in the class name card__sudtitle. It should be card__subtitle to follow proper English spelling and to be consistent with BEM naming conventions.


<div class="stars-container">
<div class="stars stars--0">
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
</div>
<p class="stars-container__reviews">Reviews: 5</p>
</div>

<div class="card__price-container">
<p class="card__price-label">Price:</p>
<p class="card__money">$2,199</p>
</div>
<div>
<a
href="#"
class="card__buy-button"
data-qa="hover"
>
BUY
</a>
</div>
</div>
</header>
</body>
</html>
71 changes: 71 additions & 0 deletions src/styles/card.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
.card {
width: 200px;
border: 1px solid white;
Copy link

Choose a reason for hiding this comment

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

According to the Code Style Rules, the border color should be consistent with the design. If white is not the color used in the design, consider using the appropriate color variable or hex code.

box-sizing: border-box;
background-color: #fff;
border-radius: 5px;
padding: 32px 16px 16px;

&__title {
margin: 40px 0 0;
font-weight: 500;
font-size: 12px;
line-height: 18px;
color: #060b35;
}

&__sudtitle {
margin: 4px 0 0;
padding-top: 0;
font-weight: 400;
line-height: 14px;
color: #616070;
font-size: 10px;
}
Comment on lines +17 to +24
Copy link

Choose a reason for hiding this comment

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

It appears there is a typo in the BEM element name &__sudtitle. It should be &__subtitle to follow the proper naming convention and maintain consistency.


&__price-container {
margin-top: 24px;
display: flex;
align-items: center;
justify-content: space-between;
}

&__price-label {
margin: 0;
color: #616070;
font-size: 12px;
line-height: 18px;
}

&__money {
margin: 0;
font-weight: 700;
font-size: 16px;
line-height: 18px;
color: #060b35;
}

&__buy-button {
margin: 16px 0 0;
background-color: #00acdc;
position: relative;
width: 166px;
height: 40px;
border-radius: 5px;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-weight: 700;
font-size: 14px;
line-height: 16px;
text-decoration: none;
box-sizing: border-box;
&:hover {
background: #fff;
color: #00acdc;
border: 1px solid #00acdc;
Comment on lines +48 to +68
Copy link

Choose a reason for hiding this comment

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

Ensure that the hover state for the &__buy-button is consistent with the design requirements. If the design specifies different colors or styles, they should be implemented accordingly. Additionally, when changing background-color on hover, it's better to transition the color change for a smoother visual effect. Consider adding transition: background-color 0.3s; to the &__buy-button block.

}
}
}
9 changes: 9 additions & 0 deletions src/styles/image.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
.images {
background-image: url(../images/imac.jpeg);
Copy link

Choose a reason for hiding this comment

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

According to the Code Style Rules ❗️, for SCSS files, it is recommended to use variables for colors, fonts, and other static values. Consider storing image paths as variables at the top of your SCSS files for easier maintenance and reusability.

background-repeat: no-repeat;
background-size: cover;
display: block;
width: 160px;
Copy link

Choose a reason for hiding this comment

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

this style looks redundant

height: 134px;
margin: 0 3px;
}
Comment on lines +1 to +9
Copy link

Choose a reason for hiding this comment

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

The class name .images suggests that it can be applied to multiple elements, but the styles within are very specific to a single image. Consider renaming the class to more accurately reflect its purpose, such as .product-image or .card-image, to improve readability and maintainability of the code.

8 changes: 7 additions & 1 deletion src/styles/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,9 @@
body {
@import '../styles/card';
@import '../styles/image';
@import '../styles/starts';

Copy link

Choose a reason for hiding this comment

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

According to the Code Style Rules, when importing several files, each import statement should be on a new line and should not have a file extension. The import statements here are correctly placed on separate lines, but the file extensions are missing. Please add '.scss' to the end of each import path.

html {
margin: 0;
padding: 0;
font-family: Roboto, Arial, sans-serif;
}
32 changes: 32 additions & 0 deletions src/styles/starts.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
.stars {
display: flex;

&__star {
width: 16px;
height: 16px;
background-image: url(../images/star.svg);
background-position: center;
margin-right: 4px;
background-repeat: no-repeat;
}

&-container {
display: flex;
justify-content: space-between;
margin-top: 16px;
align-items: center;
}

&-container__reviews {
font-weight: 400;
font-size: 10px;
margin: 2px 0 0;
color: #060b35;
}

&--0 {
.stars__star:nth-child(-n + 4) {
background-image: url(../images/star-active.svg); /* Active star image */
}
Comment on lines +27 to +30
Copy link

Choose a reason for hiding this comment

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

The BEM modifier stars--0 seems to be misnamed. According to the checklist, modifiers should represent different states or versions of a block or an element. However, stars--0 implies it is for zero stars, which doesn't make sense as this code is setting the star-active image for the first four stars. Ensure that the modifier name and the associated style rules accurately represent the intended design and functionality.

}
}
Loading