-
Notifications
You must be signed in to change notification settings - Fork 4.4k
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
commit message #5064
base: master
Are you sure you want to change the base?
commit message #5064
Changes from 1 commit
0656e94
e57cf48
9797b74
88a0b87
deba70b
74a58e1
34329b6
3a7e256
6ba1826
6f7904a
1323daf
3da2b27
009cdcb
808f677
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 |
---|---|---|
@@ -0,0 +1,29 @@ | ||
name: Test | ||
|
||
on: | ||
pull_request: | ||
branches: [ master ] | ||
|
||
jobs: | ||
build: | ||
|
||
runs-on: ubuntu-latest | ||
|
||
strategy: | ||
matrix: | ||
node-version: [20.x] | ||
|
||
steps: | ||
- uses: actions/checkout@v2 | ||
- name: Use Node.js ${{ matrix.node-version }} | ||
uses: actions/setup-node@v1 | ||
with: | ||
node-version: ${{ matrix.node-version }} | ||
- run: npm install | ||
- run: npm test | ||
- name: Upload HTML report(backstop data) | ||
if: ${{ always() }} | ||
uses: actions/upload-artifact@v2 | ||
with: | ||
name: report | ||
path: backstop_data |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -2,17 +2,99 @@ | |
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8" /> | ||
<meta | ||
name="viewport" | ||
content="width=device-width, initial-scale=1.0" | ||
/> | ||
<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" | ||
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" | ||
/> | ||
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. Ensure that the SCSS file for the |
||
</head> | ||
<body> | ||
<h1>Product cards</h1> | ||
<div class="card" data-qa="card"> | ||
<div class="card__image"> | ||
<img src="images/imac.jpeg" alt="Monitor"> | ||
</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. There is an extra closing |
||
<div class="card__content"> | ||
<h1 class="card__title">APPLE A1419 iMac 27" Retina <br> | ||
5K Monoblock (MNED2UA/A) | ||
</h1> | ||
<h2 class="card__product"> Product code: 195434</h2> | ||
<div class="card__rating-wrapper" | ||
role="radiogroup" | ||
aria-label="Star rating"> | ||
|
||
<a href="#" class="card__star card__star--5" | ||
aria-label="5 stars" | ||
data-value="5"> | ||
<svg xmlns="http://www.w3.org/2000/svg" width="13" | ||
height="12" fill="none" | ||
viewBox="0 0 13 12"> | ||
<path fill="#E5E5E5" | ||
d="M5.792.356a.515.515 0 0 1 .98 0l1.13 3.477a.515.515 0 0 0 .49.356h3.656c.499 0 .707.639.303.932l-2.958 2.15a.515.515 0 0 0-.187.575l1.13 3.477a.515.515 0 0 1-.793.576L6.585 9.75a.515.515 0 0 0-.606 0L3.022 11.9a.515.515 0 0 1-.793-.577l1.13-3.477a.515.515 0 0 0-.188-.576L.213 5.121a.515.515 0 0 1 .303-.932h3.656a.515.515 0 0 0 .49-.356L5.792.356z" /> | ||
</svg> | ||
|
||
</a> | ||
<a href="#" class="card__star card__star--4" | ||
aria-label="4 stars" | ||
data-value="4"> | ||
<svg xmlns="http://www.w3.org/2000/svg" width="13" | ||
height="12" fill="none" | ||
viewBox="0 0 13 12"> | ||
<path fill="#E5E5E5" | ||
d="M5.792.356a.515.515 0 0 1 .98 0l1.13 3.477a.515.515 0 0 0 .49.356h3.656c.499 0 .707.639.303.932l-2.958 2.15a.515.515 0 0 0-.187.575l1.13 3.477a.515.515 0 0 1-.793.576L6.585 9.75a.515.515 0 0 0-.606 0L3.022 11.9a.515.515 0 0 1-.793-.577l1.13-3.477a.515.515 0 0 0-.188-.576L.213 5.121a.515.515 0 0 1 .303-.932h3.656a.515.515 0 0 0 .49-.356L5.792.356z" /> | ||
</svg> | ||
</a> | ||
<a href="#" class="card__star card__star--3" | ||
aria-label="3 stars" | ||
data-value="3"> | ||
<svg xmlns="http://www.w3.org/2000/svg" width="13" | ||
height="12" fill="none" | ||
viewBox="0 0 13 12"> | ||
<path fill="#E5E5E5" | ||
d="M5.792.356a.515.515 0 0 1 .98 0l1.13 3.477a.515.515 0 0 0 .49.356h3.656c.499 0 .707.639.303.932l-2.958 2.15a.515.515 0 0 0-.187.575l1.13 3.477a.515.515 0 0 1-.793.576L6.585 9.75a.515.515 0 0 0-.606 0L3.022 11.9a.515.515 0 0 1-.793-.577l1.13-3.477a.515.515 0 0 0-.188-.576L.213 5.121a.515.515 0 0 1 .303-.932h3.656a.515.515 0 0 0 .49-.356L5.792.356z" /> | ||
</svg> | ||
</a> | ||
<a href="#" class="card__star card__star--2" | ||
aria-label="2 stars" | ||
data-value="2"> | ||
<svg xmlns="http://www.w3.org/2000/svg" width="13" | ||
height="12" fill="none" | ||
viewBox="0 0 13 12"> | ||
<path fill="#E5E5E5" | ||
d="M5.792.356a.515.515 0 0 1 .98 0l1.13 3.477a.515.515 0 0 0 .49.356h3.656c.499 0 .707.639.303.932l-2.958 2.15a.515.515 0 0 0-.187.575l1.13 3.477a.515.515 0 0 1-.793.576L6.585 9.75a.515.515 0 0 0-.606 0L3.022 11.9a.515.515 0 0 1-.793-.577l1.13-3.477a.515.515 0 0 0-.188-.576L.213 5.121a.515.515 0 0 1 .303-.932h3.656a.515.515 0 0 0 .49-.356L5.792.356z" /> | ||
</svg> | ||
</a> | ||
<a href="#" class="card__star card__star--1" | ||
aria-label="1 stars" | ||
data-value="1"> | ||
<svg xmlns="http://www.w3.org/2000/svg" width="13" | ||
height="12" fill="none" | ||
viewBox="0 0 13 12"> | ||
<path fill="#E5E5E5" | ||
d="M5.792.356a.515.515 0 0 1 .98 0l1.13 3.477a.515.515 0 0 0 .49.356h3.656c.499 0 .707.639.303.932l-2.958 2.15a.515.515 0 0 0-.187.575l1.13 3.477a.515.515 0 0 1-.793.576L6.585 9.75a.515.515 0 0 0-.606 0L3.022 11.9a.515.515 0 0 1-.793-.577l1.13-3.477a.515.515 0 0 0-.188-.576L.213 5.121a.515.515 0 0 1 .303-.932h3.656a.515.515 0 0 0 .49-.356L5.792.356z" /> | ||
</svg> | ||
</a> | ||
<h3 class="card__reviews">Reviews: 5</h3> | ||
</div> | ||
|
||
<h3 class="card__price">Price: $2.199</h3> | ||
</div> | ||
<div class="card__actions"> | ||
<button type="submit" class="card__button" | ||
data-qa="hover"> | ||
BUY | ||
</button> | ||
</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. There is an extra closing |
||
</body> | ||
</html> |
Original file line number | Diff line number | Diff line change | ||
---|---|---|---|---|
@@ -1,3 +1,111 @@ | ||||
body { | ||||
margin: 0; | ||||
font-family: Roboto, sans-serif; | ||||
text-align: left; | ||||
color: #060B35; | ||||
} | ||||
|
||||
.card { | ||||
border: 1px solid #F3F3F3; | ||||
border-radius: 5px; | ||||
width: 198px; | ||||
height: 406px; | ||||
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 need to write fixed height for the card
Suggested change
|
||||
position: relative; | ||||
background-color: #fff; | ||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); | ||||
text-align: center; | ||||
} | ||||
|
||||
.card__image { | ||||
background-image: url('../images/imac.jpeg'); | ||||
background-size: cover; | ||||
background-position: center; | ||||
width: 160px; | ||||
position: absolute; | ||||
height: 134px; | ||||
top: 33px; | ||||
left: 20px; | ||||
} | ||||
|
||||
.card__content { | ||||
padding: 20px 15px; | ||||
} | ||||
|
||||
.card__title { | ||||
font-size: 12px; | ||||
font-weight: 500; | ||||
line-height: 1.5; | ||||
margin: 0 0 8px; | ||||
color: #060B35; | ||||
} | ||||
.card__product { | ||||
font-size: 10px; | ||||
font-weight: 400; | ||||
color:#060B35; | ||||
} | ||||
|
||||
.card__rating-wrapper { | ||||
display: flex; | ||||
justify-content: center; | ||||
gap: 5px; | ||||
margin: 12px 0; | ||||
} | ||||
|
||||
.card__star svg { | ||||
fill: #e5e5e5; | ||||
cursor: pointer; | ||||
} | ||||
|
||||
.card__star:hover svg, | ||||
.card__star:hover~.card__star svg { | ||||
background-color: #FFDE6A; | ||||
stroke-width: 0; | ||||
} | ||||
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. The |
||||
|
||||
.card__reviews { | ||||
font-size: 10px; | ||||
font-weight: 400; | ||||
color: #fff; | ||||
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. The color for |
||||
} | ||||
|
||||
.card__price { | ||||
font-size: 14px; | ||||
font-weight: 700; | ||||
margin: 12px 0; | ||||
color: #060B35; | ||||
} | ||||
|
||||
.card__actions { | ||||
position: absolute; | ||||
bottom: 20px; | ||||
width: 100%; | ||||
text-align: center; | ||||
} | ||||
|
||||
.card__button { | ||||
background-color: #00ACDC; | ||||
color: #fff; | ||||
font-weight: 700; | ||||
padding: 10px 20px; | ||||
border: none; | ||||
border-radius: 4px; | ||||
cursor: pointer; | ||||
text-transform: uppercase; | ||||
font-size: 12px; | ||||
} | ||||
|
||||
.card__button:hover { | ||||
background-color: #fff; | ||||
color: #00ACDC; | ||||
border: 1px solid #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
crossorigin
attribute should be part of the<link>
tag on line 9. It should be written as<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous">
.