You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
75 lines
4.5 KiB
75 lines
4.5 KiB
3 years ago
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>NGS Planner UI Mock-Up</title>
|
||
|
|
<link rel="stylesheet" href="reset.css">
|
||
|
|
<link rel="stylesheet" href="style.css">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="header">
|
||
|
|
<div>
|
||
|
|
<ul>
|
||
|
|
<li class="logo"><a href="#"><img alt="" src="logo_sm.png" /> NGSplanner.com</a></li>
|
||
|
|
<li class="headermenuitem"><a href="#">Build Planner</a></li>
|
||
|
|
<li class="headermenuitem"><a href="#">Guides</a></li>
|
||
|
|
<li class="headermenuitem"><a href="#">Blog</a></li>
|
||
|
|
<li class="headermenuitem"><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Grid Ref</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div id="main">
|
||
|
|
<div class="containerX">
|
||
|
|
|
||
|
|
<!-- Item Select Box Start -->
|
||
|
|
<div class="box treeSelectBox">
|
||
|
|
<div class="boxTitleBar">
|
||
|
|
<h1>Class Skill Tree</h1>
|
||
|
|
<div class="boxExit"></div>
|
||
|
|
</div>
|
||
|
|
<div class="treeListContainer customScrollbar">
|
||
|
|
<ul class="treeList">
|
||
|
|
<li><img alt="" src="./icons/class/hu.png" />Hunter</li>
|
||
|
|
<li><img alt="" src="./icons/class/fi.png" />Fighter</li>
|
||
|
|
<li class="treeListMain"><img alt="" src="./icons/class/ra.png" />Ranger</li>
|
||
|
|
<li><img alt="" src="./icons/class/gu.png" />Gunner</li>
|
||
|
|
<li class="treeListSub"><img alt="" src="./icons/class/fo.png" />Force</li>
|
||
|
|
<li><img alt="" src="./icons/class/te.png" />Techter</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- Item Select Box End -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="containerY">
|
||
|
|
|
||
|
|
<!-- Item Select Box Start -->
|
||
|
|
<div class="box skillTreeBox">
|
||
|
|
<div class="boxTitleBar">
|
||
|
|
<h1>Ranger01</h1>
|
||
|
|
<div class="boxExit"></div>
|
||
|
|
</div>
|
||
|
|
<div class="skillTreeContainer customScrollbar">
|
||
|
|
<div class="skillTreeGrid">
|
||
|
|
<div class="skillActive" style="grid-area:a1"><img class="skillIcon" alt="" src="./icons/class_skills/ra/Blight_Rounds.png" /><span class="skillAllocated">1/5</span><em class="skillName">Blight Rounds</em></div>
|
||
|
|
<div class="skillMaxed" style="grid-area:a2"><span class="skillTreeReqUnlock"> </span><img class="skillIcon" alt="" src="./icons/class_skills/ra/Blight_Rounds_Reinforce.png" /><span class="skillAllocated">1/1</span><em class="skillName">Blight Rounds Reinforce</em></div>
|
||
|
|
<div style="grid-area:b1"><img class="skillIcon" alt="" src="./icons/class_skills/ra/Bad_Condition_Ward.png" /><span class="skillAllocated">0/10</span><em class="skillName">Bad Condition Ward</em></div>
|
||
|
|
<div style="grid-area:b2"><img class="skillIcon" alt="" src="./icons/class_skills/ra/Spread_Shot.png" /><span class="skillAllocated">0/1</span><em class="skillName">Spread Shot</em></div>
|
||
|
|
<div class="skillLocked" style="grid-area:b3"><span class="skillTreeReqLock"> </span><img class="skillIcon" alt="" src="./icons/class_skills/ra/Spread_Shot_Quick_Getaway.png" /><span class="skillAllocated">0/1</span><em class="skillName">Spread Shot Quick Getaway</em></div>
|
||
|
|
<div style="grid-area:c1"><img class="skillIcon" alt="" src="./icons/class_skills/ra/Bad_Condition_Reduction.png" /><span class="skillAllocated">0/10</span><em class="skillName">Bad Condition Reduction</em></div>
|
||
|
|
<div style="grid-area:c2"><img class="skillIcon" alt="" src="./icons/class_skills/ra/Rifle_Grenadier.png" /><span class="skillAllocated">0/1</span><em class="skillName">Rifle Grenadier</em></div>
|
||
|
|
<div style="grid-area:c3"><img class="skillIcon" alt="" src="./icons/class_skills/ra/Slide_Shot_Advance.png" /><span class="skillAllocated">0/1</span><em class="skillName">Slide Shot Advance</em></div>
|
||
|
|
<div style="grid-area:d2"><img class="skillIcon" alt="" src="./icons/class_skills/ra/Sticky_Bomb_Quick_Reload.png" /><span class="skillAllocated">0/1</span><em class="skillName">Sticky Bomb Quick Reload</em></div>
|
||
|
|
<div style="grid-area:d3"><img class="skillIcon" alt="" src="./icons/class_skills/ra/Launcher_Charge_Grouping.png" /><span class="skillAllocated">0/1</span><em class="skillName">Launcher Charge Grouping</em></div>
|
||
|
|
<div style="grid-area:e1"><img class="skillIcon" alt="" src="./icons/class_skills/ra/Slow_Landing_Attack-Ranger.png" /><span class="skillAllocated">0/1</span><em class="skillName">Slow Landing Attack-Ranger</em></div>
|
||
|
|
<div style="grid-area:f1"><img class="skillIcon" alt="" src="./icons/class_skills/ra/Slow_Landing_Charge-Ranger.png" /><span class="skillAllocated">0/1</span><em class="skillName">Slow Landing Charge-Ranger</em></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="skillPoints">Your Skill Points  6   SP    0</div>
|
||
|
|
<div class="skillConfirm"><span>Confirm</span><span>Cancel</span></div>
|
||
|
|
</div>
|
||
|
|
<!-- Item Select Box End -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|