Skip to content

Commit 1197777

Browse files
VaibhavRawat27VaibhavRawat27
authored
Update index.html
1 parent 755766c commit 1197777

1 file changed

Lines changed: 209 additions & 87 deletions

File tree

‎index.html‎

Lines changed: 209 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -7,21 +7,79 @@
77
<link rel="icon" href="logo.png" type="image/png" class="circle-favicon">
88
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
99
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
10+
1011
<style>
11-
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', sans-serif; }
12-
.circle-favicon { border-radius: 50%; }
13-
body { background-color: #0a0a0a; color: #fff; }
12+
* {
13+
margin: 0;
14+
padding: 0;
15+
box-sizing: border-box;
16+
font-family: 'Inter', sans-serif;
17+
}
18+
19+
body, html {
20+
height: 100%;
21+
width: 100%;
22+
overflow-x: hidden;
23+
background-color: #0a0a0a;
24+
position: relative;
25+
z-index: 1;
26+
}
27+
28+
#particles-js {
29+
position: fixed;
30+
width: 100%;
31+
height: 100%;
32+
background: #0a0a0a;
33+
z-index: 0;
34+
top: 0;
35+
left: 0;
36+
}
37+
38+
main {
39+
position: relative;
40+
z-index: 1;
41+
}
42+
43+
header {
44+
text-align: center;
45+
padding: 2rem 1rem 1rem;
46+
background-color: rgba(17, 17, 17, 0.85);
47+
}
48+
49+
header img {
50+
width: 100px;
51+
height: 100px;
52+
border-radius: 50%;
53+
object-fit: cover;
54+
border: 3px solid #00FFD1;
55+
}
1456

