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.

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

develop #4861

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

develop #4861

Show file tree
Hide file tree
Changes from all commits
Commits
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
6 changes: 3 additions & 3 deletions readme.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Product cards

Create a pages 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 pages 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 @@ -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://Daniil-102.github.io/layout_product-cards/)
- [TEST REPORT LINK](https://Daniil-102.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
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"
/>
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap"
rel="stylesheet"
/>

<link
rel="stylesheet"
href="./styles/index.scss"

Choose a reason for hiding this comment

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

The href attribute is linking to a SCSS file. HTML files should link to CSS files instead. Please compile your SCSS to CSS and link to the resulting CSS file.

/>
</head>
<body>
<h1>Product cards</h1>
<div
class="card"
data-qa="card"
>
<img
class="card__img"
src="./images/imac.jpeg"
alt=" APPLE A1419 iMac"
/>
<h2 class="card__description">
APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
</h2>

<p class="card__code">Product code: 195434</p>
<div class="card__stars">
<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__reviews">Reviews: 5</p>
</div>
<div class="card__cost">
<p class="card__price">Price:</p>
<p class="card__total">$2,199</p>
</div>

<button
data-qa="hover"
class="card__button"
>
Buy
</button>
</div>
</body>
</html>
71 changes: 71 additions & 0 deletions src/styles/blocks/card.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
.card {
border: 1px solid $color-gray;
width: 200px;
padding: 32px 16px 16px;

&__description {
color: $text-main-color;
font-size: 12px;
font-weight: 500;
line-height: 18px;
margin-bottom: 4px;
}
&__code {
color: $text-secondary-color;
font-size: 10px;
line-height: 14px;
}

&__reviews {
color: $text-main-color;
font-size: 10px;
line-height: 14px;
}

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

&__img {
display: block;
width: 160px;
height: 134px;
margin: 0 auto 40px;
}

&__cost {
display: flex;
justify-content: space-between;
margin-bottom: 16px;
}
&__price {
color: $text-secondary-color;
font-size: 12px;
line-height: 18px;
}
&__total {
color: $text-main-color;
line-height: 18px;
font-weight: 700;
}

&__button {
height: 40px;
width: 100%;
border-radius: 5px;
font-size: 14px;
background-color: #00acdc;
color: #fff;
box-sizing: border-box;
border: 1px solid #00acdc;

Choose a reason for hiding this comment

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

You have a variable for this color, don't forget to use it


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

Choose a reason for hiding this comment

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

The color value for the hover state is using a variable ($color-blue-accent), which is good for consistency. However, ensure that this variable is defined in your variables file. If it's not, this could lead to unexpected results.

background-color: $color-white;

Choose a reason for hiding this comment

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

The background-color value for the hover state is using a variable ($color-white), which is good for consistency. However, ensure that this variable is defined in your variables file. If it's not, this could lead to unexpected results.

}
}
}
41 changes: 41 additions & 0 deletions src/styles/blocks/stars.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions src/styles/blocks/stars.css.map

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

24 changes: 24 additions & 0 deletions src/styles/blocks/stars.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
.stars {
display: flex;

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

&__star:first-child {
margin-left: 0;
}

@for $i from 0 through 5 {
&--#{$i} {
.stars__star:nth-child(-n + #{$i}) {
background-image: url('../images/star-active.svg');
}
}
}
}
131 changes: 131 additions & 0 deletions src/styles/index.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions src/styles/index.css.map

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

16 changes: 15 additions & 1 deletion src/styles/index.scss
Original file line number Diff line number Diff line change
@@ -1,3 +1,17 @@
body {
@import '../utils/variables';
@import './reset.css';
@import './blocks/card';

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, we should use SCSS files as imports. So, you should convert your reset.css file to SCSS format and import it as a SCSS file.

@import './blocks/stars';

html {
font-family: Roboto, sans-serif;
font-weight: 400;
}

p {
margin: 0;
}

* {
box-sizing: border-box;
}
Loading
Loading