Foundation zurb snippet: People directory

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: users,list



<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> <div class="row"> <ul class="directory-list"> <li><a href="#">a</a></li> <li><a href="#">b</a></li> <li><a href="#">c</a></li> <li><a href="#">d</a></li> <li><a href="#">e</a></li> <li><a href="#">f</a></li> <li><a href="#">g</a></li> <li><a href="#">h</a></li> <li><a href="#">i</a></li> <li><a href="#">j</a></li> <li><a href="#">k</a></li> <li><a href="#">l</a></li> <li><a href="#">m</a></li> <li><a href="#">n</a></li> <li><a href="#">o</a></li> <li><a href="#">p</a></li> <li><a href="#">q</a></li> <li><a href="#">r</a></li> <li><a href="#">s</a></li> <li><a href="#">t</a></li> <li><a href="#">u</a></li> <li><a href="#">v</a></li> <li><a href="#">w</a></li> <li><a href="#">x</a></li> <li><a href="#">y</a></li> <li><a href="#">z</a></li> </ul> </div> <div class="directory-info-row"> <div class="row"> <div class="large-6 small-12 columns"> <div class="panel"> <div class="panel-body"> <div class="media-object"> <a class="pull-left media-object-section" href="#"> <img class="thumb media-object" src="http://bootdey.com/img/Content/avatar/avatar1.png" alt=""> </a> <div class="media-object-section"> <h4>John Doe <span class="text-muted small"> - UI Engineer</span></h4> <ul class="social-links"> <li><a title="" href=""><i class="fa fa-facebook"></i></a></li> <li><a title="" href=""><i class="fa fa-twitter"></i></a></li> <li><a title="" href=""><i class="fa fa-linkedin"></i></a></li> <li><a title="" href=""><i class="fa fa-skype"></i></a></li> </ul> <address> <strong>Bootdey, Inc.</strong><br> Vamoil Ave, Suite 23<br> Dream land, Australia <br> <abbr title="Phone">P:</abbr> (142) 454-7890 </address> </div> </div> </div> </div> </div> <div class="large-6 small-12 columns"> <div class="panel"> <div class="panel-body"> <div class="media-object"> <a class="pull-left media-object-section" href="#"> <img class="thumb" src="http://bootdey.com/img/Content/avatar/avatar2.png" alt=""> </a> <div class="media-object-section"> <h4>John Doe <span class="text-muted small"> - UI Engineer</span></h4> <ul class="social-links"> <li><a title="" href=""><i class="fa fa-facebook"></i></a></li> <li><a title="" href=""><i class="fa fa-twitter"></i></a></li> <li><a title="" href=""><i class="fa fa-linkedin"></i></a></li> <li><a title="" href=""><i class="fa fa-skype"></i></a></li> </ul> <address> <strong>Bootdey, Inc.</strong><br> Vamoil Ave, Suite 23<br> Dream land, Australia <br> <abbr title="Phone">P:</abbr> (142) 454-7890 </address> </div> </div> </div> </div> </div> <div class="large-6 small-12 columns"> <div class="panel"> <div class="panel-body"> <div class="media-object"> <a class="pull-left media-object-section" href="#"> <img class="thumb" src="http://bootdey.com/img/Content/avatar/avatar3.png" alt=""> </a> <div class="media-object-section"> <h4>John Doe <span class="text-muted small"> - UI Engineer</span></h4> <ul class="social-links"> <li><a title="" href=""><i class="fa fa-facebook"></i></a></li> <li><a title="" href=""><i class="fa fa-twitter"></i></a></li> <li><a title="" href=""><i class="fa fa-linkedin"></i></a></li> <li><a title="" href=""><i class="fa fa-skype"></i></a></li> </ul> <address> <strong>Bootdey, Inc.</strong><br> Vamoil Ave, Suite 23<br> Dream land, Australia <br> <abbr title="Phone">P:</abbr> (142) 454-7890 </address> </div> </div> </div> </div> </div> <div class="large-6 small-12 columns"> <div class="panel"> <div class="panel-body"> <div class="media-object"> <a class="pull-left media-object-section" href="#"> <img class="thumb" src="http://bootdey.com/img/Content/avatar/avatar4.png" alt=""> </a> <div class="media-object-section"> <h4>John Doe <span class="text-muted small"> - UI Engineer</span></h4> <ul class="social-links"> <li><a title="" href=""><i class="fa fa-facebook"></i></a></li> <li><a title="" href=""><i class="fa fa-twitter"></i></a></li> <li><a title="" href=""><i class="fa fa-linkedin"></i></a></li> <li><a title="" href=""><i class="fa fa-skype"></i></a></li> </ul> <address> <strong>Bootdey, Inc.</strong><br> Vamoil Ave, Suite 23<br> Dream land, Australia <br> <abbr title="Phone">P:</abbr> (142) 454-7890 </address> </div> </div> </div> </div> </div> </div> </div>
body{ margin-top:20px; background: #f1f2f7; } .panel { margin-bottom: 20px; background-color: #fff; border: 1px solid transparent; border-radius: 4px; -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05); box-shadow: 0 1px 1px rgba(0,0,0,.05); } .panel-body { padding: 15px; } .pull-left { float: left !important; } .pull-right { float: right !important; } address { margin-bottom: 20px; font-style: normal; line-height: 1.42857143; } .directory-list, .directory-info-row .social-links { list-style-type: none; padding: 0; margin: 0; } .directory-list li { border-left: 3px solid #f1f2f7; display: table-cell; width: 1%; } .directory-list li a { display: block; padding: 8px 0; text-align: center; text-transform: uppercase; background: #fff; color: #7A7676; -moz-transition: all 0.2s ease-out 0s; -webkit-transition: all 0.2s ease-out 0s; transition: all 0.2s ease-out 0s; text-decoration: none; border-radius: 5px; -webkit-border-radius: 5px; } .directory-info-row .thumb { border-radius: 5px; -webkit-border-radius: 5px; height: auto; width: 175px; margin-right: 10px; } .directory-list li a:hover, .directory-info-row .social-links li a:hover { background: #ff6c60; color: #fff; } .directory-info-row { display: inline-block; width: 100%; margin-top: 20px; } .directory-info-row h4, .directory-info-row a { color: #424F63; } .h4, h4 { font-size: 18px; } .directory-info-row .social-links { display: inline-block; margin-bottom: 10px; } .directory-info-row .social-links li { display: inline-block; } ul li { list-style: none; } .directory-info-row .social-links li a { background: #EFF0F4; width: 30px; height: 30px; line-height: 30px; text-align: center; display: inline-block; border-radius: 5px; -webkit-border-radius: 5px; color: #7A7676; } .h4, h4 { font-size: 18px; } .h4, h4 { font-size: 18px; } .h4, .h5, .h6, h4, h5, h6 { margin-top: 10px; margin-bottom: 10px; } h4 .small, h4 small, h5 .small, h5 small, h6 .small, h6 small { font-weight: 400; line-height: 1; color: #777; } h4 .small, h4 small, h5 .small, h5 small, h6 .small, h6 small { font-size: 75%; }
Dey-Dey

People directory

Dey-Dey
  May 13th, 21:09
51 Views