15-
header { text-align: center; padding: 2rem 1rem 1rem; background-color: #111; }
16-
header img { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; border: 3px solid #00FFD1; }
1757
header h1 { font-size: 2.5rem; color: #00FFD1; }
1858
header p { font-size: 1.1rem; color: #ccc; margin-top: 0.5rem; }
1959

20-
.marquee { background-color: #111; padding: 1rem 0; overflow: hidden; position: relative; }
21-
.marquee-content { display: flex; animation: scroll 30s linear infinite; gap: 3rem; align-items: center; }
60+
.marquee {
61+
background-color: rgba(17, 17, 17, 0.85);
62+
padding: 1rem 0;
63+
overflow: hidden;
64+
}
65+
66+
.marquee-content {
67+
display: flex;
68+
animation: scroll 30s linear infinite;
69+
gap: 3rem;
70+
align-items: center;
71+
}
72+
2273
.marquee:hover .marquee-content { animation-play-state: paused; }
23-
.marquee-content a { font-size: 3rem; transition: transform 0.3s; text-decoration: none; }
74+
75+
.marquee-content a {
76+
font-size: 3rem;
77+
transition: transform 0.3s;
78+
text-decoration: none;
79+
}
80+
2481
.marquee-content a:hover { transform: scale(1.2); }
82+
2583
.marquee-content a:nth-child(1) i { color: #E4405F; }
2684
.marquee-content a:nth-child(2) i { color: #0077B5; }
2785
.marquee-content a:nth-child(3) i { color: #5865F2; }
@@ -34,9 +92,26 @@
3492
to { transform: translateX(-100%); }
3593
}
3694

37-
section { padding: 2.5rem 1.2rem; max-width: 1000px; margin: auto; }
38-
section h2 { font-size: 2rem; color: #00FFD1; margin-bottom: 1rem; }
39-
section p { font-size: 1.1rem; line-height: 1.6; color: #ddd; }
95+
section {
96+
padding: 2.5rem 1.2rem;
97+
max-width: 1000px;
98+
margin: auto;
99+
background-color: rgba(0, 0, 0, 0.5);
100+
border-radius: 10px;
101+
margin-top: 1rem;
102+
}
103+
104+
section h2 {
105+
font-size: 2rem;
106+
color: #00FFD1;
107+
margin-bottom: 1rem;
108+
}
109+
110+
section p {
111+
font-size: 1.1rem;
112+
line-height: 1.6;
113+
color: #ddd;
114+
}
40115

41116
.team {
42117
display: grid;
@@ -70,7 +145,7 @@
70145
.register-button:hover { background-color: #00FFD1; }
71146

72147
footer {
73-
background-color: #111;
148+
background-color: rgba(17, 17, 17, 0.85);
74149
text-align: center;
75150
padding: 1.5rem;
76151
color: #999;
@@ -98,82 +173,129 @@
98173
</style>
99174
</head>
100175
<body>
101-
<header>
102-
<img src="logo.png" alt="Fork & Flow Logo">
103-
<h1>Fork & Flow</h1>
104-
<p>Open Source for Everyone | Learn • Build • Contribute</p>
105-
</header>
106-
107-
<div class="marquee">
108-
<div class="marquee-content">
109-
<a href="#"><i class="fab fa-instagram"></i></a>
110-
<a href="#"><i class="fab fa-linkedin"></i></a>
111-
<a href="#"><i class="fab fa-discord"></i></a>
112-
<a href="#"><i class="fab fa-whatsapp"></i></a>
113-
<a href="#"><i class="fab fa-youtube"></i></a>
114-
<a href="#"><i class="fab fa-github"></i></a>
115-
</div>
116-
</div>
117-
118-
<section id="about">
119-
<h2>Who We Are</h2>
120-
<p>Fork & Flow is an innovation-first open-source studio building tools, platforms, and digital solutions in public — for everyone. We aim to empower developers and teams to learn by doing, and grow by building real products together.</p>
121-
</section>
122-
123-
<section id="mission">
124-
<h2>Mission</h2>
125-
<p>To democratize innovation through open collaboration — making impactful software while sharing everything we learn along the way.</p>
126-
</section>
127-
128-
<section id="vision">
129-
<h2>Vision</h2>
130-
<p>To be the world’s most accessible and transparent open innovation lab, inspiring a generation to learn, build, and share their ideas freely.</p>
131-
</section>
132-
133-
<section id="projects">
134-
<h2>What We're Building</h2>
135-
<div class="team">
136-
<div class="card"><img src="logo.png" alt="Demo 1"><h3>Demo 1</h3><p>Startup Builder</p></div>
137-
<div class="card"><img src="logo.png" alt="Demo 2"><h3>Demo 2</h3><p>Data Dashboard</p></div>
138-
<div class="card"><img src="logo.png" alt="Demo 3"><h3>Demo 3</h3><p>Delivery Optimizer</p></div>
139-
<div class="card"><img src="logo.png" alt="Demo 4"><h3>Demo 4</h3><p>Resume Builder</p></div>
140-
</div>
141-
</section>
142-
143-
<section id="team">
144-
<h2>Meet the Team</h2>
145-
<div class="team">
146-
<div class="card"><img src="logo.png" alt="TBD"><h3>Member 1</h3><p>Role</p></div>
147-
<div class="card"><img src="logo.png" alt="TBD"><h3>Member 2</h3><p>Role</p></div>
148-
<div class="card"><img src="logo.png" alt="TBD"><h3>Member 3</h3><p>Role</p></div>
149-
<div class="card"><img src="logo.png" alt="TBD"><h3>Member 4</h3><p>Role</p></div>
150-
</div>
151-
</section>
176+
<div id="particles-js"></div>
152177

153-
<section id="partners">
154-
<h2>Partners</h2>
155-
<div class="team">
156-
<div class="card"><img src="logo.png" alt="Partner 1"><h3>Partner 1</h3></div>
157-
<div class="card"><img src="logo.png" alt="Partner 2"><h3>Partner 2</h3></div>
178+
<main>
179+
<header>
180+
<img src="logo.png" alt="Fork & Flow Logo">
181+
<h1>Fork & Flow</h1>
182+
<p>Open Source for Everyone | Learn • Build • Contribute</p>
183+
</header>
184+
185+
<div class="marquee">
186+
<div class="marquee-content">
187+
<a href="#"><i class="fab fa-instagram"></i></a>
188+
<a href="#"><i class="fab fa-linkedin"></i></a>
189+
<a href="#"><i class="fab fa-discord"></i></a>
190+
<a href="#"><i class="fab fa-whatsapp"></i></a>
191+
<a href="#"><i class="fab fa-youtube"></i></a>
192+
<a href="#"><i class="fab fa-github"></i></a>
193+
</div>
158194
</div>
159-
</section>
160-
161-
<section id="contact">
162-
<h2>Work With Us</h2>
163-
<p>Have a project idea, collaboration offer, or opportunity you think aligns with our work? We’d love to hear from you.</p>
164-
<p>📧 <strong>hello.forkandflow@gmail.com</strong></p>
165-
</section>
166-
167-
<footer>
168-
&copy; 2025 Fork & Flow • Built with ❤️ to build in public<br>
169-
<p>Find us on:
170-
<a href="#"><i class="fab fa-instagram"></i></a>
171-
<a href="#"><i class="fab fa-linkedin"></i></a>
172-
<a href="#"><i class="fab fa-discord"></i></a>
173-
<a href="#"><i class="fab fa-whatsapp"></i></a>
174-
<a href="#"><i class="fab fa-youtube"></i></a>
175-
<a href="#"><i class="fab fa-github"></i></a>
176-
</p>
177-
</footer>
195+
196+
<section id="about">
197+
<h2>Who We Are</h2>
198+
<p>Fork & Flow is an innovation-first open-source studio building tools, platforms, and digital solutions in public — for everyone.</p>
199+
</section>
200+
201+
<section id="mission">
202+
<h2>Mission</h2>
203+
<p>To democratize innovation through open collaboration — making impactful software while sharing everything we learn along the way.</p>
204+
</section>
205+
206+
<section id="vision">
207+
<h2>Vision</h2>
208+
<p>To be the world’s most accessible and transparent open innovation lab, inspiring a generation to learn, build, and share their ideas freely.</p>
209+
</section>
210+
211+
<section id="projects">
212+
<h2>What We're Building</h2>
213+
<div class="team">
214+
<div class="card"><img src="logo.png" alt="Demo 1"><h3>Demo 1</h3><p>Startup Builder</p></div>
215+
<div class="card"><img src="logo.png" alt="Demo 2"><h3>Demo 2</h3><p>Data Dashboard</p></div>
216+
<div class="card"><img src="logo.png" alt="Demo 3"><h3>Demo 3</h3><p>Delivery Optimizer</p></div>
217+
<div class="card"><img src="logo.png" alt="Demo 4"><h3>Demo 4</h3><p>Resume Builder</p></div>
218+
</div>
219+
</section>
220+
221+
<section id="team">
222+
<h2>Meet the Team</h2>
223+
<div class="team">
224+
<div class="card"><img src="logo.png" alt="TBD"><h3>Member 1</h3><p>Role</p></div>
225+
<div class="card"><img src="logo.png" alt="TBD"><h3>Member 2</h3><p>Role</p></div>
226+
<div class="card"><img src="logo.png" alt="TBD"><h3>Member 3</h3><p>Role</p></div>
227+
<div class="card"><img src="logo.png" alt="TBD"><h3>Member 4</h3><p>Role</p></div>
228+
</div>
229+
</section>
230+
231+
<section id="partners">
232+
<h2>Partners</h2>
233+
<div class="team">
234+
<div class="card"><img src="logo.png" alt="Partner 1"><h3>Partner 1</h3></div>
235+
<div class="card"><img src="logo.png" alt="Partner 2"><h3>Partner 2</h3></div>
236+
</div>
237+
</section>
238+
239+
<section id="contact">
240+
<h2>Work With Us</h2>
241+
<p>Have a project idea, collaboration offer, or opportunity? We’d love to hear from you.</p>
242+
<p>📧 <strong>hello.forkandflow@gmail.com</strong></p>
243+
</section>
244+
245+
<footer>
246+
&copy; 2025 Fork & Flow • Built with ❤️ to build in public<br>
247+
<p>Find us on:
248+
<a href="#"><i class="fab fa-instagram"></i></a>
249+
<a href="#"><i class="fab fa-linkedin"></i></a>
250+
<a href="#"><i class="fab fa-discord"></i></a>
251+
<a href="#"><i class="fab fa-whatsapp"></i></a>
252+
<a href="#"><i class="fab fa-youtube"></i></a>
253+
<a href="#"><i class="fab fa-github"></i></a>
254+
</p>
255+
</footer>
256+
</main>
257+
258+
<!-- Load particles.js -->
259+
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
260+
<script>
261+
particlesJS("particles-js", {
262+
particles: {
263+
number: { value: 65, density: { enable: true, value_area: 800 } },
264+
color: { value: "#aaffff" },
265+
opacity: {
266+
value: 0.15,
267+
random: false,
268+
anim: { enable: false }
269+
},
270+
size: {
271+
value: 3,
272+
random: true
273+
},
274+
line_linked: {
275+
enable: true,
276+
distance: 120,
277+
color: "#aaffff",
278+
opacity: 0.08,
279+
width: 1
280+
},
281+
move: {
282+
enable: true,
283+
speed: 1,
284+
direction: "none",
285+
out_mode: "out"
286+
}
287+
},
288+
interactivity: {
289+
events: {
290+
onhover: { enable: true, mode: "repulse" },
291+
onclick: { enable: false }
292+
},
293+
modes: {
294+
repulse: { distance: 100, duration: 0.4 }
295+
}
296+
},
297+
retina_detect: true
298+
});
299+
</script>
178300
</body>
179301
</html>

0 commit comments

Comments
 (0)