about me with skills

This bootstrap snippet called "about me with skills" was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: user,profile,social

This is the HTML code for this bootstrap snippet

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview tab

<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>

This is the CSS code for this bootstrap snippet

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview

body{margin-top:20px;}

.avatar {
  text-align: center;
  width: 100%;
  height: auto;
}
                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.6

Created: Mar 23rd 2016, 23:53

Views: 289