Bootstrap snippet: about me with skills

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: user,profile,social



<div class="row"> <div class="col-md-12"> <!-- Title --> <div class="title"> <h1>David Smith</h1> <span class="h4 element">I'm Web Developer</span><span class="typed-cursor">|</span> </div> <!-- End of title --> <!-- About me --> <div class="space"> <h3>ABOUT ME</h3> <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In hendrerit libero ac accumsan lobortis. Nam sem lacus, vulputate ut turpis vel, viverra porta ante. Pellentesque a ornare libero. Aenean sed ipsum a lectus volutpat dictum non non neque. Nunc sit amet felis non velit consequat venenatis id eu dui.</p> <p class="text-justify">In congue eu dui sit amet euismod. Ut vehicula tellus nec laoreet congue. Mauris id eros ultricies, vulputate metus ac, euismod lorem.</p> </div> <!-- End of about me --> </div> <!-- Avatar image --> <div class="col-md-6 col-sm-12 animated" data-sr-id="1" style="; visibility: visible; -webkit-transform: translateY(0) scale(1); opacity: 1;transform: translateY(0) scale(1); opacity: 1;-webkit-transition: -webkit-transform 0.5s cubic-bezier( 0.6, 0.2, 0.1, 1 ) 0s, opacity 0.5s cubic-bezier( 0.6, 0.2, 0.1, 1 ) 0s; transition: transform 0.5s cubic-bezier( 0.6, 0.2, 0.1, 1 ) 0s, opacity 0.5s cubic-bezier( 0.6, 0.2, 0.1, 1 ) 0s; "> <img src="http://themyhub.com/cross/img/avatar500x680.jpg" class="avatar" alt="Avatar"> </div> <!-- End avatar image --> <!-- Start skills / expertise --> <div class="col-md-6 col-sm-12"> <div class="space"> <h3>EXPERTISE</h3> <h5>HTML / CSS3</h5> <div class="progress progress-striped active"> <div class="progress-bar progress-bar-danger" style="width: 90%"></div> </div> <h5>Javascript</h5> <div class="progress progress-striped active"> <div class="progress-bar progress-bar-success" style="width: 85%"></div> </div> <h5>PHP</h5> <div class="progress progress-striped active"> <div class="progress-bar progress-bar-warning" style="width: 80%"></div> </div> <h5>Angular JS</h5> <div class="progress progress-striped active"> <div class="progress-bar progress-bar-default" style="width: 70%"></div> </div> <h5>MySQL / NoSQL</h5> <div class="progress progress-striped active"> <div class="progress-bar progress-bar-success" style="width: 75%"></div> </div> <h5>.NET</h5> <div class="progress progress-striped active"> <div class="progress-bar progress-bar-danger" style="width: 90%"></div> </div> </div> </div> <!-- End of skills / expertise --> </div>
body{margin-top:20px;} .avatar { text-align: center; width: 100%; height: auto; }
Dey-Dey

about me with skills

Dey-Dey
  Mar 23rd, 23:53
97 Views