profile card with borders, text, image
Sun Feb 13 2022 06:22:00 GMT+0000 (Coordinated Universal Time)
Saved by @developerchef #html #css #javascript
<figure class="snip1515"> <div class="profile-image"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample47.jpg" alt="sample47" /></div> <figcaption> <h3>Fleece Marigold</h3> <h4>Founder</h4> <p>Which is worse, that everyone has his price, or that the price is always so low.</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> </figure> <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>Norman Gordon</h3> <h4>Web Designer</h4> <p>I'm killing time while I wait for life to shower me with meaning and happiness.</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> </figure> <figure class="snip1515"> <div class="profile-image"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample70.jpg" alt="sample70" /></div> <figcaption> <h3>Ruby Von Rails</h3> <h4>Public Relations</h4> <p>The only skills I have the patience to learn are those that have no real application in life. </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> </figure> ____________________________________________________________________________________- @import url(https://fonts.googleapis.com/css?family=Open+sans); @import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css); @import url(https://fonts.googleapis.com/css?family=Playfair+Display); .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 #e8b563; } .snip1515 .profile-image img { max-width: 100%; vertical-align: top; } .snip1515 figcaption { width: 100%; background-color: #F2F2F2; 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: 600; font-size: 1.3em; font-family: 'Playfair Display', Arial, sans-serif; } .snip1515 h4 { color: #8c8c8c; font-weight: 400; 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: #e8b563; opacity: 0.75; } .snip1515 i:hover { opacity: 1; -webkit-transition: all 0.35s ease; transition: all 0.35s ease; } +++++++++++++++++++++_________________________________________________ /* Demo purposes only */ $(".hover").mouseleave( function () { $(this).removeClass("hover"); } );
Comments