Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <h2>Skills Progress Bars</h2>
- <br>
- <div id="skill-section">
- <div id="skills" class="center">
- <table id="table-skills">
- <tbody>
- <tr>
- <td class="tdwidth1">
- <div id="skillbar">
- <section id="skills">
- <div class="skill header">Design Tools</div>
- <progress id="first" value="0" max="00"></progress>
- <ul class="circles">
- <li class="skill-text"><span>Adobe Photoshop</span></li>
- <li>
- <progress id="Ps1" value="20" max="20"></progress>
- </li>
- <li>
- <progress id="Ps2" value="20" max="20"></progress>
- </li>
- <li>
- <progress id="Ps3" value="20" max="20"></progress>
- </li>
- <li>
- <progress id="Ps4" value="20" max="20"></progress>
- </li>
- <li>
- <progress id="Ps5" value="20" max="20"></progress>
- </li>
- </ul>
- <ul class="circles">
- <li class="skill-text"><span>Adobe Illustrator</span></li>
- <li>
- <progress id="Ai1" value="20" max="20"></progress>
- </li>
- <li>
- <progress id="Ai2" value="20" max="20"></progress>
- </li>
- <li>
- <progress id="Ai3" value="20" max="20"></progress>
- </li>
- <li>
- <progress id="Ai4" value="20" max="20"></progress>
- </li>
- <li>
- <progress id="Ai5" value="20" max="20"></progress>
- </li>
- </ul>
- <ul class="circles">
- <li class="skill-text"><span>Adobe InDesign</span></li>
- <li>
- <progress id="Id1" value="20" max="20"></progress>
- </li>
- <li>
- <progress id="Id2" value="20" max="20"></progress>
- </li>
- <li>
- <progress id="Id3" value="20" max="20"></progress>
- </li>
- <li>
- <progress id="Id4" value="20" max="20"></progress>
- </li>
- <li>
- <progress id="Id5" value="20" max="20"></progress>
- </li>
- </ul>
- <ul class="circles">
- <li class="skill-text"><span>Adobe Dreamweaver</span></li>
- <li>
- <progress id="Dw1" value="20" max="20"></progress>
- </li>
- <li>
- <progress id="Dw2" value="20" max="20"></progress>
- </li>
- <li>
- <progress id="Dw3" value="20" max="20"></progress>
- </li>
- <li>
- <progress id="Dw4" value="20" max="20"></progress>
- </li>
- <li>
- <progress id="Dw5" value="20" max="20"></progress>
- </li>
- </ul>
- <ul class="circles">
- <li class="skill-text"><span>Adobe Lightroom</span></li>
- <li>
- <progress id="Lr1" value="20" max="20"></progress>
- </li>
- <li>
- <progress id="Lr2" value="20" max="20"></progress>
- </li>
- <li>
- <progress id="Lr3" value="20" max="20"></progress>
- </li>
- <li>
- <progress id="Lr4" value="20" max="20"></progress>
- </li>
- <li>
- <progress id="Lr5" value="20" max="20"></progress>
- </li>
- </ul>
- <ul class="circles">
- <li class="skill-text"><span>Html + CSS</span></li>
- <li>
- <progress id="html1" value="20" max="20"></progress>
- </li>
- <li>
- <progress id="html2" value="20" max="20"></progress>
- </li>
- <li>
- <progress id="html3" value="20" max="20"></progress>
- </li>
- <li>
- <progress id="html4" value="20" max="20"></progress>
- </li>
- <li>
- <progress id="html5" value="20" max="20"></progress>
- </li>
- </ul>
- <ul class="circles">
- <li class="skill-text"><span>Overall Technology</span></li>
- <li>
- <progress id="tech1" value="20" max="20"></progress>
- </li>
- <li>
- <progress id="tech2" value="20" max="20"></progress>
- </li>
- <li>
- <progress id="tech3" value="20" max="20"></progress>
- </li>
- <li>
- <progress id="tech4" value="20" max="20"></progress>
- </li>
- <li>
- <progress id="tech5" value="20" max="20"></progress>
- </li>
- </ul>
- </section>
- </div>
- <div class="close-skill"></div>
- </td>
- <td class="tdwidth2">
- <div id="skillbar">
- <div class="skill header">Professional</div>
- <section id="pro">
- <ul class="circles">
- <li class="skill-text"><span>Branding</span></li>
- <li>
- <progress id="pt1" value="20" max="20"></progress>
- </li>
- <li>
- <progress id="pt1" value="20" max="20"></progress>
- </li>
- <li>
- <progress id="pt1" value="20" max="20"></progress>
- </li>
- </ul>
- <ul class="circles">
- <li class="skill-text"><span>Communication Design</span></li>
- <li>
- <progress id="pt1" value="20" max="20"></progress>
- </li>
- <li>
- <progress id="pt1" value="20" max="20"></progress>
- </li>
- <li>
- <progress id="pt1" value="20" max="20"></progress>
- </li>
- </ul>
- <ul class="circles">
- <li class="skill-text"><span>Web Design</span></li>
- <li>
- <progress id="pt1" value="20" max="20"></progress>
- </li>
- <li>
- <progress id="pt1" value="20" max="20"></progress>
- </li>
- <li>
- <progress id="pt1" value="20" max="20"></progress>
- </li>
- </ul>
- <ul class="circles">
- <li class="skill-text"><span>Project Management</span></li>
- <li>
- <progress id="pt1" value="20" max="20"></progress>
- </li>
- <li>
- <progress id="pt1" value="20" max="20"></progress>
- </li>
- <li>
- <progress id="pt1" value="20" max="20"></progress>
- </li>
- </ul>
- <ul class="circles">
- <li class="skill-text"><span>Strategy</span></li>
- <li>
- <progress id="pt1" value="20" max="20"></progress>
- </li>
- <li>
- <progress id="pt1" value="20" max="20"></progress>
- </li>
- <li>
- <progress id="pt1" value="20" max="20"></progress>
- </li>
- </ul>
- <ul class="circles">
- <li class="skill-text"><span>Teamwork</span></li>
- <li>
- <progress id="pt1" value="20" max="20"></progress>
- </li>
- <li>
- <progress id="pt1" value="20" max="20"></progress>
- </li>
- <li>
- <progress id="pt1" value="20" max="20"></progress>
- </li>
- </ul>
- <ul class="circles">
- <li class="skill-text"><span>Photography</span></li>
- <li>
- <progress id="pt1" value="20" max="20"></progress>
- </li>
- <li>
- <progress id="pt1" value="20" max="20"></progress>
- </li>
- <li>
- <progress id="pt1" value="20" max="20"></progress>
- </li>
- </ul>
- </section>
- </div>
- <div class="close-skill"></div>
- </td>
- <td class="tdwidth3">
- <div id="skillbar">
- <div class="skill header">Languages</div>
- <section id="lang">
- <ul class="circles">
- <li class="skill-text"><span>English</span></li>
- <li>
- <progress id="eng1" value="20" max="20"></progress>
- </li>
- <li>
- <progress id="eng2" value="20" max="20"></progress>
- </li>
- <li>
- <progress id="eng3" value="20" max="20"></progress>
- </li>
- <li>
- <progress id="eng4" value="20" max="20"></progress>
- </li>
- <li>
- <progress id="eng5" value="20" max="20"></progress>
- </li>
- </ul>
- <ul class="circles">
- <li class="skill-text"><span>Portuguese</span></li>
- <li>
- <progress id="pt1" value="20" max="20"></progress>
- </li>
- <li>
- <progress id="pt2" value="20" max="20"></progress>
- </li>
- <li>
- <progress id="pt3" value="20" max="20"></progress>
- </li>
- <li>
- <progress id="pt4" value="20" max="20"></progress>
- </li>
- <li>
- <progress id="pt5" value="20" max="20"></progress>
- </li>
- </ul>
- <ul class="circles">
- <li class="skill-text"><span>Spanish</span></li>
- <li>
- <progress id="sp1" value="20" max="20"></progress>
- </li>
- <li>
- <progress id="sp2" value="20" max="20"></progress>
- </li>
- <li>
- <progress id="sp3" value="20" max="20"></progress>
- </li>
- <li>
- <progress id="sp4" value="20" max="20"></progress>
- </li>
- <li>
- <progress id="sp5" value="20" max="20"></progress>
- </li>
- </ul>
- </section>
- </div>
- <div class="close-skill"></div>
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement