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

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

add task solution #5087

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
b76e933
add task solution
Dec 19, 2024
9751f11
add changes
Dec 20, 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://Taipan-4ik.github.io/layout_product-cards/)
- [TEST REPORT LINK](https://Taipan-4ik.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
58 changes: 57 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,68 @@
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"
/>
<link
href="https://fonts.googleapis.com/css2?family=Poppins&family=Roboto:wght@400;500;700&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 SCSS file is linked correctly, which is acceptable as per the task requirements.

/>
</head>
<body>
<h1>Product cards</h1>
<div
class="card"
data-qa="card"
>
<div class="image">
<img
src="/src/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.

The image path should be relative to the HTML file. Consider changing the path from '/src/images/imac.jpeg' to '../images/imac.jpeg' to ensure the image loads correctly.

alt="apple_image"
class="image__display image__display--settings"
/>
</div>

<a
href="#"
class="card__product"
>
APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
</a>

<section class="card__code">Product code: 195434</section>

<div class="rating">
<div class="stars">
<div class="stars__star stars__star--active"></div>
<div class="stars__star stars__star--active"></div>
<div class="stars__star stars__star--active"></div>
<div class="stars__star stars__star--active"></div>
<div class="stars__star"></div>
</div>
<div class="rating__review">Reviews: 5</div>
</div>

<div class="cash">
<div class="cash__name cash__name--price">Price:</div>
<div class="cash__sum cash__sum--value-of-price">$2,199</div>
</div>

<a
href="#"
class="card__button"
data-qa="hover"
>
BUY
</a>
</div>
</body>
</html>
54 changes: 54 additions & 0 deletions src/styles/blocks/card.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
.card {
box-sizing: border-box;
position: relative;
text-align: justify;
width: 200px;
Copy link

Choose a reason for hiding this comment

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

The card width is correctly set to 200px, which includes the border. This aligns with the task requirements.

height: 407px;
border: 1px solid $grey-star-color;
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 color value for the border is defined as a variable in a separate file, as per the task requirements for maintainability.

border-radius: 5px;
}

.card__product {
display: block;
padding-inline: $standart-inline-pad;
padding-bottom: 4px;
font-weight: 500;
font-size: 12px;
line-height: 18px;
color: $standart-black-color;
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 color value is defined as a variable in a separate file, as per the task requirements for maintainability.

text-decoration: none;
}

.card__code {
display: flex;
justify-content: flex-start;
align-items: center;
padding-inline: $standart-inline-pad;
padding-bottom: 16px;
font-size: 10px;
font-weight: 400;
color: #616070;
Copy link

Choose a reason for hiding this comment

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

Consider defining this color value as a variable in a separate file to adhere to the task requirements for maintainability.

}

.card__button {
display: flex;
align-items: center;
justify-content: center;
margin-inline: 16px;
height: 40px;
border: 1px solid $grey-star-color;
border-radius: 5px;
font-weight: 700;
font-size: 14px;
text-decoration: none;
color: #fff;
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 color value is defined as a variable in a separate file, as per the task requirements for maintainability.

background-color: #00acdc;
Copy link

Choose a reason for hiding this comment

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

Consider defining this background color value as a variable in a separate file to adhere to the task requirements for maintainability.

cursor: pointer;
}

.card__button:hover {
background-color: #fff;
Copy link

Choose a reason for hiding this comment

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

Ensure that this color value is defined as a variable in a separate file, as per the task requirements for maintainability.

border: 1px solid #00acdc;
Copy link

Choose a reason for hiding this comment

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

Consider defining this border color value as a variable in a separate file to adhere to the task requirements for maintainability.

border-radius: 5px;
color: #00acdc;
Copy link

Choose a reason for hiding this comment

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

Ensure that this color value is defined as a variable in a separate file, as per the task requirements for maintainability.

}
20 changes: 20 additions & 0 deletions src/styles/blocks/cash.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
.cash {
display: flex;
height: 19px;
justify-content: space-between;
align-items: center;
padding-inline: $standart-inline-pad;
padding-bottom: 16px;
}

.cash__name--price {
font-weight: 400;
font-size: 12px;
color: #616070;
Copy link

Choose a reason for hiding this comment

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

Consider defining this color value as a variable in a separate file to adhere to the task requirements for maintainability.

}

.cash__sum--value-of-price {
font-weight: 700;
font-size: 16px;
color: $standart-black-color;
}
10 changes: 10 additions & 0 deletions src/styles/blocks/image.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
.image {
padding: 32px 19px 40px;
Copy link

Choose a reason for hiding this comment

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

Consider defining the padding values as variables in a separate file to adhere to the task requirements for maintainability.

display: flex;
justify-content: center;
}

.image__display--settings {
width: 160px;
Copy link

Choose a reason for hiding this comment

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

Consider defining the width value as a variable in a separate file to adhere to the task requirements for maintainability.

height: 134px;
Copy link

Choose a reason for hiding this comment

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

Consider defining the height value as a variable in a separate file to adhere to the task requirements for maintainability.

}
7 changes: 7 additions & 0 deletions src/styles/blocks/page.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
html {
font-family: Roboto, serif;
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 font family used here matches the task requirements. Consider defining the font family as a variable in a separate file for maintainability.

}

body {
margin: 0;
}
13 changes: 13 additions & 0 deletions src/styles/blocks/rating.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
.rating {
display: flex;
align-items: center;
justify-content: space-between;
padding-inline: $standart-inline-pad;
padding-bottom: 24px;
Copy link

Choose a reason for hiding this comment

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

Consider defining the padding-bottom value as a variable in a separate file to adhere to the task requirements for maintainability.

}

.rating__review {
font-size: 10px;
Copy link

Choose a reason for hiding this comment

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

Consider defining the font size as a variable in a separate file to adhere to the task requirements for maintainability.

font-weight: 400;
color: $standart-black-color;
}
21 changes: 21 additions & 0 deletions src/styles/blocks/stars.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
.stars {
display: flex;
}

.stars__star {
width: 16px;
height: 16px;
background-image: url(../images/star.svg);
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 path to the image is correct and relative to the SCSS file location. The current path '../images/star.svg' seems correct, but verify it aligns with your project structure.

color: $grey-star-color;
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 color value is defined as a variable in a separate file, as per the task requirements for maintainability.

background-position: center;
background-repeat: no-repeat;
}

.stars__star:not(:last-child) {
margin-right: 4px;
Copy link

Choose a reason for hiding this comment

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

Consider defining the margin-right value as a variable in a separate file to adhere to the task requirements for maintainability.

}

.stars__star--active {
background-image: url(../images/star-active.svg);
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 path to the active star image is correct and relative to the SCSS file location. The current path '../images/star-active.svg' seems correct, but verify it aligns with your project structure.

color: #ffde6a;
Copy link

Choose a reason for hiding this comment

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

Consider defining this color value as a variable in a separate file to adhere to the task requirements for maintainability.

}
3 changes: 3 additions & 0 deletions src/styles/blocks/variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
$grey-star-color: #f3f3f3;
Copy link

Choose a reason for hiding this comment

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

The variable for the grey star color is correctly defined. Ensure all color values used in your styles are defined here.

$standart-inline-pad: 16px;
Copy link

Choose a reason for hiding this comment

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

The variable for standard inline padding is correctly defined. Ensure all padding values used in your styles are defined here.

$standart-black-color: #060b35;
Copy link

Choose a reason for hiding this comment

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

The variable for standard black color is correctly defined. Ensure all color values used in your styles are defined here.

10 changes: 7 additions & 3 deletions src/styles/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
body {
margin: 0;
}
@import '/src/styles/blocks/variables';
@import '/src/styles/blocks/page';
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 import path for the variables file is correct and relative to the SCSS file location. The current path '/src/styles/blocks/variables' should be './blocks/variables' to align with the project structure.

@import '/src/styles/blocks/card';
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 import path for the page styles is correct and relative to the SCSS file location. The current path '/src/styles/blocks/page' should be './blocks/page' to align with the project structure.

@import '/src/styles/blocks/image';
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 import path for the card styles is correct and relative to the SCSS file location. The current path '/src/styles/blocks/card' should be './blocks/card' to align with the project structure.

@import '/src/styles/blocks/cash';
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 import path for the image styles is correct and relative to the SCSS file location. The current path '/src/styles/blocks/image' should be './blocks/image' to align with the project structure.

@import '/src/styles/blocks/rating';
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 import path for the cash styles is correct and relative to the SCSS file location. The current path '/src/styles/blocks/cash' should be './blocks/cash' to align with the project structure.

@import '/src/styles/blocks/stars';
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 import path for the rating styles is correct and relative to the SCSS file location. The current path '/src/styles/blocks/rating' should be './blocks/rating' to align with the project structure.

Loading