<!-- UI - X Starts --> <div class="ui-81"> <div class="container"> <div class="row"> <div class="col-md-6 col-sm-6 col-xs-12 col-mob"> <!-- Main Item Starts --> <div class="ui-item"> <!-- User Details Starts --> <div class="ui-user clearfix"> <!-- User Image --> <a href="#"><img src="img/ui-81/1.jpg" alt="" class="img-responsive" /></a> <!-- UserName And Designation --> <h2><a href="#">Joseph Joy</a> <span>UI/Web Designer</span></h2> </div> <!-- User Details Ends --> <!-- Skills Starts --> <div class="ui-skills"> <div class="row"> <div class="col-md-6 col-sm-6 col-xs-6 col-mob"> <!-- Item --> <div class="uis-item"> <!-- Heading --> <h4>HTML</h4> <!-- Progress --> <div class="progress"> <!-- Progress Bar --> <div class="progress-bar bg-red" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div> </div> </div> </div> <div class="col-md-6 col-sm-6 col-xs-6 col-mob"> <!-- Item --> <div class="uis-item"> <!-- Heading --> <h4>CSS</h4> <!-- Progress --> <div class="progress"> <!-- Progress Bar --> <div class="progress-bar bg-lblue" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%;"></div> </div> </div> </div> <div class="col-md-6 col-sm-6 col-xs-6 col-mob"> <!-- Item --> <div class="uis-item"> <!-- Heading --> <h4>Ajax</h4> <!-- Progress --> <div class="progress"> <!-- Progress Bar --> <div class="progress-bar bg-green" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%;"></div> </div> </div> </div> <div class="col-md-6 col-sm-6 col-xs-6 col-mob"> <!-- Item --> <div class="uis-item"> <!-- Heading --> <h4>JQuery</h4> <!-- Progress --> <div class="progress"> <!-- Progress Bar --> <div class="progress-bar bg-yellow" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;"></div> </div> </div> </div> </div> </div> <!-- Skills Ends --> <!-- Details Starts --> <div class="ui-details"> <!-- Paragraph --> <p>Lorem ipsum dolor sit amet, ciusmod tempor incididunt adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> </div> <!-- Details Ends --> <!-- Social Media Starts --> <div class="ui-social"> <!-- Facebook --> <a href="#" class="ui-tootltip" data-toggle="tooltip" data-placement="top" title="Facebook"><i class="fa fa-facebook facebook"></i></a> <!-- Twitter --> <a href="#" class="ui-tootltip" data-toggle="tooltip" data-placement="top" title="Twitter"><i class="fa fa-twitter twitter"></i></a> <!-- LinkedIn --> <a href="#" class="ui-tootltip" data-toggle="tooltip" data-placement="top" title="LinkedIn"><i class="fa fa-linkedin linkedin"></i></a> <!-- Google Plus --> <a href="#" class="ui-tootltip" data-toggle="tooltip" data-placement="top" title="Google Plus"><i class="fa fa-google-plus google-plus"></i></a> </div> <!-- Social Media Starts --> </div> <!-- Main Item Ends --> </div> <div class="col-md-6 col-sm-6 col-xs-12 col-mob"> <!-- Main Item Starts --> <div class="ui-item"> <!-- User Details Starts --> <div class="ui-user clearfix"> <!-- User Image --> <a href="#"><img src="img/ui-81/2.jpg" alt="" class="img-responsive" /></a> <!-- UserName And Designation --> <h2><a href="#">Mary Jonny</a> <span>Web Developer</span></h2> </div> <!-- User Details Ends --> <!-- Skills Starts --> <div class="ui-skills"> <div class="row"> <div class="col-md-6 col-sm-6 col-xs-6 col-mob"> <!-- Item --> <div class="uis-item"> <!-- Heading --> <h4>PHP</h4> <!-- Progress --> <div class="progress"> <!-- Progress Bar --> <div class="progress-bar bg-purple" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;"></div> </div> </div> </div> <div class="col-md-6 col-sm-6 col-xs-6 col-mob"> <!-- Item --> <div class="uis-item"> <!-- Heading --> <h4>Java</h4> <!-- Progress --> <div class="progress"> <!-- Progress Bar --> <div class="progress-bar bg-rose" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%;"></div> </div> </div> </div> <div class="col-md-6 col-sm-6 col-xs-6 col-mob"> <!-- Item --> <div class="uis-item"> <!-- Heading --> <h4>Linux</h4> <!-- Progress --> <div class="progress"> <!-- Progress Bar --> <div class="progress-bar bg-brown" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;"></div> </div> </div> </div> <div class="col-md-6 col-sm-6 col-xs-6 col-mob"> <!-- Item --> <div class="uis-item"> <!-- Heading --> <h4>JQuery</h4> <!-- Progress --> <div class="progress"> <!-- Progress Bar --> <div class="progress-bar bg-orange" role="progressbar" aria-valuenow="68" aria-valuemin="0" aria-valuemax="100" style="width: 68%;"></div> </div> </div> </div> </div> </div> <!-- Skills Ends --> <!-- Details Starts --> <div class="ui-details"> <!-- Paragraph --> <p>Ut enim ad minim veniam, quis nostrud exercitation eiusmod tempor incididunt ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <!-- Details Ends --> <!-- Social Media Starts --> <div class="ui-social"> <!-- Facebook --> <a href="#" class="ui-tootltip" data-toggle="tooltip" data-placement="top" title="Facebook"><i class="fa fa-facebook facebook"></i></a> <!-- Twitter --> <a href="#" class="ui-tootltip" data-toggle="tooltip" data-placement="top" title="Twitter"><i class="fa fa-twitter twitter"></i></a> <!-- LinkedIn --> <a href="#" class="ui-tootltip" data-toggle="tooltip" data-placement="top" title="LinkedIn"><i class="fa fa-linkedin linkedin"></i></a> <!-- Google Plus --> <a href="#" class="ui-tootltip" data-toggle="tooltip" data-placement="top" title="Google Plus"><i class="fa fa-google-plus google-plus"></i></a> </div> <!-- Social Media Starts --> </div> <!-- Main Item Ends --> </div> </div> </div> </div> <!-- UI - X Ends -->
Comments