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

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

add task solution #5069

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
f7f657e
add task solution
Dec 15, 2024
d7d9d40
try fix
Dec 15, 2024
97ef753
fix product image
Dec 16, 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
8 changes: 4 additions & 4 deletions readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Product cards

Create a page with product card using `flexbox`, `BEM` and `SCSS` based on [this mockup](https://www.figma.com/file/ojkArVazq7vsX0nbpn9CxZ/Moyo-%2F-Catalog-(ENG)?node-id=11325%3A2287&mode=dev).
Create a page with product card using `flexbox`, `BEM` and `SCSS` based on [this mockup](<https://www.figma.com/file/ojkArVazq7vsX0nbpn9CxZ/Moyo-%2F-Catalog-(ENG)?node-id=11325%3A2287&mode=dev>).

> Here are the [Layout Tasks Instructions](https://mate-academy.github.io/layout_task-guideline)

Expand All @@ -16,15 +16,15 @@ Create a page with product card using `flexbox`, `BEM` and `SCSS` based on [this
- Rewrite the `stars` block from the [Stars task](https://github.com/mate-academy/layout_stars) with SCSS and use it
- Find the required font on [google fonts](https://fonts.google.com/) and use.

*Important note*: In this task, you are allowed to link `*.scss` files directly in HTML `<link>` tags using `href` attribute.
_Important note_: In this task, you are allowed to link `*.scss` files directly in HTML `<link>` tags using `href` attribute.
This is possible because [we use the Parcel library](https://en.parceljs.org/scss.html) to bundle your solution's source code.

## Checklist

❗️ 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://maks-сhervyakov.github.io/layout_product-cards/)
- [TEST REPORT LINK](https://maks-сhervyakov.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
50 changes: 49 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,60 @@
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;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="./styles/index.scss"
Comment on lines 23 to 25
Copy link

Choose a reason for hiding this comment

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

The HTML file is linking to an SCSS file (index.scss). Browsers cannot interpret SCSS directly. You need to compile your SCSS into CSS and link the resulting CSS file here.

/>
Comment on lines 23 to 26
Copy link

Choose a reason for hiding this comment

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

The stylesheet link is pointing to an SCSS file (index.scss). Browsers cannot directly interpret SCSS files. You should compile the SCSS file to a CSS file and link to the resulting CSS file instead.

</head>
<body>
<h1>Product cards</h1>
<div
class="card"
data-qa="card"
>
<div class="card__image"></div>
Copy link

Choose a reason for hiding this comment

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

Use img tag to display card image instead of doing it with background property

Copy link
Author

Choose a reason for hiding this comment

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

fixed

<p class="card__title">
APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
</p>
<div class="card__code">
<span>Product code:</span>
<span>195434</span>
</div>

<div class="card__rating">
<div class="stars stars--4">
<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>
<div class="card__rating-reviews">Reviews: 5</div>
</div>

<div class="card__price">
<span>Price:</span>
<strong>$2,199</strong>
</div>
<a
href="#"
class="card__button"
data-qa="hover"
>
Buy
</a>
</div>
</body>
</html>
84 changes: 84 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,84 @@
.card {
font-family: Roboto, sans-serif;
box-sizing: border-box;
padding: 32px 16px 16px;
background: $white;
Copy link

Choose a reason for hiding this comment

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

The variable $white is used here. Ensure that it is defined in your SCSS files or imported from another file.

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 SCSS variable $white is defined in your variables.scss file or imported correctly. This is crucial for maintaining styling consistency.

border: 1px solid $gray-elements;
Copy link

Choose a reason for hiding this comment

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

The variable $gray-elements is used here. Ensure that it is defined in your SCSS files or imported from another file.

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 SCSS variable $gray-elements is defined in your variables.scss file or imported correctly. This is crucial for maintaining styling consistency.

border-radius: 5px;
max-width: 200px;
&__image {
width: 100%;
height: 134px;
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.

Verify that the image imac.jpeg exists in the ../images/ directory and that the path is correct in your SCSS file.

background-position: center;
background-size: cover;
margin: 0 auto 40px;
}
&__title {
font-weight: 500;
font-size: 12px;
line-height: 18px;
color: $main-accent;
Copy link

Choose a reason for hiding this comment

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

The variable $main-accent is used here. Ensure that it is defined in your SCSS files or imported from another file.

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 SCSS variable $main-accent is defined in your variables.scss file or imported correctly. This is crucial for maintaining styling consistency.

margin-bottom: 4px;
}
&__code {
font-weight: 400;
font-size: 10px;
line-height: 1.4;
color: $secondary;
Copy link

Choose a reason for hiding this comment

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

The variable $secondary is used here. Ensure that it is defined in your SCSS files or imported from another file.

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 SCSS variable $secondary is defined in your variables.scss file or imported correctly. This is crucial for maintaining styling consistency.

}
&__rating {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-items: center;
margin-top: 16px;
margin-bottom: 24px;
&-reviews {
font-size: 10px;
line-height: 14px;
color: $main-accent;
Copy link

Choose a reason for hiding this comment

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

The variable $main-accent is used here. Ensure that it is defined in your SCSS files or imported from another file.

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 SCSS variable $main-accent is defined in your variables.scss file or imported correctly. This is crucial for maintaining styling consistency.

font-weight: 400;
text-align: right;
}
}
&__price {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-items: center;
font-weight: 400;
font-size: 12px;
color: $secondary;
Copy link

Choose a reason for hiding this comment

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

The variable $secondary is used here. Ensure that it is defined in your SCSS files or imported from another file.

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 SCSS variable $secondary is defined in your variables.scss file or imported correctly. This is crucial for maintaining styling consistency.

strong {
font-weight: 700;
font-size: 16px;
line-height: 1.13;
color: $main-accent;
Copy link

Choose a reason for hiding this comment

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

The variable $main-accent is used here. Ensure that it is defined in your SCSS files or imported from another file.

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 SCSS variable $main-accent is defined in your variables.scss file or imported correctly. This is crucial for maintaining styling consistency.

}

margin-bottom: 16px;
}
&__button {
box-sizing: border-box;
border-radius: 5px;
background: $blue-accent;
Copy link

Choose a reason for hiding this comment

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

The variable $blue-accent is used here. Ensure that it is defined in your SCSS files or imported from another file.

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 SCSS variable $blue-accent is defined in your variables.scss file or imported correctly. This is crucial for maintaining styling consistency.

width: 166px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
text-transform: uppercase;
text-decoration: none;
font-weight: 700;
font-size: 14px;
line-height: 16px;
color: $white;
Copy link

Choose a reason for hiding this comment

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

The variable $white is used here. Ensure that it is defined in your SCSS files or imported from another file.

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 SCSS variable $white is defined in your variables.scss file or imported correctly. This is crucial for maintaining styling consistency.

transition: 0.2s ease-in-out;
border: 1px solid $blue-accent;
Copy link

Choose a reason for hiding this comment

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

The variable $blue-accent is used here. Ensure that it is defined in your SCSS files or imported from another file.

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 SCSS variable $blue-accent is defined in your variables.scss file or imported correctly. This is crucial for maintaining styling consistency.

&:hover {
color: $blue-accent;
Copy link

Choose a reason for hiding this comment

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

The variable $blue-accent is used here. Ensure that it is defined in your SCSS files or imported from another file.

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 SCSS variable $blue-accent is defined in your variables.scss file or imported correctly. This is crucial for maintaining styling consistency.

background: $white;
Copy link

Choose a reason for hiding this comment

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

The variable $white is used here. Ensure that it is defined in your SCSS files or imported from another file.

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 SCSS variable $white is defined in your variables.scss file or imported correctly. This is crucial for maintaining styling consistency.

}
}
}
5 changes: 5 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,8 @@
body {
margin: 0;
padding: 0;
}

@import 'variables';
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 variables.scss file contains all the necessary variable definitions used in your SCSS files, such as $white, $gray-elements, $main-accent, $secondary, and $blue-accent.

@import 'card';
@import 'stars';
20 changes: 20 additions & 0 deletions src/styles/stars.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
.stars {
display: flex;
&__star {
width: 16px;
height: 16px;
background-position: center;
background-repeat: no-repeat;
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 star.svg image exists in the ../images/ directory and the path is correct.

Copy link

Choose a reason for hiding this comment

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

Verify that the image star.svg exists in the ../images/ directory and that the path is correct in your SCSS file.

margin-right: 4px;
&:last-child {
margin-right: 0;
}
}

@for $i from 1 through 5 {
&--#{$i} .stars__star:nth-child(-n + #{$i}) {
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 star-active.svg image exists in the ../images/ directory and the path is correct.

Copy link

Choose a reason for hiding this comment

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

Verify that the image star-active.svg exists in the ../images/ directory and that the path is correct in your SCSS file.

}
}
}
6 changes: 6 additions & 0 deletions src/styles/variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
$main-accent: #060b35;
$secondary: #616070;
$white: #fff;
$blue-accent: #00acdc;
$gray-elements: #f3f3f3;
$yellow-stars: #ffde6a;
Loading