<div class="dashboard-wrapper">
	<div class="main-container">	
		<h1> Welcome to RailsGoat  </h1>
		<h3> Tutorial Guide </h3>
		 
		<div class="row-fluid">
		    <div class="span12">
				<div class="widget">
			        <div class="widget-header">
			          <div class="title">
			            <span class="fs1" aria-hidden="true" data-icon="&#xe092;"></span> Step 1 - Choose your path
			          </div>
			        </div>
			        <div class="widget-body">
						<div class="thumbnail">
							<div class="caption">
	                          <h3>
	                            Get Started
	                          </h3>
	                          <p class="desc">
	                            Choose your path! Go directly into reading each tutorial or begin attacking the application to practice identifying weaknesses. <br/>You can then cross reference your findings with the findings listed under the tutorials section.
	                          </p>
	                        </div>
							<hr/>
							<img alt="800x400" style="width: 800px; height: 400px;" src=<%= image_path("step-1.png")%> />
						</div>	
				    </div>
				</div>
				<div class="widget">
			        <div class="widget-header">
			          <div class="title">
			            <span class="fs1" aria-hidden="true" data-icon="&#xe091;"></span> Step 2 - Using the application
			          </div>
			        </div>
			        <div class="widget-body">
						<div class="thumbnail">
							<div class="caption">
	                          <h3>
	                            Using the application
	                          </h3>
	                          <p class="desc">
	                            Each tutorial offers 4 parts:
								<li style="margin-left: 20px">Description</li>
								<li style="margin-left: 20px">Bug</li>
								<li style="margin-left: 20px">Solution</li>
								<li style="margin-left: 20px">Hint</li><br/>
								These titles are fairly self-explanatory but <b>BEWARE</b>, the solution section gives away how to solve or attack that particular vulnerability instance!
	                          </p>
	                        </div>
							<hr/>
							<img alt="800x400" style="width: 800px; height: 400px;" src=<%= image_path("step-2.png")%> />
						</div>	
				    </div>
				</div>
				<div class="widget">
			        <div class="widget-header">
			          <div class="title">
			            <span class="fs1" aria-hidden="true" data-icon="&#xe0e1;"></span> Step 3 - Attack
			          </div>
			        </div>
			        <div class="widget-body">
						<div class="thumbnail">
							<div class="caption">
	                          <h1 align="center">
	                           HACK!
	                          </h1>
	                          <p class="desc">
	                          
	                          </p>
	                        </div>
							<hr/>
							
						</div>	
				    </div>
				</div>
			
			
		</div>
		</div>
	</div>	
</div>

<script type="text/javascript">
function makeActive(){
	$('li[id="tutorials_home"]').addClass('active');
};

$(document).ready(makeActive);
</script>