Team page Intro

64. Team page Intro

Module position: tp-about-us-team

Module class suffix: Not Used

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="col-sm-12">
    <h3 class="module-title text-center"><span class="title-left">Meet our </span>
<span class="title-right"> Awesome Team</span>
    </h3>
    <p class=" text-center tp-sub-text" style="margin-bottom: 30px;">
Peoples says we are awesome</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>

Step-3:

Once the module is created successfully SAVE & CLOSE The settings