Skip to content

Commit 16d6013

Browse files
ByteGradByteGrad
authored
Merge pull request #1 from ByteGrad/master
Master
2 parents cb83e7b + 52ee34a commit 16d6013

File tree

3 files changed

+259
-0
lines changed

3 files changed

+259
-0
lines changed

‎index.html

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
9+
<link rel="preconnect" href="https://fonts.googleapis.com">
10+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet">
12+
13+
<link rel="stylesheet" href="style.css">
14+
15+
<title>Tutorial</title>
16+
</head>
17+
18+
<body>
19+
20+
<header class="header">
21+
<div class="header__content">
22+
<a href="#" class="logo">
23+
<img class="logo__img" src="logo.svg" alt="logo">
24+
</a>
25+
26+
<nav class="nav">
27+
<ul class="nav__list">
28+
<li class="nav__item dropdown">
29+
<a class="nav__link" href="#">Projects</a>
30+
</li>
31+
<li class="nav__item">
32+
<a class="nav__link" href="#">Company</a>
33+
</li>
34+
<li class="nav__item dropdown">
35+
<a class="nav__link" href="#">Solutions &#x25BE;</a>
36+
37+
<ul class="dropdown__list">
38+
<li class="dropdown__item">
39+
<a href="#" class="dropdown__link">Solution #1</a>
40+
</li>
41+
<li class="dropdown__item">
42+
<a href="#" class="dropdown__link">Solution #2</a>
43+
</li>
44+
<li class="dropdown__item">
45+
<a href="#" class="dropdown__link">Solution #3</a>
46+
</li>
47+
48+
<li class="dropdown__item submenu">
49+
<a href="#" class="dropdown__link">More solutions &#x25B8;</a>
50+
51+
<ul class="submenu__list">
52+
<li class="submenu__item">
53+
<a href="#" class="submenu__link">Solution A</a>
54+
</li>
55+
<li class="submenu__item">
56+
<a href="#" class="submenu__link">Solution B</a>
57+
</li>
58+
</ul>
59+
</li>
60+
61+
</ul>
62+
63+
</li>
64+
</ul>
65+
</nav>
66+
</div>
67+
</header>
68+
69+
</body>
70+
71+
</html>

‎logo.svg

Lines changed: 10 additions & 0 deletions
Loading

‎style.css

Lines changed: 178 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,178 @@
1+
/* RESET */
2+
* {
3+
margin: 0;
4+
padding: 0;
5+
box-sizing: border-box;
6+
}
7+
8+
ul {
9+
list-style: none;
10+
}
11+
12+
a {
13+
text-decoration: none;
14+
color: inherit;
15+
}
16+
17+
/* BASE STYLES */
18+
body {
19+
background-color: #e8f0f7;
20+
font-family: 'Inter', sans-serif;
21+
22+
background-image: url('https://images.unsplash.com/photo-1469474968028-56623f02e42e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1920&q=100');
23+
background-repeat: no-repeat;
24+
background-size: cover;
25+
background-attachment: fixed;
26+
background-position: center center;
27+
}
28+
29+
/* NORMAL STYLES */
30+
.header {
31+
position: fixed;
32+
width: 100%;
33+
background-color: rgba(19, 22, 26, 0.7);
34+
}
35+
36+
.header__content {
37+
min-height: 60px;
38+
display: flex;
39+
justify-content: space-between;
40+
align-items: center;
41+
max-width: 1200px;
42+
padding: 0 30px;
43+
margin: 0 auto;
44+
}
45+
46+
.logo {
47+
48+
}
49+
50+
.logo__img {
51+
display: block;
52+
height: 20px;
53+
}
54+
55+
.nav {
56+
57+
}
58+
59+
.nav__list {
60+
display: flex;
61+
align-items: baseline;
62+
column-gap: 20px;
63+
}
64+
65+
.nav__item {
66+
67+
}
68+
69+
.nav__link {
70+
color: rgba(255, 255, 255, 0.75);
71+
font-size: 15px; position: relative;
72+
padding: 7px 14px;
73+
background-color: rgba(255, 255, 255, 0);
74+
}
75+
76+
.nav__link:hover,
77+
.nav__link:focus,
78+
.dropdown:hover .nav__link {
79+
color: rgba(255, 255, 255, 1);
80+
background-color: rgba(255, 255, 255, 0.1);
81+
}
82+
83+
.dropdown {
84+
position: relative;
85+
font-size: 14px;
86+
}
87+
88+
.dropdown:hover .dropdown__list {
89+
display: block;
90+
}
91+
92+
.dropdown__list,
93+
.submenu__list {
94+
display: none;
95+
position: absolute;
96+
top: 125%;
97+
left: 0;
98+
background-color: #fff;
99+
min-width: max-content;
100+
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
101+
}
102+
103+
.dropdown__item,
104+
.submenu__item {
105+
padding: 10px 15px;
106+
cursor: pointer;
107+
}
108+
109+
.dropdown__item:hover,
110+
.submenu__item:hover {
111+
background-color: rgb(234, 234, 234);
112+
}
113+
114+
.dropdown__link {
115+
116+
}
117+
118+
.submenu {
119+
position: relative;
120+
}
121+
122+
.submenu:hover .submenu__list {
123+
display: block;
124+
}
125+
126+
.submenu__list {
127+
display: none;
128+
position: absolute;
129+
top: 0;
130+
left: 100%;
131+
background-color: #fff;
132+
min-width: max-content;
133+
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
134+
}
135+
136+
/* MEDIA QUERIES */
137+
@media (max-width: 1470px) {
138+
.dropdown__list {
139+
left: initial;
140+
right: 0;
141+
}
142+
143+
.submenu__list {
144+
left: initial;
145+
right: 100%;
146+
}
147+
}
148+
149+
@media (max-width: 650px) {
150+
.header__content {
151+
padding: 25px 0;
152+
flex-direction: column;
153+
row-gap: 18px;
154+
align-items: center;
155+
position: relative;
156+
}
157+
158+
.nav__list {
159+
column-gap: 10px;
160+
}
161+
162+
.nav__item {
163+
position: initial;
164+
}
165+
166+
.dropdown__list {
167+
top: 100%;
168+
width: 100%;
169+
text-align: center;
170+
}
171+
172+
.submenu__list {
173+
right: initial;
174+
left: 0;
175+
top: 100%;
176+
width: 100%;
177+
}
178+
}

0 commit comments

Comments
 (0)