Skip to content

Commit 48a6932

Browse files
ByteGradByteGrad
committed
final code
1 parent 1cc5dda commit 48a6932

File tree

2 files changed

+128
-31
lines changed

2 files changed

+128
-31
lines changed

‎index.html‎

Lines changed: 32 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -25,14 +25,41 @@
2525

2626
<nav class="nav">
2727
<ul class="nav__list">
28-
<li class="nav__item">
29-
<a class="nav__link" href="#">Solutions</a>
30-
</li>
31-
<li class="nav__item">
28+
<li class="nav__item dropdown">
3229
<a class="nav__link" href="#">Projects</a>
3330
</li>
3431
<li class="nav__item">
35-
<a class="btn" href="#">Contact</a>
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+
3663
</li>
3764
</ul>
3865
</nav>

‎style.css‎

Lines changed: 96 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -14,25 +14,23 @@ a {
1414
color: inherit;
1515
}
1616

17-
button {
18-
background: none;
19-
border: none;
20-
font: inherit;
21-
color: inherit;
22-
}
23-
2417
/* BASE STYLES */
2518
body {
2619
background-color: #e8f0f7;
2720
font-family: 'Inter', sans-serif;
28-
min-height: 500vh;
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;
2927
}
3028

3129
/* NORMAL STYLES */
3230
.header {
3331
position: fixed;
3432
width: 100%;
35-
background-color: rgb(19, 22, 26);
33+
background-color: rgba(19, 22, 26, 0.7);
3634
}
3735

3836
.header__content {
@@ -60,49 +58,121 @@ body {
6058

6159
.nav__list {
6260
display: flex;
63-
column-gap: 40px;
61+
align-items: baseline;
62+
column-gap: 20px;
6463
}
6564

6665
.nav__item {
67-
66+
6867
}
6968

7069
.nav__link {
7170
color: rgba(255, 255, 255, 0.75);
72-
font-size: 15px;
73-
transition: all 0.2s;
71+
font-size: 15px; position: relative;
72+
padding: 7px 14px;
73+
background-color: rgba(255, 255, 255, 0);
7474
}
7575

76-
.nav__link:hover {
76+
.nav__link:hover,
77+
.nav__link:focus,
78+
.dropdown:hover .nav__link {
7779
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;
7886
}
7987

80-
.btn {
81-
color: #fff;
82-
background-color: #0071e3;
83-
padding: 7px 18px;
84-
border-radius: 1000px;
85-
text-transform: uppercase;
86-
font-size: 12px;
87-
font-weight: 500;
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;
88106
cursor: pointer;
89-
transition: all 0.2s;
90107
}
91108

92-
.btn:hover {
93-
background-color: rgb(28, 128, 228);
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);
94134
}
95135

96136
/* 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+
97149
@media (max-width: 650px) {
98150
.header__content {
99151
padding: 25px 0;
100152
flex-direction: column;
101153
row-gap: 18px;
102154
align-items: center;
155+
position: relative;
103156
}
104157

105158
.nav__list {
106-
column-gap: 20px;
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%;
107177
}
108178
}

0 commit comments

Comments
 (0)