File: /home/imensosw/www/imenso.co/dev/html-test/index.php
<!doctype html>
<html lang="en-US" >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML & CSS Test</title>
<link rel='stylesheet' href='css/style.css' media='all' />
</head>
<body>
<header>
<!-- no content yet-->
</header>
<nav>
<ul>
<li class="itemHeading"></li>
<li>About</li>
</ul>
<div class="action">
<a href="javascript:;" class="btn-sml close closeItem">Close</a>
</div>
</nav>
<section class="banner">
<div class="banner__content hidden itemContent">
<div class="banner__content-image">
<img class="itemImage" src="images/scope.png">
</div>
<div class="banner__content-text">
<h1 class="itemHeading">Purpose and Scope</h1>
<p class="itemDescription">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. </p>
</div>
</div>
<div class="banner__nav">
<ul class="banner__nav-items">
<li>
<a href="javascript:;" data-id="1" class="nav-item">
<span class="icon"><i class="icon-scope"></i></span>
<span class="item-name">Purpose and Scope</span>
</a>
</li>
<li>
<a href="javascript:;" data-id="2" class="nav-item">
<span class="icon"><i class="icon-roles"></i></span>
<span class="item-name">Roles and Responsibilities</span>
</a>
</li>
<li>
<a href="javascript:;" data-id="3" class="nav-item">
<span class="icon"><i class="icon-rir"></i></span>
<span class="item-name">Relavent Information Requirements (RIR)</span>
</a>
</li>
<li>
<a href="javascript:;" data-id="4" class="nav-item">
<span class="icon"><i class="icon-terms"></i></span>
<span class="item-name">Pre-conditions</span>
</a>
</li>
<li>
<a href="javascript:;" data-id="5" class="nav-item">
<span class="icon"><i class="icon-guide"></i></span>
<span class="item-name">Guidance on RIR</span>
</a>
</li>
<li>
<a href="javascript:;" data-id="6" class="nav-item">
<span class="icon"><i class="icon-risk"></i></span>
<span class="item-name">Risk-based Approach</span>
</a>
</li>
<li>
<a href="javascript:;" data-id="7" class="nav-item">
<span class="icon"><i class="icon-mgmt"></i></span>
<span class="item-name">Management of RIR</span>
</a>
</li>
</ul>
<a href="javascript:;" class="mobile-nav">Menu<span></span></a>
<div class="banner__nav-info">
<div class="info-text">
<p>Click each circle to review an aspect of</p>
</div>
</div>
</div>
</section>
<footer class="footer">
<ul class="toolbar">
<li><a href="">Exit</a></li>
<li><a href="">Menu</a></li>
<li><a href="">Tools</a></li>
</ul>
<ul class="controls">
<li>
<a href="javascript:;" class="prev">Back</a>
<span class="progress">[<span class="count"> 00 of 07 </span>]</span>
<a href="javascript:;" class="next">Next</a>
</li>
</ul>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>