Almost there! now need to fill all descriptions

projects/project-03/index.html

@@ -18,50 +18,324 @@
 
 
 
-<div class="grid-cell grid-cell-first">League of Legends <br><span id="subtitle">ALT Unirsive - Music Groups</span></div> 
+<div class="grid-cell grid-cell-first" id="icon_game_LOL">League of Legends <br><span id="subtitle">ALT Unirsive - Music Groups</span></div> 
 
 
 <nav id="navbar">
 
+
     <div class="icon" draggable="true" id="icon_akali_TD">
         <img src="icons/TD_akali.jpg">
     </div>
-    <div class="icon" draggable="true" id="icon_ekko">Ekko (TD)</div>
-    <div class="icon" draggable="true" id="icon_senna">Senna (TD)</div>
-    <div class="icon" draggable="true" id="icon_qiyana">Qiyana (TD)</div>
-    <div class="icon" draggable="true" id="icon_yasuo">Yasuo (TD)</div>
-
-    <div class="icon" draggable="true" id="icon_morgana">Morgana (SG)</div>
-    <div class="icon" draggable="true" id="icon_syndra">Syndra (SG)</div>
-    <div class="icon" draggable="true" id="icon_zoe">Zoe (SG)</div>
-    <div class="icon" draggable="true" id="icon_lulu">Lulu (SG)</div>
-    <div class="icon" draggable="true" id="icon_lux">Lux (SG)</div>
-    <div class="icon" draggable="true" id="icon_xayah">Xayah (SG)</div>
-    <div class="icon" draggable="true" id="icon_ahri_SG">Ahri (SG)</div>
-    <div class="icon" draggable="true" id="icon_akali_SG">Akali (SG)</div>
-
-    <div class="icon" draggable="true" id="icon_ezreal">Ezreal (H)</div>
-    <div class="icon" draggable="true" id="icon_kayne">Kayne (H)</div>
-    <div class="icon" draggable="true" id="icon_sett">Sett (H)</div>
-    <div class="icon" draggable="true" id="icon_yone">Yone (H)</div>
-    <div class="icon" draggable="true" id="icon_ksante">K'Sante (H)</div>
-
-    <div class="icon" draggable="true" id="icon_akali_K">Akali (K)</div>
-    <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>
+    <div class="icon" draggable="true" id="icon_ekko_TD">
+        <img src="icons/TD_ekko.jpg">
+    </div>
+    <div class="icon" draggable="true" id="icon_senna_TD">
+        <img src="icons/TD_senna.jpg">
+    </div>
+    <div class="icon" draggable="true" id="icon_qiyana_TD">
+        <img src="icons/TD_qiyana.jpg">
+    </div>
+    <div class="icon" draggable="true" id="icon_yasuo_TD">
+        <img src="icons/TD_yasuo.jpg">
+    </div>
+
+
+    <div class="icon" draggable="true" id="icon_morgana_SG">
+        <img src="icons/SG_morgana.png">
+    </div>
+    <div class="icon" draggable="true" id="icon_syndra_SG">
+        <img src="icons/SG_syndra.png">
+    </div>
+    <div class="icon" draggable="true" id="icon_zoe_SG">
+        <img src="icons/SG_zoe.png">
+    </div>
+    <div class="icon" draggable="true" id="icon_lulu_SG">
+        <img src="icons/SG_lulu.png">
+    </div>
+    <div class="icon" draggable="true" id="icon_lux_SG">
+        <img src="icons/SG_lux.png">
+    </div>
+    <div class="icon" draggable="true" id="icon_xayah_SG">
+        <img src="icons/SG_xayah.jpg">
+    </div>
+    <div class="icon" draggable="true" id="icon_ahri_SG">
+        <img src="icons/SG_ahri.png">
+    </div>
+    <div class="icon" draggable="true" id="icon_akali_SG">
+        <img src="icons/SG_akali.png">
+    </div>
+
+
+    <div class="icon" draggable="true" id="icon_ezreal_H">
+        <img src="icons/H_ezreal.jpg">
+    </div>
+    <div class="icon" draggable="true" id="icon_kayn_H">
+        <img src="icons/H_kayn.jpg">
+    </div>
+    <div class="icon" draggable="true" id="icon_sett_H">
+        <img src="icons/H_sett.jpg">
+    </div>
+    <div class="icon" draggable="true" id="icon_yone_H">
+        <img src="icons/H_yone.jpg">
+    </div>
+    <div class="icon" draggable="true" id="icon_ksante_H">
+        <img src="icons/H_ksante.jpg">
+    </div>
+
+
+    <div class="icon" draggable="true" id="icon_akali_K">
+        <img src="icons/K_akali.jpg">
+    </div>
+    <div class="icon" draggable="true" id="icon_ahri_K">
+        <img src="icons/K_ahri.jpg">
+    </div>
+    <div class="icon" draggable="true" id="icon_kaisa_K">
+        <img src="icons/K_kaisa.jpg">
+    </div>
+    <div class="icon" draggable="true" id="icon_evelynn_K">
+        <img src="icons/K_evelynn.jpg">
+    </div>
+
+
+    <div class="icon" draggable="true" id="icon_olaf_P">
+        <img src="icons/P_olaf.jpg">
+    </div>
+    <div class="icon" draggable="true" id="icon_sona_P">
+        <img src="icons/P_sona.jpg">
+    </div>
+    <div class="icon" draggable="true" id="icon_kayle_P">
+        <img src="icons/P_kayle.jpg">
+    </div>
+    <div class="icon" draggable="true" id="icon_karthus_P">
+        <img src="icons/P_karthus.jpg">
+    </div>
+
+    <div class="help" id="icon_help_Q">
+        ?
+    </div>
+
+
+
 </nav>
 
 
