Hugging Face's logo

Spaces:
Alexvatti
/
Earn-Money-With-Python
Running

App Files Community
Alexvatti commited on
Commit
4a6d139
·
verified ·
1 Parent(s): 2289711

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +268 -17
style.css CHANGED
@@ -1,28 +1,279 @@
 
 
 
 
 
 
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4
  }
5
 
6
  h1 {
7
- font-size: 16px;
8
- margin-top: 0;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
 
 
 
 
 
 
 
 
 
 
28
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ * {
2
+ margin: 0;
3
+ padding: 0;
4
+ box-sizing: border-box;
5
+ }
6
+
7
  body {
8
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
9
+ background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #1e3c72 100%);
10
+ color: #fff;
11
+ line-height: 1.6;
12
+ min-height: 100vh;
13
+ padding: 20px;
14
+ }
15
+
16
+ .container {
17
+ max-width: 1200px;
18
+ margin: 0 auto;
19
+ }
20
+
21
+ header {
22
+ text-align: center;
23
+ margin-bottom: 40px;
24
+ background: rgba(255, 255, 255, 0.15);
25
+ backdrop-filter: blur(15px);
26
+ padding: 30px;
27
+ border-radius: 20px;
28
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
29
+ border: 1px solid rgba(255, 255, 255, 0.2);
30
  }
31
 
32
  h1 {
33
+ color: #fff;
34
+ font-size: 2.5rem;
35
+ margin-bottom: 10px;
36
+ text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
37
+ }
38
+
39
+ .tagline {
40
+ color: #f0f0f0;
41
+ font-size: 1.2rem;
42
+ margin-bottom: 20px;
43
+ font-weight: bold;
44
+ }
45
+
46
+ .python-king {
47
+ background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
48
+ color: white;
49
+ padding: 20px;
50
+ border-radius: 15px;
51
+ font-size: 1.3rem;
52
+ font-weight: bold;
53
+ margin: 25px 0;
54
+ box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
55
+ text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
56
+ text-align: center;
57
+ }
58
+
59
+ .main-links {
60
+ display: flex;
61
+ gap: 20px;
62
+ justify-content: center;
63
+ flex-wrap: wrap;
64
+ margin: 25px 0;
65
+ }
66
+
67
+ .main-link {
68
+ background: linear-gradient(45deg, #ff4757, #ff6b6b);
69
+ color: white;
70
+ padding: 15px 30px;
71
+ text-decoration: none;
72
+ border-radius: 30px;
73
+ font-weight: bold;
74
+ font-size: 1.1rem;
75
+ transition: all 0.3s ease;
76
+ display: inline-flex;
77
+ align-items: center;
78
+ gap: 10px;
79
+ box-shadow: 0 8px 20px rgba(255, 71, 87, 0.4);
80
+ text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
81
+ }
82
+
83
+ .main-link:hover {
84
+ background: linear-gradient(45deg, #ff3838, #ff5252);
85
+ transform: translateY(-3px);
86
+ box-shadow: 0 12px 30px rgba(255, 71, 87, 0.6);
87
+ }
88
+
89
+ .table-section {
90
+ background: rgba(255, 255, 255, 0.98);
91
+ padding: 35px;
92
+ border-radius: 15px;
93
+ box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
94
+ border: 1px solid rgba(255, 255, 255, 0.3);
95
+ margin-top: 30px;
96
+ }
97
+
98
+ .section-title {
99
+ color: #2c3e50;
100
+ font-size: 1.8rem;
101
+ margin-bottom: 25px;
102
+ text-align: center;
103
+ border-bottom: 4px solid #ff6b6b;
104
+ padding-bottom: 15px;
105
+ background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
106
+ -webkit-background-clip: text;
107
+ -webkit-text-fill-color: transparent;
108
+ background-clip: text;
109
+ font-weight: bold;
110
+ }
111
+
112
+ .learning-table {
113
+ width: 100%;
114
+ border-collapse: collapse;
115
+ margin-top: 20px;
116
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
117
+ border-radius: 10px;
118
+ overflow: hidden;
119
+ }
120
+
121
+ .learning-table th {
122
+ background: linear-gradient(45deg, #2c3e50, #34495e);
123
+ color: white;
124
+ padding: 18px 15px;
125
+ font-weight: bold;
126
+ font-size: 1.1rem;
127
+ text-align: left;
128
+ text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
129
+ }
130
+
131
+ .learning-table td {
132
+ padding: 15px;
133
+ border-bottom: 1px solid #ecf0f1;
134
+ background: #fff;
135
+ color: #2c3e50;
136
+ vertical-align: middle;
137
  }
138
 
139
+ .learning-table tr:hover td {
140
+ background: #f8f9fa;
141
+ transform: scale(1.01);
142
+ transition: all 0.2s ease;
 
143
  }
144
 
145
+ .level-cell {
146
+ text-align: center;
147
+ font-weight: bold;
148
+ width: 80px;
 
 
149
  }
150
 
151
+ .level-badge {
152
+ background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
153
+ color: white;
154
+ padding: 8px 15px;
155
+ border-radius: 25px;
156
+ font-weight: bold;
157
+ font-size: 1rem;
158
+ text-align: center;
159
+ box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
160
+ text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
161
+ display: inline-block;
162
+ min-width: 40px;
163
  }
164
+
165
+ .title-cell {
166
+ font-weight: 600;
167
+ font-size: 1.1rem;
168
+ color: #2c3e50;
169
+ }
170
+
171
+ .link-cell {
172
+ text-align: center;
173
+ width: 120px;
174
+ }
175
+
176
+ .video-btn {
177
+ background: linear-gradient(45deg, #ff4757, #ff6b6b);
178
+ color: white;
179
+ padding: 8px 16px;
180
+ text-decoration: none;
181
+ border-radius: 20px;
182
+ font-weight: 500;
183
+ font-size: 0.9rem;
184
+ display: inline-flex;
185
+ align-items: center;
186
+ gap: 6px;
187
+ transition: all 0.3s ease;
188
+ box-shadow: 0 4px 15px rgba(255, 71, 87, 0.4);
189
+ margin: 2px;
190
+ }
191
+
192
+ .video-btn:hover {
193
+ background: linear-gradient(45deg, #ff3838, #ff5252);
194
+ transform: scale(1.1);
195
+ box-shadow: 0 6px 20px rgba(255, 71, 87, 0.6);
196
+ }
197
+
198
+ .doc-btn {
199
+ background: linear-gradient(45deg, #2c3e50, #34495e);
200
+ color: white;
201
+ padding: 8px 16px;
202
+ text-decoration: none;
203
+ border-radius: 20px;
204
+ font-weight: 500;
205
+ font-size: 0.9rem;
206
+ display: inline-flex;
207
+ align-items: center;
208
+ gap: 6px;
209
+ transition: all 0.3s ease;
210
+ box-shadow: 0 4px 15px rgba(44, 62, 80, 0.4);
211
+ margin: 2px;
212
+ }
213
+
214
+ .doc-btn:hover {
215
+ background: linear-gradient(45deg, #34495e, #4a6ba3);
216
+ transform: scale(1.1);
217
+ box-shadow: 0 6px 20px rgba(44, 62, 80, 0.6);
218
+ }
219
+
220
+ .roadmap-sections {
221
+ display: grid;
222
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
223
+ gap: 20px;
224
+ margin: 30px 0;
225
+ }
226
+
227
+ .roadmap-item {
228
+ background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(240, 248, 255, 0.95));
229
+ padding: 25px;
230
+ border-radius: 12px;
231
+ box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
232
+ border-left: 5px solid #ff6b6b;
233
+ transition: all 0.3s ease;
234
+ }
235
+
236
+ .roadmap-item:hover {
237
+ transform: translateY(-5px);
238
+ box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
239
+ border-left-color: #4ecdc4;
240
+ }
241
+
242
+ .roadmap-item h3 {
243
+ color: #2c3e50;
244
+ margin-bottom: 10px;
245
+ font-size: 1.2rem;
246
+ }
247
+
248
+ .roadmap-item p {
249
+ color: #34495e;
250
+ font-weight: 500;
251
+ }
252
+
253
+ @media (max-width: 768px) {
254
+ .container {
255
+ padding: 10px;
256
+ }
257
+
258
+ h1 {
259
+ font-size: 2rem;
260
+ }
261
+
262
+ .main-links {
263
+ flex-direction: column;
264
+ align-items: center;
265
+ }
266
+
267
+ .learning-table {
268
+ font-size: 0.9rem;
269
+ }
270
+
271
+ .learning-table th,
272
+ .learning-table td {
273
+ padding: 10px 8px;
274
+ }
275
+
276
+ .roadmap-sections {
277
+ grid-template-columns: 1fr;
278
+ }
279
+ }