added materials image and tidy up the texts

index.html

@@ -66,8 +66,9 @@ <h1>R-Instat</h1>
         <!-- </div> -->
     </section><!-- banner -->
 
-    <section class="image-text-section" id="about" style="padding: 2% 0 0 0;">
+    <section class="image-text-section" id="about" style="padding: 5% 0 0 0;">
         <div class="image">
+            <h1>R-Instat</h1>
             <img src="images/instat_demo1.png" width="95%" alt="" alt="Image Description">
         </div>
         <div class="text">
@@ -378,12 +379,14 @@ <h2 style="text-align: center;">Download R-Instat</h2>
             <h2 style="text-align: center; margin-bottom: 30px;">Documentation</h2>
             <div class="left-text2">
                 <div class="r-div">
-                    <p>Documentation for R-Instat’s core features, along with tutorials and guides, is available online.</p>
+                    <p>Documentation for R-Instat’s core features, along with tutorials and guides, is available online <a href="https://ecampus.r-instat.org/course/view.php?id=14"
+                        target="_blank" class="hover-text">ecampus.r-instat.org</a>.</p>
                 </div>
             </div>
             <div class="left-text1">
-                <p><a href="https://ecampus.r-instat.org/course/view.php?id=14"
-                    target="_blank" class="hover-text">ecampus.r-instat.org</a></p>
+                <!-- <p><a href="https://ecampus.r-instat.org/course/view.php?id=14"
+                    target="_blank" class="hover-text">ecampus.r-instat.org</a></p> -->
+                    <img src="images/materials.png" width="95%" alt="" alt="Image Description">
             </div>
             <!-- <div class="left-text2">
                 <div class="r-div">