Pentakill updated as well! images need to update

projects/project-03/index.html

@@ -48,6 +48,11 @@
     <div class="icon" draggable="true" id="icon_ahri_K">Ahri (K)</div>
     <div class="icon" draggable="true" id="icon_kaisa_K">Kai'sa (K)</div>
     <div class="icon" draggable="true" id="icon_evelynn_K">Evelynn (K)</div>
+
+    <div class="icon" draggable="true" id="icon_olaf">Olaf (P)</div>
+    <div class="icon" draggable="true" id="icon_sona">Sona (P)</div>
+    <div class="icon" draggable="true" id="icon_kayle">Kalye (P)</div>
+    <div class="icon" draggable="true" id="icon_karthus">Karthus (P)</div>
 </nav>
 
 
@@ -87,7 +92,7 @@
 
     <div id="div3_H" class="division">
         <div id="H_background_overlay"></div>
-        <img id="H_background" src="./backgrounds/H_dark.jpg">
+        <img id="H_background" src="./backgrounds/H_group.jpg">
 
         <div id="H_pickdroplot" class="pick_drop_lot">
             HEARTSTEEL
@@ -99,7 +104,7 @@
 
     <div id="div4_K" class="division">
         <div id="K_background_overlay"></div>
-        <img id="K_background" src="./backgrounds/TD_city.png">
+        <img id="K_background" src="./backgrounds/K_akali.jpg">
 
         <div id="K_pickdroplot" class="pick_drop_lot">
             K/DA
@@ -110,7 +115,15 @@
     </div>
 
     <div id="div5_P" class="division">
-
+        <div id="P_background_overlay"></div>
+        <img id="P_background" src="./backgrounds/P_coveer.jpg">
+
+        <div id="P_pickdroplot" class="pick_drop_lot">
+            Pentakill
+            <br>
+
+            <iframe id="P_link" width="560" height="315" src="https://www.youtube.com/embed/5-mT9D4fdgQ?si=QAhB9XDlMYqasqbi" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+        </div>
     </div>
 </div>
 

projects/project-03/script.js

@@ -142,6 +142,8 @@ document.addEventListener("DOMContentLoaded", function() {
             'H_pickdroplot': ['icon_ezreal', 'icon_kayne', 'icon_sett', 'icon_yone', 'icon_ksante'],
 
             'K_pickdroplot': ['icon_akali_K', 'icon_ahri_K', 'icon_kaisa_K', 'icon_evelynn_K'],
+
+            'P_pickdroplot': ['icon_olaf', 'icon_sona', 'icon_kayle', 'icon_karthus'],
         };
 
         let correctIcons = correctIconsForDivisions[divisionId] || [];
@@ -216,7 +218,7 @@ document.addEventListener("DOMContentLoaded", function() {
             var Kiframe = document.getElementById('K_link');
 
             if (Kpickdroplot && Kbackground && KbackgroundOverlay && Kiframe) {
-                Kpickdroplot.style.backgroundImage = 'url(./backgrounds/SG_ahri_light.png)'; 
+                Kpickdroplot.style.backgroundImage = 'url(./backgrounds/K_cover.jpg)'; 
 
                 Kbackground.style.opacity = '1.0'; 
 
@@ -227,7 +229,23 @@ document.addEventListener("DOMContentLoaded", function() {
             }
         }
 
-
+        if (divisionId === 'P_pickdroplot' && correctCount >= 3) {
+            var Ppickdroplot = document.getElementById('P_pickdroplot');
+            var Pbackground = document.getElementById('P_background');
+            var PbackgroundOverlay = document.getElementById('P_background_overlay');
+            var Piframe = document.getElementById('P_link');
+
+            if (Ppickdroplot && Pbackground && PbackgroundOverlay && Piframe) {
+                Ppickdroplot.style.backgroundImage = 'url(./backgrounds/'; 
+
+                Pbackground.style.opacity = '1.0'; 
+
+                PbackgroundOverlay.style.opacity = '0';
+
+                Piframe.style.display = 'block'; 
+
+            }
+        }
     }
 
 

projects/project-03/style.css

@@ -244,7 +244,7 @@ body, html {
 #div3_H {
     background: #FFE600; 
     clip-path: polygon(2638px 0px, 2638px 552px, 1358.5px 779.5px, 884.5px 0px);
-
+    
 
 }
 
@@ -260,7 +260,8 @@ body, html {
 }
 
 #H_background {
-    object-fit: cover;
+    object-fit: scale-down;
+    justify-content: right;
     z-index: 1;
     opacity: 0.3;
 }
@@ -317,9 +318,11 @@ body, html {
 }
 
 #K_background {
-    object-fit: cover;
+    object-position: right;
+    object-fit: contain;
     z-index: 1;
     opacity: 0.3;
+
 }
 
 #K_pickdroplot {
@@ -363,6 +366,57 @@ body, html {
     clip-path: polygon(1712px 1325px, 2638px 1198px, 2638px 2075px, 812px 2075px, 1712px 1325px);
 }
 
+#P_background_overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(128, 128, 128, 0.3); 
+    z-index: 0; 
+
+}
+
+#P_background {
+    object-position: right;
+    object-fit: contain;
+    z-index: 1;
+    opacity: 0.3;
+
+}
+
+#P_pickdroplot {
+    height: 500px;
+    width: 750px;
+    z-index: 1;
+    position: absolute;
+    top: 1500px;
+    left: 1800px;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    color: azure;
+    font-size: 24pt;
+    font-family:'Red Hat Mono', monospace;
+    padding: 10px;
+    border-radius: 2%;
+    background-color: rgba(4, 255, 0, 0.568);
+    justify-content: center;
+
+    background-size: cover; 
+    background-position: center;
+    background-repeat: no-repeat;
+
+
+
+
+}
+
+
+
+#P_link {
+    display: none; 
+}