API tools faq
paste
Advertisement
cornford-michael

ui-81

cornford-michael
Oct 2nd, 2017
391
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 7.49 KB | None | 0 0
raw download clone embed print report
  1.  
  2.         <!-- UI - X Starts -->
  3.         <div class="ui-81">
  4.             <div class="container">
  5.                 <div class="row">
  6.                     <div class="col-md-6 col-sm-6 col-xs-12 col-mob">
  7.                         <!-- Main Item Starts -->
  8.                         <div class="ui-item">
  9.                        
  10.                             <!-- User Details Starts -->
  11.                             <div class="ui-user clearfix">
  12.                                 <!-- User Image -->
  13.                                 <a href="#"><img src="img/ui-81/1.jpg" alt="" class="img-responsive" /></a>
  14.                                 <!-- UserName And Designation -->  
  15.                                 <h2><a href="#">Joseph Joy</a> <span>UI/Web Designer</span></h2>
  16.                             </div>
  17.                             <!-- User Details Ends -->
  18.                            
  19.                             <!-- Skills Starts -->
  20.                             <div class="ui-skills">
  21.                                 <div class="row">
  22.                                     <div class="col-md-6 col-sm-6 col-xs-6 col-mob">
  23.                                         <!-- Item -->
  24.                                         <div class="uis-item">
  25.                                             <!-- Heading -->
  26.                                             <h4>HTML</h4>
  27.                                             <!-- Progress -->
  28.                                             <div class="progress">
  29.                                                 <!-- Progress Bar -->
  30.                                                 <div class="progress-bar bg-red" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
  31.                                             </div>
  32.                                         </div>
  33.                                     </div>
  34.                                     <div class="col-md-6 col-sm-6 col-xs-6 col-mob">   
  35.                                         <!-- Item -->
  36.                                         <div class="uis-item">
  37.                                             <!-- Heading -->
  38.                                             <h4>CSS</h4>
  39.                                             <!-- Progress -->
  40.                                             <div class="progress">
  41.                                                 <!-- Progress Bar -->
  42.                                                 <div class="progress-bar bg-lblue" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%;"></div>
  43.                                             </div>
  44.                                         </div>
  45.                                     </div>
  46.                                     <div class="col-md-6 col-sm-6 col-xs-6 col-mob">   
  47.                                         <!-- Item -->
  48.                                         <div class="uis-item">
  49.                                             <!-- Heading -->
  50.                                             <h4>Ajax</h4>
  51.                                             <!-- Progress -->  
  52.                                             <div class="progress">
  53.                                                 <!-- Progress Bar -->
  54.                                                 <div class="progress-bar bg-green" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%;"></div>
  55.                                             </div>
  56.                                         </div>
  57.                                     </div>
  58.                                     <div class="col-md-6 col-sm-6 col-xs-6 col-mob">
  59.                                         <!-- Item -->
  60.                                         <div class="uis-item">
  61.                                             <!-- Heading -->
  62.                                             <h4>JQuery</h4>
  63.                                             <!-- Progress -->
  64.                                             <div class="progress">
  65.                                                 <!-- Progress Bar -->
  66.                                                 <div class="progress-bar bg-yellow" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;"></div>
  67.                                             </div>
  68.                                         </div>
  69.                                     </div>
  70.                                 </div>
  71.                             </div>
  72.                             <!-- Skills Ends -->
  73.                            
  74.                             <!-- Details Starts -->
  75.                             <div class="ui-details">
  76.                                 <!-- Paragraph -->
  77.                                 <p>Lorem ipsum dolor sit amet, ciusmod tempor incididunt adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
  78.                             </div>
  79.                             <!-- Details Ends -->
  80.                            
  81.                             <!-- Social Media Starts -->
  82.                             <div class="ui-social">
  83.                                 <!-- Facebook -->
  84.                                 <a href="#" class="ui-tootltip" data-toggle="tooltip" data-placement="top" title="Facebook"><i class="fa fa-facebook facebook"></i></a>
  85.                                 <!-- Twitter -->
  86.                                 <a href="#" class="ui-tootltip" data-toggle="tooltip" data-placement="top" title="Twitter"><i class="fa fa-twitter twitter"></i></a>
  87.                                 <!-- LinkedIn -->
  88.                                 <a href="#" class="ui-tootltip" data-toggle="tooltip" data-placement="top" title="LinkedIn"><i class="fa fa-linkedin linkedin"></i></a>
  89.                                 <!-- Google Plus -->
  90.                                 <a href="#" class="ui-tootltip" data-toggle="tooltip" data-placement="top" title="Google Plus"><i class="fa fa-google-plus google-plus"></i></a>
  91.                             </div>
  92.                             <!-- Social Media Starts -->
  93.                            
  94.                         </div> 
  95.                         <!-- Main Item Ends -->
  96.                     </div>
  97.                    
  98.                     <div class="col-md-6 col-sm-6 col-xs-12 col-mob">
  99.                         <!-- Main Item Starts -->
  100.                         <div class="ui-item">
  101.                        
  102.                             <!-- User Details Starts -->
  103.                             <div class="ui-user clearfix">
  104.                                 <!-- User Image -->
  105.                                 <a href="#"><img src="img/ui-81/2.jpg" alt="" class="img-responsive" /></a>
  106.                                 <!-- UserName And Designation -->  
  107.                                 <h2><a href="#">Mary Jonny</a> <span>Web Developer</span></h2>
  108.                             </div>
  109.                             <!-- User Details Ends -->
  110.                            
  111.                             <!-- Skills Starts -->
  112.                             <div class="ui-skills">
  113.                                 <div class="row">
  114.                                     <div class="col-md-6 col-sm-6 col-xs-6 col-mob">
  115.                                         <!-- Item -->
  116.                                         <div class="uis-item">
  117.                                             <!-- Heading -->
  118.                                             <h4>PHP</h4>
  119.                                             <!-- Progress -->
  120.                                             <div class="progress">
  121.                                                 <!-- Progress Bar -->
  122.                                                 <div class="progress-bar bg-purple" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;"></div>
  123.                                             </div>
  124.                                         </div>
  125.                                     </div>
  126.                                     <div class="col-md-6 col-sm-6 col-xs-6 col-mob">   
  127.                                         <!-- Item -->
  128.                                         <div class="uis-item">
  129.                                             <!-- Heading -->
  130.                                             <h4>Java</h4>
  131.                                             <!-- Progress -->
  132.                                             <div class="progress">
  133.                                                 <!-- Progress Bar -->
  134.                                                 <div class="progress-bar bg-rose" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%;"></div>
  135.                                             </div>
  136.                                         </div>
  137.                                     </div>
  138.                                     <div class="col-md-6 col-sm-6 col-xs-6 col-mob">   
  139.                                         <!-- Item -->
  140.                                         <div class="uis-item">
  141.                                             <!-- Heading -->
  142.                                             <h4>Linux</h4>
  143.                                             <!-- Progress -->  
  144.                                             <div class="progress">
  145.                                                 <!-- Progress Bar -->
  146.                                                 <div class="progress-bar bg-brown" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;"></div>
  147.                                             </div>
  148.                                         </div>
  149.                                     </div>
  150.                                     <div class="col-md-6 col-sm-6 col-xs-6 col-mob">
  151.                                         <!-- Item -->
  152.                                         <div class="uis-item">
  153.                                             <!-- Heading -->
  154.                                             <h4>JQuery</h4>
  155.                                             <!-- Progress -->
  156.                                             <div class="progress">
  157.                                                 <!-- Progress Bar -->
  158.                                                 <div class="progress-bar bg-orange" role="progressbar" aria-valuenow="68" aria-valuemin="0" aria-valuemax="100" style="width: 68%;"></div>
  159.                                             </div>
  160.                                         </div>
  161.                                     </div>
  162.                                 </div>
  163.                             </div>
  164.                             <!-- Skills Ends -->
  165.                            
  166.                             <!-- Details Starts -->
  167.                             <div class="ui-details">
  168.                                 <!-- Paragraph -->
  169.                                 <p>Ut enim ad minim veniam, quis nostrud exercitation  eiusmod tempor incididunt ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  170.                             </div>
  171.                             <!-- Details Ends -->
  172.                            
  173.                             <!-- Social Media Starts -->
  174.                             <div class="ui-social">
  175.                                 <!-- Facebook -->
  176.                                 <a href="#" class="ui-tootltip" data-toggle="tooltip" data-placement="top" title="Facebook"><i class="fa fa-facebook facebook"></i></a>
  177.                                 <!-- Twitter -->
  178.                                 <a href="#" class="ui-tootltip" data-toggle="tooltip" data-placement="top" title="Twitter"><i class="fa fa-twitter twitter"></i></a>
  179.                                 <!-- LinkedIn -->
  180.                                 <a href="#" class="ui-tootltip" data-toggle="tooltip" data-placement="top" title="LinkedIn"><i class="fa fa-linkedin linkedin"></i></a>
  181.                                 <!-- Google Plus -->
  182.                                 <a href="#" class="ui-tootltip" data-toggle="tooltip" data-placement="top" title="Google Plus"><i class="fa fa-google-plus google-plus"></i></a>
  183.                             </div>
  184.                             <!-- Social Media Starts -->
  185.                            
  186.                         </div> 
  187.                         <!-- Main Item Ends -->
  188.                     </div>
  189.                 </div>
  190.             </div>
  191.         </div>
  192.         <!-- UI - X Ends -->
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!