|
|
| Line 1: |
Line 1: |
| <!-- 1. Attack -->
| |
| <div style="
| |
| background: linear-gradient(135deg, rgba(140,20,30,0.9) 0%, rgba(100,10,20,0.95) 100%);
| |
| border-radius: 10px;
| |
| padding: 18px;
| |
| margin: 15px;
| |
| box-shadow: 0 5px 15px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.1);
| |
| border-left: 5px solid #8B0000;
| |
| color: #FFE5E5;
| |
| width: 280px;
| |
| height: 130px;
| |
| display: inline-block;
| |
| vertical-align: top;
| |
| font-family: 'Arial', sans-serif;
| |
| position: relative;
| |
| overflow: hidden;
| |
| transition: all 0.3s ease;
| |
| cursor: pointer;
| |
| " onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 8px 20px rgba(0,0,0,0.3)'"
| |
| onmouseout="this.style.transform=''; this.style.boxShadow='0 5px 15px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.1)'">
| |
| <h3 style="color:#FFAAAA; margin:0 0 12px 0; padding-bottom:8px; border-bottom:1px solid rgba(255,255,255,0.2); text-shadow: 0 1px 2px rgba(0,0,0,0.5);">
| |
| ⚔️ Attack
| |
| </h3>
| |
| <p style="margin:6px 0;"><strong>Style:</strong> <span style="color:#FFCCCC">Aggressive</span></p>
| |
| <p style="margin:6px 0;"><strong>Weapon:</strong> Abyssal whip</p>
| |
| </div>
| |
|
| |
| <!-- 2. Strength -->
| |
| <div style="
| |
| background: linear-gradient(135deg, rgba(180,30,0,0.9) 0%, rgba(140,20,0,0.95) 100%);
| |
| border-radius: 10px;
| |
| padding: 18px;
| |
| margin: 15px;
| |
| box-shadow: 0 5px 15px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.1);
| |
| border-left: 5px solid #CC0000;
| |
| color: #FFE8E5;
| |
| width: 280px;
| |
| height: 130px;
| |
| display: inline-block;
| |
| vertical-align: top;
| |
| font-family: 'Arial', sans-serif;
| |
| transition: all 0.3s ease;
| |
| cursor: pointer;
| |
| " onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 8px 20px rgba(0,0,0,0.3)'"
| |
| onmouseout="this.style.transform=''; this.style.boxShadow='0 5px 15px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.1)'">
| |
| <h3 style="color:#FFBBBB; margin:0 0 12px 0; padding-bottom:8px; border-bottom:1px solid rgba(255,255,255,0.2); text-shadow: 0 1px 2px rgba(0,0,0,0.5);">
| |
| 💪 Strength
| |
| </h3>
| |
| <p style="margin:6px 0;"><strong>Style:</strong> <span style="color:#FFDDDD">Berserker</span></p>
| |
| <p style="margin:6px 0;"><strong>Weapon:</strong> Dragon scimitar</p>
| |
| </div>
| |
|
| |
| <!-- 3. Defence -->
| |
| <div style="
| |
| background: linear-gradient(135deg, rgba(30,80,160,0.9) 0%, rgba(20,60,120,0.95) 100%);
| |
| border-radius: 10px;
| |
| padding: 18px;
| |
| margin: 15px;
| |
| box-shadow: 0 5px 15px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.1);
| |
| border-left: 5px solid #1E90FF;
| |
| color: #F0F8FF;
| |
| width: 280px;
| |
| height: 130px;
| |
| display: inline-block;
| |
| vertical-align: top;
| |
| font-family: 'Arial', sans-serif;
| |
| transition: all 0.3s ease;
| |
| cursor: pointer;
| |
| " onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 8px 20px rgba(0,0,0,0.3)'"
| |
| onmouseout="this.style.transform=''; this.style.boxShadow='0 5px 15px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.1)'">
| |
| <h3 style="color:#CCEEFF; margin:0 0 12px 0; padding-bottom:8px; border-bottom:1px solid rgba(255,255,255,0.2); text-shadow: 0 1px 2px rgba(0,0,0,0.5);">
| |
| 🛡️ Defence
| |
| </h3>
| |
| <p style="margin:6px 0;"><strong>Style:</strong> <span style="color:#DDF7FF">Defensive</span></p>
| |
| <p style="margin:6px 0;"><strong>Armor:</strong> Barrows</p>
| |
| </div>
| |
|
| |
| <!-- 4. Ranged -->
| |
| <div style="
| |
| background: linear-gradient(135deg, rgba(80,130,50,0.9) 0%, rgba(60,100,30,0.95) 100%);
| |
| border-radius: 10px;
| |
| padding: 18px;
| |
| margin: 15px;
| |
| box-shadow: 0 5px 15px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.1);
| |
| border-left: 5px solid #6B8E23;
| |
| color: #F5FFE0;
| |
| width: 280px;
| |
| height: 130px;
| |
| display: inline-block;
| |
| vertical-align: top;
| |
| font-family: 'Arial', sans-serif;
| |
| transition: all 0.3s ease;
| |
| cursor: pointer;
| |
| " onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 8px 20px rgba(0,0,0,0.3)'"
| |
| onmouseout="this.style.transform=''; this.style.boxShadow='0 5px 15px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.1)'">
| |
| <h3 style="color:#DDFFAA; margin:0 0 12px 0; padding-bottom:8px; border-bottom:1px solid rgba(255,255,255,0.2); text-shadow: 0 1px 2px rgba(0,0,0,0.5);">
| |
| 🏹 Ranged
| |
| </h3>
| |
| <p style="margin:6px 0;"><strong>Weapon:</strong> <span style="color:#CCFF88">Rune crossbow</span></p>
| |
| <p style="margin:6px 0;"><strong>Ammo:</strong> Broad bolts</p>
| |
| </div>
| |
|
| |
| <!-- 5. Prayer -->
| |
| <div style="
| |
| background: linear-gradient(135deg, rgba(220,220,120,0.9) 0%, rgba(200,200,80,0.95) 100%);
| |
| border-radius: 10px;
| |
| padding: 18px;
| |
| margin: 15px;
| |
| box-shadow: 0 5px 15px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.1);
| |
| border-left: 5px solid #FFD700;
| |
| color: #443300;
| |
| width: 280px;
| |
| height: 130px;
| |
| display: inline-block;
| |
| vertical-align: top;
| |
| font-family: 'Arial', sans-serif;
| |
| transition: all 0.3s ease;
| |
| cursor: pointer;
| |
| " onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 8px 20px rgba(0,0,0,0.3)'"
| |
| onmouseout="this.style.transform=''; this.style.boxShadow='0 5px 15px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.1)'">
| |
| <h3 style="color:#FFEE88; margin:0 0 12px 0; padding-bottom:8px; border-bottom:1px solid rgba(0,0,0,0.2); text-shadow: 0 1px 2px rgba(255,255,255,0.3);">
| |
| 🙏 Prayer
| |
| </h3>
| |
| <p style="margin:6px 0;"><strong>Method:</strong> <span style="color:#FFDD55">Chaos Altar</span></p>
| |
| <p style="margin:6px 0;"><strong>Bones:</strong> Dragon</p>
| |
| </div>
| |
|
| |
| <!-- 6. Magic -->
| |
| <div style="
| |
| background: linear-gradient(135deg, rgba(100,80,200,0.9) 0%, rgba(80,60,180,0.95) 100%);
| |
| border-radius: 10px;
| |
| padding: 18px;
| |
| margin: 15px;
| |
| box-shadow: 0 5px 15px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.1);
| |
| border-left: 5px solid #9370DB;
| |
| color: #F5F0FF;
| |
| width: 280px;
| |
| height: 130px;
| |
| display: inline-block;
| |
| vertical-align: top;
| |
| font-family: 'Arial', sans-serif;
| |
| transition: all 0.3s ease;
| |
| cursor: pointer;
| |
| " onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 8px 20px rgba(0,0,0,0.3)'"
| |
| onmouseout="this.style.transform=''; this.style.boxShadow='0 5px 15px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.1)'">
| |
| <h3 style="color:#DDCCFF; margin:0 0 12px 0; padding-bottom:8px; border-bottom:1px solid rgba(255,255,255,0.2); text-shadow: 0 1px 2px rgba(0,0,0,0.5);">
| |
| 🔮 Magic
| |
| </h3>
| |
| <p style="margin:6px 0;"><strong>Spell:</strong> <span style="color:#CCBBFF">High Alchemy</span></p>
| |
| <p style="margin:6px 0;"><strong>Staff:</strong> Ancient</p>
| |
| </div>
| |
|
| |
| <!-- 7. Runecrafting -->
| |
| <div style="
| |
| background: linear-gradient(135deg, rgba(120,120,220,0.9) 0%, rgba(100,100,200,0.95) 100%);
| |
| border-radius: 10px;
| |
| padding: 18px;
| |
| margin: 15px;
| |
| box-shadow: 0 5px 15px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.1);
| |
| border-left: 5px solid #4169E1;
| |
| color: #F0F5FF;
| |
| width: 280px;
| |
| height: 130px;
| |
| display: inline-block;
| |
| vertical-align: top;
| |
| font-family: 'Arial', sans-serif;
| |
| transition: all 0.3s ease;
| |
| cursor: pointer;
| |
| " onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 8px 20px rgba(0,0,0,0.3)'"
| |
| onmouseout="this.style.transform=''; this.style.boxShadow='0 5px 15px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.1)'">
| |
| <h3 style="color:#BBCCFF; margin:0 0 12px 0; padding-bottom:8px; border-bottom:1px solid rgba(255,255,255,0.2); text-shadow: 0 1px 2px rgba(0,0,0,0.5);">
| |
| 🌀 Runecrafting
| |
| </h3>
| |
| <p style="margin:6px 0;"><strong>Altar:</strong> <span style="color:#AABBFF">Nature</span></p>
| |
| <p style="margin:6px 0;"><strong>Route:</strong> Abyss</p>
| |
| </div>
| |
|
| |
| <!-- 8. Construction -->
| |
| <div style="
| |
| background: linear-gradient(135deg, rgba(180,130,80,0.9) 0%, rgba(150,100,50,0.95) 100%);
| |
| border-radius: 10px;
| |
| padding: 18px;
| |
| margin: 15px;
| |
| box-shadow: 0 5px 15px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.1);
| |
| border-left: 5px solid #D2B48C;
| |
| color: #FFF9F0;
| |
| width: 280px;
| |
| height: 130px;
| |
| display: inline-block;
| |
| vertical-align: top;
| |
| font-family: 'Arial', sans-serif;
| |
| transition: all 0.3s ease;
| |
| cursor: pointer;
| |
| " onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 8px 20px rgba(0,0,0,0.3)'"
| |
| onmouseout="this.style.transform=''; this.style.boxShadow='0 5px 15px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.1)'">
| |
| <h3 style="color:#FFE8CC; margin:0 0 12px 0; padding-bottom:8px; border-bottom:1px solid rgba(255,255,255,0.2); text-shadow: 0 1px 2px rgba(0,0,0,0.5);">
| |
| 🏠 Construction
| |
| </h3>
| |
| <p style="margin:6px 0;"><strong>Method:</strong> <span style="color:#FFD8A8">Mahogany Tables</span></p>
| |
| <p style="margin:6px 0;"><strong>Servant:</strong> Enabled</p>
| |
| </div>
| |
|
| |
| <!-- 9. Hitpoints -->
| |
| <div style="
| |
| background: linear-gradient(135deg, rgba(220,50,50,0.9) 0%, rgba(200,20,20,0.95) 100%);
| |
| border-radius: 10px;
| |
| padding: 18px;
| |
| margin: 15px;
| |
| box-shadow: 0 5px 15px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.1);
| |
| border-left: 5px solid #FF4500;
| |
| color: #FFEEEE;
| |
| width: 280px;
| |
| height: 130px;
| |
| display: inline-block;
| |
| vertical-align: top;
| |
| font-family: 'Arial', sans-serif;
| |
| transition: all 0.3s ease;
| |
| cursor: pointer;
| |
| " onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 8px 20px rgba(0,0,0,0.3)'"
| |
| onmouseout="this.style.transform=''; this.style.boxShadow='0 5px 15px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.1)'">
| |
| <h3 style="color:#FFBBBB; margin:0 0 12px 0; padding-bottom:8px; border-bottom:1px solid rgba(255,255,255,0.2); text-shadow: 0 1px 2px rgba(0,0,0,0.5);">
| |
| ❤️ Hitpoints
| |
| </h3>
| |
| <p style="margin:6px 0;"><strong>Food:</strong> <span style="color:#FF9999">Sharks</span></p>
| |
| <p style="margin:6px 0;"><strong>Threshold:</strong> 50% HP</p>
| |
| </div>
| |
|
| |
| <!-- 10. Agility -->
| |
| <div style="
| |
| background: linear-gradient(135deg, rgba(20,180,180,0.9) 0%, rgba(0,150,150,0.95) 100%);
| |
| border-radius: 10px;
| |
| padding: 18px;
| |
| margin: 15px;
| |
| box-shadow: 0 5px 15px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.1);
| |
| border-left: 5px solid #008B8B;
| |
| color: #F0FFFF;
| |
| width: 280px;
| |
| height: 130px;
| |
| display: inline-block;
| |
| vertical-align: top;
| |
| font-family: 'Arial', sans-serif;
| |
| transition: all 0.3s ease;
| |
| cursor: pointer;
| |
| " onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 8px 20px rgba(0,0,0,0.3)'"
| |
| onmouseout="this.style.transform=''; this.style.boxShadow='0 5px 15px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.1)'">
| |
| <h3 style="color:#AAFFFF; margin:0 0 12px 0; padding-bottom:8px; border-bottom:1px solid rgba(255,255,255,0.2); text-shadow: 0 1px 2px rgba(0,0,0,0.5);">
| |
| 🏃 Agility
| |
| </h3>
| |
| <p style="margin:6px 0;"><strong>Course:</strong> <span style="color:#88FFFF">Ardougne</span></p>
| |
| <p style="margin:6px 0;"><strong>Stamina:</strong> Enabled</p>
| |
| </div>
| |
|
| |
| <!-- 11. Herblore -->
| |
| <div style="
| |
| background: linear-gradient(135deg, rgba(70,180,70,0.9) 0%, rgba(50,150,50,0.95) 100%);
| |
| border-radius: 10px;
| |
| padding: 18px;
| |
| margin: 15px;
| |
| box-shadow: 0 5px 15px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.1);
| |
| border-left: 5px solid #2E8B57;
| |
| color: #F0FFF0;
| |
| width: 280px;
| |
| height: 130px;
| |
| display: inline-block;
| |
| vertical-align: top;
| |
| font-family: 'Arial', sans-serif;
| |
| transition: all 0.3s ease;
| |
| cursor: pointer;
| |
| " onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 8px 20px rgba(0,0,0,0.3)'"
| |
| onmouseout="this.style.transform=''; this.style.boxShadow='0 5px 15px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.1)'">
| |
| <h3 style="color:#BBFFBB; margin:0 0 12px 0; padding-bottom:8px; border-bottom:1px solid rgba(255,255,255,0.2); text-shadow: 0 1px 2px rgba(0,0,0,0.5);">
| |
| 🧪 Herblore
| |
| </h3>
| |
| <p style="margin:6px 0;"><strong>Potion:</strong> <span style="color:#99EE99">Prayer</span></p>
| |
| <p style="margin:6px 0;"><strong>Cleaning:</strong> Enabled</p>
| |
| </div>
| |
|
| |
| <!-- 12. Thieving -->
| |
| <div style="
| |
| background: linear-gradient(135deg, rgba(130,70,180,0.9) 0%, rgba(100,50,150,0.95) 100%);
| |
| border-radius: 10px;
| |
| padding: 18px;
| |
| margin: 15px;
| |
| box-shadow: 0 5px 15px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.1);
| |
| border-left: 5px solid #9932CC;
| |
| color: #F8F0FF;
| |
| width: 280px;
| |
| height: 130px;
| |
| display: inline-block;
| |
| vertical-align: top;
| |
| font-family: 'Arial', sans-serif;
| |
| transition: all 0.3s ease;
| |
| cursor: pointer;
| |
| " onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 8px 20px rgba(0,0,0,0.3)'"
| |
| onmouseout="this.style.transform=''; this.style.boxShadow='0 5px 15px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.1)'">
| |
| <h3 style="color:#EECCFF; margin:0 0 12px 0; padding-bottom:8px; border-bottom:1px solid rgba(255,255,255,0.2); text-shadow: 0 1px 2px rgba(0,0,0,0.5);">
| |
| 🖤 Thieving
| |
| </h3>
| |
| <p style="margin:6px 0;"><strong>Target:</strong> <span style="color:#DDBBFF">Ardy Knights</span></p>
| |
| <p style="margin:6px 0;"><strong>Food:</strong> Wine</p>
| |
| </div>
| |
|
| |
| <!-- 13. Crafting -->
| |
| <div style="
| |
| background: linear-gradient(135deg, rgba(220,170,50,0.9) 0%, rgba(200,150,0,0.95) 100%);
| |
| border-radius: 10px;
| |
| padding: 18px;
| |
| margin: 15px;
| |
| box-shadow: 0 5px 15px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.1);
| |
| border-left: 5px solid #DAA520;
| |
| color: #FFFDF0;
| |
| width: 280px;
| |
| height: 130px;
| |
| display: inline-block;
| |
| vertical-align: top;
| |
| font-family: 'Arial', sans-serif;
| |
| transition: all 0.3s ease;
| |
| cursor: pointer;
| |
| " onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 8px 20px rgba(0,0,0,0.3)'"
| |
| onmouseout="this.style.transform=''; this.style.boxShadow='0 5px 15px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.1)'">
| |
| <h3 style="color:#FFEEAA; margin:0 0 12px 0; padding-bottom:8px; border-bottom:1px solid rgba(255,255,255,0.2); text-shadow: 0 1px 2px rgba(0,0,0,0.5);">
| |
| 💎 Crafting
| |
| </h3>
| |
| <p style="margin:6px 0;"><strong>Activity:</strong> <span style="color:#FFDD77">Gem Cutting</span></p>
| |
| <p style="margin:6px 0;"><strong>Gem:</strong> Ruby</p>
| |
| </div>
| |
|
| |
| <!-- 14. Fletching -->
| |
| <div style="
| |
| background: linear-gradient(135deg, rgba(180,130,50,0.9) 0%, rgba(150,100,0,0.95) 100%);
| |
| border-radius: 10px;
| |
| padding: 18px;
| |
| margin: 15px;
| |
| box-shadow: 0 5px 15px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.1);
| |
| border-left: 5px solid #CD853F;
| |
| color: #FFF9F0;
| |
| width: 280px;
| |
| height: 130px;
| |
| display: inline-block;
| |
| vertical-align: top;
| |
| font-family: 'Arial', sans-serif;
| |
| transition: all 0.3s ease;
| |
| cursor: pointer;
| |
| " onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 8px 20px rgba(0,0,0,0.3)'"
| |
| onmouseout="this.style.transform=''; this.style.boxShadow='0 5px 15px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.1)'">
| |
| <h3 style="color:#FFE8BB; margin:0 0 12px 0; padding-bottom:8px; border-bottom:1px solid rgba(255,255,255,0.2); text-shadow: 0 1px 2px rgba(0,0,0,0.5);">
| |
| 🏹 Fletching
| |
| </h3>
| |
| <p style="margin:6px 0;"><strong>Activity:</strong> <span style="color:#FFD899">Broad Arrows</span></p>
| |
| <p style="margin:6px 0;"><strong>Banking:</strong> Seers</p>
| |
| </div>
| |
|
| |
| <!-- 15. Slayer -->
| |
| <div style="
| |
| background: linear-gradient(135deg, rgba(110,20,110,0.9) 0%, rgba(80,0,80,0.95) 100%);
| |
| border-radius: 10px;
| |
| padding: 18px;
| |
| margin: 15px;
| |
| box-shadow: 0 5px 15px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.1);
| |
| border-left: 5px solid #800080;
| |
| color: #FFEEFF;
| |
| width: 280px;
| |
| height: 130px;
| |
| display: inline-block;
| |
| vertical-align: top;
| |
| font-family: 'Arial', sans-serif;
| |
| transition: all 0.3s ease;
| |
| cursor: pointer;
| |
| " onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 8px 20px rgba(0,0,0,0.3)'"
| |
| onmouseout="this.style.transform=''; this.style.boxShadow='0 5px 15px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.1)'">
| |
| <h3 style="color:#FFBBFF; margin:0 0 12px 0; padding-bottom:8px; border-bottom:1px solid rgba(255,255,255,0.2); text-shadow: 0 1px 2px rgba(0,0,0,0.5);">
| |
| ☠️ Slayer
| |
| </h3>
| |
| <p style="margin:6px 0;"><strong>Master:</strong> <span style="color:#EE99EE">Duradel</span></p>
| |
| <p style="margin:6px 0;"><strong>Block List:</strong> Bronze Dragons</p>
| |
| </div>
| |
|
| |
| <!-- 16. Hunter -->
| |
| <div style="
| |
| background: linear-gradient(135deg, rgba(130,180,80,0.9) 0%, rgba(100,150,50,0.95) 100%);
| |
| border-radius: 10px;
| |
| padding: 18px;
| |
| margin: 15px;
| |
| box-shadow: 0 5px 15px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.1);
| |
| border-left: 5px solid #6B8E23;
| |
| color: #F8FFEE;
| |
| width: 280px;
| |
| height: 130px;
| |
| display: inline-block;
| |
| vertical-align: top;
| |
| font-family: 'Arial', sans-serif;
| |
| transition: all 0.3s ease;
| |
| cursor: pointer;
| |
| " onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 8px 20px rgba(0,0,0,0.3)'"
| |
| onmouseout="this.style.transform=''; this.style.boxShadow='0 5px 15px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.1)'">
| |
| <h3 style="color:#DDFFBB; margin:0 0 12px 0; padding-bottom:8px; border-bottom:1px solid rgba(255,255,255,0.2); text-shadow: 0 1px 2px rgba(0,0,0,0.5);">
| |
| 🦋 Hunter
| |
| </h3>
| |
| <p style="margin:6px 0;"><strong>Trap:</strong> <span style="color:#CCEE99">Red Chins</span></p>
| |
| <p style="margin:6px 0;"><strong>Location:</strong> Hunting Grounds</p>
| |
| </div>
| |
|
| |
| <!-- 17. Mining -->
| |
| <div style="
| |
| background: linear-gradient(135deg, rgba(130,130,130,0.9) 0%, rgba(100,100,100,0.95) 100%);
| |
| border-radius: 10px;
| |
| padding: 18px;
| |
| margin: 15px;
| |
| box-shadow: 0 5px 15px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.1);
| |
| border-left: 5px solid #696969;
| |
| color: #F5F5F5;
| |
| width: 280px;
| |
| height: 130px;
| |
| display: inline-block;
| |
| vertical-align: top;
| |
| font-family: 'Arial', sans-serif;
| |
| transition: all 0.3s ease;
| |
| cursor: pointer;
| |
| " onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 8px 20px rgba(0,0,0,0.3)'"
| |
| onmouseout="this.style.transform=''; this.style.boxShadow='0 5px 15px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.1)'">
| |
| <h3 style="color:#EEEEEE; margin:0 0 12px 0; padding-bottom:8px; border-bottom:1px solid rgba(255,255,255,0.2); text-shadow: 0 1px 2px rgba(0,0,0,0.5);">
| |
| ⛏️ Mining
| |
| </h3>
| |
| <p style="margin:6px 0;"><strong>Rock:</strong> <span style="color:#DDDDDD">Motherlode</span></p>
| |
| <p style="margin:6px 0;"><strong>Pickaxe:</strong> Rune</p>
| |
| </div>
| |
|
| |
| <!-- 18. Smithing -->
| |
| <div style="
| |
| background: linear-gradient(135deg, rgba(180,120,70,0.9) 0%, rgba(150,100,50,0.95) 100%);
| |
| border-radius: 10px;
| |
| padding: 18px;
| |
| margin: 15px;
| |
| box-shadow: 0 5px 15px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.1);
| |
| border-left: 5px solid #A0522D;
| |
| color: #FFF5EE;
| |
| width: 280px;
| |
| height: 130px;
| |
| display: inline-block;
| |
| vertical-align: top;
| |
| font-family: 'Arial', sans-serif;
| |
| transition: all 0.3s ease;
| |
| cursor: pointer;
| |
| " onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 8px 20px rgba(0,0,0,0.3)'"
| |
| onmouseout="this.style.transform=''; this.style.boxShadow='0 5px 15px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.1)'">
| |
| <h3 style="color:#FFE0CC; margin:0 0 12px 0; padding-bottom:8px; border-bottom:1px solid rgba(255,255,255,0.2); text-shadow: 0 1px 2px rgba(0,0,0,0.5);">
| |
| ⚒️ Smithing
| |
| </h3>
| |
| <p style="margin:6px 0;"><strong>Method:</strong> <span style="color:#FFCC99">Blast Furnace</span></p>
| |
| <p style="margin:6px 0;"><strong>Bar:</strong> Mithril</p>
| |
| </div>
| |
|
| |
| <!-- 19. Fishing -->
| |
| <div style="
| |
| background: linear-gradient(135deg, rgba(50,130,180,0.9) 0%, rgba(30,100,150,0.95) 100%);
| |
| border-radius: 10px;
| |
| padding: 18px;
| |
| margin: 15px;
| |
| box-shadow: 0 5px 15px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.1);
| |
| border-left: 5px solid #4682B4;
| |
| color: #F0F8FF;
| |
| width: 280px;
| |
| height: 130px;
| |
| display: inline-block;
| |
| vertical-align: top;
| |
| font-family: 'Arial', sans-serif;
| |
| transition: all 0.3s ease;
| |
| cursor: pointer;
| |
| " onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 8px 20px rgba(0,0,0,0.3)'"
| |
| onmouseout="this.style.transform=''; this.style.boxShadow='0 5px 15px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.1)'">
| |
| <h3 style="color:#CCEEFF; margin:0 0 12px 0; padding-bottom:8px; border-bottom:1px solid rgba(255,255,255,0.2); text-shadow: 0 1px 2px rgba(0,0,0,0.5);">
| |
| 🎣 Fishing
| |
| </h3>
| |
| <p style="margin:6px 0;"><strong>Method:</strong> <span style="color:#AADDEE">Barbarian</span></p>
| |
| <p style="margin:6px 0;"><strong>Spot:</strong> Otto's Grotto</p>
| |
| </div>
| |
|
| |
| <!-- 20. Cooking -->
| |
| <div style="
| |
| background: linear-gradient(135deg, rgba(230,80,80,0.9) 0%, rgba(200,50,50,0.95) 100%);
| |
| border-radius: 10px;
| |
| padding: 18px;
| |
| margin: 15px;
| |
| box-shadow: 0 5px 15px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.1);
| |
| border-left: 5px solid #DC143C;
| |
| color: #FFEEEE;
| |
| width: 280px;
| |
| height: 130px;
| |
| display: inline-block;
| |
| vertical-align: top;
| |
| font-family: 'Arial', sans-serif;
| |
| transition: all 0.3s ease;
| |
| cursor: pointer;
| |
| " onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 8px 20px rgba(0,0,0,0.3)'"
| |
| onmouseout="this.style.transform=''; this.style.boxShadow='0 5px 15px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.1)'">
| |
| <h3 style="color:#FFCCCC; margin:0 0 12px 0; padding-bottom:8px; border-bottom:1px solid rgba(255,255,255,0.2); text-shadow: 0 1px 2px rgba(0,0,0,0.5);">
| |
| 🍗 Cooking
| |
| </h3>
| |
| <p style="margin:6px 0;"><strong>Food:</strong> <span style="color:#FFAAAA">Sharks</span></p>
| |
| <p style="margin:6px 0;"><strong>Location:</strong> Rogues' Den</p>
| |
| </div>
| |
|
| |
| <!-- 21. Firemaking -->
| |
| <div style="
| |
| background: linear-gradient(135deg, rgba(230,130,50,0.9) 0%, rgba(200,100,0,0.95) 100%);
| |
| border-radius: 10px;
| |
| padding: 18px;
| |
| margin: 15px;
| |
| box-shadow: 0 5px 15px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.1);
| |
| border-left: 5px solid #FF8C00;
| |
| color: #FFF5EE;
| |
| width: 280px;
| |
| height: 130px;
| |
| display: inline-block;
| |
| vertical-align: top;
| |
| font-family: 'Arial', sans-serif;
| |
| transition: all 0.3s ease;
| |
| cursor: pointer;
| |
| " onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 8px 20px rgba(0,0,0,0.3)'"
| |
| onmouseout="this.style.transform=''; this.style.boxShadow='0 5px 15px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.1)'">
| |
| <h3 style="color:#FFD8AA; margin:0 0 12px 0; padding-bottom:8px; border-bottom:1px solid rgba(255,255,255,0.2); text-shadow: 0 1px 2px rgba(0,0,0,0.5);">
| |
| 🔥 Firemaking
| |
| </h3>
| |
| <p style="margin:6px 0;"><strong>Method:</strong> <span style="color:#FFBB77">Wintertodt</span></p>
| |
| <p style="margin:6px 0;"><strong>Food:</strong> 10-20 HP</p>
| |
| </div>
| |
|
| |
| <!-- 22. Woodcutting -->
| |
| <div style="
| |
| background: linear-gradient(135deg, rgba(130,90,40,0.9) 0%, rgba(100,70,20,0.95) 100%);
| |
| border-radius: 10px;
| |
| padding: 18px;
| |
| margin: 15px;
| |
| box-shadow: 0 5px 15px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.1);
| |
| border-left: 5px solid #8B4513;
| |
| color: #FFF9F0;
| |
| width: 280px;
| |
| height: 130px;
| |
| display: inline-block;
| |
| vertical-align: top;
| |
| font-family: 'Arial', sans-serif;
| |
| transition: all 0.3s ease;
| |
| cursor: pointer;
| |
| " onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 8px 20px rgba(0,0,0,0.3)'"
| |
| onmouseout="this.style.transform=''; this.style.boxShadow='0 5px 15px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.1)'">
| |
| <h3 style="color:#FFE0BB; margin:0 0 12px 0; padding-bottom:8px; border-bottom:1px solid rgba(255,255,255,0.2); text-shadow: 0 1px 2px rgba(0,0,0,0.5);">
| |
| 🪵 Woodcutting
| |
| </h3>
| |
| <p style="margin:6px 0;"><strong>Tree:</strong> <span style="color:#FFCC88">Redwoods</span></p>
| |
| <p style="margin:6px 0;"><strong>Axe:</strong> Dragon</p>
| |
| </div>
| |
|
| |
| <!-- 23. Farming -->
| |
| <div style="
| |
| background: linear-gradient(135deg, rgba(80,200,80,0.9) 0%, rgba(50,150,50,0.95) 100%);
| |
| border-radius: 10px;
| |
| padding: 18px;
| |
| margin: 15px;
| |
| box-shadow: 0 5px 15px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.1);
| |
| border-left: 5px solid #32CD32;
| |
| color: #F0FFF0;
| |
| width: 280px;
| |
| height: 130px;
| |
| display: inline-block;
| |
| vertical-align: top;
| |
| font-family: 'Arial', sans-serif;
| |
| transition: all 0.3s ease;
| |
| cursor: pointer;
| |
| " onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 8px 20px rgba(0,0,0,0.3)'"
| |
| onmouseout="this.style.transform=''; this.style.boxShadow='0 5px 15px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.1)'">
| |
| <h3 style="color:#CCFFCC; margin:0 0 12px 0; padding-bottom:8px; border-bottom:1px solid rgba(255,255,255,0.2); text-shadow: 0 1px 2px rgba(0,0,0,0.5);">
| |
| 🌱 Farming
| |
| </h3>
| |
| <p style="margin:6px 0;"><strong>Patches:</strong> <span style="color:#99EE99">Herb > Tree</span></p>
| |
| <p style="margin:6px 0;"><strong>Compost:</strong> Ultracompost</p>
| |
| </div>
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
|
| |
|
