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

add solution #5075

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
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
4 changes: 2 additions & 2 deletions readme.md
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://KOliinyk.github.io/layout_product-cards/)
- [TEST REPORT LINK](https://KOliinyk.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
55 changes: 53 additions & 2 deletions src/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,63 @@
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="anonymous"
/>
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="./styles/index.scss"
Comment on lines 23 to 25

Choose a reason for hiding this comment

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

The href attribute for the stylesheet link points to a SCSS file (index.scss). Typically, browsers cannot directly interpret SCSS files. Ensure that this file is being compiled to CSS and that the correct CSS file is linked here.

/>
</head>
<body>
<h1>Product cards</h1>
<body class="body">
<article
class="card"
data-qa="card"
>
<img
class="card__image"
src="images/imac.jpeg"
alt="card"
/>
<h3 class="card__title">
APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
</h3>
<p class="card__info">Product code: 195434</p>
<div class="reviews">
<div class="stars stars--0">
<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="reviews__text">Reviews: 5</div>
</div>
<div class="price">
<div class="price__title">Price:</div>
<div class="price__number">$2,199</div>
</div>
<footer
class="footer"
data-qa="hover"
>
<a
class="footer__button"
href="#buy"
>
BUY
</a>
</footer>
</article>
</body>
</html>
131 changes: 130 additions & 1 deletion src/styles/index.scss
Original file line number Diff line number Diff line change
@@ -1,3 +1,132 @@
body {
html {
font-family: Roboto, sans-serif;
}

p,
h3 {
margin: 0;
padding: 0;
}

.body {
margin: 0;
padding: 0;

--white: #fff;
--blue: #00acdc;
}

.card {
width: 200px;
box-sizing: border-box;
padding: 32px 16px 16px;
border-radius: 5px;
border: 1px solid #f3f3f3;

&__title {
font-weight: 500;
font-size: 12px;
line-height: 18px;
margin-bottom: 4px;
}

&__info {
margin-top: 4px;
font-weight: 400;
font-size: 10px;
line-height: 14px;
display: flex;
}

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

.reviews {
min-width: 166px;
display: flex;
margin: 16px 0 24px;

&__text {
font-size: 10px;
font-weight: 400;
line-height: 16px;
display: flex;
justify-content: space-between;
padding-left: 17px;
}
}

.stars {
min-width: 60%;
line-height: 16px;
display: flex;
justify-content: space-between;

&__star {
width: 60%;
line-height: 16px;

Choose a reason for hiding this comment

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

The width of the .stars__star is set to 60%, which might cause layout issues if the parent container's width is not appropriately set. Consider setting a fixed width or ensuring the parent container's width is defined to avoid unexpected behavior.

background-image: url(../images/star.svg);
background-repeat: no-repeat;
}

&--0 &__star:nth-child(-n + 4) {
background-image: url(../images/star-active.svg);
background-repeat: no-repeat;
}
}

.price {
width: 166px;
line-height: 18px;
display: flex;
justify-content: space-between;
margin: 24px 0 16px;

&__title {
font-size: 12px;
font-weight: 400;
line-height: 18px;
justify-content: space-between;
}

&__number {
font-size: 16px;
font-weight: 700;
line-height: 18px;
}
}

.footer {
margin: 16px 0 0;
width: 166px;
height: 40px;
background: var(--blue);
border-radius: 5px;

&__button {
margin: 12px 70px;
width: 27px;

Choose a reason for hiding this comment

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

The margin for .footer__button is set to 12px 70px, which might not center the button as expected. Ensure that the button is properly aligned within the footer, especially if the footer's width changes.

line-height: 16px;
font-size: 14px;
font-weight: 700;
display: inline-block;
color: var(--white);
text-decoration: none;
}

&:hover {
background: var(--white);
border-radius: 5px;
border: 1px solid var(--blue);
}

&__button:hover {
color: var(--blue);
text-decoration: none;
}
}
Loading