index

SUBMITTED BY: helmyawan

DATE: Oct. 28, 2016, 10 p.m.

FORMAT: HTML

SIZE: 2.8 kB

Raw Download

HITS: 802

Report
  1. <!doctype html>
  2. <html lang="en-US">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="Content-Type" content="text/html">
  6. <title>Animated CSS3 Skill Bars - Design Shack Demo</title>
  7. <meta name="author" content="Jake Rocheleau">
  8. <link rel="shortcut icon" href="http://designshack.net/favicon.ico">
  9. <link rel="icon" href="http://designshack.net/favicon.ico">
  10. <link rel="stylesheet" type="text/css" media="all" href="css/styles.css">
  11. </head>
  13. <body>
  14. <div id="topbar">
  15. <a href="http://designshack.net">Back to Design Shack</a>
  16. </div>
  18. <div id="w">
  19. <div id="content">
  20. <h1>CSS3 Keyframe Skill Bars</h1>
  21. <p>Check out this visual representation of my current skillset.</p>
  23. <div id="skillset">
  24. <h2>Animated w/ Labels</h2>
  25. <div class="skill">
  26. <h3>HTML5/CSS3 <sup>(100%)</sup></h3>
  27. <span class="bar"><span class="skillbar htmlcss">8 yrs</span></span>
  28. </div>
  30. <div class="skill">
  31. <h3>PHP/MySQL <sup>(70%)</sup></h3>
  32. <span class="bar"><span class="skillbar phpmysql">5<small>1/2</small> yrs</span></span>
  33. </div>
  35. <div class="skill">
  36. <h3>jQuery <sup>(55%)</sup></h3>
  37. <span class="bar"><span class="skillbar jquery">3<small>1/2</small> yrs</span></span>
  38. </div>
  40. <div class="skill">
  41. <h3>WordPress <sup>(65%)</sup></h3>
  42. <span class="bar"><span class="skillbar wordpress">5 yrs</span></span>
  43. </div>
  45. <div class="skill">
  46. <h3>WooCommerce <sup>(35%)</sup></h3>
  47. <span class="bar"><span class="skillbar woocommerce">2 yrs</span></span>
  48. </div>
  51. <h2>Animated w/o Labels</h2>
  52. <div class="skill">
  53. <h3>HTML5/CSS3 <sup>(100%)</sup></h3>
  54. <span class="bar"><span class="skillbar htmlcss alt"></span></span>
  55. </div>
  57. <div class="skill">
  58. <h3>PHP/MySQL <sup>(70%)</sup></h3>
  59. <span class="bar"><span class="skillbar phpmysql alt"></span></span>
  60. </div>
  62. <div class="skill">
  63. <h3>jQuery <sup>(55%)</sup></h3>
  64. <span class="bar"><span class="skillbar jquery alt"></span></span>
  65. </div>
  67. <div class="skill">
  68. <h3>WordPress <sup>(65%)</sup></h3>
  69. <span class="bar"><span class="skillbar wordpress alt"></span></span>
  70. </div>
  72. <div class="skill">
  73. <h3>WooCommerce <sup>(35%)</sup></h3>
  74. <span class="bar"><span class="skillbar woocommerce alt"></span></span>
  75. </div>
  76. </div>
  77. </div><!-- @end #content -->
  78. </div><!-- @end #w -->
  79. </body>
  80. </html>
comments powered by Disqus