Add spotify playlists

CLiz17 · Feb 25, 2024 · b786cf2 · b786cf2
1 parent 743e2e0
commit b786cf2
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 2 deletions.
diff --git a/about.html b/about.html
@@ -21,6 +21,10 @@
             integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
             crossorigin="anonymous" referrerpolicy="no-referrer" />
 
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&display=swap" rel="stylesheet">
+
         <link rel="stylesheet" href="./css/main.css" type="text/css">
         <link rel="stylesheet" href="./css/header.css" type="text/css">
         <link rel="stylesheet" href="./css/about.css" type="text/css">
@@ -283,6 +287,24 @@ <h4 class="green">Joint Director of Techincal Community @GTech MuLearn</h4>
                     <br/>
                 </div>
             </section>
+            <h3 class="spotify">Check out my Spotify Playlists</h3>
+            <iframe class="spotify-items" style="border-radius:12px"
+                src="https://open.spotify.com/embed/playlist/6IRVn9oIXXVVy824tazmYe?utm_source=generator" width="20%" height="352"
+                frameBorder="0" allowfullscreen=""
+                allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy">
+            </iframe>
+
+            <iframe class="spotify-items" style="border-radius:12px"
+                src="https://open.spotify.com/embed/playlist/3LmVsLKEIGTarw9aLq9gSD?utm_source=generator" width="20%" height="352"
+                frameBorder="0" allowfullscreen=""
+                allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy">
+            </iframe>
+
+            <iframe class="spotify-items" style="border-radius:12px; border: 12px"
+                src="https://open.spotify.com/embed/playlist/2VmuhN8q9fMtYx51jZ0pSg?utm_source=generator" width="20%" height="352"
+                frameBorder="0" allowfullscreen=""
+                allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy">
+            </iframe>
         </main>
 
         <footer class="footer-container">

diff --git a/css/about.css b/css/about.css
@@ -99,8 +99,6 @@ h1, h2, h3 {
     }
 }
 
-/* --- EDUCATION & EXPERIENCE --- */
-
 .education-experience-container h3 {
     margin-bottom: 50px;
 }
@@ -139,6 +137,14 @@ h1, h2, h3 {
     margin-top: 10px;
 }
 
+.spotify {
+    padding: 8vh 0 4vh 0;
+    font-family: "Gloria Hallelujah", cursive;
+}
+
+.spotify-items{
+    font-family: "Gloria Hallelujah", cursive;
+}
 /* --- TECH STACK --- */
 
 .tech-stack-container {
@@ -165,6 +171,12 @@ h1, h2, h3 {
     margin-left: 10px;
 }
 
+@media only screen and (max-width: 600px){
+    iframe {
+        width: 100%
+    }
+}
+
 @media only screen and (min-width: 768px) {
     #education-experience {
         display: flex;
@@ -180,6 +192,7 @@ h1, h2, h3 {
     .section-description {
         margin: 50px 10% 0 10%;
     }
+
 }
 
 @media only screen and (min-width: 1100px) {