Hugging Face's logo

Spaces:
Soha85
/
AI_Review
Running

App Files Community
Soha85 commited on
Commit
94c9633
·
verified ·
1 Parent(s): b03d444

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +90 -18
style.css CHANGED
@@ -1,28 +1,100 @@
 
 
 
 
 
 
 
 
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
+ :root {
2
+ --primary: #2563eb;
3
+ --accent: #10b981;
4
+ --bg: #0f172a;
5
+ --text: #f8fafc;
6
+ --card-bg: #1e293b;
7
+ }
8
+
9
  body {
10
+ font-family: 'Segoe UI', sans-serif;
11
+ background-color: var(--bg);
12
+ color: var(--text);
13
+ margin: 0;
14
+ padding: 40px 20px;
15
+ }
16
+
17
+ header {
18
+ text-align: center;
19
+ margin-bottom: 60px;
20
+ }
21
+
22
+ .timeline-container {
23
+ position: relative;
24
+ max-width: 800px;
25
+ margin: 0 auto;
26
+ }
27
+
28
+ .timeline-line {
29
+ position: absolute;
30
+ left: 20px;
31
+ top: 0;
32
+ bottom: 0;
33
+ width: 4px;
34
+ background: var(--primary);
35
+ border-radius: 2px;
36
  }
37
 
38
+ .timeline-item {
39
+ position: relative;
40
+ margin-bottom: 40px;
41
+ padding-left: 60px;
42
+ opacity: 0.6;
43
+ transform: translateX(-10px);
44
+ transition: all 0.4s ease;
45
  }
46
 
47
+ .timeline-item.active, .timeline-item:hover {
48
+ opacity: 1;
49
+ transform: translateX(0);
 
 
50
  }
51
 
52
+ .timeline-dot {
53
+ position: absolute;
54
+ left: 12px;
55
+ top: 20px;
56
+ width: 20px;
57
+ height: 20px;
58
+ background: var(--accent);
59
+ border: 4px solid var(--bg);
60
+ border-radius: 50%;
61
+ z-index: 2;
62
  }
63
 
64
+ .timeline-content {
65
+ background: var(--card-bg);
66
+ padding: 20px;
67
+ border-radius: 12px;
68
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
69
+ border-left: 5px solid var(--primary);
70
  }
71
+
72
+ .date {
73
+ font-weight: bold;
74
+ color: var(--accent);
75
+ font-size: 0.9rem;
76
+ display: block;
77
+ margin-bottom: 5px;
78
+ }
79
+
80
+ h2 {
81
+ margin: 0 0 10px 0;
82
+ font-size: 1.4rem;
83
+ }
84
+
85
+ .details ul {
86
+ margin-top: 10px;
87
+ padding-left: 20px;
88
+ font-size: 0.9rem;
89
+ color: #cbd5e1;
90
+ }
91
+
92
+ /* Responsiveness */
93
+ @media (min-width: 768px) {
94
+ .timeline-line { left: 50%; transform: translateX(-50%); }
95
+ .timeline-dot { left: 50%; transform: translateX(-50%); }
96
+ .timeline-item { width: 50%; padding-left: 0; }
97
+ .timeline-item:nth-child(even) { margin-left: auto; padding-left: 40px; }
98
+ .timeline-item:nth-child(odd) { text-align: right; padding-right: 40px; }
99
+ .timeline-item:nth-child(odd) .timeline-content { border-left: none; border-right: 5px solid var(--primary); }
100
+ }