This {Theme} has three versions of Person Box
Default
Screenshoot
Person Box – Default version
HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<div class="ct-personBox ct-u-marginBottom30"> <div class="ct-personMedia"> <div class="ct-personImage"> <a href="member-single.html"> <img src="assets/images/demo-content/member1.jpg" alt="person"> </a> </div> <div class="ct-personName"> <h4 class="ct-personName--title ct-fw-600"> Mohamed Said </h4> <span class="ct-personName--meta ct-u-colorMotive"> Web Designer </span> </div> </div> <div class="ct-personDescription"> <p> Ut enim ad minima veniam, quis nostrum exercitationem ullamcorpor suscipit laboriosam </p> </div> </div> |
Inline
Screenshoot
Person Box – Inline version
HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<div class="ct-personBox ct-personBox--inline"> <div class="ct-personMedia ct-u-displayTableVertical"> <div class="ct-u-displayTableCell"> <div class="ct-personImage"> <img src="assets/images/demo-content/personBoxImage1-circle.jpg" alt="person"> </div> </div> <div class="ct-u-displayTableCell"> <div class="ct-personName"> <span class="ct-personName--title ct-fw-700"> Mohamed Said </span> <span class="ct-personName--meta text-lowercase"> senior ui ux designer </span> </div> </div> </div> <div class="ct-personDescription"> <p> In just 2 years Victor has become one of the most successful instructors on the web. Victor's incred ble rising story has been covered on the Wall Stre et Journal, MIT Journal, Slate and the Sydney Mo rning Herald <a href="#">Moree..</a> </p> </div> </div> |
Inline Description
Screenshoot
Person Box – Inline Description version
HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<div class="ct-personBox ct-personBox--inline ct-personBox--inlineDescription"> <div class="container"> <div class="ct-personMedia ct-u-displayTableVertical"> <div class="ct-u-displayTableCell"> <div class="ct-personImage"> <img src="assets/images/demo-content/single-member.jpg" alt="person"> </div> </div> <div class="ct-u-displayTableCell"> <div class="ct-personName ct-u-marginBottom20"> <span class="ct-personName--title ct-fw-700 ct-u-marginBottom20"> Mohamed Said </span> <span class="ct-personName--meta ct-fw-600"> Web Designer </span> </div> <div class="ct-personDescription"> <p class="ct-fw-300"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut imperdiet a, venenatis vitae, justo. </p> </div> </div> <div class="ct-u-displayTableCell"> <ul class="ct-socials--singleMember list-unstyled"> <li><a href="http://www.createit.pl/"><i class="fa fa-wordpress"></i></a></li> <li><a href="#"><i class="fa fa-cloud"></i></a></li> <li><a href="https://twitter.com/createitpl"><i class="fa fa-twitter"></i></a></li> <li><a href="#"><i class="fa fa-google-plus"></i></a></li> </ul> </div> </div> </div> </div> |