essential changes made - 2

index.html

@@ -25,7 +25,7 @@ <h1 id="title" class="col-lg-12 col-md-12 col-sm-12">Lionel Messi: The G.O.A.T</
                     target="_blank">Javier Mascherano</a></p>
         </div>
         <hr id="divider">
-        <h1 id="title" class="col-lg-12 col-md-12 col-sm-12">Introduction</h1>
+        <h1 id="title-2" class="col-lg-12 col-md-12 col-sm-12">Introduction</h1>
         <div id="tribute-info">
             <p><span class="yellow-color">Lionel Messi</span>, born on June 24, 1987, in Rosario, <span
                     class="blue-color">Argentina</span>, is widely
@@ -68,7 +68,7 @@ <h1 id="title" class="col-lg-12 col-md-12 col-sm-12">Introduction</h1>
             </p>
         </div>
         <hr id="divider">
-        <h1 id="title" class="col-lg-12 col-md-12 col-sm-12">Timeline</h1>
+        <h1 id="title-3" class="col-lg-12 col-md-12 col-sm-12">Timeline</h1>
         <div id="timeline">
             <ul>
                 <li>
@@ -316,7 +316,7 @@ <h1 id="title" class="col-lg-12 col-md-12 col-sm-12">Timeline</h1>
             </ul>
             <hr id="divider">
         </div>
-        <h1 id="title" class="col-lg-12 col-md-12 col-sm-12">Gallery</h1>
+        <h1 id="title-4" class="col-lg-12 col-md-12 col-sm-12">Gallery</h1>
         <div class="gallery">
             <div class="box"><img src="images/gallery-image-1.jpg" alt="Messi with World Cup in his hands."
                     loading="lazy"></div>
@@ -358,7 +358,7 @@ <h1 id="title" class="col-lg-12 col-md-12 col-sm-12">Gallery</h1>
             <div class="box"><img src="images/gallery-image-20.jpg" alt="The Messi Nation." loading="lazy"></div>
         </div>
         <hr id="divider">
-        <h1 id="title" class="col-lg-12 col-md-12 col-sm-12">Connect with Messi</h1>
+        <h1 id="title-5" class="col-lg-12 col-md-12 col-sm-12">Connect with Messi</h1>
         <div class="connect col-lg-12 col-md-12 col-sm-6">
             <a href="https://twitter.com/TeamMessi" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="16"
                     height="16" fill="currentColor" class="bi bi-twitter-x connect-logo" viewBox="0 0 16 16">

styles.css

@@ -74,7 +74,7 @@ svg {
     font-family: 'Clash Display', sans-serif;
 }
 
-/**title**/
+/**titles**/
 
 #title {
     font-family: 'Clash Display', sans-serif;
@@ -89,6 +89,58 @@ svg {
     margin-top: 30px;
 }
 
+#title-2 {
+    font-family: 'Clash Display', sans-serif;
+    font-weight: 700;
+    font-size: 60px;
+    color: transparent;
+    background: url('images/introduction-background.jpg') center/cover no-repeat;
+    -webkit-background-clip: text;
+    background-clip: text;
+    text-align: center;
+    margin: 20px;
+    margin-top: 30px;
+}
+
+#title-3 {
+    font-family: 'Clash Display', sans-serif;
+    font-weight: 700;
+    font-size: 60px;
+    color: transparent;
+    background: url('images/timeline-background.jpg') center/cover no-repeat;
+    -webkit-background-clip: text;
+    background-clip: text;
+    text-align: center;
+    margin: 20px;
+    margin-top: 30px;
+}
+
+#title-4 {
+    font-family: 'Clash Display', sans-serif;
+    font-weight: 700;
+    font-size: 60px;
+    color: transparent;
+    background: url('images/gallery-background.jpg') center/cover no-repeat;
+    -webkit-background-clip: text;
+    background-clip: text;
+    text-align: center;
+    margin: 20px;
+    margin-top: 30px;
+}
+
+#title-5 {
+    font-family: 'Clash Display', sans-serif;
+    font-weight: 700;
+    font-size: 60px;
+    color: transparent;
+    background: url('images/connect-background.png') center/cover no-repeat;
+    -webkit-background-clip: text;
+    background-clip: text;
+    text-align: center;
+    margin: 20px;
+    margin-top: 30px;
+}
+
 /**img-div**/
 
 .img-div {