+
+<!-- below is the icon info -->
 <div id="content_icon_akali_TD" class="icon-content hidden">
-    ????????? TD_AKALI
+    <p class="info_title"> Akali </p>
+    <p class="info_subitle"> True Damage </p>
+    <br><br>
+    <p class="info_description"> Akali is the rapper. </p>
+</div>
+
+<div id="content_icon_ekko_TD" class="icon-content hidden">
+    <p class="info_title"> Ekko </p>
+    <p class="info_subitle"> True Damage </p>
+    <br><br>
+    <p class="info_description"> Ekko's description for True Damage. </p>
 </div>
 
+<div id="content_icon_senna_TD" class="icon-content hidden">
+    <p class="info_title"> Senna </p>
+    <p class="info_subitle"> True Damage </p>
+    <br><br>
+    <p class="info_description"> Senna's description for True Damage. </p>
+</div>
+
+<div id="content_icon_qiyana_TD" class="icon-content hidden">
+    <p class="info_title"> Qiyana </p>
+    <p class="info_subitle"> True Damage </p>
+    <br><br>
+    <p class="info_description"> Qiyana's description for True Damage. </p>
+</div>
+
+<div id="content_icon_yasuo_TD" class="icon-content hidden">
+    <p class="info_title"> Yasuo </p>
+    <p class="info_subitle"> True Damage </p>
+    <br><br>
+    <p class="info_description"> Yasuo's description for True Damage. </p>
+</div>
+
+
+<div id="content_icon_morgana_SG" class="icon-content hidden">
+    <p class="info_title"> Morgana </p>
+    <p class="info_subitle"> Star Guardian </p>
+    <br><br>
+    <p class="info_description"> Morgana's description for Star Guardian. </p>
+</div>
+
+<div id="content_icon_syndra_SG" class="icon-content hidden">
+    <p class="info_title"> Syndra </p>
+    <p class="info_subitle"> Star Guardian </p>
+    <br><br>
+    <p class="info_description"> Syndra's description for Star Guardian. </p>
+</div>
+
+<div id="content_icon_zoe_SG" class="icon-content hidden">
+    <p class="info_title"> Zoe </p>
+    <p class="info_subitle"> Star Guardian </p>
+    <br><br>
+    <p class="info_description"> Zoe's description for Star Guardian. </p>
+</div>
+
+<div id="content_icon_lulu_SG" class="icon-content hidden">
+    <p class="info_title"> Lulu </p>
+    <p class="info_subitle"> Star Guardian </p>
+    <br><br>
+    <p class="info_description"> Lulu's description for Star Guardian. </p>
+</div>
+
+<div id="content_icon_lux_SG" class="icon-content hidden">
+    <p class="info_title"> Lux </p>
+    <p class="info_subitle"> Star Guardian </p>
+    <br><br>
+    <p class="info_description"> Lux's description for Star Guardian. </p>
+</div>
+
+<div id="content_icon_xayah_SG" class="icon-content hidden">
+    <p class="info_title"> Xayah </p>
+    <p class="info_subitle"> Star Guardian </p>
+    <br><br>
+    <p class="info_description"> Xayah's description for Star Guardian. </p>
+</div>
+
+<div id="content_icon_ahri_SG" class="icon-content hidden">
+    <p class="info_title"> Ahri </p>
+    <p class="info_subitle"> Star Guardian </p>
+    <br><br>
+    <p class="info_description"> Ahri's description for Star Guardian. </p>
+</div>
+
+<div id="content_icon_akali_SG" class="icon-content hidden">
+    <p class="info_title"> Akali </p>
+    <p class="info_subitle"> Star Guardian </p>
+    <br><br>
+    <p class="info_description"> Akali's description for Star Guardian. </p>
+</div>
+
+
+<div id="content_icon_ezreal_H" class="icon-content hidden">
+    <p class="info_title"> Ezreal </p>
+    <p class="info_subitle"> Heartsteel
+    <br><br>
+    <p class="info_description"> Kayn's description for Heartsteel. </p>
+</div>
+
+<div id="content_icon_kayn_H" class="icon-content hidden">
+    <p class="info_title"> Kayn </p>
+    <p class="info_subitle"> Heartsteel </p>
+    <br><br>
+    <p class="info_description"> Kayn's description for Heartsteel. </p>
+</div>
+
+<div id="content_icon_sett_H" class="icon-content hidden">
+    <p class="info_title"> Sett </p>
+    <p class="info_subitle"> Heartsteel </p>
+    <br><br>
+    <p class="info_description"> Sett's description for Heartsteel. </p>
+</div>
+
+<div id="content_icon_yone_H" class="icon-content hidden">
+    <p class="info_title"> Yone </p>
+    <p class="info_subitle"> Heartsteel </p>
+    <br><br>
+    <p class="info_description"> Yone's description for Heartsteel. </p>
+</div>
+
+<div id="content_icon_ksante_H" class="icon-content hidden">
+    <p class="info_title"> Ksante </p>
+    <p class="info_subitle"> Heartsteel </p>
+    <br><br>
+    <p class="info_description"> Ksante's description for Heartsteel. </p>
+</div>
+
+
+<div id="content_icon_akali_K" class="icon-content hidden">
+    <p class="info_title"> Akali </p>
+    <p class="info_subitle"> K/DA </p>
+    <br><br>
+    <p class="info_description"> Akali's description for K/DA. </p>
+</div>
+
+<div id="content_icon_ahri_K" class="icon-content hidden">
+    <p class="info_title"> Ahri </p>
+    <p class="info_subitle"> K/DA </p>
+    <br><br>
+    <p class="info_description"> Ahri's description for K/DA. </p>
+</div>
+
+<div id="content_icon_kaisa_K" class="icon-content hidden">
+    <p class="info_title"> Kai'Sa </p>
+    <p class="info_subitle"> K/DA </p>
+    <br><br>
+    <p class="info_description"> Kai'Sa's description for K/DA. </p>
+</div>
+
+<div id="content_icon_evelynn_K" class="icon-content hidden">
+    <p class="info_title"> Evelynn </p>
+    <p class="info_subitle"> K/DA </p>
+    <br><br>
+    <p class="info_description"> Evelynn's description for K/DA. </p>
+</div>
+
+
+<div id="content_icon_olaf_P" class="icon-content hidden">
+    <p class="info_title"> Olaf </p>
+    <p class="info_subitle"> Pentakill </p>
+    <br><br>
+    <p class="info_description"> Olaf's description for Pentakill. </p>
+</div>
+
+<div id="content_icon_sona_P" class="icon-content hidden">
+    <p class="info_title"> Sona </p>
+    <p class="info_subitle"> Pentakill </p>
+    <br><br>
+    <p class="info_description"> Sona's description for Pentakill. </p>
+</div>
+
+<div id="content_icon_kayle_P" class="icon-content hidden">
+    <p class="info_title"> Kayle </p>
+    <p class="info_subitle"> Pentakill </p>
+    <br><br>
+    <p class="info_description"> Kayle's description for Pentakill. </p>
+</div>
+
+<div id="content_icon_karthus_P" class="icon-content hidden">
+    <p class="info_title"> Karthus </p>
+    <p class="info_subitle"> Pentakill </p>
+    <br><br>
+    <p class="info_description"> Karthus's description for Pentakill. </p>
+</div>
+
+
+<div id="content_icon_help_Q" class="icon-content hidden">
+    <p class="info_title"> What TO DO </p>
+    <p class="info_subitle"> Pick three champions to match the team </p>
+    <br><br>
+    <p class="info_description"> Read the information of each champion and sort it into their music group team. While three correct match, the music video will be unlocked!</p>
+</div>
+
+
+
+<div id="content_icon_game_LOL" class="icon-content hidden">
+    <p class="info_title">  League of Legends </p>
+    <p class="info_subitle"> Alt Universe - Music Groups  </p>
+    <br><br>
+    <p class="info_description"> League of Legends is a .......</p>
+</div>
+
+<!-- above is the icon info -->
+
+
+
+
+
+
+
+
+
+
 
 
 <div id="background">