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 solution #5057

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

add solution #5057

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
50934fd
add solution
diachkinainna Dec 12, 2024
309806c
fixed button
diachkinainna Dec 12, 2024
4d02567
fixed product-card__rating
diachkinainna Dec 12, 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
55 changes: 52 additions & 3 deletions src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
<!doctype html>
<html lang="en">
<html
lang="en"
class="page"
>
<head>
<meta charset="UTF-8" />
<meta
Expand All @@ -11,8 +14,54 @@
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 stylesheet link references an .scss file. Ensure that this file is compiled to a .css file and the link is updated accordingly, as browsers cannot directly interpret .scss files.

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 is pointing to an SCSS file (./styles/index.scss). Browsers cannot interpret SCSS files directly. You need to compile the SCSS file to a CSS file and update the href to point to the compiled CSS file.

/>
<link
rel="preconnect"
href="https://fonts.googleapis.com"
/>
<link
rel="preconnect"
href="https://fonts.gstatic.com"
crossorigin="none"
/>
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap"
rel="stylesheet"
/>
</head>
<body>
<h1>Product cards</h1>
<body class="page__body">
<div
class="product-card"
data-qa="card"
>
<img
class="product-card__image"
src="images/imac.jpeg"
alt="product photo"
/>
<h2 class="product-card__product-title">
APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
</h2>
<p class="product-card__product-code">Product code: 195434</p>
<div class="product-card__rating">
<div class="stars">
<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="reviews">Reviews: 5</p>
</div>
<div class="product-card__price">
<p class="product-card__price-name">Price:</p>
<p class="product-card__price-value">$2,199</p>
</div>
<button
data-qa="hover"
class="product-card__button-buy"
>
BUY
</button>
</div>
</body>
</html>
95 changes: 95 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,95 @@
.product-card {
box-sizing: border-box;
padding-inline: 16px;
width: 200px;
background-color: $main-background-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 variable $main-background-color is defined in your SCSS files. Otherwise, this will cause a compilation error.

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-background-color is used here but it is not defined in this file. Make sure it is defined in a variables file or within this file to avoid compilation errors.

display: flex;
flex-direction: column;
border-radius: 5px;
border: 1px solid rgba(243, 243, 243, 1);

&__image {
object-position: center;
margin-inline: 3px;
width: 160px;
height: 134px;
margin-top: 32px;
}

&__product-title {
margin-top: 40px;
margin-bottom: 0;
height: 36px;
font-size: 12px;
line-height: 18px;
text-align: left;
font-weight: 500;
color: $bold-font-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 variable $bold-font-color is defined in your SCSS files. Otherwise, this will cause a compilation error.

Copy link

Choose a reason for hiding this comment

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

The variable $bold-font-color is used here but it is not defined in this file. Ensure it is defined to prevent compilation errors.

}

&__product-code {
align-self: start;
margin-top: 4px;
margin-bottom: 0;
width: 98px;
height: 14px;
line-height: 14px;
color: $main-font-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 variable $main-font-color is defined in your SCSS files. Otherwise, this will cause a compilation error.

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-font-color is used here but it is not defined in this file. Make sure it is defined to avoid compilation errors.

}

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

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

&-name {
color: $main-font-color;
margin: 0;
width: 31px;
font-size: 12px;
line-height: 18px;
height: 18px;
}

&-value {
margin: 0;
line-height: 18px;
font-size: 16px;
font-weight: 700;
width: 50px;
}
}

&__button-buy {
height: 40px;
border: none;
background-color: $extra-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 variable $extra-color is defined in your SCSS files. Otherwise, this will cause a compilation error.

Copy link

Choose a reason for hiding this comment

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

The variable $extra-color is used here but it is not defined in this file. Ensure it is defined to prevent compilation errors.

color: rgba(255, 255, 255, 1);
font-size: 14px;
font-weight: 700;
border-radius: 5px;
margin-top: 16px;
margin-bottom: 16px;

&:hover {
border: 1px solid $extra-color;
background-color: $main-background-color;
color: $extra-color;
}
}
}

.reviews {
color: $bold-font-color;
line-height: 14px;
}
10 changes: 10 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,10 @@
.page {
font-family: Roboto, Arial, sans-serif;
font-weight: 400;
font-style: normal;
font-size: 10px;

&__body {
margin: 0;
}
}
20 changes: 20 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,20 @@
.stars {
display: flex;

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

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

.stars__star:nth-child(-n + 4) {
background-image: url(../images/star-active.svg);
}
7 changes: 4 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,4 @@
body {
margin: 0;
}
@import 'utils/variables';
@import 'blocks/page';
@import 'blocks/card';
@import 'blocks/stars';
4 changes: 4 additions & 0 deletions src/styles/utils/variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
$main-background-color: rgba(255, 255, 255, 1);
$extra-color: rgba(0, 172, 220, 1);
$main-font-color: rgba(97, 96, 112, 1);
$bold-font-color: rgba(6, 11, 53, 1);
Loading