Toggle search
Toggle menu
85
203
7
2.4K
GScripts
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

Template:SkillTabs: Difference between revisions

Template page
More actions
Ben (talk | contribs)
Bureaucrats, moderator
649 edits
Created page with "<!-- 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;..."
 
Ben (talk | contribs)
Bureaucrats, moderator
649 edits
No edit summary
 
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>




Retrieved from "https://wiki.gscripts.co/Template:SkillTabs"