Bootstrap snippet: Team member cards

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: image,list,html,css

<div class="container bootstrap snippet"> <div class="row"> <div class="col-md-4"> <a class="cta text-center" href="#"> <h2 class="name">Adam moort</h2> <img alt="" class="img-responsive" src=""> <h2>Designer</h2> <p>Run forest run</p> </a> </div> <div class="col-md-4"> <a class="cta text-center" href="#"> <h2 class="name">Jef fernadis</h2> <img alt="" class="img-responsive" src=""> <h2>Developer</h2> <p>oooooohhhhhh!</p> </a> </div> <div class="col-md-4"> <a class="cta text-center" href="#"> <h2 class="name">Martin Breton</h2> <img alt="" class="img-thumbnail img-responsive" src=""> <h2>Tester</h2> <p>Adventure time</p> </a> </div> </div> </div>
body{ margin-top:40px; } .cta { display: block; padding: 30px; border: 3px dotted #eee; border-radius: 4px; margin: 0 3%; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.16), 0 2px 10px rgba(0, 0, 0, 0.12); } .cta .name { opacity: 0.2; } .cta img { padding: 4px; line-height: 1.42857143; background-color: #fff; border: 1px dashed #ddd; border-radius: 4px; -webkit-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -o-transform: rotate(-10deg); -ms-transform: rotate(-10deg); transform: rotate(-10deg); } a:hover{ text-decoration:none; }

Team member cards

  Jul 20th 2015, 08:42