-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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 task solution #3951
add task solution #3951
Conversation
ogchy
commented
Jan 6, 2024
- DEMO LINK
- TEST REPORT LINK
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
check font-sizes, colors, intends through the project
src/index.html
Outdated
<div class="card__description"> | ||
<h2>APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)</h2> | ||
</div> | ||
|
||
<div class="card__product"> | ||
<h3>Product code: 195434</h3> | ||
</div> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
<div class="card__description"> | |
<h2>APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)</h2> | |
</div> | |
<div class="card__product"> | |
<h3>Product code: 195434</h3> | |
</div> | |
<h3 "card__title">APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)</h3> | |
<p class="card__product">Product code: 195434</p> |
src/index.html
Outdated
|
||
<div class="stars"> | ||
<div class="stars__raiting"> | ||
<img src=".//images/stars.png" alt="stars"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
src/index.html
Outdated
<div class="stars__reviews"> | ||
<h4>Reviews: 5</h4> | ||
</div> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
<div class="stars__reviews"> | |
<h4>Reviews: 5</h4> | |
</div> | |
<p class="card__reviews">Reviews: 5</p> |
src/styles/style.css
Outdated
.card { | ||
background-color: #fff; | ||
width: 200px; | ||
height: 408px; | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
add paddings, border for card
src/styles/style.css
Outdated
.card { | ||
background-color: #fff; | ||
width: 200px; | ||
height: 408px; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
height: 408px; |
src/styles/style.css
Outdated
width: 200px; | ||
height: 408px; | ||
padding: 20px; | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
} | |
border-radius: 5px; | |
border: 1px solid #F3F3F3; | |
} |
src/styles/style.css
Outdated
background-color: #fff; | ||
width: 200px; | ||
height: 408px; | ||
padding: 20px; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
padding: 20px; | |
padding: 32px 19px 16px; |
src/styles/style.css
Outdated
.card__image { | ||
width: 160px; | ||
height: 134px; | ||
margin: 32px 20px 40px; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
margin: 32px 20px 40px; | |
margin-left: 3px; |
src/styles/style.css
Outdated
color: #616070; | ||
} | ||
|
||
.stars { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
each BEM block should be in separate file
src/styles/style.css
Outdated
.stars--4 .stars__star:nth-child(-n+4) { | ||
background-image: url('/src/images/star-active.svg'); | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
reuse styles from previous task with stars
src/styles/style.css
Outdated
margin-left: auto; | ||
} | ||
|
||
.button { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
there should be just 2 BEM blocks card and stars so button should be an element of card BEM block
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
- Use nesting in the SCSS files
- As was told before, check all the fonts, font-sizes and coloures of the borders. Everything should be as in the Figma.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
can you check
https://ogchy.github.io/layout_product-cards/ can u check this? something wrong with npm test |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
src/index.html
Outdated
<div> | ||
<img | ||
src=".//images/imac.jpeg" | ||
alt="imac" | ||
class="card__image" | ||
> | ||
</div> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This div is redundant
<div> | |
<img | |
src=".//images/imac.jpeg" | |
alt="imac" | |
class="card__image" | |
> | |
</div> | |
<img | |
src=".//images/imac.jpeg" | |
alt="imac" | |
class="card__image" | |
> |
src/index.html
Outdated
<button class="card__button"> | ||
BUY | ||
</button> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
button is redundant here
<button class="card__button"> | |
BUY | |
</button> | |
BUY |
src/index.html
Outdated
<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> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
<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 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> |
src/index.html
Outdated
<p class="card__product">Product code: 195434</p> | ||
|
||
|
||
<div class="card__reviews"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
<p class="card__product">Product code: 195434</p> | |
<div class="card__reviews"> | |
<p class="card__product">Product code: 195434</p> | |
<div class="card__reviews"> |
src/styles/card.scss
Outdated
font-style: normal; | ||
font-weight: 400; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Default value, so you can just remove it everywhere
font-style: normal; | |
font-weight: 400; |
src/styles/card.scss
Outdated
} | ||
|
||
&__button:hover { | ||
color: #00ACDC; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Create a variable for repeated color