making changes in dance.html

css/dance.css

@@ -26,11 +26,54 @@
 }
 
 
-h5.card-title{
-  line-height:1.6rem;
-}
+
 
 
 #footer a {
     padding: 0.8rem;
+}
+
+.flip-card {
+  background-color: transparent;
+  width: 300px;
+  height: 200px;
+  border: 1px solid #f1f1f1;
+  perspective: 1000px; /* Remove this if you don't want the 3D effect */
+}
+
+/* This container is needed to position the front and back side */
+.flip-card-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.8s;
+  transform-style: preserve-3d;
+}
+
+/* Do an horizontal flip when you move the mouse over the flip box container */
+.flip-card:hover .flip-card-inner {
+  transform: rotateY(180deg);
+}
+
+/* Position the front and back side */
+.flip-card-front, .flip-card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  -webkit-backface-visibility: hidden; /* Safari */
+  backface-visibility: hidden;
+}
+
+/* Style the front side (fallback if image is missing) */
+.flip-card-front {
+  background-color: transparent;
+  color: black;
+}
+
+/* Style the back side */
+.flip-card-back {
+  background-color: black;
+  color: white;
+  transform: rotateY(180deg);
 }

dance.html

@@ -77,30 +77,50 @@ <h4 class="text-center font-italic mb-4">Dance List
       <span class="fa fa-star fa-lg text-warning"></span>
     </h4>
 
-    <div class="row justify-content-center font-italic mt-4">
+    <div class="row justify-content-center font-italic mt-8">
 
       <div class="col-md-4">
         <!--product card-->
         <article class="card text-center font-italic mb-4">
           <!--product image-->
-          <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTi_46vIgc7etkTFKtqEAjOMqwsleGtb6bBAA&usqp=CAU" alt="image" class="card-img-top">
-          <div class="card-body">
-            <!-- name-->
-            <h5 class="card-title">
-             Hip-hop
-            </h5>
-
 
-
-
 
-            <!--more info button-->
-            <a href="#" class="btn btn-success mb-2">
-                            <i class="fa fa-info-circle" aria-hidden="true"></i>
+            <div class="flip-card">
+                <div class="flip-card-inner">
+                  <div class="flip-card-front">
+                    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTi_46vIgc7etkTFKtqEAjOMqwsleGtb6bBAA&usqp=CAU" alt="Avatar" style="height: 200px;">
+                  </div>
+                  <div class="flip-card-back">
+                    <h1>Hip Hop</h1>
+                    <p>A style of popular music of US black and Hispanic origin, featuring rap with an electronic backing.</p>
+
+                  </div>
+                  </div>
+                  <a href="https://en.wikipedia.org/wiki/Hip_hop" class="btn mb-2">
+                            <i  aria-hidden="true"></i>
+                            More info
+                        </a>
+               </div>
+              <br><br>
+               <div class="flip-card">
+                <div class="flip-card-inner">
+                  <div class="flip-card-front">
+                    <img src="image/ballet.jpg" alt="Avatar" style="height: 200px;">
+                  </div>
+                  <div class="flip-card-back">
+                    <h1>Ballet</h1>
+                    <p>An artistic dance form performed to music, using precise and highly formalized set steps and gestures.</p>
+
+                  </div>
+                  </div>
+                  <a href="https://en.wikipedia.org/wiki/Ballet" class="btn mb-2">
+                            <i aria-hidden="true"></i>
                             More info
                         </a>
+               </div>
 
           </div>
+          <br><br>
         </article>
       </div>
 

game.html

@@ -81,9 +81,9 @@ <h4 class="text-center font-italic mb-4">Game List
       <span class="fa fa-star fa-lg text-warning"></span>
     </h4>
 
-    <div class="row justify-content-center font-italic mt-4">
+    <div class="row text-center font-italic mt-4">
 
-      <div class="col-md-4">
+      <div class="col-md-3">
         <!--product card-->
         <article class="card text-center font-italic mb-4">
           <!--product image-->
@@ -93,18 +93,24 @@ <h4 class="text-center font-italic mb-4">Game List
             <h5 class="card-title">
              Call Of Duty
             </h5>
-
-
-
-
-
-            <!--more info button-->
-            <a href="#" class="btn btn-success mb-2">
+            <a href="https://en.wikipedia.org/wiki/Call_of_Duty" class="btn mb-2">
                             <i class="fa fa-info-circle" aria-hidden="true"></i>
                             More info
                         </a>
 
           </div>
+          <br>
+          <img src="image/pubg.jpg" alt="image" class="card-img-top">
+          <div class="card-body">
+            <h5 class="card-title">
+             PUBG
+            </h5>
+
+
+            <a href="https://en.wikipedia.org/wiki/PlayerUnknown%27s_Battlegrounds" class="btn mb-2">
+                            <i class="fa fa-info-circle" aria-hidden="true"></i>
+                            More info
+                        </a>
         </article>
       </div>