Skip to content

Commit 2bfa2d2

Browse files
AllanCordellaAllanCordella
committed
moyo-header
1 parent f2d4745 commit 2bfa2d2

File tree

2 files changed

+192
-2
lines changed

2 files changed

+192
-2
lines changed

‎src/index.html

Lines changed: 96 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,107 @@
1010
http-equiv="X-UA-Compatible"
1111
content="ie=edge"
1212
/>
13-
<title>Moyo header</title>
13+
<link
14+
rel="preconnect"
15+
href="https://fonts.googleapis.com"
16+
/>
17+
<link
18+
rel="preconnect"
19+
href="https://fonts.gstatic.com"
20+
/>
21+
<link
22+
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"
23+
rel="stylesheet"
24+
/>
25+
<title>MOYO Header</title>
1426
<link
1527
rel="stylesheet"
1628
href="./style.css"
1729
/>
1830
</head>
1931
<body>
20-
<h1>Moyo header</h1>
32+
<a
33+
class="img"
34+
href="index.html"
35+
>
36+
<img
37+
src="images/logo.png"
38+
alt="moyologo"
39+
/>
40+
</a>
41+
42+
<header class="header">
43+
<nav class="nav">
44+
<ul class="nav__list">
45+
<li class="nav__item">
46+
<a
47+
href="Apple"
48+
class="nav__link is-active"
49+
>
50+
Apple
51+
</a>
52+
</li>
53+
<li class="nav__item">
54+
<a
55+
href="Samsung"
56+
class="nav__link"
57+
>
58+
Samsung
59+
</a>
60+
</li>
61+
<li class="nav__item">
62+
<a
63+
href="Smartphones"
64+
class="nav__link"
65+
>
66+
Smartphones
67+
</a>
68+
</li>
69+
<li
70+
class="nav__item"
71+
data-qa="hover"
72+
>
73+
<a
74+
href="Laptopsecomputers"
75+
class="nav__link"
76+
>
77+
Laptops & Computers
78+
</a>
79+
</li>
80+
<li class="nav__item">
81+
<a
82+
href="Gadgets"
83+
class="nav__link"
84+
>
85+
Gadgets
86+
</a>
87+
</li>
88+
<li class="nav__itemt">
89+
<a
90+
href="Tablets"
91+
class="nav__link"
92+
>
93+
Tablets
94+
</a>
95+
</li>
96+
<li class="nav__item">
97+
<a
98+
href="Photo"
99+
class="nav__link"
100+
>
101+
Photo
102+
</a>
103+
</li>
104+
<li class="nav__item">
105+
<a
106+
href="Video"
107+
class="nav__link"
108+
>
109+
Video
110+
</a>
111+
</li>
112+
</ul>
113+
</nav>
114+
</header>
21115
</body>
22116
</html>

‎src/style.css

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,99 @@
1+
html {
2+
margin: 0;
3+
font-family: roboto, sans-serif;
4+
}
5+
16
body {
27
margin: 0;
38
}
9+
10+
a {
11+
text-decoration: none;
12+
color: #000;
13+
}
14+
15+
ul {
16+
padding: 0;
17+
list-style: none;
18+
}
19+
20+
li {
21+
list-style: none;
22+
}
23+
24+
.img {
25+
position: absolute;
26+
top: 10px;
27+
left: 50px;
28+
}
29+
30+
.header {
31+
display: flex;
32+
33+
background-color: #fff;
34+
35+
justify-content: end;
36+
align-items: center;
37+
}
38+
39+
.nav {
40+
/* background-color: chartreuse; */
41+
42+
width: 639px;
43+
height: 60px;
44+
display: flex;
45+
align-items: center;
46+
margin-right: 50px;
47+
}
48+
49+
.nav__list {
50+
display: flex;
51+
width: 100%;
52+
align-items: center;
53+
54+
/* background-color: blueviolet; */
55+
56+
justify-content: space-between;
57+
}
58+
59+
.nav__iten {
60+
/* background-color: beige; */
61+
display: flex;
62+
align-items: center;
63+
flex-direction: row;
64+
justify-content: center;
65+
}
66+
67+
.nav__link {
68+
/* background-color: cyan; */
69+
height: 60px;
70+
display: flex;
71+
font-weight: 500;
72+
color: #000;
73+
font-size: 12px;
74+
text-transform: uppercase;
75+
align-items: center;
76+
}
77+
78+
:hover {
79+
color: #00acdc;
80+
}
81+
82+
.is-active {
83+
color: #00acdc;
84+
display: flex;
85+
align-items: center;
86+
position: relative;
87+
}
88+
89+
.is-active::after {
90+
content: '';
91+
92+
background-color: #00acdc;
93+
border: solid #00acdc 1px;
94+
height: 2px;
95+
border-radius: 8px;
96+
position: absolute;
97+
bottom: 0;
98+
width: 36px;
99+
}

0 commit comments

Comments
 (0)