Something Exciting is Coming
We're building a powerful real-time collaboration platform to transform the way teams and educators brainstorm, plan, and create.
→ Seamless teamwork
→ Effortless brainstorming
→ Visual collaboration reimagined
Stay tuned – launching soon!
--------------------------------------------------------------------------------
/web-page/styles.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --bg-color: #ffffff;
3 | --text-color: #2d3748;
4 | --gradient-1: #e77f67;
5 | --gradient-2: #63cdda;
6 | --gradient-3: #818cf8;
7 | --shadow-color: rgba(79, 70, 229, 0.1);
8 | }
9 |
10 | [data-theme="dark"] {
11 | --bg-color: #1a1c2e;
12 | --text-color: #e2e8f0;
13 | --gradient-1: #9f7aea;
14 | --gradient-2: #7ab8ea;
15 | --gradient-3: #7aeac5;
16 | --shadow-color: rgba(0, 0, 0, 0.2);
17 | }
18 |
19 | * {
20 | margin: 0;
21 | padding: 0;
22 | box-sizing: border-box;
23 | }
24 |
25 | body {
26 | background: var(--bg-color);
27 | color: var(--text-color);
28 | font-family: "Outfit", sans-serif;
29 | min-height: 100vh;
30 | display: flex;
31 | transition: all 0.3s ease;
32 | }
33 |
34 | a {
35 | color: var(--gradient-1);
36 | text-decoration: none;
37 | }
38 |
39 | #particles-js {
40 | position: fixed;
41 | width: 100%;
42 | height: 100%;
43 | z-index: 1;
44 | }
45 |
46 | .content {
47 | position: relative;
48 | z-index: 2;
49 | padding: 4rem;
50 | max-width: 1200px;
51 | margin: auto;
52 | }
53 |
54 | .theme-toggle {
55 | position: fixed;
56 | top: 2rem;
57 | right: 2rem;
58 | background: linear-gradient(45deg, var(--gradient-1), var(--gradient-2));
59 | border: none;
60 | width: 3.5rem;
61 | height: 3.5rem;
62 | border-radius: 50%;
63 | cursor: pointer;
64 | z-index: 3;
65 | transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
66 | display: flex;
67 | align-items: center;
68 | justify-content: center;
69 | font-size: 1.5rem;
70 | box-shadow: 0 4px 15px var(--shadow-color);
71 | }
72 |
73 | .theme-toggle:hover {
74 | transform: scale(1.1) rotate(15deg);
75 | box-shadow: 0 6px 20px var(--shadow-color);
76 | }
77 |
78 | h1 {
79 | font-family: "Syne", sans-serif;
80 | font-size: 6rem;
81 | font-weight: 600;
82 | margin-bottom: 2rem;
83 | line-height: 1.1;
84 | background: linear-gradient(
85 | 90deg,
86 | var(--gradient-1),
87 | var(--gradient-2),
88 | var(--gradient-3)
89 | );
90 | -webkit-background-clip: text;
91 | background-clip: text;
92 | color: transparent;
93 | background-size: 200% auto;
94 | animation: fadeUp 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
95 | textShine 3s linear infinite;
96 | opacity: 0;
97 | transform: translateY(30px);
98 | }
99 |
100 | p {
101 | font-size: 1.5rem;
102 | line-height: 1.6;
103 | margin-bottom: 2rem;
104 | opacity: 0;
105 | transform: translateY(30px);
106 | animation: fadeUp 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards 0.2s;
107 | }
108 |
109 | .highlight {
110 | font-family: "Syne", sans-serif;
111 | font-size: 2.5rem;
112 | font-weight: 600;
113 | background: linear-gradient(
114 | 90deg,
115 | var(--gradient-2),
116 | var(--gradient-3),
117 | var(--gradient-1)
118 | );
119 | -webkit-background-clip: text;
120 | background-clip: text;
121 | color: transparent;
122 | background-size: 200% auto;
123 | opacity: 0;
124 | transform: translateY(30px);
125 | animation: fadeUp 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards 0.4s,
126 | textShine 3s linear infinite;
127 | }
128 |
129 | .features {
130 | margin-top: 4rem;
131 | position: relative;
132 | height: 4rem;
133 | }
134 |
135 | .feature {
136 | position: absolute;
137 | font-size: 1.5rem;
138 | opacity: 0;
139 | transform: translateX(-30px);
140 | transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
141 | width: 100%;
142 | }
143 |
144 | .feature.active {
145 | opacity: 1;
146 | transform: translateX(0);
147 | }
148 |
149 | .feature span {
150 | background: linear-gradient(90deg, var(--gradient-3), var(--gradient-1));
151 | -webkit-background-clip: text;
152 | background-clip: text;
153 | color: transparent;
154 | background-size: 200% auto;
155 | animation: textShine 3s linear infinite;
156 | font-weight: 600;
157 | }
158 | .footer {
159 | position: fixed;
160 | bottom: 0;
161 | right: 0;
162 | z-index: 2;
163 | padding: 1rem;
164 | font-size: 0.875rem;
165 | color: var(--text-color);
166 | opacity: 0.7;
167 | background: var(--bg-color);
168 | }
169 |
170 | @media (max-width: 768px) {
171 | .content {
172 | padding: 2rem;
173 | }
174 | h1 {
175 | font-size: 3rem;
176 | }
177 | .highlight {
178 | font-size: 2rem;
179 | }
180 | p {
181 | font-size: 1.25rem;
182 | }
183 | }
184 |
185 | @keyframes textShine {
186 | 0% {
187 | background-position: 0% 50%;
188 | }
189 | 100% {
190 | background-position: 100% 50%;
191 | }
192 | }
193 |
194 | @keyframes fadeUp {
195 | to {
196 | opacity: 1;
197 | transform: translateY(0);
198 | }
199 | }
200 |
201 | @media (max-width: 768px) {
202 | .content {
203 | padding: 2rem;
204 | }
205 | h1 {
206 | font-size: 3rem;
207 | }
208 | .highlight {
209 | font-size: 2rem;
210 | }
211 | p {
212 | font-size: 1.25rem;
213 | }
214 | }
215 |
--------------------------------------------------------------------------------