Merge pull request #158 from ianshulx/earth-10005

added download icon

Author: ianshulx

download.svg

@@ -34,48 +34,60 @@ <h1 class="hero-text"><span class="float-start">React</span><br />Projects for B
       </div>
     </div>
     <!-- buttons -->
-    <section style="margin-left:20px;">
-    <div class="d-flex flex-row justify-content-start align-items-center mb-4 gap-3">
+    <div class="d-flex flex-row justify-content-start align-items-center mt-4 gap-3">
+        
       <!-- Star Repo Icon -->
-      <div style="text-align: center;">
+      <div class="text-center">
         <button class="btn custom-button" style="width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #ffcc00, #ff9900); box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
-          <a href="https://github.com/ianshulx/React-projects-for-beginners" target="_blank" style="text-decoration: none; display: flex; align-items: center; justify-content: center;">
-            <i class="bi bi-star-fill" style="font-size: 20px; color: white;"></i>
+          <a href="https://github.com/ianshulx/React-projects-for-beginners" target="_blank" class="d-flex align-items-center justify-content-center">
+            <i class="bi bi-star-fill text-white" style="font-size: 20px;"></i>
           </a>
         </button>
-        <span style="font-size: 12px; margin-top: 5px; display: block; color: #00ffff;">Star Repo</span> 
+        <span style="font-size: 12px; margin-top: 5px; display: block; color: #00ffff;">Star Repo</span>
       </div>
-    
+
       <!-- Fork Repo Icon -->
-      <div style="text-align: center;">
+      <div class="text-center">
         <button class="btn custom-button" style="width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #00ffcc, #0099ff); box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
-          <a href="https://github.com/ianshulx/React-projects-for-beginners/network" target="_blank" style="text-decoration: none; display: flex; align-items: center; justify-content: center;">
+          <a href="https://github.com/ianshulx/React-projects-for-beginners/network" target="_blank" class="d-flex align-items-center justify-content-center">
             <img src="./code-fork-solid.svg" style="width: 20px; color: white;">
           </a>
         </button>
-        <span style="font-size: 12px; margin-top: 5px; display: block; color: #00ffff;">Fork Repo</span> 
+        <span style="font-size: 12px; margin-top: 5px; display: block; color: #00ffff;">Fork Repo</span>
       </div>
-    
+
       <!-- Contributors Icon -->
-      <div style="text-align: center;">
+      <div class="text-center">
         <button class="btn custom-button" style="width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #ff6699, #ff3366); box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
-          <a href="https://github.com/ianshulx/React-projects-for-beginners/graphs/contributors" target="_blank" style="text-decoration: none; display: flex; align-items: center; justify-content: center;">
+          <a href="https://github.com/ianshulx/React-projects-for-beginners/graphs/contributors" target="_blank" class="d-flex align-items-center justify-content-center">
             <img src="./chess-king-solid.svg" style="width: 20px; color: white;">
           </a>
         </button>
-        <span style="font-size: 12px; margin-top: 5px; display: block; color: #00ffff;">Contributors</span> 
+        <span style="font-size: 12px; margin-top: 5px; display: block; color: #00ffff;">Contributors</span>
       </div>
-    
+
+      <!-- Download Icon -->
+      <div class="text-center">
+        <button class="btn custom-button" style="width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #9ff5a9, #33f24a); box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
+          <a href="https://github.com/ianshulx/React-projects-for-beginners/releases/tag/React" target="_blank" class="d-flex align-items-center justify-content-center">
+            <img src="./download.svg" style="width: 20px; color: white;">
+          </a>
+        </button>
+        <span style="font-size: 12px; margin-top: 5px; display: block; color: #00ffff;">Download</span>
+      </div>
+
       <!-- Maintainer Icon -->
-      <div style="text-align: center;">
-        <button class="btn custom-button" style="width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #d9a6ff, #b266ff); box-shadow: 0 4px 8px rgba(0,0,0,0.1);"> <!-- Light purple gradient -->
-          <a href="https://github.com/ianshulx" target="_blank" style="text-decoration: none; display: flex; align-items: center; justify-content: center;">
+      <div class="text-center">
+        <button class="btn custom-button" style="width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #a7ffa6, #b266ff); box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
+          <a href="https://github.com/ianshulx" target="_blank" class="d-flex align-items-center justify-content-center">
             <img src="./profile.svg" style="width: 20px; color: white;">
           </a>
         </button>
-        <span style="font-size: 12px; margin-top: 5px; display: block; color: #00ffff;">Maintainer</span> 
+        <span style="font-size: 12px; margin-top: 5px; display: block; color: #00ffff;">Maintainer</span>
       </div>
+
     </div>
+
 
     <div class="d-sm-block d-md-flex">
       <a href="https://github.com/ianshulx/React-projects-for-beginners/stargazers">