-
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 #4875
add task solution #4875
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,18 +1,85 @@ | ||
<!doctype html> | ||
<html lang="en"> | ||
<html | ||
lang="en" | ||
class="page" | ||
> | ||
<head> | ||
<meta charset="UTF-8" /> | ||
<meta | ||
name="viewport" | ||
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" | ||
/> | ||
</head> | ||
<body> | ||
<h1>Product cards</h1> | ||
<body class="page__budy"> | ||
<div | ||
class="card" | ||
data-qa="card" | ||
> | ||
<img | ||
src="/src/images/imac.jpeg" | ||
alt="prodact img" | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. There is a typo in the alt attribute. It should be 'product img' instead of 'prodact img'. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
||
class="card__image" | ||
/> | ||
<div class="card__product-title"> | ||
<h2 class="card__title"> | ||
APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) | ||
</h2> | ||
|
||
<h3 class="card__code">Product code: 195434</h3> | ||
</div> | ||
|
||
<div class="card__product-code"></div> | ||
|
||
<div class="card__reviews"> | ||
<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> | ||
|
||
<div> | ||
<span class="card__reviw">Reviews: 5</span> | ||
</div> | ||
</div> | ||
|
||
<div class="card__price"> | ||
<span class="card__price-text">Price:</span> | ||
<span class="card__price-value">$2,199</span> | ||
</div> | ||
|
||
<div> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This div looks redundant |
||
<a | ||
href="#" | ||
class="card__button" | ||
data-qa="hover" | ||
> | ||
Buy | ||
</a> | ||
</div> | ||
<section></section> | ||
</div> | ||
</body> | ||
</html> |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,89 @@ | ||
.card { | ||
width: 200px; | ||
|
||
@include flex('', ''); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Why do you path two empty strings to flex mixin? It looks strange |
||
|
||
flex-direction: column; | ||
border: 1px solid $card-border-color; | ||
border-radius: 5px; | ||
background-color: $card-bg-color; | ||
|
||
&__image { | ||
margin: 32px 19px 40px; | ||
width: 160px; | ||
height: 134px; | ||
} | ||
|
||
&__product-title { | ||
margin: 0 16px; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. You should set padding to the card instead, so it would be easier to control. |
||
padding: 0; | ||
} | ||
|
||
&__title { | ||
@include flex(center, ''); | ||
@include font(12px, 500, 18px); | ||
|
||
margin: 0; | ||
padding: 0; | ||
} | ||
|
||
&__code { | ||
@include font(10px, 400, 14px); | ||
|
||
color: $text-secondary-color; | ||
margin-top: 4px; | ||
margin-bottom: 0; | ||
} | ||
|
||
&__reviews { | ||
@include flex(center, space-between); | ||
|
||
height: 16px; | ||
margin: 16px 16px 0; | ||
} | ||
|
||
&__reviw { | ||
@include font(10px, 400, 14px); | ||
|
||
display: flex; | ||
} | ||
|
||
&__price { | ||
@include flex('center', space-between); | ||
|
||
margin: 24px 16px 0; | ||
} | ||
|
||
&__price-text { | ||
@include font(12px, 400, 18px); | ||
|
||
color: $text-secondary-color; | ||
} | ||
|
||
&__price-value { | ||
@include font(16px, 700, 18px); | ||
|
||
color: $text-main-color; | ||
} | ||
|
||
&__button { | ||
@include flex(center, ''); | ||
@include font(14px, 700, 16px); | ||
|
||
width: 166px; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Don't hardcode width, it should fit all space |
||
height: 40px; | ||
margin: 16px; | ||
padding: 12px 70px 12px 69px; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. If would be more text in the button it wouldn't fit |
||
border-radius: 5px; | ||
border: 1px solid $button-border-color; | ||
background-color: $button-bg-color; | ||
text-transform: uppercase; | ||
text-decoration: none; | ||
color: $text-white-color; | ||
|
||
&:hover { | ||
background-color: $text-white-color; | ||
color: $button-bg-color; | ||
} | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
* { | ||
box-sizing: border-box; | ||
} | ||
|
||
.page { | ||
&__budy { | ||
margin: 0; | ||
padding: 0; | ||
font-family: Roboto, sans-serif; | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
.stars { | ||
@include flex(center, ''); | ||
|
||
&__star { | ||
width: 16px; | ||
height: 16px; | ||
background-position: center; | ||
background-repeat: no-repeat; | ||
background-image: url(/src/images/star.svg); | ||
} | ||
|
||
&__star:not(:last-child) { | ||
margin-right: 4px; | ||
} | ||
|
||
&.stars--4 .stars__star:nth-child(-n + 4) { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. It should be the same as in the stars task, if the modifier is |
||
background-image: url(/src/images/star-active.svg); | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,5 @@ | ||
body { | ||
margin: 0; | ||
} | ||
@import './utils/variable'; | ||
@import './utils/mixin'; | ||
@import './blocks/page'; | ||
@import './blocks/card'; | ||
@import './blocks/stars'; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
@mixin flex($align, $justify) { | ||
display: flex; | ||
align-items: $align; | ||
justify-content: $justify; | ||
} | ||
|
||
@mixin font($size, $weight: 400, $height: normal, $style: normal) { | ||
font-size: $size; | ||
line-height: $height; | ||
font-weight: $weight; | ||
font-style: $style; | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
$text-main-color: #060b35; | ||
$text-secondary-color: #616070; | ||
$text-white-color: #fff; | ||
$card-bg-color: #fff; | ||
$button-bg-color: #00acdc; | ||
$card-border-color: #f3f3f3; | ||
$button-border-color: #00acdc; |
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This and variables files are duplicated |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
@mixin flex($align, $justify) { | ||
display: flex; | ||
align-items: $align; | ||
justify-content: $justify; | ||
} | ||
|
||
@mixin font($size, $weight: 400, $height: normal, $style: normal) { | ||
font-size: $size; | ||
line-height: $height; | ||
font-weight: $weight; | ||
font-style: $style; | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
$text-main-color: #060b35; | ||
$text-secondary-color: #616070; | ||
$text-white-color: #fff; | ||
$card-bg-color: #fff; | ||
$button-bg-color: #00acdc; | ||
$card-border-color: #f3f3f3; | ||
$button-border-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.
The stylesheet link should point to a CSS file, not an SCSS file. SCSS files need to be compiled to CSS before they can be linked in HTML.