Team Box

• Posted: March 23, 2016
• / By: Magda
• / In:

HTML markup

CSS

<figure class="ct-team-box"> <a href="team-1.html" class="ct-team-box__media mfp-ajax"> <img src="assets/images/demo-content/team-1.jpg" alt="Mike" class="ct-team-box__image"> <button type="button" class="btn btn-accent ct-team-box__button">View Full Profile </button> </a> <h4 class="ct-team-box__name">Mike</h4> <ul class="ct-socials list-inline list-unstyled"> <li class="ct-socials__item--facebook"><a href="https://www.facebook.com/createITpl"><i class="fa fa-facebook"></i></a> </li> <li class="ct-socials__item--twitter"><a href="https://twitter.com/createitpl"><i class="fa fa-twitter"></i></a> </li> <li class="ct-socials__item--instagram"><a href="#"><i class="fa fa-instagram"></i></a> </li> </ul> </figure>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<figure class="ct-team-box">     <a href="team-1.html" class="ct-team-box__media mfp-ajax">         <img src="assets/images/demo-content/team-1.jpg" alt="Mike" class="ct-team-box__image">         <button type="button" class="btn btn-accent ct-team-box__button">View Full Profile         </button>     </a>     <h4 class="ct-team-box__name">Mike</h4>     <ul class="ct-socials list-inline list-unstyled">         <li class="ct-socials__item--facebook"><a href="https://www.facebook.com/createITpl"><i class="fa fa-facebook"></i></a>         </li>         <li class="ct-socials__item--twitter"><a href="https://twitter.com/createitpl"><i class="fa fa-twitter"></i></a>         </li>         <li class="ct-socials__item--instagram"><a href="#"><i class="fa fa-instagram"></i></a>         </li>     </ul> </figure>

Screenshots

Team box