Skip to content

Commit

Permalink
add interface
Browse files Browse the repository at this point in the history
  • Loading branch information
BTakhaiev committed Jan 8, 2025
1 parent 56dc17c commit 01cc1cf
Show file tree
Hide file tree
Showing 9 changed files with 326 additions and 6 deletions.
29 changes: 29 additions & 0 deletions .github/workflows/test.yml-template
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
9 changes: 5 additions & 4 deletions package-lock.json

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

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
"@mate-academy/backstop-config": "latest",
"@mate-academy/bemlint": "latest",
"@mate-academy/linthtml-config": "latest",
"@mate-academy/scripts": "^1.8.6",
"@mate-academy/scripts": "^1.9.12",
"@mate-academy/stylelint-config": "latest",
"@parcel/transformer-sass": "^2.12.0",
"backstopjs": "6.3.23",
Expand Down
96 changes: 95 additions & 1 deletion src/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,100 @@
</head>

<body>
<h1>Catalog</h1>
<div class="moyo-header">
<header class="header">
<a href="#">
<img
class="img"
src="images/logo.png"
alt="logo moyo"
/>
</a>
<nav class="nav">
<ul>
<li>
<a
class="is-active"
href="#"
>
apple
</a>
</li>
<li><a href="#">samsung</a></li>
<li><a href="#">smartphones</a></li>
<li>
<a
data-qa="hover"
href="#"
>
laptops & computers
</a>
</li>
<li><a href="#">gadgets</a></li>
<li><a href="#">tables</a></li>
<li><a href="#">photo</a></li>
<li><a href="#">video</a></li>
</ul>
</nav>
</header>
</div>
<div>
<div
class="card"
data-qa="card"
>
<div class="card__img">
<a
href="#"
class="card__img-img"
></a>
</div>

<h1 class="card__header">
APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
</h1>

<p class="card__product-code">Product code: 195434</p>

<div class="card__response">
<div class="card__response-starsLine stars">
<a
href="#"
class="stars__line"
></a>
<a
href="#"
class="stars__line"
></a>
<a
href="#"
class="stars__line"
></a>
<a
href="#"
class="stars__line"
></a>
<a
href="#"
class="stars__line"
></a>
</div>

<p class="card__response-reviews">Reviews: 5</p>
</div>

<div class="card__price">
<p class="card__price-price">Price:</p>
<p class="card__price-tag">$2,199</p>
</div>

<button
class="card__button"
data-qa="hover"
>
buy
</button>
</div>
</div>
</body>
</html>
104 changes: 104 additions & 0 deletions src/styles/blocks/card.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
body {
margin: 0;
font-family: Roboto, sans-serif;
font-weight: 400;
font-style: normal;
}

.card {
box-sizing: border-box;
width: 200px;
border: 1px solid #f3f3f3;
background-color: #fff;
display: flex;
flex-direction: column;
padding: $card-padding;

&__img {
padding: 0 3px;
&-img {
display: block;
background-image: url('../images/imac.jpeg');
background-size: cover;
height: 134px;
}
}

&__header {
font-size: $font-size-base;
line-height: 18px;
font-weight: 500;
color: $main-text-color;
margin: 0;
padding-top: 40px;
}

&__product-code {
font-size: 10px;
line-height: 14px;
font-weight: 400;
color: $second-text-color;
margin: 0;
padding-top: 4px;
}

&__response {
padding-top: 16px;
display: flex;
justify-content: space-between;

&-reviews {
font-size: 10px;
line-height: 14px;
font-weight: 400;
color: $main-text-color;
margin: 0;
text-align: center;
}
}

&__price {
display: flex;
justify-content: space-between;
padding-top: 24px;

&-price {
font-size: $font-size-base;
line-height: 18px;
font-weight: 400;
color: $second-text-color;
margin: 0;
}

&-tag {
font-size: 16px;
line-height: 18px;
font-weight: 700;
color: $main-text-color;
margin: 0;
}
}

&__button {
margin-top: 16px;
background-color: $main-button-color;
height: 40px;
padding: 0;
border: none;
border-radius: 5px;
width: 166px;

text-transform: uppercase;
font-size: $font-size-base;
line-height: 16px;
font-weight: 700;
color: #fff;
text-decoration: none;
}

&__button:active {
border: 1px solid $main-button-color;
background-color: #fff;
color: $main-button-color;
}
}
65 changes: 65 additions & 0 deletions src/styles/blocks/moyo-header.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
body {
margin: 0;
font-family: Roboto, sans-serif;
font-weight: 700;
font-style: normal;
}

.header {
display: flex;
width: 100%;
background-color: #fff;
justify-content: space-between;

.img {
display: block;
margin-left: 50px;
margin-top: 10px;
margin-bottom: 10px;
}
.nav {
margin-right: 50px;
display: flex;
align-items: center;
justify-content: center;
}
a {
text-decoration: none;
color: black;
}

ul {
display: flex;
font-size: 12px;
list-style: none;
text-transform: uppercase;
font-weight: bold;
}
li:not(:last-child) {
margin-right: 20px;
}
}

.blue {
color: #00acdc;
}

a:hover {
color: #00acdc;
}

.is-active {
color: #00acdc;
position: relative;
}

.is-active::after {
content: '';
position: absolute;
left: 0;
bottom: -22.5px;
width: 100%;
height: 4px;
border-radius: 8px;
background-color: #00acdc;
}
16 changes: 16 additions & 0 deletions src/styles/blocks/stars.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
.stars {
display: flex;
gap: 4px;

&__line {
background-image: url('../images/star.svg');
width: 16px;
height: 16px;
background-size: contain;
background-repeat: no-repeat;
}

&__line:nth-child(-n + 4) {
background-image: url('../images/star-active.svg');
}
}
5 changes: 5 additions & 0 deletions src/styles/blocks/variables.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
$card-padding: 32px 16px 16px;
$main-text-color: #060b35;
$second-text-color: #616070;
$main-button-color: #00acdc;
$font-size-base: 12px;
6 changes: 6 additions & 0 deletions src/styles/index.scss
Original file line number Diff line number Diff line change
@@ -1,3 +1,9 @@
body {
margin: 0;
}

@import 'blocks/variables';
@import 'blocks/moyo-header';
@import 'blocks/card';
@import 'blocks/stars';

0 comments on commit 01cc1cf

Please sign in to comment.