Update index.html

Author: VaibhavRawat27

index.html

@@ -55,6 +55,20 @@
     header h1 { font-size: 2.5rem; color: #00FFD1; }
     header p { font-size: 1.1rem; color: #ccc; margin-top: 0.5rem; }
 
+    .join-button {
+      display: inline-block;
+      margin-top: 1rem;
+      padding: 0.7rem 1.5rem;
+      background-color: #00FFD1;
+      color: #000;
+      text-decoration: none;
+      border-radius: 6px;
+      font-weight: bold;
+      transition: background-color 0.3s;
+    }
+
+    .join-button:hover { background-color: #00d5b0; }
+
     .marquee {
       background-color: rgba(17, 17, 17, 0.8);
       padding: 1rem 0;
@@ -82,9 +96,8 @@
     .marquee-content a:nth-child(1) i { color: #E4405F; }
     .marquee-content a:nth-child(2) i { color: #0077B5; }
     .marquee-content a:nth-child(3) i { color: #5865F2; }
-    .marquee-content a:nth-child(4) i { color: #25D366; }
-    .marquee-content a:nth-child(5) i { color: #FF0000; }
-    .marquee-content a:nth-child(6) i { color: #333; }
+    .marquee-content a:nth-child(4) i { color: #FF0000; }
+    .marquee-content a:nth-child(5) i { color: #333; }
 
     @keyframes scroll {
       from { transform: translateX(100%); }
@@ -97,6 +110,7 @@
       margin: auto;
       background-color: rgba(0, 0, 0, 0.5);
       border-radius: 10px;
+      margin-bottom: 1rem;
     }
 
     section h2 {
@@ -128,7 +142,7 @@
     .card:hover { transform: scale(1.05); }
     .card img { width: 80px; height: 80px; border-radius: 50%; margin-bottom: 1rem; }
 
-    .register-button {
+    .button {
       display: inline-block;
       margin-top: 0.8rem;
       padding: 0.6rem 1.2rem;
@@ -140,7 +154,7 @@
       transition: background-color 0.3s;
     }
 
-    .register-button:hover { background-color: #00FFD1; }
+    .button:hover { background-color: #00d5b0; }
 
     footer {
       background-color: rgba(17, 17, 17, 0.8);
@@ -178,14 +192,14 @@
       <img src="logo.png" alt="Fork & Flow Logo">
       <h1>Fork & Flow</h1>
       <p>Open Source for Everyone | Learn • Build • Contribute</p>
+      <a href="https://github.com/forkandflow" target="_blank" class="join-button">JOIN US</a>
     </header>
 
     <div class="marquee">
       <div class="marquee-content">
         <a href="#"><i class="fab fa-instagram"></i></a>
         <a href="#"><i class="fab fa-linkedin"></i></a>
         <a href="#"><i class="fab fa-discord"></i></a>
-<!--         <a href="#"><i class="fab fa-whatsapp"></i></a> -->
         <a href="#"><i class="fab fa-youtube"></i></a>
         <a href="#"><i class="fab fa-github"></i></a>
       </div>
@@ -209,35 +223,50 @@ <h2>Vision</h2>
     <section id="projects">
       <h2>What We're Building</h2>
       <div class="team">
-        <div class="card"><img src="dottar_logo.png" alt="Dottar"><h3>Dottar</h3><p>Secure Version Control System</p></div>
-<!--         <div class="card"><img src="logo.png" alt="Demo 2"><h3>Demo 2</h3><p>Data Dashboard</p></div>
-        <div class="card"><img src="logo.png" alt="Demo 3"><h3>Demo 3</h3><p>Delivery Optimizer</p></div>
-        <div class="card"><img src="logo.png" alt="Demo 4"><h3>Demo 4</h3><p>Resume Builder</p></div> -->
+        <div class="card">
+          <img src="dottar_logo.png" alt="Dottar">
+          <h3>Dottar</h3>
+          <p>Secure Version Control System</p>
+          <a href="https://forkandflow.github.io/Dottar/" target="_blank" class="button">Visit Project</a>
+        </div>
       </div>
     </section>
 
     <section id="team">
       <h2>Meet the Team</h2>
       <div class="team">
-        <div class="card"><img src="logo.png" alt="TBD"><h3>Vaibhav Rawat</h3><p>Founder</p></div>
-        <div class="card"><img src="logo.png" alt="TBD"><h3>Member 2</h3><p>Role</p></div>
-        <div class="card"><img src="logo.png" alt="TBD"><h3>Member 3</h3><p>Role</p></div>
-        <div class="card"><img src="logo.png" alt="TBD"><h3>Member 4</h3><p>Role</p></div>
+        <div class="card">
+          <img src="logo.png" alt="TBD">
+          <h3>Vaibhav Rawat</h3>
+          <p>Founder</p>
+          <a href="https://linkedin.com/in/vaibhavrawat27" target="_blank" class="button">View More</a>
+        </div>
+        <div class="card">
+          <img src="logo.png" alt="TBD">
+          <h3>Member 2</h3>
+          <p>Role</p>
+          <a href="#" target="_blank" class="button">View More</a>
+        </div>
+        <div class="card">
+          <img src="logo.png" alt="TBD">
+          <h3>Member 3</h3>
+          <p>Role</p>
+          <a href="#" target="_blank" class="button">View More</a>
+        </div>
+        <div class="card">
+          <img src="logo.png" alt="TBD">
+          <h3>Member 4</h3>
+          <p>Role</p>
+          <a href="#" target="_blank" class="button">View More</a>
+        </div>
       </div>
     </section>
 
-<!--     <section id="partners">
-      <h2>Partners</h2>
-      <div class="team">
-        <div class="card"><img src="logo.png" alt="Partner 1"><h3>Partner 1</h3></div>
-        <div class="card"><img src="logo.png" alt="Partner 2"><h3>Partner 2</h3></div>
-      </div>
-    </section> -->
-
     <section id="contact">
       <h2>Work With Us</h2>
       <p>Have a project idea, collaboration offer, or opportunity? We’d love to hear from you.</p>
       <p>📧 <strong>hello.forkandflow@gmail.com</strong></p>
+      <p><strong>Follow us on all social media for updates!</strong></p>
     </section>
 
     <footer>
@@ -246,7 +275,6 @@ <h2>Work With Us</h2>
         <a href="#"><i class="fab fa-instagram"></i></a>
         <a href="#"><i class="fab fa-linkedin"></i></a>
         <a href="#"><i class="fab fa-discord"></i></a>
-<!--         <a href="#"><i class="fab fa-whatsapp"></i></a> -->
         <a href="#"><i class="fab fa-youtube"></i></a>
         <a href="#"><i class="fab fa-github"></i></a>
       </p>