111 lines
3.1 KiB
HTML
111 lines
3.1 KiB
HTML
<!doctype html>
|
|
<html class="no-js" lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="description" content="">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>an progress bar</title>
|
|
|
|
<meta name="application-name" content="an-progress-bar" />
|
|
<meta name="msapplication-TileColor" content="#141517" />
|
|
|
|
|
|
<link rel="stylesheet" href="./assets/styles/an-skill-bar.css">
|
|
<link rel="stylesheet" href="./style.css">
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<!--[if IE]>
|
|
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
|
|
<![endif]-->
|
|
|
|
<div class="container">
|
|
|
|
<h2>An skill bar demo</h2>
|
|
|
|
|
|
|
|
<div id="skill">
|
|
<div class="skillbar html">
|
|
<div class="filled" data-width="15%"></div>
|
|
<span class="title">HTML</span>
|
|
<span class="percent">15%</span>
|
|
</div>
|
|
|
|
<div class="skillbar css">
|
|
<span class="title"></i> CSS</span>
|
|
<span class="percent">20%</span>
|
|
<div class="filled" data-width="20%"></div>
|
|
</div>
|
|
|
|
<div class="skillbar js">
|
|
<span class="title">JS</span>
|
|
<span class="percent">30%</span>
|
|
<div class="filled" data-width="30%"></div>
|
|
</div>
|
|
|
|
<div class="skillbar php">
|
|
<span class="title">php</span>
|
|
<span class="percent">40%</span>
|
|
<div class="filled" data-width="40%"></div>
|
|
</div>
|
|
|
|
<div class="skillbar sass">
|
|
<span class="title"></i> sass</span>
|
|
<span class="percent">50%</span>
|
|
<div class="filled" data-width="50%"></div>
|
|
</div>
|
|
|
|
<div class="skillbar indesign">
|
|
<span class="title"></i> indesign</span>
|
|
<span class="percent">60%</span>
|
|
<div class="filled" data-width="60%"></div>
|
|
</div>
|
|
|
|
<div class="skillbar illustrator">
|
|
<span class="title"></i> illustrator</span>
|
|
<span class="percent">70%</span>
|
|
<div class="filled" data-width="70%"></div>
|
|
</div>
|
|
|
|
<div class="skillbar photoshop">
|
|
<span class="title"></i> photoshop</span>
|
|
<span class="percent">80%</span>
|
|
<div class="filled" data-width="80%"></div>
|
|
</div>
|
|
|
|
<div class="skillbar angular">
|
|
<span class="title"></i> angular</span>
|
|
<span class="percent">90%</span>
|
|
<div class="filled" data-width="90%"></div>
|
|
</div>
|
|
|
|
<div class="skillbar python">
|
|
<span class="title"></i> python</span>
|
|
<span class="percent">100%</span>
|
|
<div class="filled" data-width="100%"></div>
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<h2><a href="https://github.com/hasanmisbah/an-skill-bar">Documentation is here</a> </h2>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
|
|
<script src="./assets/scripts/jquery.min.js"></script>
|
|
<script src="./assets/scripts/an-skill-bar.js"></script>
|
|
<script src="./script.js"></script>
|
|
</body>
|
|
|
|
</html>
|