Hugging Face's logo

Spaces:
GarGerry
/
Flux-web
Running

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

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +37 -62
style.css CHANGED
@@ -1,84 +1,80 @@
1
  /* General Styles */
2
- * {
3
- margin: 0;
4
- padding: 0;
5
- box-sizing: border-box;
6
- }
7
-
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;
@@ -86,52 +82,31 @@ form {
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;
@@ -139,15 +114,15 @@ footer {
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
  }
 
1
  /* General Styles */
 
 
 
 
 
 
2
  body {
3
  font-family: Arial, sans-serif;
4
  line-height: 1.6;
5
  color: #333;
6
+ margin: 0;
7
+ padding: 0;
8
  }
9
 
10
  header {
11
  background: #6a0dad;
12
  color: white;
13
  text-align: center;
14
+ padding: 1rem;
15
  }
16
 
17
  header h1 {
18
+ font-size: 1.8rem;
 
19
  }
20
 
21
  header nav ul {
 
22
  display: flex;
23
  justify-content: center;
24
+ list-style: none;
25
+ margin-top: 1rem;
26
+ padding: 0;
27
+ gap: 1rem;
28
+ }
29
+
30
+ header nav ul li {
31
+ font-size: 1rem;
32
  }
33
 
34
  header nav ul li a {
35
  color: white;
36
  text-decoration: none;
 
37
  }
38
 
39
+ main {
40
+ padding: 1rem;
41
  }
42
 
 
43
  section {
44
+ margin-bottom: 2rem;
 
45
  }
46
 
47
  section h2 {
48
+ font-size: 1.5rem;
49
  margin-bottom: 1rem;
50
+ text-align: center;
51
  }
52
 
53
+ #skills ul,
54
+ #projects ul {
55
  list-style: none;
56
  padding: 0;
57
+ margin: 0 auto;
58
+ text-align: left;
59
  }
60
 
61
+ #skills ul li,
62
+ #projects ul li {
63
+ margin-bottom: 0.5rem;
64
  }
65
 
66
  .project {
67
+ margin-bottom: 1rem;
68
+ text-align: center;
69
  }
70
 
71
  .project h3 {
 
72
  color: #6a0dad;
73
  }
74
 
 
 
 
 
 
 
75
  form {
76
  max-width: 400px;
77
+ margin: 0 auto;
78
  display: flex;
79
  flex-direction: column;
80
  gap: 1rem;
 
82
 
83
  form input,
84
  form textarea {
85
+ padding: 0.5rem;
86
  border: 1px solid #ccc;
87
  border-radius: 5px;
 
88
  }
89
 
90
  form button {
 
91
  background: #6a0dad;
92
  color: white;
93
  border: none;
94
+ padding: 0.5rem;
95
  border-radius: 5px;
96
  cursor: pointer;
 
97
  }
98
 
99
  form button:hover {
100
  background: #530a85;
101
  }
102
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
103
  footer {
104
  text-align: center;
105
+ padding: 1rem;
106
+ background: #f8f8f8;
 
107
  }
108
 
109
+ /* Mobile Styles */
110
  @media (max-width: 768px) {
111
  header h1 {
112
  font-size: 1.5rem;
 
114
 
115
  header nav ul {
116
  flex-direction: column;
117
+ gap: 0.5rem;
118
  }
119
 
120
+ section h2 {
121
+ font-size: 1.2rem;
 
122
  }
123
 
124
+ form {
125
  width: 100%;
126
+ padding: 0 1rem;
127
  }
128
  }