Merge pull request #1627 from ArchanRD/fix-cards-width

FIxed the cards to take proper width
iamrahulmahato · Oct 23, 2024 · ead3963 · ead3963
2 parents 8d1c810 + 570ea90
commit ead3963
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 19 deletions.
diff --git a/css/style.css b/css/style.css
@@ -456,6 +456,7 @@ body {
   }
 
 .card {
+  width: 333px;
     background: var(--card);
     border-radius: 8px;
     color: var(--head);

diff --git a/index.html b/index.html
@@ -1888,7 +1888,7 @@ <h1>Have a <span>Feedback?</span></h1>
 
             <button id="scrollToTopBtn" title="Go to top"><i class="ri-arrow-up-double-fill"></i></button>
 
-
+        <div class="projects-container">
           <a href="./projects/Flappy Bird/index.html" class="card">
             <div class="card-cover counter-cover-colour">
               <img src="assets/image/flappybird.png" alt="Flappy Bird" />
@@ -2301,22 +2301,19 @@ <h3 class="card-heading">Bubble Hit Game</h3>
             </p>
           </div>
         </a>
-        <!--============================== End =========================================== -->
 
+        <!--============================== End =========================================== -->
         <a href="./projects/Chatbot/index.html" class="card" target="_blank">
-          <div class="card-cover counter-cover-colour">
-            <img src="./assets/image/chat-7767693_1280.jpg" alt="chatbot" />
-          </div>
-          <div class="card-content">
-            <h3 class="card-heading">Chatbot</h3>
-            <p class="card-description">
-              A simple chatbot. <br />
-              <strong>
-                Please use your own google gemini api key for the chatbot to
-                work.
-              </strong>
-            </p>
-          </div>
+            <div class="card-cover counter-cover-colour">
+              <img src="./assets/image/chat-7767693_1280.jpg" alt="chatbot" />
+            </div>
+            <div class="card-content">
+              <h3 class="card-heading">Chatbot</h3>
+              <p class="card-description">
+                A simple chatbot.<b>Please use your own google gemini api key for the chatbot to
+                    work</b>
+              </p>
+            </div>
         </a>
 
         <a href="./projects/Relaxio" class="card">
@@ -2402,10 +2399,7 @@ <h3 class="card-heading">3D Music Visualizer</h3>
               Experience the most realistic 3D music visualizer.
             </p>
           </div>
-        </a>
-
-
-
+        </a>               
 
 
  <!-- =========================== Recipe Book ================================= -->
@@ -2420,6 +2414,7 @@ <h3 class="card-heading">Recipe Book</h3>
             </p>
         </div>
     </a>
+
 <!-- =========================== ================================= -->
 
     <a href="projects/Othello/index.html" class="card" target="_blank">
@@ -2444,6 +2439,8 @@ <h3 class="card-heading">Eigen Value and Vector Calculator</h3>
             </p>
         </div>
     </a>
+</div>
+
     </section>
     <!--============================== End =========================================== -->