Hugging Face's logo

Spaces:
GarGerry
/
Flux-web
Running

App Files Community
GarGerry commited on
Commit
89c8194
·
verified ·
1 Parent(s): 74a08e5

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +87 -60
style.css CHANGED
@@ -1,4 +1,4 @@
1
- /* Reset */
2
  * {
3
  margin: 0;
4
  padding: 0;
@@ -8,119 +8,146 @@
8
  body {
9
  font-family: Arial, sans-serif;
10
  line-height: 1.6;
11
- margin: 0;
12
- background-color: white;
13
- color: black;
14
- transition: background-color 0.3s, color 0.3s;
15
- }
16
-
17
- /* Dark mode */
18
- body.dark-mode {
19
- background-color: #121212;
20
- color: white;
21
  }
22
 
23
  header {
24
- background-color: purple;
25
  color: white;
26
- padding: 1rem;
27
  text-align: center;
28
- position: relative;
29
  }
30
 
31
  header h1 {
32
- font-size: 1.5rem;
33
- margin-bottom: 0.5rem;
34
  }
35
 
36
  header nav ul {
 
37
  display: flex;
38
  justify-content: center;
39
- gap: 1rem;
40
- list-style: none;
41
- margin: 0.5rem 0;
42
- padding: 0;
43
  }
44
 
45
  header nav ul li a {
46
  color: white;
47
  text-decoration: none;
48
- font-weight: bold;
49
  font-size: 1rem;
50
  }
51
 
52
- #toggleDarkMode {
53
- position: absolute;
54
- top: 1rem;
55
- right: 1rem;
56
- background: none;
57
- border: none;
58
- font-size: 1.5rem;
59
- cursor: pointer;
60
  }
61
 
62
- /* Section */
63
  section {
64
- padding: 1.5rem;
 
 
 
 
 
 
65
  }
66
 
67
  #skills ul {
68
- list-style-type: disc;
69
- margin-left: 1.5rem;
 
 
 
 
 
70
  }
71
 
72
  .project {
73
- margin-bottom: 1.5rem;
74
  }
75
 
76
- #chatButton {
77
- background: purple;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
78
  color: white;
79
  border: none;
80
- padding: 0.7rem 1.5rem;
81
  border-radius: 5px;
82
- font-size: 1rem;
83
- margin: 1.5rem auto 0;
84
- display: block;
85
  cursor: pointer;
 
86
  }
87
 
88
- #chatbox {
89
- display: none;
90
- margin-top: 1rem;
91
  }
92
 
93
- #chatbox.active {
 
94
  display: block;
95
- padding: 1rem;
96
- background-color: #f4f4f4;
 
 
 
97
  border-radius: 5px;
98
- color: black;
 
 
 
 
 
 
 
 
 
 
 
 
 
99
  }
100
 
101
- /* Media Queries */
102
  @media (max-width: 768px) {
103
  header h1 {
104
- font-size: 1.2rem;
105
  }
106
 
107
  header nav ul {
108
- display: flex;
109
  flex-direction: column;
110
- gap: 0.5rem;
111
- margin-top: 1rem;
112
- }
113
-
114
- section {
115
- padding: 1rem;
116
  }
117
 
118
- #skills ul {
119
- margin-left: 1rem;
 
120
  }
121
 
122
  #chatButton {
123
- width: 80%;
124
- font-size: 0.9rem;
125
  }
126
  }
 
1
+ /* General Styles */
2
  * {
3
  margin: 0;
4
  padding: 0;
 
8
  body {
9
  font-family: Arial, sans-serif;
10
  line-height: 1.6;
11
+ color: #333;
 
 
 
 
 
 
 
 
 
12
  }
13
 
14
  header {
15
+ background: #6a0dad;
16
  color: white;
 
17
  text-align: center;
18
+ padding: 1.5rem 1rem;
19
  }
20
 
21
  header h1 {
22
+ font-size: 2rem;
23
+ margin-bottom: 1rem;
24
  }
25
 
26
  header nav ul {
27
+ list-style: none;
28
  display: flex;
29
  justify-content: center;
30
+ gap: 1.5rem;
 
 
 
31
  }
32
 
33
  header nav ul li a {
34
  color: white;
35
  text-decoration: none;
 
36
  font-size: 1rem;
37
  }
38
 
39
+ header nav ul li a:hover {
40
+ text-decoration: underline;
 
 
 
 
 
 
41
  }
42
 
43
+ /* Section Styles */
44
  section {
45
+ padding: 2rem 1rem;
46
+ text-align: center;
47
+ }
48
+
49
+ section h2 {
50
+ font-size: 1.8rem;
51
+ margin-bottom: 1rem;
52
  }
53
 
54
  #skills ul {
55
+ list-style: none;
56
+ padding: 0;
57
+ }
58
+
59
+ #skills ul li {
60
+ font-size: 1rem;
61
+ margin: 0.5rem 0;
62
  }
63
 
64
  .project {
65
+ margin: 1rem 0;
66
  }
67
 
68
+ .project h3 {
69
+ font-size: 1.2rem;
70
+ color: #6a0dad;
71
+ }
72
+
73
+ .project p {
74
+ font-size: 1rem;
75
+ margin-top: 0.5rem;
76
+ }
77
+
78
+ /* Form Styles */
79
+ form {
80
+ max-width: 400px;
81
+ margin: 1.5rem auto;
82
+ display: flex;
83
+ flex-direction: column;
84
+ gap: 1rem;
85
+ }
86
+
87
+ form input,
88
+ form textarea {
89
+ padding: 0.8rem;
90
+ border: 1px solid #ccc;
91
+ border-radius: 5px;
92
+ font-size: 1rem;
93
+ }
94
+
95
+ form button {
96
+ padding: 0.8rem;
97
+ background: #6a0dad;
98
  color: white;
99
  border: none;
 
100
  border-radius: 5px;
 
 
 
101
  cursor: pointer;
102
+ font-size: 1rem;
103
  }
104
 
105
+ form button:hover {
106
+ background: #530a85;
 
107
  }
108
 
109
+ /* Chat Button */
110
+ #chatButton {
111
  display: block;
112
+ margin: 1.5rem auto;
113
+ padding: 0.8rem 1.5rem;
114
+ background: #6a0dad;
115
+ color: white;
116
+ border: none;
117
  border-radius: 5px;
118
+ cursor: pointer;
119
+ font-size: 1rem;
120
+ }
121
+
122
+ #chatButton:hover {
123
+ background: #530a85;
124
+ }
125
+
126
+ /* Footer */
127
+ footer {
128
+ text-align: center;
129
+ padding: 1rem 0;
130
+ background: #f4f4f4;
131
+ color: #666;
132
  }
133
 
134
+ /* Responsive Design */
135
  @media (max-width: 768px) {
136
  header h1 {
137
+ font-size: 1.5rem;
138
  }
139
 
140
  header nav ul {
 
141
  flex-direction: column;
142
+ gap: 1rem;
 
 
 
 
 
143
  }
144
 
145
+ form input,
146
+ form textarea {
147
+ width: 100%;
148
  }
149
 
150
  #chatButton {
151
+ width: 100%;
 
152
  }
153
  }