Hugging Face's logo

Spaces:
GarGerry
/
Flux-web
Running

App Files Community
GarGerry commited on
Commit
79173f1
·
verified ·
1 Parent(s): 2fa9859

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +47 -99
style.css CHANGED
@@ -1,136 +1,84 @@
1
- /* General Styles */
2
- body {
3
- font-family: Arial, sans-serif;
4
- margin: 0;
5
- padding: 0;
6
- line-height: 1.6;
7
- background-color: #f4f4f9;
8
- }
9
-
10
- h1, h2 {
11
- color: #6a0dad;
12
- text-align: center;
13
- }
14
-
15
- p, ul, li {
16
- margin: 0;
17
- padding: 0;
18
- }
19
-
20
- /* Header */
21
  header {
22
  background: #6a0dad;
23
  color: white;
24
  padding: 1rem 0;
25
- text-align: center;
 
 
 
26
  }
27
 
28
- nav ul {
29
- list-style: none;
30
  display: flex;
31
- justify-content: center;
32
- gap: 1.5rem;
33
- padding: 0;
34
- margin: 0.5rem 0 0;
35
- }
36
-
37
- nav ul li {
38
- display: inline;
39
- }
40
-
41
- nav ul li a {
42
- text-decoration: none;
43
- color: white;
44
- font-weight: bold;
45
- }
46
-
47
- nav ul li a:hover {
48
- text-decoration: underline;
49
- }
50
-
51
- /* Section Styling */
52
- section {
53
- margin: 2rem auto;
54
  padding: 0 1rem;
55
- max-width: 800px;
56
- text-align: center;
57
- background: white;
58
- border-radius: 8px;
59
- box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
60
- padding: 1.5rem;
61
  }
62
 
63
- h2 {
64
- margin-bottom: 1rem;
 
65
  }
66
 
67
- ul {
68
- list-style-type: disc;
69
- margin: 1rem 0;
70
- padding-left: 20px;
71
- text-align: left;
72
  }
73
 
74
- /* Form Styling */
75
- form {
76
  display: flex;
77
- flex-direction: column;
78
  gap: 1rem;
79
- max-width: 400px;
80
- margin: 0 auto;
81
- }
82
-
83
- form input, form textarea {
84
- padding: 0.8rem;
85
- border: 1px solid #ccc;
86
- border-radius: 5px;
87
- width: 100%;
88
  }
89
 
90
- form button {
91
- background: #6a0dad;
92
  color: white;
93
- border: none;
94
- padding: 0.8rem;
95
  font-size: 1rem;
96
- border-radius: 5px;
97
- cursor: pointer;
98
  }
99
 
100
- form button:hover {
101
- background: #530a85;
102
  }
103
 
104
- /* Footer */
105
- footer {
106
- text-align: center;
107
- padding: 1rem;
108
- background: #6a0dad;
109
  color: white;
110
- font-size: 0.9rem;
 
 
111
  }
112
 
113
- /* Responsive */
114
  @media (max-width: 768px) {
115
- nav ul {
 
116
  flex-direction: column;
117
  gap: 0.5rem;
118
- }
119
-
120
- section {
121
- margin: 1.5rem 1rem;
 
122
  padding: 1rem;
 
 
123
  }
124
 
125
- form {
126
- width: 90%;
127
- }
128
-
129
- h1 {
130
- font-size: 1.5rem;
131
  }
132
 
133
- h2 {
134
- font-size: 1.2rem;
135
  }
136
  }
 
1
+ /* Header Styling */
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2
  header {
3
  background: #6a0dad;
4
  color: white;
5
  padding: 1rem 0;
6
+ position: sticky;
7
+ top: 0;
8
+ z-index: 1000;
9
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
10
  }
11
 
12
+ header .container {
 
13
  display: flex;
14
+ justify-content: space-between;
15
+ align-items: center;
16
+ max-width: 1200px;
17
+ margin: 0 auto;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
18
  padding: 0 1rem;
 
 
 
 
 
 
19
  }
20
 
21
+ header h1 {
22
+ font-size: 1.5rem;
23
+ margin: 0;
24
  }
25
 
26
+ header nav {
27
+ display: flex;
28
+ align-items: center;
29
+ gap: 1.5rem;
 
30
  }
31
 
32
+ .nav-links {
33
+ list-style: none;
34
  display: flex;
 
35
  gap: 1rem;
36
+ margin: 0;
37
+ padding: 0;
 
 
 
 
 
 
 
38
  }
39
 
40
+ .nav-links li a {
41
+ text-decoration: none;
42
  color: white;
43
+ font-weight: bold;
 
44
  font-size: 1rem;
45
+ transition: color 0.3s ease;
 
46
  }
47
 
48
+ .nav-links li a:hover {
49
+ color: #ffd700;
50
  }
51
 
52
+ /* Hamburger Menu (Mobile) */
53
+ .menu-toggle {
54
+ display: none;
55
+ font-size: 1.5rem;
 
56
  color: white;
57
+ background: none;
58
+ border: none;
59
+ cursor: pointer;
60
  }
61
 
 
62
  @media (max-width: 768px) {
63
+ .nav-links {
64
+ display: none;
65
  flex-direction: column;
66
  gap: 0.5rem;
67
+ background: #6a0dad;
68
+ position: absolute;
69
+ top: 60px;
70
+ right: 10px;
71
+ width: 200px;
72
  padding: 1rem;
73
+ border-radius: 8px;
74
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
75
  }
76
 
77
+ .nav-links.show {
78
+ display: flex;
 
 
 
 
79
  }
80
 
81
+ .menu-toggle {
82
+ display: block;
83
  }
84
  }