Foundation zurb snippet: Profile info

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



<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> <div class="large-5 large-offset-4 margin-b-30"> <div class="profile-overview"> <div class="avtar text-center"> <img src="http://bootdey.com/img/Content/avatar/avatar6.png" alt="" class="thumbnail"> <h3>Peter Emrald</h3> <hr> <ul class="socials list-inline"> <li><a href="#"><i class="fa fa-facebook"></i></a></li> <li><a href="#"><i class="fa fa-twitter"></i></a></li> <li><a href="#"><i class="fa fa-google-plus"></i></a></li> <li><a href="#"><i class="fa fa-linkedin"></i></a></li> <li><a href="#"><i class="fa fa-github"></i></a></li> </ul> <hr> </div> <table class="profile-detail stack hover"> <thead> <tr> <th colspan="3">Contact Information</th> </tr> </thead> <tbody> <tr> <td>url</td> <td> <a href="#"> www.example.com </a></td> <td><a href="#panel_edit_account" class="show-tab"><i class="fa fa-pencil edit-user-info"></i></a></td> </tr> <tr> <td>email:</td> <td> <a href=""> peter@example.com </a></td> <td><a href="#panel_edit_account" class="show-tab"><i class="fa fa-pencil edit-user-info"></i></a></td> </tr> <tr> <td>phone:</td> <td>(641)-734-4763</td> <td><a href="#panel_edit_account" class="show-tab"><i class="fa fa-pencil edit-user-info"></i></a></td> </tr> <tr> <td>skye</td> <td> <a href=""> peterclark82 </a></td> <td><a href="#panel_edit_account" class="show-tab"><i class="fa fa-pencil edit-user-info"></i></a></td> </tr> </tbody> </table> <table class="profile-detail stack hover"> <thead> <tr> <th colspan="3">General information</th> </tr> </thead> <tbody> <tr> <td>Position</td> <td>UI Designer</td> <td><a href="#panel_edit_account" class="show-tab"><i class="fa fa-pencil edit-user-info"></i></a></td> </tr> <tr> <td>Last Logged In</td> <td>56 min</td> <td><a href="#panel_edit_account" class="show-tab"><i class="fa fa-pencil edit-user-info"></i></a></td> </tr> <tr> <td>Position</td> <td>Senior Marketing Manager</td> <td><a href="#panel_edit_account" class="show-tab"><i class="fa fa-pencil edit-user-info"></i></a></td> </tr> <tr> <td>Supervisor</td> <td> <a href="#"> Kenneth Ross </a></td> <td><a href="#panel_edit_account" class="show-tab"><i class="fa fa-pencil edit-user-info"></i></a></td> </tr> <tr> <td>Status</td> <td><span class="label label-sm label-info">Administrator</span></td> <td><a href="#panel_edit_account" class="show-tab"><i class="fa fa-pencil edit-user-info"></i></a></td> </tr> </tbody> </table> </div> </div>
body{ margin-top:20px; background:#eee; } .profile-overview{ padding: 15px; background-color: #fff; } .profile-overview h3{ color:#000; margin-top: 10px; font-size: 20px; font-weight: bold; } .profile-overview .socials li a{ border-radius: 50%; -webkit-border-radius: 50%; } .show-tab i{ opacity: 0; } .show-tab:hover i{ opacity: 1; } .profile-detail tr:hover i{ opacity: 1; } .profile-edit{ padding: 15px; background-color: #fff; } .list-inline { padding-left: 0; margin-left: -5px; list-style: none; } .list-inline>li { display: inline-block; padding-right: 5px; padding-left: 5px; } .socials li{ padding: 0px; } .socials li a{ width: 32px; height: 32px; line-height: 32px; text-align: center; background-color: #999; border-radius: 2px; -webkit-border-radius: 2px; color:#fff; font-size: 18px; display: block; } .socials li a:hover{ color:#fff; background-color: #0e96ec; }
Dey-Dey

Profile info

Dey-Dey
  May 15th, 19:51
67 Views