Skip to content

Commit e5825a5

Browse files
mmromanovammromanova
committed
add MoYo logo
1 parent f2d4745 commit e5825a5

File tree

3 files changed

+198
-3
lines changed

3 files changed

+198
-3
lines changed

‎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://mmromanova.github.io/layout_moyo-header/)
31+
- [TEST REPORT LINK](https://mmromanova.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: 110 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,117 @@
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+
/>
26+
<link
27+
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"
28+
rel="stylesheet"
29+
/>
1830
</head>
1931
<body>
20-
<h1>Moyo header</h1>
32+
<header class="header">
33+
<picture class="logo-container">
34+
<a
35+
href="/"
36+
class="logoimage"
37+
>
38+
<img
39+
src="./images/logo.png"
40+
alt="MOYO Logo"
41+
/>
42+
</a>
43+
</picture>
44+
<nav class="nav">
45+
<ul class="nav-list">
46+
<li>
47+
<div id="apple">
48+
<a
49+
href="#apple"
50+
class="menu-item is-active"
51+
>
52+
Apple
53+
</a>
54+
</div>
55+
</li>
56+
<li>
57+
<div id="samsung">
58+
<a
59+
href="#samsung"
60+
class="menu-item"
61+
>
62+
Samsung
63+
</a>
64+
</div>
65+
</li>
66+
<li>
67+
<div id="smartphones">
68+
<a
69+
href="#smartphones"
70+
class="menu-item"
71+
>
72+
Smartphones
73+
</a>
74+
</div>
75+
</li>
76+
<li>
77+
<div id="laptops">
78+
<a
79+
href="#laptops"
80+
class="menu-item"
81+
data-qa="hover"
82+
>
83+
Laptops & Computers
84+
</a>
85+
</div>
86+
</li>
87+
<li>
88+
<div id="gadgets">
89+
<a
90+
href="#gadgets"
91+
class="menu-item"
92+
>
93+
Gadgets
94+
</a>
95+
</div>
96+
</li>
97+
<li>
98+
<div id="tablets">
99+
<a
100+
href="#tablets"
101+
class="menu-item"
102+
>
103+
Tablets
104+
</a>
105+
</div>
106+
</li>
107+
<li>
108+
<div id="photo">
109+
<a
110+
href="#photo"
111+
class="menu-item"
112+
>
113+
Photo
114+
</a>
115+
</div>
116+
</li>
117+
<li>
118+
<div id="video">
119+
<a
120+
href="#video"
121+
class="menu-item"
122+
>
123+
Video
124+
</a>
125+
</div>
126+
</li>
127+
</ul>
128+
</nav>
129+
</header>
21130
</body>
22131
</html>

‎src/style.css‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,89 @@
1+
:root {
2+
--blue-color: #00acdc;
3+
}
4+
15
body {
26
margin: 0;
7+
padding: 0;
8+
font-family: Roboto, sans-serif;
9+
}
10+
11+
.logoimage {
12+
height: 40px;
13+
flex-shrink: 0;
14+
}
15+
16+
.logo-container {
17+
display: flex;
18+
align-items: center;
19+
justify-content: flex-start;
20+
}
21+
22+
.header {
23+
display: flex;
24+
justify-content: space-between;
25+
align-items: center;
26+
width: 100%;
27+
height: 60px;
28+
box-sizing: border-box;
29+
padding: 0 50px;
30+
}
31+
32+
.nav {
33+
display: flex;
34+
align-items: center;
35+
justify-content: flex-end;
36+
flex-wrap: nowrap;
37+
text-transform: uppercase;
38+
}
39+
40+
.nav-list {
41+
display: flex;
42+
padding: 0;
43+
margin: 0;
44+
list-style: none;
45+
height: 60px;
46+
line-height: 60px;
47+
font-weight: 500;
48+
}
49+
50+
.menu-item {
51+
font-size: 12px;
52+
margin: 0 10px;
53+
position: relative;
54+
text-align: center;
55+
text-decoration: none;
56+
color: #000;
57+
display: flex;
58+
justify-content: center;
59+
align-items: center;
60+
white-space: nowrap;
61+
height: 100%;
62+
}
63+
64+
.menu-item:hover {
65+
color: var(--blue-color);
66+
}
67+
68+
.menu-item.is-active {
69+
color: var(--blue-color);
70+
}
71+
72+
.menu-item.is-active::after {
73+
content: '';
74+
position: absolute;
75+
bottom: 0;
76+
left: 0;
77+
width: 100%;
78+
height: 4px;
79+
background-color: var(--blue-color);
80+
border-radius: 8px;
81+
}
82+
83+
.nav-list li:first-child .menu-item {
84+
margin-left: 0;
85+
}
86+
87+
.nav-list li:last-child .menu-item {
88+
margin-right: 0;
389
}

0 commit comments

Comments
 (0)