source: CookCraft-FrontEnd/CookCraft-FrontEnd-master/cookcraft-app/src/css/HomeCss/header.module.css@ d7b7f00

Last change on this file since d7b7f00 was d7b7f00, checked in by Gorazd Biskoski <gorazdbiskoskii@…>, 4 weeks ago

Add project
  • Property mode set to 100644
File size: 3.6 KB
RevLine 
[d7b7f00]1.header {
2 background-color: #fff;
3 padding: 20px 0;
4 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
5}
6
7.headerContainer {
8 display: flex;
9 justify-content: space-between;
10 align-items: center;
11 padding: 10px 15px;
12 max-width: 1200px;
13 margin: 0 auto;
14}
15.logo {
16 display: flex;
17 align-items: center;
18}
19
20.logoImage {
21 width: 50px;
22 height: 50px;
23 margin-right: 10px;
24}
25
26.logoText {
27 font-size: 28px;
28 font-weight: 600;
29}
30
31.accentColor {
32 color: #FFA500;
33}
34
35.navContainer {
36 display: flex;
37 align-items: center;
38 gap: 15px;
39 flex-wrap: wrap;
40}
41
42.navLink {
43 text-decoration: none;
44 margin: 0 15px;
45 font-size: 18px;
46 color: #333;
47 transition: color 0.3s ease;
48}
49
50.authButton {
51 text-decoration: none;
52 background-color: #FFA500;
53 color: #fff;
54 padding: 10px 20px;
55 border-radius: 5px;
56 margin-left: 15px;
57 transition: background-color 0.3s ease;
58}
59
60.authButton:hover {
61 background-color: #e59400;
62 color: white;
63}
64
65.navLink:hover {
66 color: #FFA500;
67}
68
69.headerContainer {
70 display: flex;
71 justify-content: space-between;
72 align-items: center;
73 padding: 10px 20px;
74 }
75
76 .logo {
77 display: flex;
78 align-items: center;
79 }
80
81 .logoImage {
82 width: 60px;
83 height: 60px;
84 margin-right: 10px;
85 }
86
87 .logoText {
88 font-size: 24px;
89 font-weight: bold;
90 }
91
92 .accentColor {
93 color: #f39c12;
94 }
95
96 .navContainer {
97 display: flex;
98 align-items: center;
99 }
100
101 .navLink {
102 margin-right: 20px;
103 text-decoration: none;
104 color: #333;
105 }
106
107 .authButton {
108 background-color: #f39c12;
109 color: white;
110 border: none;
111 padding: 10px 20px;
112 border-radius: 5px;
113 cursor: pointer;
114 margin-left: 10px;
115 }
116
117 .profileMenu {
118 position: relative;
119 }
120
121 .profileButton {
122 background: none;
123 border: none;
124 cursor: pointer;
125 }
126
127 .settingsIcon {
128 color: #FFA500;
129 position: relative;
130 top: 2px;
131 width: 25px;
132 height: 25px;
133 }
134
135 .dropdownMenu {
136 position: absolute;
137 top: 50px;
138 right: 0;
139 background-color: white;
140 border: 1px solid #ddd;
141 border-radius: 8px;
142 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
143 z-index: 1000;
144 width: 250px;
145 padding: 0 0;
146 }
147
148 .greeting {
149 padding: 10px 20px;
150 font-size: 16px;
151 font-weight: bold;
152 border-bottom: 1px solid #ddd;
153 }
154
155 .dropdownLink {
156 display: block;
157 padding: 10px 20px;
158 text-decoration: none;
159 color: #333;
160 cursor: pointer;
161 }
162 .dropdownLink:nth-last-child(1){
163 color: red;
164 }
165
166 .dropdownLink:hover {
167 background-color: #FFA500;
168 color: white;
169 }
170
171 @media (max-width: 768px) {
172 .headerContainer {
173 flex-direction: column;
174 align-items: center;
175 padding: 10px 30px;
176 }
177
178 .logo {
179 display: flex;
180 align-items: center;
181 justify-content: center;
182 width: 100%;
183 margin-bottom: 10px;
184 }
185
186 .logoText {
187 font-size: 24px;
188 }
189
190 .navContainer {
191 flex-direction: column;
192 align-items: center;
193 gap: 15px;
194 width: 100%;
195 }
196
197 .authButton {
198 width: 100%;
199 padding: 12px 0;
200 margin: 8px 0;
201 font-size: 16px;
202 border-radius: 5px;
203 text-align: center;
204 }
205
206 .dropdownMenu {
207 position: absolute;
208 top: 50px;
209 left: 50%;
210 transform: translateX(-50%);
211 background-color: white;
212 border: 1px solid #ddd;
213 border-radius: 8px;
214 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
215 z-index: 1000;
216 width: 250px;
217 padding: 0;
218 }
219}
Note: See TracBrowser for help on using the repository browser.