Skip to content

Commit 27797ad

Browse files
bbbozhenabbbozhena
committed
add header moyo
1 parent f2d4745 commit 27797ad

File tree

6 files changed

+190
-9
lines changed

6 files changed

+190
-9
lines changed

‎.github/workflows/test.yml-template

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
name: Test
2+
3+
on:
4+
pull_request:
5+
branches: [ master ]
6+
7+
jobs:
8+
build:
9+
10+
runs-on: ubuntu-latest
11+
12+
strategy:
13+
matrix:
14+
node-version: [20.x]
15+
16+
steps:
17+
- uses: actions/checkout@v2
18+
- name: Use Node.js ${{ matrix.node-version }}
19+
uses: actions/setup-node@v1
20+
with:
21+
node-version: ${{ matrix.node-version }}
22+
- run: npm install
23+
- run: npm test
24+
- name: Upload HTML report(backstop data)
25+
if: ${{ always() }}
26+
uses: actions/upload-artifact@v2
27+
with:
28+
name: report
29+
path: backstop_data

‎package-lock.json

Lines changed: 5 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,12 @@
1717
"keywords": [],
1818
"author": "Mate Academy",
1919
"license": "GPL-3.0",
20-
"dependencies": {},
2120
"devDependencies": {
2221
"@linthtml/linthtml": "^0.9.6",
2322
"@mate-academy/backstop-config": "latest",
2423
"@mate-academy/bemlint": "latest",
2524
"@mate-academy/linthtml-config": "latest",
26-
"@mate-academy/scripts": "^1.8.6",
25+
"@mate-academy/scripts": "^1.9.12",
2726
"@mate-academy/stylelint-config": "latest",
2827
"backstopjs": "6.3.23",
2928
"jest": "^29.7.0",

‎readme.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,8 @@ The page should match the design Pixel Perfect: all the sizes, colors and distan
2727

2828
❗️ Replace `<your_account>` with your Github username and copy the links to `Pull Request` description:
2929

30-
- [DEMO LINK](https://<your_account>.github.io/layout_moyo-header/)
31-
- [TEST REPORT LINK](https://<your_account>.github.io/layout_moyo-header/report/html_report/)
30+
- [DEMO LINK](https://bbbozhena.github.io/layout_moyo-header/)
31+
- [TEST REPORT LINK](https://bbbozhena.github.io/layout_moyo-header/report/html_report/)
3232

3333
❗️ Copy this `Checklist` to the `Pull Request` description after links, and put `- [x]` before each point after you checked it.
3434

‎src/index.html

Lines changed: 90 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,97 @@
1515
rel="stylesheet"
1616
href="./style.css"
1717
/>
18+
<link
19+
rel="preconnect"
20+
href="https://fonts.googleapis.com"
21+
/>
22+
<link
23+
rel="preconnect"
24+
href="https://fonts.gstatic.com"
25+
crossorigin="anonymous"
26+
/>
27+
<link
28+
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
29+
rel="stylesheet"
30+
/>
1831
</head>
1932
<body>
20-
<h1>Moyo header</h1>
33+
<header class="header">
34+
<a class="logo-img">
35+
<img
36+
src="/src/images/logo.png"
37+
alt="logo"
38+
/>
39+
</a>
40+
<nav class="nav">
41+
<ul class="nav-list">
42+
<li class="nav-item">
43+
<a
44+
class="is-active nav-item-link"
45+
href="/apple"
46+
>
47+
Apple
48+
</a>
49+
</li>
50+
<li class="nav-item">
51+
<a
52+
class="nav-item-link"
53+
href="/samsung"
54+
>
55+
Samsung
56+
</a>
57+
</li>
58+
<li class="nav-item">
59+
<a
60+
class="nav-item-link"
61+
href="/smartphones"
62+
>
63+
Smartphones
64+
</a>
65+
</li>
66+
<li class="nav-item">
67+
<a
68+
class="nav-item-link"
69+
href="/computers"
70+
data-qa="hover"
71+
>
72+
Laptops & Computers
73+
</a>
74+
</li>
75+
<li class="nav-item">
76+
<a
77+
class="nav-item-link"
78+
href="/gadgets"
79+
>
80+
Gadgets
81+
</a>
82+
</li>
83+
<li class="nav-item">
84+
<a
85+
class="nav-item-link"
86+
href="/tablets"
87+
>
88+
Tablets
89+
</a>
90+
</li>
91+
<li class="nav-item">
92+
<a
93+
class="nav-item-link"
94+
href="/photo"
95+
>
96+
Photo
97+
</a>
98+
</li>
99+
<li class="nav-item">
100+
<a
101+
class="nav-item-link"
102+
href="/video"
103+
>
104+
Video
105+
</a>
106+
</li>
107+
</ul>
108+
</nav>
109+
</header>
21110
</body>
22111
</html>

‎src/style.css

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,66 @@
1+
:root {
2+
--blue-color: #00acdc;
3+
}
4+
15
body {
26
margin: 0;
7+
font-family: Roboto, sans-serif;
8+
}
9+
10+
.header {
11+
display: flex;
12+
justify-content: space-between;
13+
align-items: center;
14+
padding: 0 50px;
15+
}
16+
17+
.logo-img {
18+
height: 40px;
19+
width: 40px;
20+
}
21+
22+
.nav-list {
23+
display: flex;
24+
list-style: none;
25+
font-size: 12px;
26+
margin: 0;
27+
padding: 23px 0;
28+
}
29+
30+
.nav-item {
31+
margin-right: 20px;
32+
}
33+
34+
.nav-item:last-child {
35+
margin-right: 0;
36+
}
37+
38+
.nav-item-link {
39+
padding: 23px 0;
40+
text-decoration: none;
41+
color: black;
42+
text-align: center;
43+
text-transform: uppercase;
44+
font-weight: 500;
45+
}
46+
47+
.is-active {
48+
position: relative;
49+
color: var(--blue-color);
50+
}
51+
52+
.is-active::after {
53+
content: '';
54+
position: absolute;
55+
left: 0;
56+
bottom: 0;
57+
width: 100%;
58+
height: 4px;
59+
border: none;
60+
border-radius: 2px;
61+
background-color: var(--blue-color);
62+
}
63+
64+
.nav-item-link:hover {
65+
color: var(--blue-color);
366
}

0 commit comments

Comments
 (0)