Update index.html

index.html

@@ -47,28 +47,35 @@
           border-top-left-radius: 11px;
           border-top-right-radius: 11px;
         }
-        @media (max-width: 767px) {
-    .title {
-        font-size: 20px; /* Adjust font size for smaller screens */
-    }
-
-    .description {
-        font-size: 12px; /* Adjust font size for smaller screens */
+          .title {
+        font-size: 25px;
     }
-}
-/* Default styles for the audio tag */
-audio {
-    width: 100%; /* Set the audio tag to take the full width */
-}
-
-/* Media query for smaller screens (adjust as needed) */
-@media (max-width: 767px) {
-    audio {
-        width: 80%; /* Adjust the width for smaller screens */
-        max-width: 300px; /* Set a maximum width for better mobile view */
-        margin: 0 auto; /* Center the audio tag */
-    }
-}
+    
+        .description {
+        font-size: 18px;
+      }
+        @media (max-width: 767px) {
+              .title {
+                  font-size: 20px; /* Adjust font size for smaller screens */
+              }
+          
+              .description {
+                  font-size: 12px; /* Adjust font size for smaller screens */
+              }
+          }
+            /* Default styles for the audio tag */
+            audio {
+                width: 100%; /* Set the audio tag to take the full width */
+            }
+            
+            /* Media query for smaller screens (adjust as needed) */
+            @media (max-width: 767px) {
+                audio {
+                    width: 80%; /* Adjust the width for smaller screens */
+                    max-width: 300px; /* Set a maximum width for better mobile view */
+                    margin: 0 auto; /* Center the audio tag */
+                }
+            }
       /* Define initial font sizes */
     </style>
 </head>
@@ -304,8 +311,8 @@ audio {
             <img src="https://i.ytimg.com/vi/7cPvRJ92e50/mqdefault.jpg" style="width: 100%;" alt="" class="song">
         </div>
         <div class="p-3">
-            <h1 style="font-size: 28px;">Heeriye</h1>
-            <p style="font-size: 20px;">Description</p>
+            <h1 class="title">Heeriye</h1>
+            <p class="description">Description</p>
   
             <audio controls class="d-none" id="audio">
                 <source src="ranjha1.mp3" type="audio/mp3" />
@@ -320,8 +327,8 @@ audio {
             <img src="https://i.ytimg.com/vi/7cPvRJ92e50/mqdefault.jpg" style="width: 100%;" alt="" class="song">
         </div>
         <div class="p-3">
-            <h1 style="font-size: 28px;">Heeriye</h1>
-            <p style="font-size: 20px;">Description</p>
+            <h1 class="title">Heeriye</h1>
+            <p class="description">Description</p>
   
             <audio controls class="d-none" id="audio">
                 <source src="ranjha1.mp3" type="audio/mp3" />
@@ -336,8 +343,8 @@ audio {
             <img src="https://i.ytimg.com/vi/7cPvRJ92e50/mqdefault.jpg" style="width: 100%;" alt="" class="song">
         </div>
         <div class="p-3">
-            <h1 style="font-size: 28px;">Heeriye</h1>
-            <p style="font-size: 20px;">Description</p>
+            <h1 class="title">Heeriye</h1>
+            <p class="description">Description</p>
   
             <audio controls class="d-none" id="audio">
                 <source src="ranjha1.mp3" type="audio/mp3" />
@@ -352,8 +359,8 @@ audio {
             <img src="https://i.ytimg.com/vi/7cPvRJ92e50/mqdefault.jpg" style="width: 100%;" alt="" class="song">
         </div>
         <div class="p-3">
-            <h1 style="font-size: 28px;">Heeriye</h1>
-            <p style="font-size: 20px;">Description</p>
+            <h1 class="title">Heeriye</h1>
+            <p class="description">Description</p>
   
             <audio controls class="d-none" id="audio">
                 <source src="ranjha1.mp3" type="audio/mp3" />
@@ -373,8 +380,8 @@ audio {
             <img src="https://i.ytimg.com/vi/7cPvRJ92e50/mqdefault.jpg" style="width: 100%;" alt="" class="song">
         </div>
         <div class="p-3">
-            <h1 style="font-size: 28px;">Heeriye</h1>
-            <p style="font-size: 20px;">Description</p>
+            <h1 class="title">Heeriye</h1>
+            <p class="description">Description</p>
   
             <audio controls class="d-none" id="audio">
                 <source src="ranjha1.mp3" type="audio/mp3" />
@@ -389,8 +396,8 @@ audio {
             <img src="https://i.ytimg.com/vi/7cPvRJ92e50/mqdefault.jpg" style="width: 100%;" alt="" class="song">
         </div>
         <div class="p-3">
-            <h1 style="font-size: 28px;">Heeriye</h1>
-            <p style="font-size: 20px;">Description</p>
+            <h1 class="title">Heeriye</h1>
+            <p class="description">Description</p>
   
             <audio controls class="d-none" id="audio">
                 <source src="ranjha1.mp3" type="audio/mp3" />
@@ -405,8 +412,8 @@ audio {
             <img src="https://i.ytimg.com/vi/7cPvRJ92e50/mqdefault.jpg" style="width: 100%;" alt="" class="song">
         </div>
         <div class="p-3">
-            <h1 style="font-size: 28px;">Heeriye</h1>
-            <p style="font-size: 20px;">Description</p>
+            <h1 class="title">Heeriye</h1>
+            <p class="description">Description</p>
   
             <audio controls class="d-none" id="audio">
                 <source src="ranjha1.mp3" type="audio/mp3" />
@@ -421,8 +428,8 @@ audio {
             <img src="https://i.ytimg.com/vi/7cPvRJ92e50/mqdefault.jpg" style="width: 100%;" alt="" class="song">
         </div>
         <div class="p-3">
-            <h1 style="font-size: 28px;">Heeriye</h1>
-            <p style="font-size: 20px;">Description</p>
+            <h1 class="title">Heeriye</h1>
+            <p class="description">Description</p>
   
             <audio controls class="d-none" id="audio">
                 <source src="ranjha1.mp3" type="audio/mp3" />