Advertisement
Guest User

Untitled

a guest
Jul 1st, 2015
175
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.45 KB | None | 0 0
  1. <h2>Skills Progress Bars</h2>
  2. <br>
  3. <div id="skill-section">
  4. <div id="skills" class="center">
  5. <table id="table-skills">
  6. <tbody>
  7. <tr>
  8. <td class="tdwidth1">
  9. <div id="skillbar">
  10. <section id="skills">
  11. <div class="skill header">Design Tools</div>
  12. <progress id="first" value="0" max="00"></progress>
  13.  
  14. <ul class="circles">
  15. <li class="skill-text"><span>Adobe Photoshop</span></li>
  16. <li>
  17. <progress id="Ps1" value="20" max="20"></progress>
  18. </li>
  19. <li>
  20. <progress id="Ps2" value="20" max="20"></progress>
  21. </li>
  22. <li>
  23. <progress id="Ps3" value="20" max="20"></progress>
  24. </li>
  25. <li>
  26. <progress id="Ps4" value="20" max="20"></progress>
  27. </li>
  28. <li>
  29. <progress id="Ps5" value="20" max="20"></progress>
  30. </li>
  31. </ul>
  32.  
  33. <ul class="circles">
  34. <li class="skill-text"><span>Adobe Illustrator</span></li>
  35. <li>
  36. <progress id="Ai1" value="20" max="20"></progress>
  37. </li>
  38. <li>
  39. <progress id="Ai2" value="20" max="20"></progress>
  40. </li>
  41. <li>
  42. <progress id="Ai3" value="20" max="20"></progress>
  43. </li>
  44. <li>
  45. <progress id="Ai4" value="20" max="20"></progress>
  46. </li>
  47. <li>
  48. <progress id="Ai5" value="20" max="20"></progress>
  49. </li>
  50. </ul>
  51.  
  52. <ul class="circles">
  53. <li class="skill-text"><span>Adobe InDesign</span></li>
  54. <li>
  55. <progress id="Id1" value="20" max="20"></progress>
  56. </li>
  57. <li>
  58. <progress id="Id2" value="20" max="20"></progress>
  59. </li>
  60. <li>
  61. <progress id="Id3" value="20" max="20"></progress>
  62. </li>
  63. <li>
  64. <progress id="Id4" value="20" max="20"></progress>
  65. </li>
  66. <li>
  67. <progress id="Id5" value="20" max="20"></progress>
  68. </li>
  69. </ul>
  70.  
  71. <ul class="circles">
  72. <li class="skill-text"><span>Adobe Dreamweaver</span></li>
  73. <li>
  74. <progress id="Dw1" value="20" max="20"></progress>
  75. </li>
  76. <li>
  77. <progress id="Dw2" value="20" max="20"></progress>
  78. </li>
  79. <li>
  80. <progress id="Dw3" value="20" max="20"></progress>
  81. </li>
  82. <li>
  83. <progress id="Dw4" value="20" max="20"></progress>
  84. </li>
  85. <li>
  86. <progress id="Dw5" value="20" max="20"></progress>
  87. </li>
  88. </ul>
  89.  
  90. <ul class="circles">
  91. <li class="skill-text"><span>Adobe Lightroom</span></li>
  92. <li>
  93. <progress id="Lr1" value="20" max="20"></progress>
  94. </li>
  95. <li>
  96. <progress id="Lr2" value="20" max="20"></progress>
  97. </li>
  98. <li>
  99. <progress id="Lr3" value="20" max="20"></progress>
  100. </li>
  101. <li>
  102. <progress id="Lr4" value="20" max="20"></progress>
  103. </li>
  104. <li>
  105. <progress id="Lr5" value="20" max="20"></progress>
  106. </li>
  107. </ul>
  108.  
  109. <ul class="circles">
  110. <li class="skill-text"><span>Html + CSS</span></li>
  111. <li>
  112. <progress id="html1" value="20" max="20"></progress>
  113. </li>
  114. <li>
  115. <progress id="html2" value="20" max="20"></progress>
  116. </li>
  117. <li>
  118. <progress id="html3" value="20" max="20"></progress>
  119. </li>
  120. <li>
  121. <progress id="html4" value="20" max="20"></progress>
  122. </li>
  123. <li>
  124. <progress id="html5" value="20" max="20"></progress>
  125. </li>
  126. </ul>
  127.  
  128. <ul class="circles">
  129. <li class="skill-text"><span>Overall Technology</span></li>
  130. <li>
  131. <progress id="tech1" value="20" max="20"></progress>
  132. </li>
  133. <li>
  134. <progress id="tech2" value="20" max="20"></progress>
  135. </li>
  136. <li>
  137. <progress id="tech3" value="20" max="20"></progress>
  138. </li>
  139. <li>
  140. <progress id="tech4" value="20" max="20"></progress>
  141. </li>
  142. <li>
  143. <progress id="tech5" value="20" max="20"></progress>
  144. </li>
  145. </ul>
  146. </section>
  147. </div>
  148. <div class="close-skill"></div>
  149. </td>
  150.  
  151. <td class="tdwidth2">
  152. <div id="skillbar">
  153. <div class="skill header">Professional</div>
  154. <section id="pro">
  155. <ul class="circles">
  156. <li class="skill-text"><span>Branding</span></li>
  157. <li>
  158. <progress id="pt1" value="20" max="20"></progress>
  159. </li>
  160. <li>
  161. <progress id="pt1" value="20" max="20"></progress>
  162. </li>
  163. <li>
  164. <progress id="pt1" value="20" max="20"></progress>
  165. </li>
  166. </ul>
  167.  
  168. <ul class="circles">
  169. <li class="skill-text"><span>Communication Design</span></li>
  170. <li>
  171. <progress id="pt1" value="20" max="20"></progress>
  172. </li>
  173. <li>
  174. <progress id="pt1" value="20" max="20"></progress>
  175. </li>
  176. <li>
  177. <progress id="pt1" value="20" max="20"></progress>
  178. </li>
  179. </ul>
  180.  
  181. <ul class="circles">
  182. <li class="skill-text"><span>Web Design</span></li>
  183. <li>
  184. <progress id="pt1" value="20" max="20"></progress>
  185. </li>
  186. <li>
  187. <progress id="pt1" value="20" max="20"></progress>
  188. </li>
  189. <li>
  190. <progress id="pt1" value="20" max="20"></progress>
  191. </li>
  192. </ul>
  193.  
  194. <ul class="circles">
  195. <li class="skill-text"><span>Project Management</span></li>
  196. <li>
  197. <progress id="pt1" value="20" max="20"></progress>
  198. </li>
  199. <li>
  200. <progress id="pt1" value="20" max="20"></progress>
  201. </li>
  202. <li>
  203. <progress id="pt1" value="20" max="20"></progress>
  204. </li>
  205. </ul>
  206.  
  207. <ul class="circles">
  208. <li class="skill-text"><span>Strategy</span></li>
  209. <li>
  210. <progress id="pt1" value="20" max="20"></progress>
  211. </li>
  212. <li>
  213. <progress id="pt1" value="20" max="20"></progress>
  214. </li>
  215. <li>
  216. <progress id="pt1" value="20" max="20"></progress>
  217. </li>
  218. </ul>
  219.  
  220. <ul class="circles">
  221. <li class="skill-text"><span>Teamwork</span></li>
  222. <li>
  223. <progress id="pt1" value="20" max="20"></progress>
  224. </li>
  225. <li>
  226. <progress id="pt1" value="20" max="20"></progress>
  227. </li>
  228. <li>
  229. <progress id="pt1" value="20" max="20"></progress>
  230. </li>
  231. </ul>
  232.  
  233. <ul class="circles">
  234. <li class="skill-text"><span>Photography</span></li>
  235. <li>
  236. <progress id="pt1" value="20" max="20"></progress>
  237. </li>
  238. <li>
  239. <progress id="pt1" value="20" max="20"></progress>
  240. </li>
  241. <li>
  242. <progress id="pt1" value="20" max="20"></progress>
  243. </li>
  244. </ul>
  245.  
  246.  
  247. </section>
  248. </div>
  249. <div class="close-skill"></div>
  250. </td>
  251.  
  252. <td class="tdwidth3">
  253. <div id="skillbar">
  254. <div class="skill header">Languages</div>
  255. <section id="lang">
  256. <ul class="circles">
  257. <li class="skill-text"><span>English</span></li>
  258. <li>
  259. <progress id="eng1" value="20" max="20"></progress>
  260. </li>
  261. <li>
  262. <progress id="eng2" value="20" max="20"></progress>
  263. </li>
  264. <li>
  265. <progress id="eng3" value="20" max="20"></progress>
  266. </li>
  267. <li>
  268. <progress id="eng4" value="20" max="20"></progress>
  269. </li>
  270. <li>
  271. <progress id="eng5" value="20" max="20"></progress>
  272. </li>
  273. </ul>
  274.  
  275. <ul class="circles">
  276. <li class="skill-text"><span>Portuguese</span></li>
  277. <li>
  278. <progress id="pt1" value="20" max="20"></progress>
  279. </li>
  280. <li>
  281. <progress id="pt2" value="20" max="20"></progress>
  282. </li>
  283. <li>
  284. <progress id="pt3" value="20" max="20"></progress>
  285. </li>
  286. <li>
  287. <progress id="pt4" value="20" max="20"></progress>
  288. </li>
  289. <li>
  290. <progress id="pt5" value="20" max="20"></progress>
  291. </li>
  292. </ul>
  293.  
  294. <ul class="circles">
  295. <li class="skill-text"><span>Spanish</span></li>
  296. <li>
  297. <progress id="sp1" value="20" max="20"></progress>
  298. </li>
  299. <li>
  300. <progress id="sp2" value="20" max="20"></progress>
  301. </li>
  302. <li>
  303. <progress id="sp3" value="20" max="20"></progress>
  304. </li>
  305. <li>
  306. <progress id="sp4" value="20" max="20"></progress>
  307. </li>
  308. <li>
  309. <progress id="sp5" value="20" max="20"></progress>
  310. </li>
  311. </ul>
  312.  
  313. </section>
  314. </div>
  315. <div class="close-skill"></div>
  316. </td>
  317. </tr>
  318. </tbody>
  319. </table>
  320.  
  321. </div>
  322. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement