Introduce your team members with pretty person boxes.
Person Box
Use for this simple 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 38 |
<article class="ct-personBox"> <header class="ct-personBox-title"> <h4><a href="#">Sarah Green</a></h4> <p>Head of Digital</p> </header> <figure class="ct-personBox-images ct-hover ct-js-hover ct-hover-type14"> <a href="#"><img src="assets/images/demo-content/peoplecomp_03.png" alt="peoplecomp_03" /></a> </figure> <div class="ct-personBox-text"> <p>All the Lorem Ipsum generators on the Internet ten to repeat predefined chunks as necessary, making this the</p> <div class="ct-personBox-email ct-morph-button ct-morph-button-modal ct-morph-button-modal-2 ct-morph-button-fixed"> <button type="button" class="btn btn-motive ct-btn-rounded ct-btn-NavbarMenu ct-hover--outlineOut"><i class="fa fa-envelope cw-mail"></i></button> <div class="ct-morph-content"> <div> <div class="content"> <span class="icon icon-close"><i class="fa fa-times"></i></span> <h4 class="ct-fw-900 text-uppercase">Ask Me</h4> <form> <div class="form-group"> <label for="ct-personBox-text3">Message</label> <textarea class="form-control" id="ct-personBox-text3" rows="3" placeholder="Message"></textarea> </div> <div class="form-group"> <label for="ct-personBox-email3">Email address</label> <input type="email" class="form-control" id="ct-personBox-email3" placeholder="Enter email"> </div> <button type="submit" class="btn btn-motive ct-btn-rounded ct-hover--outlineOut ct-u-marginTop15 pull-right">Send</button> </form> </div> </div> </div> </div><!-- morph-button --> <span class="ct-js-emailPerson">Email Her</span> </div> </article> |