14
14
color : inherit;
15
15
}
16
16
17
- button {
18
- background : none;
19
- border : none;
20
- font : inherit;
21
- color : inherit;
22
- }
23
-
24
17
/* BASE STYLES */
25
18
body {
26
19
background-color : # e8f0f7 ;
27
20
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;
29
27
}
30
28
31
29
/* NORMAL STYLES */
32
30
.header {
33
31
position : fixed;
34
32
width : 100% ;
35
- background-color : rgb (19 , 22 , 26 );
33
+ background-color : rgba (19 , 22 , 26 , 0.7 );
36
34
}
37
35
38
36
.header__content {
@@ -60,49 +58,121 @@ body {
60
58
61
59
.nav__list {
62
60
display : flex;
63
- column-gap : 40px ;
61
+ align-items : baseline;
62
+ column-gap : 20px ;
64
63
}
65
64
66
65
.nav__item {
67
-
66
+
68
67
}
69
68
70
69
.nav__link {
71
70
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 );
74
74
}
75
75
76
- .nav__link : hover {
76
+ .nav__link : hover ,
77
+ .nav__link : focus ,
78
+ .dropdown : hover .nav__link {
77
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 ;
78
86
}
79
87
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 ;
88
106
cursor : pointer;
89
- transition : all 0.2s ;
90
107
}
91
108
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 );
94
134
}
95
135
96
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
+
97
149
@media (max-width : 650px ) {
98
150
.header__content {
99
151
padding : 25px 0 ;
100
152
flex-direction : column;
101
153
row-gap : 18px ;
102
154
align-items : center;
155
+ position : relative;
103
156
}
104
157
105
158
.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% ;
107
177
}
108
178
}
0 commit comments