Using Person Box you can create short person profiles. Add social links and icons, name, company role and don’t forget about the photo!
HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<article class="ct-person-box"> <figure class="ct-js-gray-image-container"><img src="assets/images/demo-content/person-box-03.jpg" alt="Jhon Deo"/></figure> <div class="ct-person-box__content"> <h5 class="ct-person-box__name">Jhon Deo</h5> <div class="ct-person-box__profession">(<span>ceo</span><span>director</span>) </div> </div> <ul class="ct-socials list-inline list-unstyled ct-socials--light"> <li class="ct-socials__itemfacebook"><a href="https://www.facebook.com/createITpl" target="_blank"><i class="fa fa-facebook"></i></a></li> <li class="ct-socials__itemtwitter"><a href="https://twitter.com/createitpl" target="_blank"><i class="fa fa-twitter"></i></a></li> <li class="ct-socials__itempinterest"><a href="#" target="_blank"><i class="fa fa-pinterest"></i></a></li> <li class="ct-socials__iteminstagram"><a href="#" target="_blank"><i class="fa fa-instagram"></i></a></li> <li class="ct-socials__itembehance"><a href="#" target="_blank"><i class="fa fa-behance"></i></a></li> <li class="ct-socials__itemgoogle-plus"><a href="#" target="_blank"><i class="fa fa-google-plus"></i></a></li> </ul> </article> |
Screenshots
Info Box example
Person Box hover example