<#include "layout/layout.ftl">
<#include "layout/common/article.ftl">
<style type="text/css">
    .page-title h2{
        padding: 30px 0 0;
        color: #000;
        font-weight: 400;
        font-size: 30px;
        line-height: 50px;
        text-align: center;
    }
    .page-title p{
        padding-bottom: 30px;
        font-size: 15px;
        color: #8492a6;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        line-height: 1.6;
        max-width: 600px;
    }
    .our-team{
        float: left;
        margin: 10px;
        width: 240px;
        padding: 30px 0 40px;
        background: #fff;
        text-align: center;
        overflow: hidden;
        position: relative;
    }
    .our-team .pic{
        display: inline-block;
        width: 130px;
        height: 130px;
        margin-bottom: 25px;
        z-index: 1;
        position: relative;
    }
    .our-team .pic:before{
        content: "";
        width: 100%;
        height: 0;
        border-radius: 50%;
        background: #ee4266;
        position: absolute;
        bottom: 135%;
        right: 0;
        left: 0;
        opacity: 0.2;
        transform: scale(3);
        transition: all 0.3s linear 0s;
    }
    .our-team:hover .pic:before{ height: 100%; }
    .our-team .pic:after{
        content: "";
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background: #ee4266;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }
    .our-team .pic img{
        width: 100%;
        height: auto;
        border-radius: 50%;
        transform: scale(1);
        transition: all 0.9s ease 0s;
    }
    .our-team:hover .pic img{
        box-shadow: 0 0 0 14px #f7f5ec;
        transform: scale(0.7);
    }
    .our-team .team-content{ margin-bottom: 30px; }
    .our-team .title{
        font-size: 22px;
        font-weight: 700;
        color: #4e5052;
        letter-spacing: 1px;
        text-transform: capitalize;
        margin-bottom: 5px;
    }
    .our-team .post{
        display: block;
        font-size: 15px;
        color: #4e5052;
        text-transform:capitalize;
    }
    .our-team .social{
        width: 100%;
        padding: 0;
        margin: 0;
        background: #eb1768;
        position: absolute;
        bottom: -100px;
        left: 0;
        transition: all 0.5s ease 0s;
    }
    .our-team:hover .social{ bottom: 0; }
    .our-team .social li{ display: inline-block; }
    .our-team .social li a{
        display: block;
        padding: 10px;
        font-size: 17px;
        color: #fff;
        transition: all 0.3s ease 0s;
        text-decoration: none;
    }
    .our-team .social li a:hover{
        color: #eb1768;
        background: #f7f5ec;
    }
    @media only screen and (max-width: 990px){
        .our-team{ margin-bottom: 30px; }
    }
</style>
<@layout type="urlNav" title="${post.title!} - ${blog_title!}" keywords="${options.seo_keywords!},${tagWords!}" description="${post.summary!}" canonical="${post.fullPath!}">

    <div class="page-title">
        <h2>特别鸣谢</h2>
        <p>为 Elastic 开源社区 提供宣传、维护等服务的朋友</p>
    </div>
    <@linkTag method="listTeams">
        <#list teams as item>
            <#if item.team?? && item.team?contains('贡献墙') >
                <#list item.links?sort_by('priority')?reverse  as link>
                    <div class="our-team">
                        <div class="pic">
                            <img src="${link.logo}">
                        </div>
                        <div class="team-content">
                            <h3 class="title">${link.name}</h3>
                            <Span class="post">${link.description}</Span>
                        </div>
                        <ul class="social">
                            <li><a href="${link.url}" target="_blank" rel="nofollow noopener external">个人主页</a></li>
                        </ul>
                    </div>
                </#list>
            </#if>
        </#list>
    </@linkTag>

</@layout>