Adding new section named reference video in MB page (#530)

* Update custom.css

* Update custom.css

* Update music-blocks.html

css/custom.css

@@ -0,0 +1,13 @@
+/*This file contains all the custom new changes in the css in Sugarlabs official website*/
+/*Also add proper comment for every section you add in this custom.css file*/
+
+/*This is for the reference video section in Music Blocks landing page */
+
+.video-container {
+  display: flex;
+  justify-content: center;
+}
+
+.video-container div {
+  margin: 0 10px;
+}

music-blocks.html

@@ -144,6 +144,40 @@ <h2>CREDITS</h2>
     </div>
 </section>
 
+<!-- "Refence Video" section -->
+<section id="testimonial" >
+    <div class="container">
+        <div class="row">
+            <div class="col-md-12" >
+                <div class="row justify-content-center">
+                    <div class="col-md-8 col-md-push-2">
+                        <h2 class="text-center">REFERENCE VIDEOS</h2>
+                        <p class="customParagraphStyle">Explore more about Sugar labs and Music Blocks on our official youtube channel<a href="https://www.youtube.com/@SugarlabsOrg-EN" class="hrefCustomColor"> Sugar Labs</a>.</p>
+                        <p class="customParagraphStyle">Also you can access more Music Blocks videos in the<a href="https://www.youtube.com/watch?v=v8-M81pp5ng&list=PLyTz5XRZyi-xRj6aca64IrXtjLeMydWrW&pp=gAQBiAQB" class="hrefCustomColor"> Playlist</a>.</p>
+                        <div class="video-container">
+                            <div> 
+                                <iframe width="400" height="280"
+                                src="https://www.youtube.com/embed/actLKGJVa_Q">
+                                </iframe> 
+                            </div> 
+                            <div>  
+                                <iframe width="400" height="280"
+                                src="https://www.youtube.com/embed/RngzuKVl2Xk"> 
+                                </iframe>
+                            </div> 
+                            <div>  
+                                <iframe width="400" height="280"
+                                src="https://www.youtube.com/embed/AZLQCDlKqdc"> 
+                                </iframe>
+                            </div> 
+                        </div>  
+                    </div>
+                </div>
+            </div>
+        </div>       
+    </div>       
+</section>
+
 <!-- "Reporting bugs" section -->
 <section id="testimonial" >
     <div class="container">