From 8a0d275c8cfc7be2cb2fb59bd2b9edc0f23511fe Mon Sep 17 00:00:00 2001
From: Jon Moon <jon.moon@outlook.com>
Date: Sat, 3 Oct 2020 19:57:21 +0100
Subject: [PATCH] Add D&I Playlist

---
 music.html | 50 +++++++++++++++++++++++++++++++++++++-------------
 1 file changed, 37 insertions(+), 13 deletions(-)
diff --git a/music.html b/music.html
index 4aaced9..eb14cfd 100644
--- a/music.html
+++ b/music.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
-    
+
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" type="text/css" href="css/music.css">
 <link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
@@ -39,9 +39,9 @@ <h2 class="font-italic">
           <li class="nav-item ml-1">
             <a href="#" class="nav-link">sports</a>
           </li>
-        
-         
-     
+
+
+
           </li>
         </ul>
       </div>
@@ -73,7 +73,7 @@ <h1 class="display-1 font-italic">
     <h4 class="text-center font-italic mb-4">Music List
       <span class="fa fa-star fa-lg text-warning"></span>
     </h4>
-    
+
     <div class="row justify-content-center font-italic mt-4">
 
       <div class="col-md-4">
@@ -86,17 +86,17 @@ <h4 class="text-center font-italic mb-4">Music List
             <h5 class="card-title">
              Classical
             </h5>
-           
-          
-            
-        
+
+
+
+
 
             <!--more info button-->
             <a href="#" class="btn btn-success mb-2">
                             <i class="fa fa-info-circle" aria-hidden="true"></i>
                             More info
                         </a>
-            
+
           </div>
         </article>
       </div>
@@ -137,6 +137,30 @@ <h5 class="card-title">
           </a>
         </div>
       </article>
+    </div>
+    <div class="col-md-4">
+      <!--product card-->
+      <article class="card text-center font-italic mb-4">
+        <!--music tab -->
+        <iframe src="https://open.spotify.com/embed/playlist/3SiqQL39eKrUah6o33yfmA" width="350" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>
+        <div class="card-body">
+          <!-- name-->
+          <h5 class="card-title">
+           Diversity & Inclusion
+          </h5>
+         
+
+
+
+
+          <!--more info button-->
+          <a href="#" class="btn btn-success mb-2">
+                          <i class="fa fa-info-circle" aria-hidden="true"></i>
+                          More info
+                      </a>
+
+        </div>
+      </article>
     </div>
       </div>
   </div>
@@ -166,8 +190,8 @@ <h5 class="card-title">
 </footer>
 
 
-  
 
-   
+
+
 </body>
-</html> 
+</html>
