Hugging Face's logo

Spaces:
Omarrran
/
deepseekwebsites-hnm
Running

App Files
xet
Community
Omarrran commited on
Commit
a0f3ca7
·
verified ·
1 Parent(s): 7c7e872

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +225 -19
style.css CHANGED
@@ -1,28 +1,234 @@
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
+ /* Custom styles for the About page */
2
+
3
+ .about-container {
4
+ display: flex;
5
+ flex-direction: column;
6
+ gap: var(--spacing-xl);
7
+ }
8
+
9
+ .about-header {
10
+ display: flex;
11
+ align-items: center;
12
+ gap: var(--spacing-xl);
13
+ margin-bottom: var(--spacing-xl);
14
+ }
15
+
16
+ .about-header-content {
17
+ flex: 1;
18
+ }
19
+
20
+ .about-header-content h2 {
21
+ font-size: 2rem;
22
+ margin-bottom: var(--spacing-md);
23
+ }
24
+
25
+ .about-header-content p {
26
+ color: var(--text-light);
27
+ font-size: 1.1rem;
28
+ line-height: 1.6;
29
+ }
30
+
31
+ .about-image {
32
+ flex: 1;
33
+ max-width: 400px;
34
+ border-radius: var(--radius-lg);
35
+ overflow: hidden;
36
+ box-shadow: var(--shadow-md);
37
+ }
38
+
39
+ .about-image img {
40
+ width: 100%;
41
+ height: auto;
42
+ transition: transform var(--transition-normal);
43
+ }
44
+
45
+ .about-image:hover img {
46
+ transform: scale(1.05);
47
+ }
48
+
49
+ .about-section {
50
+ margin-bottom: var(--spacing-xl);
51
+ }
52
+
53
+ .about-section h3 {
54
+ font-size: 1.5rem;
55
+ margin-bottom: var(--spacing-md);
56
+ position: relative;
57
+ padding-bottom: var(--spacing-sm);
58
+ }
59
+
60
+ .about-section h3::after {
61
+ content: '';
62
+ position: absolute;
63
+ bottom: 0;
64
+ left: 0;
65
+ width: 50px;
66
+ height: 3px;
67
+ background-color: var(--primary-color);
68
+ border-radius: var(--radius-sm);
69
+ }
70
+
71
+ .about-section p {
72
+ margin-bottom: var(--spacing-md);
73
+ line-height: 1.6;
74
+ }
75
+
76
+ .about-section ul {
77
+ list-style: disc;
78
+ padding-left: var(--spacing-xl);
79
+ margin-bottom: var(--spacing-md);
80
+ }
81
+
82
+ .about-section ul li {
83
+ margin-bottom: var(--spacing-sm);
84
+ }
85
+
86
+ .about-grid {
87
+ display: grid;
88
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
89
+ gap: var(--spacing-lg);
90
+ }
91
+
92
+ .about-card {
93
+ background-color: var(--card-bg);
94
+ padding: var(--spacing-lg);
95
+ border-radius: var(--radius-lg);
96
+ box-shadow: var(--shadow-md);
97
+ transition: all var(--transition-normal);
98
+ }
99
+
100
+ .about-card:hover {
101
+ transform: translateY(-5px);
102
+ box-shadow: var(--shadow-lg);
103
+ }
104
+
105
+ .about-card-icon {
106
+ width: 50px;
107
+ height: 50px;
108
+ display: flex;
109
+ align-items: center;
110
+ justify-content: center;
111
+ background-color: rgba(76, 175, 80, 0.1);
112
+ color: var(--primary-color);
113
+ border-radius: var(--radius-circle);
114
+ margin-bottom: var(--spacing-md);
115
+ font-size: 1.5rem;
116
+ }
117
+
118
+ .about-card h4 {
119
+ margin-bottom: var(--spacing-sm);
120
+ font-size: 1.2rem;
121
+ }
122
+
123
+ .about-card p {
124
+ color: var(--text-light);
125
+ }
126
+
127
+ .timeline {
128
+ position: relative;
129
+ max-width: 1200px;
130
+ margin: 0 auto;
131
+ }
132
+
133
+ .timeline::after {
134
+ content: '';
135
+ position: absolute;
136
+ width: 3px;
137
+ background-color: var(--border-color);
138
+ top: 0;
139
+ bottom: 0;
140
+ left: 50%;
141
+ margin-left: -1.5px;
142
+ }
143
+
144
+ .timeline-item {
145
+ padding: var(--spacing-md) 0;
146
+ position: relative;
147
+ width: 50%;
148
+ box-sizing: border-box;
149
+ }
150
+
151
+ .timeline-item:nth-child(odd) {
152
+ left: 0;
153
+ padding-right: var(--spacing-xl);
154
+ }
155
+
156
+ .timeline-item:nth-child(even) {
157
+ left: 50%;
158
+ padding-left: var(--spacing-xl);
159
+ }
160
+
161
+ .timeline-content {
162
+ padding: var(--spacing-md);
163
+ background-color: var(--card-bg);
164
+ border-radius: var(--radius-md);
165
+ box-shadow: var(--shadow-md);
166
+ position: relative;
167
+ }
168
+
169
+ .timeline-content::after {
170
+ content: '';
171
+ position: absolute;
172
+ width: 20px;
173
+ height: 20px;
174
+ background-color: var(--primary-color);
175
+ border-radius: 50%;
176
+ top: 50%;
177
+ transform: translateY(-50%);
178
+ }
179
+
180
+ .timeline-item:nth-child(odd) .timeline-content::after {
181
+ right: -10px;
182
+ }
183
+
184
+ .timeline-item:nth-child(even) .timeline-content::after {
185
+ left: -10px;
186
  }
187
 
188
+ .timeline-date {
189
+ color: var(--primary-color);
190
+ font-weight: 600;
191
+ margin-bottom: var(--spacing-xs);
192
  }
193
 
194
+ .timeline-title {
195
+ margin-bottom: var(--spacing-xs);
 
 
 
196
  }
197
 
198
+ .timeline-description {
199
+ color: var(--text-light);
 
 
 
 
200
  }
201
 
202
+ @media (max-width: 768px) {
203
+ .about-header {
204
+ flex-direction: column;
205
+ }
206
+
207
+ .about-image {
208
+ max-width: 100%;
209
+ }
210
+
211
+ .timeline::after {
212
+ left: 31px;
213
+ }
214
+
215
+ .timeline-item {
216
+ width: 100%;
217
+ padding-left: 70px;
218
+ padding-right: 0;
219
+ }
220
+
221
+ .timeline-item:nth-child(odd) {
222
+ left: 0;
223
+ padding-right: 0;
224
+ }
225
+
226
+ .timeline-item:nth-child(even) {
227
+ left: 0;
228
+ padding-left: 70px;
229
+ }
230
+
231
+ .timeline-content::after {
232
+ left: -10px;
233
+ }
234
  }