One page Team members

52.One page Team members

Module position: onepage

Module class suffix: section4 team tp-title-center

If you want your module this way, Go to backend: Extensions --> Module Manager --> New --> Select type as Custom html with the settings below:

Step-1:

Create a new custom html module

Step-2:

Add the following html code in you Custom html module

<div class="container">
    <div class="col-sm-12">
        <h3 class="module-title "><span class="title-left">Awesome </span>
<span class="title-right"> Team</span>
        </h3>
        <p class=" text-center tp-sub-text" style="margin-bottom: 30px;">
Sed ut Perspiciatis Unde Omnis Iste Sed ut perspiciatis unde omnis iste natu error sit 
voluptatem accusan tium Sed ut</p>
    </div>
    <div class="col-md-3 col-sm-3 col-xs-12">
        <div class="tp-team">
            <div class="img-wrp"><img src="images/themeparrot/team/team1.jpg" 
alt="team1" />
                <div class="overlay-wrp">
                    <div class="overlay">&nbsp;</div>
                    <ul class="social-icons overlay-content">
                        <li><a href="#" class="facebook"><em class="icon-facebook">
</em></a>
                        </li>
                        <li><a href="#" class="twitter"><em class="icon-twitter"></em
></a>
                        </li>
                        <li><a href="#" class="gplus"><em class="icon-gplus"></em></a>
                        </li>
                        <li><a href="#" class="linkedin"><em class="icon-linkedin"></em>
</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="team-name">
                <h5>John smith</h5><span>Chief Executive Officer</span>
            </div>
            <div class="team-email"><a href="#"><em class="fa fa-envelope-o"></em>
[e-mail] </a>
            </div>
            <div class="clearfix">&nbsp;</div>
        </div>
    </div>
    <div class="col-md-3 col-sm-3 col-xs-12">
        <div class="tp-team">
            <div class="img-wrp"><img src="images/themeparrot/team/team2.jpg" 
alt="team1" />
                <div class="overlay-wrp">
                    <div class="overlay">&nbsp;</div>
                    <ul class="social-icons overlay-content">
                        <li><a href="#" class="facebook"><em class="icon-facebook">
</em></a>
                        </li>
                        <li><a href="#" class="twitter"><em class="icon-twitter"></em>
</a>
                        </li>
                        <li><a href="#" class="gplus"><em class="icon-gplus"></em></a>
                        </li>
                        <li><a href="#" class="linkedin"><em class="icon-linkedin">
</em></a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="team-name">
                <h5>Susan Clark</h5><span> Creative Director </span>
            </div>
            <div class="team-email"><a href="#"><em class="fa fa-envelope-o">
</em> [e-mail] </a>
            </div>
            <div class="clearfix">&nbsp;</div>
        </div>
    </div>
    <div class="col-md-3 col-sm-3 col-xs-12">
        <div class="tp-team">
            <div class="img-wrp"><img src="images/themeparrot/team/team3.jpg" 
alt="team1" />
                <div class="overlay-wrp">
                    <div class="overlay">&nbsp;</div>
                    <ul class="social-icons overlay-content">
                        <li><a href="#" class="facebook"><em class="icon-facebook">
</em></a>
                        </li>
                        <li><a href="#" class="twitter"><em class="icon-twitter">
</em></a>
                        </li>
                        <li><a href="#" class="gplus"><em class="icon-gplus"></em></a>
                        </li>
                        <li><a href="#" class="linkedin"><em class="icon-linkedin">
</em></a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="team-name">
                <h5>Patrick Roger</h5><span>Sales Executive</span>
            </div>
            <div class="team-email"><a href="#"><em class="fa fa-envelope-o"></em>
[e-mail] </a>
            </div>
            <div class="clearfix">&nbsp;</div>
        </div>
    </div>
    <div class="col-md-3 col-sm-3 col-xs-12">
        <div class="tp-team">
            <div class="img-wrp"><img src="images/themeparrot/team/team4.jpg" 
alt="team4" />
                <div class="overlay-wrp">
                    <div class="overlay">&nbsp;</div>
                    <ul class="social-icons overlay-content">
                        <li><a href="#" class="facebook"><em class="icon-facebook">
</em></a>
                        </li>
                        <li><a href="#" class="twitter"><em class="icon-twitter">
</em></a>
                        </li>
                        <li><a href="#" class="gplus"><em class="icon-gplus"></em></a>
                        </li>
                        <li><a href="#" class="linkedin"><em class="icon-linkedin">
</em></a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="team-name">
                <h5>Katty Moore</h5><span>Web designer</span>
            </div>
            <div class="team-email"><a href="#"><em class="fa fa-envelope-o"></em>
 [e-mail] </a>
            </div>
            <div class="clearfix">&nbsp;</div>
        </div>
    </div>
</div>

Step-3:

Once the module is created successfully SAVE & CLOSE The settings