Profile card with color border around image and profile details

HTML
<figure class="snip1515"> <div class="profile-image"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample83.jpg" alt="sample83" /></div> <figcaption> <h3>Name</h3> <h4>Position Title</h4> <p>The following is placeholder text known as “lorem ipsum,” which is scrambled Latin used by designers to mimic real copy. Mauris id fermentum nulla. Suspendisse nec congue purus.</p> <div class="icons"><a href="#"><i class="ion-social-reddit"></i></a> <a href="#"> <i class="ion-social-twitter"></i></a> <a href="#"> <i class="ion-social-vimeo"></i></a> </div> </figcaption>
CSS
// Profile card with color border around image and profile details // .snip1515 { font-family: 'Open Sans', Arial, sans-serif; position: relative; margin: 10px; min-width: 230px; max-width: 315px; width: 100%; color: #000000; text-align: center; line-height: 1.4em; font-size: 14px; box-shadow: none !important; } .snip1515 * { -webkit-box-sizing: border-box; box-sizing: border-box; } .snip1515 .profile-image { display: inline-block; width: 80%; z-index: 1; position: relative; padding: 10px; border: 2px solid #66cc99; } .snip1515 .profile-image img { max-width: 100%; vertical-align: top; } .snip1515 figcaption { width: 100%; background-color: #f8f1eb; color: #555; padding: 125px 25px 25px; margin-top: -100px; display: inline-block; } .snip1515 h3, .snip1515 h4, .snip1515 p { margin: 0 0 5px; } .snip1515 h3 { font-weight: 400; font-size: 1.3em; font-family: 'Oswald', Arial, sans-serif; } .snip1515 h4 { color: #cc9966; font-weight: 300; letter-spacing: 2px; } .snip1515 p { font-size: 0.9em; letter-spacing: 1px; opacity: 0.9; } .snip1515 .icons { text-align: center; width: 100%; } .snip1515 i { padding: 10px 2px; display: inline-block; font-size: 18px; font-weight: normal; color: #66cc99; opacity: 0.75; } .snip1515 i:hover { opacity: 1; -webkit-transition: all 0.35s ease; transition: all 0.35s ease; }
JAVASCRIPT
Expand for more options Login