Person box:
Person Box
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<div class="ct-personBox"> <div class="ct-img-wrapper-2"> <div class="ct-img-wrapper-3"> <div class="ct-u-displayTableVertical"> <div class="ct-u-displayTableCell ct-u-colorWhite text-center"> <a class="btn btn-lg ct-btn--transparent ct-btn-rounded" href="#">See Profile</a> </div> </div> </div> <img src="assets/images/demo-content/team-1.jpg" alt=""> </div> <div> <h5 class="ct-fw-600 ct-u-paddingTop30">Emil Costello</h5> <p>Founder</p> <p>No one would have believed in the last years of the nine- teenth century that this world was being watched keenly</p> <ul class="list-inline ct-socials ct-u-size20 ct-u-paddingTop10"> <li><a href="#"><i class="fa fa-envelope" data-toggle="tooltip" data-placement="top" title="" data-original-title="linkedin"></i></a></li> <li><a href="https://twitter.com/createitpl" data-toggle="tooltip" data-placement="top" title="" data-original-title="twitter"><i class="fa fa-twitter"></i></a></li> <li><a href="#"><i class="fa fa-linkedin" data-toggle="tooltip" data-placement="top" title="" data-original-title="linkedin"></i></a></li> </ul> </div> </div> |
Widget person box:
Person box – widget
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div class="widget"> <div class="widget-inner"> <div class="media"> <div class="media-left media-middle"> <a href="#"> <img class="media-object" src="assets/images/demo-content/person-1.png" alt=""> </a> </div> <div class="media-body"> <span class="media-heading">Erik Swartz</span> <p>"At vero eos et accus et iusto odio dignissimos...</p> </div> </div> </div> </div> |
ct-personBox: Person box style.
ct-img-wrapper-2: Gives position relative.
ct-img-wrapper-3: Gives position absolute and sets top: 0, bottom: 0, right: 0,left:0.
btn, btn-link, btn-lg, ct-btn–transparent, ct-btn-rounded: button classes.