Update sp-upgrade.component.html

Nosvoid · Sep 8, 2024 · 8b8e438 · 8b8e438
1 parent cf93ad1
commit 8b8e438
Showing 1 changed file with 18 additions and 41 deletions.
diff --git a/src/app/sp-upgrade/sp-upgrade.component.html b/src/app/sp-upgrade/sp-upgrade.component.html
@@ -9,9 +9,7 @@ <h3 class="sp-upgrade-title-3">How to get scrolls?</h3>
 
             <h3 class="sp-upgrade-title-3">How to get materials?</h3>
             <p class="sp-upgrade-text">You can get them in some raid boxes or farm them in farm maps.</p>
-            <div class="img-container">
-                <img class="img-responsive" src="../../assets/img/specialists/upgrade/farm_maps.png" alt="Farm Maps">
-            </div>
+            <img class="img-responsive" src="../../assets/img/specialists/upgrade/farm_maps.png" alt="Farm Maps">
 
             <h3 class="sp-upgrade-title-3">
                 <b>Note that scrolls will be used as long as you have enough materials in your inventory to try.</b>
@@ -34,67 +32,56 @@ <h2 class="sp-upgrade-title-2">SP +20</h2>
             <div class="gem-buffs d-flex">
                 <div class="gem-buff">
                     <h3 class="sp-upgrade-title-3">Fire Dragon Gem</h3>
-                    <div class="img-container">
-                        <img class="img-responsive" src="../../assets/img/specialists/upgrade/fire_buff.png" alt="Fire Dragon Gem">
-                    </div>
+                    <img class="img-responsive" src="../../assets/img/specialists/upgrade/fire_buff.png" alt="Fire Dragon Gem">
                 </div>
                 <div class="gem-buff">
                     <h3 class="sp-upgrade-title-3">Celestial Dragon Gem</h3>
-                    <div class="img-container">
-                        <img class="img-responsive" src="../../assets/img/specialists/upgrade/celestial_buff.png" alt="Celestial Dragon Gem">
-                    </div>
+                    <img class="img-responsive" src="../../assets/img/specialists/upgrade/celestial_buff.png" alt="Celestial Dragon Gem">
                 </div>
                 <div class="gem-buff">
                     <h3 class="sp-upgrade-title-3">Ice Dragon Gem</h3>
-                    <div class="img-container">
-                        <img class="img-responsive" src="../../assets/img/specialists/upgrade/ice_buff.png" alt="Ice Dragon Gem">
-                    </div>
+                    <img class="img-responsive" src="../../assets/img/specialists/upgrade/ice_buff.png" alt="Ice Dragon Gem">
                 </div>
                 <div class="gem-buff">
                     <h3 class="sp-upgrade-title-3">Moonlight Dragon Gem</h3>
-                    <div class="img-container">
-                        <img class="img-responsive" src="../../assets/img/specialists/upgrade/moonlight_buff.png" alt="Moonlight Dragon Gem">
-                    </div>
+                    <img class="img-responsive" src="../../assets/img/specialists/upgrade/moonlight_buff.png" alt="Moonlight Dragon Gem">
                 </div>
             </div>
 
             <h2 class="sp-upgrade-title-2">SP Points Table</h2>
             <a href="../../assets/img/specialists/upgrade/points_table.png" class="img-link">
-                <div class="img-container">
-                    <img class="img-responsive" src="../../assets/img/specialists/upgrade/points_table.png" alt="SP Points Table">
-                </div>
+                <img class="img-responsive" src="../../assets/img/specialists/upgrade/points_table.png" alt="SP Points Table">
             </a>
         </div>
     </section>
 </div>
 
 <style>
     body {
-        background: linear-gradient(135deg, #1f1f1f 0%, #343a40 100%);
+        background: #1f1f1f;
         color: #f1f1f1;
         font-family: 'Verdana', sans-serif;
     }
 
     .sp-upgrade-title-1 {
-        font-size: 3em;
+        font-size: 2.8em;
         color: #ffcc00;
         text-align: center;
         text-shadow: 1px 1px 5px #000;
-        margin-bottom: 30px;
+        margin-bottom: 20px;
     }
 
     .sp-upgrade-title-2 {
-        font-size: 2.4em;
+        font-size: 2.2em;
         color: #ff9933;
-        margin-top: 40px;
-        margin-bottom: 25px;
-        text-shadow: 1px 1px 4px #000;
+        margin-top: 30px;
+        margin-bottom: 20px;
     }
 
     .sp-upgrade-title-3 {
-        font-size: 2em;
+        font-size: 1.8em;
         color: #00ccff;
-        margin-top: 25px;
+        margin-top: 20px;
     }
 
     .sp-upgrade-text {
@@ -106,13 +93,8 @@ <h2 class="sp-upgrade-title-2">SP Points Table</h2>
     .img-responsive {
         max-width: 100%;
         height: auto;
-        border-radius: 12px;
-        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
-        transition: transform 0.2s ease-in-out;
-    }
-
-    .img-responsive:hover {
-        transform: scale(1.05);
+        border-radius: 8px;
+        margin-bottom: 15px;
     }
 
     .d-flex {
@@ -122,17 +104,12 @@ <h2 class="sp-upgrade-title-2">SP Points Table</h2>
     }
 
     .gem-buffs {
-        margin-top: 30px;
+        margin-top: 20px;
     }
 
     .gem-buff {
         text-align: center;
-        margin: 20px;
-    }
-
-    .img-container {
-        max-width: 200px;
-        margin-bottom: 20px;
+        margin: 10px;
     }
 
     .img-link {