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.
79 lines
3.7 KiB
79 lines
3.7 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="#">About</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div id="main">
|
||
|
|
<div class="containerB">
|
||
|
|
|
||
|
|
<!-- Item Select Box Start -->
|
||
|
|
<div class="box treeSelectBox">
|
||
|
|
<h1>◆ Class Skill Tree<span class="exitBox">✕</span></h1>
|
||
|
|
<div class="treeListContainer customScrollbar">
|
||
|
|
<ul class="treeList">
|
||
|
|
<li>Hunter</li>
|
||
|
|
<li>Fighter</li>
|
||
|
|
<li>Ranger</li>
|
||
|
|
<li>Gunner</li>
|
||
|
|
<li>Force</li>
|
||
|
|
<li>Techter</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- Item Select Box End -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="containerC">
|
||
|
|
|
||
|
|
<!-- Item Select Box Start -->
|
||
|
|
<div class="box skillTreeBox">
|
||
|
|
<h1>◆ Class Skill Tree<span class="exitBox">✕</span></h1>
|
||
|
|
<div class="skillTreeContainer customScrollbar">
|
||
|
|
<div class="skillTreeColumn">
|
||
|
|
<div class="skillItem"><img class="skillIcon" alt="" src="Blight_Rounds.png" /><span class="skillAllocated">0/5</span><em class="skillName">Blight Rounds</em></div>
|
||
|
|
<div class="skillItem"><img class="skillIcon" alt="" src="./icons/Blight_Rounds_Reinforce.png" /><span class="skillAllocated">0/1</span><em class="skillName">Blight Rounds Reinforce</em></div>
|
||
|
|
</div>
|
||
|
|
<div class="skillTreeColumn">
|
||
|
|
<div class="skillItem"><img class="skillIcon" alt="" src="Blight_Rounds.png" /><span class="skillAllocated">0/10</span><em class="skillName">Bad Condition Ward</em></div>
|
||
|
|
<div class="skillItem"><img class="skillIcon" alt="" src="Blight_Rounds.png" /><span class="skillAllocated">0/1</span><em class="skillName">Spread Shot</em></div>
|
||
|
|
<div class="skillItem"><img class="skillIcon" alt="" src="Blight_Rounds.png" /><span class="skillAllocated">0/1</span><em class="skillName">Spread Shot Quick Getaway</em></div>
|
||
|
|
</div>
|
||
|
|
<div class="skillTreeColumn">
|
||
|
|
<div class="skillItem"><img class="skillIcon" alt="" src="Blight_Rounds.png" /><span class="skillAllocated">0/10</span><em class="skillName">Bad Condition Reduction</em></div>
|
||
|
|
<div class="skillItem"><img class="skillIcon" alt="" src="Blight_Rounds.png" /><span class="skillAllocated">0/1</span><em class="skillName">Rifle Grenadier</em></div>
|
||
|
|
<div class="skillItem"><img class="skillIcon" alt="" src="Blight_Rounds.png" /><span class="skillAllocated">0/1</span><em class="skillName">Slide Shot Advance</em></div>
|
||
|
|
</div>
|
||
|
|
<div class="skillTreeColumn">
|
||
|
|
<div class="skillBlank"> </div>
|
||
|
|
<div class="skillItem"><img class="skillIcon" alt="" src="Blight_Rounds.png" /><span class="skillAllocated">0/1</span><em class="skillName">Sticky Bomb Quick Reload</em></div>
|
||
|
|
<div class="skillItem"><img class="skillIcon" alt="" src="Blight_Rounds.png" /><span class="skillAllocated">0/1</span><em class="skillName">Launcher Charge Grouping</em></div>
|
||
|
|
</div>
|
||
|
|
<div class="skillTreeColumn">
|
||
|
|
<div class="skillItem"><img class="skillIcon" alt="" src="Blight_Rounds.png" /><span class="skillAllocated">0/1</span><em class="skillName">Slow Landing Attack-Ranger</em></div>
|
||
|
|
</div>
|
||
|
|
<div class="skillTreeColumn">
|
||
|
|
<div class="skillItem"><img class="skillIcon" alt="" src="Blight_Rounds.png" /><span class="skillAllocated">0/1</span><em class="skillName">Slow Landing Charge-Ranger</em></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- Item Select Box End -->
|
||
|
|
<div class="skillPoints">Your Skill Points  6   SP    0</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|