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

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

add solution #5066

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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://DmytroHakh.github.io/layout_product-cards/)
- [TEST REPORT LINK](https://DmytroHakh.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
54 changes: 53 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,64 @@
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=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 stylesheet link is pointing to a SCSS file (index.scss). Browsers cannot directly interpret SCSS files; they need to be compiled into CSS first. Ensure that index.scss is compiled to index.css, and update the href attribute to point to the compiled CSS file.

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

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

<div class="card__revs">
<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>

<p class="card__revs-text">Reviews: 5</p>
</div>

<div class="price card__price">
<p class="price__title">Price:</p>

<h2 class="price__cost">$2,199</h2>
</div>

<a
class="card__buy-button"
href="#"
data-qa="hover"
>
Buy
</a>
</div>
</body>
</html>
8 changes: 8 additions & 0 deletions src/styles/blocks/body.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
body {
margin: 0;

font-family: Roboto, sans-serif;
font-weight: 400;
font-style: normal;
color: $main-color;
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-color is used for the color property. Ensure that this variable is defined elsewhere in your SCSS files. If it's not defined, you need to declare it with a valid color value before using it.

}
75 changes: 75 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,75 @@
.card {
box-sizing: border-box;
height: $card-height;
Copy link

Choose a reason for hiding this comment

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

The variable $card-height is used for the height property. Ensure that this variable is defined elsewhere in your SCSS files. If it's not defined, you need to declare it with a valid value before using it.

width: $card-width;
Copy link

Choose a reason for hiding this comment

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

The variable $card-width is used for the width property. Ensure that this variable is defined elsewhere in your SCSS files. If it's not defined, you need to declare it with a valid value before using it.

border: 1px solid $border-color;
Copy link

Choose a reason for hiding this comment

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

The variable $border-color is used for the border property. Ensure that this variable is defined elsewhere in your SCSS files. If it's not defined, you need to declare it with a valid color value before using it.

border-radius: 5px;
padding: 32px 16px 16px;

&__image {
display: block;
height: $image-height;
Copy link

Choose a reason for hiding this comment

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

The variable $image-height is used for the height property of the &__image class. Ensure that this variable is defined elsewhere in your SCSS files. If it's not defined, you need to declare it with a valid value before using it.

width: $image-width;
Copy link

Choose a reason for hiding this comment

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

The variable $image-width is used for the width property of the &__image class. Ensure that this variable is defined elsewhere in your SCSS files. If it's not defined, you need to declare it with a valid value before using it.

margin: 0 3px 40px;
}

&__title {
margin-top: 0;
font-size: 12px;
font-weight: 500;
line-height: 18px;
color: $main-color;
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-color is used for the color property of the &__title class. Ensure that this variable is defined elsewhere in your SCSS files. If it's not defined, you need to declare it with a valid color value before using it.

margin-bottom: 4px;
}

&__code {
margin-top: 0;
font-size: 10px;
line-height: 14px;
color: $secondary-color;
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-color is used for the color property of the &__code class. Ensure that this variable is defined elsewhere in your SCSS files. If it's not defined, you need to declare it with a valid color value before using it.

margin-bottom: 16px;
}

&__revs {
display: flex;
justify-content: space-between;
align-items: center;
height: 16px;
margin-bottom: 24px;
}

&__revs-text {
font-size: 10px;
line-height: 16px;
font-weight: 400;
}

&__price {
margin-bottom: 16px;
}

&__buy-button {
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
height: 40px;
width: 166px;
margin-bottom: 16px;
border-radius: 5px;
background-color: #00acdc;
font-weight: 700;
font-size: 14px;
line-height: 16px;
text-transform: uppercase;
color: #fff;
text-decoration: none;

&:hover {
box-sizing: border-box;
border: 1px solid #00acdc;
background-color: #fff;
color: #00acdc;
}
}
}
19 changes: 19 additions & 0 deletions src/styles/blocks/price.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
.price {
display: flex;
align-items: center;
flex-direction: row;
justify-content: space-between;
height: 18px;
line-height: 18px;

&__title {
font-size: 12px;
color: $secondary-color;
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-color is used for the color property of the &__title class. Ensure that this variable is defined elsewhere in your SCSS files. If it's not defined, you need to declare it with a valid color value before using it.

}

&__cost {
font-size: 16px;
font-weight: 700;
color: $main-color;
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-color is used for the color property of the &__cost class. Ensure that this variable is defined elsewhere in your SCSS files. If it's not defined, you need to declare it with a valid color value before using it.

}
}
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 {
background-image: url(../images/star.svg);
background-position: center;
background-repeat: no-repeat;
width: 16px;
height: 16px;
margin-right: 4px;
}

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

&--4 &__star:nth-child(-n + 4) {
background-image: url(../images/star-active.svg);
}
}
8 changes: 5 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,5 @@
body {
margin: 0;
}
@import './utilities/variables';
@import './blocks/body';
@import './blocks/card';
@import './blocks/stars';
@import './blocks/price';
8 changes: 8 additions & 0 deletions src/styles/utilities/variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
$card-height: 408px;
$card-width: 200px;
$image-height: 134px;
$image-width: 160px;
$main-color: #060b35;
$secondary-color: #616070;
$border-color: #f3f3f3;
$button-color: #00acdc;
Loading