Difference between revisions of "Team:SMMU-China/Team"

Line 1: Line 1:
−
{{SMMU-China}}
+
.big_framework{background-color: #1F1F1F; }
−
<html>
+
*{margin: 0; padding: 0; box-sizing: border-box;}
 +
.container{font-size: 16px; margin: 0 auto; max-width: 1000px;}
 +
.row{width: 103%; float: left; margin: 110px -1.5%;}
  
−
<link rel="stylesheet" href="https://2019.igem.org/wiki/index.php?title=Template:SMMU-China/CSS_main&action=raw&ctype=text/css" />
+
/*= common css to all effects =*/
−
<!--<link rel="stylesheet" href="main.css" />-->
+
.single-member{width: 280px; float: left; margin: 30px 2.5%; background-color: #fff; text-align: center; position: relative;}
−
<link rel="stylesheet" href="https://2019.igem.org/wiki/index.php?title=Template:SMMU-China/CSS_team&action=raw&ctype=text/css" />
+
.member-image img{max-width: 100%; vertical-align: middle;}
 +
h3 {font-size: 24px; font-weight: normal; margin: 10px 0 0; text-transform: uppercase;}
 +
h5 {font-size: 16px; font-weight: 300; margin: 0 0 15px; line-height: 22px;}
 +
p {font-size: 14px; font-weight: 300; line-height: 22px; padding: 0 30px; margin-bottom: 10px;}
 +
.social-touch a{display: inline-block; width: 27px; height: 26px; vertical-align: middle; margin: 0 2px; background-image: url(../images/social-icons.png); background-repeat: no-repeat; opacity: 0.7; transition: 0.3s;}
 +
.social-touch a:hover{opacity: 1; transition: 0.3s;}
 +
.fb-touch{background-position: 0 0;}
 +
.tweet-touch{background-position: -35px 0;}
 +
.linkedin-touch{background-position: -71px 0;}
 +
.icon-colored .fb-touch{background-position: 0 -27px;}
 +
.icon-colored .tweet-touch{background-position: -35px -27px;}
 +
.icon-colored .linkedin-touch{background-position: -71px -27px;}
 +
/*= common css to all effects end =*/
  
−
<style type="text/css">
+
/*= effect-1 css =*/
−
+
.effect-1{border-radius: 5px 5px 0 0; padding-bottom: 40px;}
−
</style>
+
.effect-1 .member-image {border: 2px solid #fff; border-radius: 60px 0; display: inline-block; margin-top: -72px; overflow: hidden; transition: 0.3s;}
 +
.effect-1 .social-touch{background-color: #e13157; position: absolute; left: 0; bottom: 0; height: 5px; overflow: hidden; padding: 5px 0 0; width: 100%; transition: 0.3s;}
 +
.effect-1 .member-image img{transition: 0.3s; border-radius: 60px 0;}
 +
.effect-1:hover .member-image{border-color: #e13157; transition: 0.3s; border-radius: 50%;}
 +
.effect-1:hover .social-touch{padding: 6px 0; height: 38px; transition: 0.3s;}
 +
/*= effect-1 css end =*/
  
−
<div class="big_framework">
+
/*= effect-2 css =*/
−
<div class="index-nav">
+
.effect-2{max-height: 302px; min-height: 302px; overflow: hidden;}
−
<div class="index-nav-frame clearfix">
+
.effect-2 h3{padding-top: 7px; line-height: 33px;}
−
<div class="nav-line">
+
.effect-2 .member-image{border-bottom: 5px solid #1fb554; height: 212px; overflow: hidden; width: 100%; transition: 0.4s; display: inline-block; float: none; vertical-align: middle;}
−
<div class="index-nav-frame-logo-mobile">
+
.effect-2 .member-info{transition: 0.4s;}
−
<img src="https://static.igem.org/mediawiki/2019/a/a5/T--SMMU-China--xiaotian_logo.png" alt="XiaoTian">
+
.effect-2 .member-image img{width: 100%; vertical-align: bottom;}
−
</div>
+
.effect-2 .social-touch{background-color: #1fb554; float: left; left: 0; bottom: 0; overflow: hidden; padding: 5px 0; width: 100%; transition: 0.4s;}
−
</div>
+
.effect-2:hover .member-image{height: 81px; transition: 0.4s;}
−
<div class="nav-small" tabindex="-1">
+
/*= effect-2 css end =*/
−
<div class="nav-small-focus" tabindex="-1">
+
−
+
−
</div>
+
−
<img src="https://static.igem.org/mediawiki/2019/7/70/T--SMMU-China--header_icon.png"/>
+
−
</div>
+
−
<div class="index-nav-frame-logo">
+
−
<img src="https://static.igem.org/mediawiki/2019/a/a5/T--SMMU-China--xiaotian_logo.png" alt="XiaoTian">
+
−
</div>
+
−
<div class="index-nav-frame-line first-one" tabindex="-1">
+
−
<a href="https://2019.igem.org/Team:SMMU-China">Home</a>
+
−
<div class="index-nav-frame-line-center need-to-be-hidden">
+
−
<div class="index-nav-frame-line-li">
+
−
<a href="https://2019.igem.org/Team:SMMU-China">Home</a>
+
−
</div>
+
−
</div>
+
−
<div class="index-nav-frame-line-focus" tabindex="-1"></div>
+
−
</div>
+
−
<div class="index-nav-frame-line" tabindex="-1">
+
−
PROJECT
+
−
<div class="index-nav-frame-line-center">
+
−
<div class="index-nav-frame-line-li">
+
−
<a href="https://2019.igem.org/Team:SMMU-China/Description">Description</a>
+
−
</div>
+
−
<div class="index-nav-frame-line-li">
+
−
<a href="https://2019.igem.org/Team:SMMU-China/Design">Design</a>
+
−
</div>
+
−
<div class="index-nav-frame-line-li">
+
−
<a href="https://2019.igem.org/Team:SMMU-China/Experiments">Experiments</a>
+
−
</div>
+
−
<div class="index-nav-frame-line-li">
+
−
<a href="https://2019.igem.org/Team:SMMU-China/Notebook">Notebook</a>
+
−
</div>
+
−
<div class="index-nav-frame-line-li">
+
−
<a href="https://2019.igem.org/Team:SMMU-China/Contribution">Contribution</a>
+
−
</div>
+
−
<div class="index-nav-frame-line-li">
+
−
<a href="https://2019.igem.org/Team:SMMU-China/Results">Results</a>
+
−
</div>
+
−
<div class="index-nav-frame-line-li">
+
−
<a href="https://2019.igem.org/Team:SMMU-China/Demonstrate">Demonstrate</a>
+
−
</div>
+
−
<div class="index-nav-frame-line-li">
+
−
<a href="https://2019.igem.org/Team:SMMU-China/Improve">Improve</a>
+
−
</div>
+
−
<div class="index-nav-frame-line-li">
+
−
<a href="https://2019.igem.org/Team:SMMU-China/Attributions">Attributions</a>
+
−
</div>
+
−
</div>
+
−
<div class="index-nav-frame-line-focus" tabindex="-1"></div>
+
−
</div>
+
−
<div class="index-nav-frame-line active" tabindex="-1">
+
−
PARTS
+
−
<div class="index-nav-frame-line-center">
+
−
<div class="index-nav-frame-line-li">
+
−
<a href="https://2019.igem.org/Team:SMMU-China/Parts">Parts Overview</a>
+
−
</div>
+
−
<div class="index-nav-frame-line-li">
+
−
<a href="https://2019.igem.org/Team:SMMU-China/Basic_Part">Basic Parts</a>
+
−
</div>
+
−
<div class="index-nav-frame-line-li">
+
−
<a href="https://2019.igem.org/Team:SMMU-China/Composite_Part">Composite Parts</a>
+
−
</div>
+
−
<div class="index-nav-frame-line-li">
+
−
<a href="https://2019.igem.org/Team:SMMU-China/Part_Collection">Part Collection</a>
+
−
</div>
+
−
</div>
+
−
<div class="index-nav-frame-line-focus" tabindex="-1"></div>
+
−
</div>
+
−
<div class="index-nav-frame-line" tabindex="-1">
+
−
<a href="https://2019.igem.org/Team:SMMU-China/Safety">Safety</a>
+
−
<div class="index-nav-frame-line-center need-to-be-hidden">
+
−
<div class="index-nav-frame-line-li">
+
−
<a href="https://2019.igem.org/Team:SMMU-China/Safety">Safety</a>
+
−
</div>
+
−
</div>
+
−
<div class="index-nav-frame-line-focus" tabindex="-1"></div>
+
−
</div>
+
−
<div class="index-nav-frame-line HP-button" tabindex="-1">
+
−
HUMAN PRACTICES
+
−
<div class="index-nav-frame-line-center">
+
−
<div class="index-nav-frame-line-li">
+
−
<a href="https://2019.igem.org/Team:SMMU-China/Human_Practices">Human Practices</a>
+
−
</div>
+
−
<div class="index-nav-frame-line-li">
+
−
<a href="https://2019.igem.org/Team:SMMU-China/Public_Engagement">Education & Engagement</a>
+
−
</div>
+
−
</div>
+
−
<div class="index-nav-frame-line-focus" tabindex="-1"></div>
+
−
</div>
+
−
<div class="index-nav-frame-line" tabindex="-1">
+
−
AWARDS
+
−
<div class="index-nav-frame-line-center">
+
−
<div class="index-nav-frame-line-li">
+
−
<a href="https://2019.igem.org/Team:SMMU-China/Model">Model</a>
+
−
</div>
+
−
<div class="index-nav-frame-line-li">
+
−
<a href="https://2019.igem.org/Team:SMMU-China/Software">Software</a>
+
−
</div>
+
−
</div>
+
−
<div class="index-nav-frame-line-focus" tabindex="-1"></div>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
+
−
<div class="blank_framework"></div>
+
  
−
<div class="page_banner">
+
/*= effect-3 css =*/
−
<img src="https://static.igem.org/mediawiki/2019/8/82/T--SMMU-China--page_banner_default.jpg" alt="page_banner_default">
+
.effect-3{max-height: 302px; min-height: 302px; overflow: hidden;}
−
</div>
+
.effect-3 h3{padding-top: 7px; line-height: 33px;}
 +
.effect-3 .member-image{border-bottom: 5px solid #e5642b; transition: 0.4s; height: 212px; width: 100%; display: inline-block; float: none; vertical-align: middle;}
 +
.effect-3 .member-info{transition: 0.4s;}
 +
.effect-3 .member-image img{width: 100%; vertical-align: bottom;}
 +
.effect-3 .social-touch{background-color: #e5642b; float: left; left: 0; bottom: 0; overflow: hidden; padding: 5px 0; width: 100%; transition: 0.4s;}
 +
.effect-3:hover .member-image{border-bottom: 0; border-radius: 0 0 50px 50px; height: 81px; display: inline-block; overflow: hidden; width: 109px; transition: 0.4s;}
 +
/*= effect-3 css end =*/
  
−
<div class="page_big_title_box">
+
/*= effect-4 css =*/
−
<div class="page_big_title">Team</div>
+
.effect-4{max-height: 289px; min-height: 289px; overflow: hidden;}
−
<div class="page_big_subtitle">This is a descriptive paragraph.</div>
+
.effect-4 h3{line-height: 35px;}
−
</div>
+
.effect-4 .member-image{position: absolute; width: 100%; transition: 0.4s;}
 +
.effect-4 .member-image img{width: 100%;}
 +
.effect-4 .more-info{height: 0; transition: 0.4s; overflow: hidden; z-index: 9; position: relative; background-color: #fff;}
 +
.effect-4:hover .more-info{height: 208px; transition: 0.4s;}
 +
/*= effect-4 css end =*/
  
−
<div class="medium_framework">
+
/*= effect-5 css =*/
−
<div class="container">
+
.effect-5{max-height: 289px; min-height: 289px; overflow: hidden;}
−
    <!-- Team members structure start -->
+
.effect-5 .member-info {background-color: #fff; position: absolute; width: 100%; top: 0; left: 0; height: 82px; transition: 0.3s; z-index: 2;}
−
    <div class="team-members row">
+
.effect-5 .member-image{margin-top: 82px; float: left; width: 100%; position: relative; transition: 0.3s; z-index: 4;}
−
        <!-- effect-1 html -->
+
.effect-5 .member-image img{width: 100%;}
−
        <div class="single-member effect-1">
+
.effect-5 .member-info:before{border-left: 140px solid transparent; border-right: 140px solid transparent; border-top: 15px solid #fff; bottom: -15px; content: ""; left: 0; position: absolute; z-index: 9;}
−
            <div class="member-image">
+
.effect-5:hover .member-info{height: 215px; transition: 0.3s; z-index: 6;}
−
                <img src="images/member_140x145.jpg" alt="Member">
+
.effect-5:hover .member-image{margin-top: 200px; transition: 0.3s;}
−
                </div>
+
/*= effect-5 css end =*/
−
                <div class="member-info">
+
−
                <h3>Sophia</h3>
+
−
                    <h5>ShowGilr</h5>
+
−
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+
−
                    <div class="social-touch">
+
−
                    <a class="fb-touch" href="#"></a>
+
−
                        <a class="tweet-touch" href="#"></a>
+
−
                        <a class="linkedin-touch" href="#"></a>
+
−
                    </div>
+
−
                </div>
+
−
            </div>
+
−
            <!-- effect-1 html end -->
+
−
           
+
−
            <!-- effect-2 html -->
+
−
            <div class="single-member effect-2">
+
−
            <div class="member-image">
+
−
                <img src="images/member_270x210.jpg" alt="Member">
+
−
                </div>
+
−
                <div class="member-info">
+
−
                <h3>Sophia</h3>
+
−
                    <h5>ShowGilr</h5>
+
−
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+
−
                    <div class="social-touch">
+
−
                    <a class="fb-touch" href="#"></a>
+
−
                        <a class="tweet-touch" href="#"></a>
+
−
                        <a class="linkedin-touch" href="#"></a>
+
−
                    </div>
+
−
                </div>
+
−
            </div>
+
−
            <!-- effect-2 html end -->
+
−
           
+
−
            <!-- effect-3 html -->
+
−
            <div class="single-member effect-3">
+
−
            <div class="member-image">
+
−
                <img src="images/member_270x210.jpg" alt="Member">
+
−
                </div>
+
−
                <div class="member-info">
+
−
                <h3>Sophia</h3>
+
−
                    <h5>ShowGilr</h5>
+
−
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+
−
                    <div class="social-touch">
+
−
                    <a class="fb-touch" href="#"></a>
+
−
                        <a class="tweet-touch" href="#"></a>
+
−
                        <a class="linkedin-touch" href="#"></a>
+
−
                    </div>
+
−
                </div>
+
−
            </div>
+
−
            <!-- effect-3 html end -->
+
−
           
+
−
            <!-- effect-4 html -->
+
−
            <div class="single-member effect-4">
+
−
                <div class="member-info">
+
−
                <h3>Sophia</h3>
+
−
                    <h5>ShowGilr</h5>
+
−
                </div>
+
−
                <div class="member-image">
+
−
                <img src="images/member_270x210.jpg" alt="Member">
+
−
                </div>
+
−
                <div class="more-info">
+
−
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt.</p>
+
−
                    <div class="social-touch icon-colored">
+
−
                    <a class="fb-touch" href="#"></a>
+
−
                        <a class="tweet-touch" href="#"></a>
+
−
                        <a class="linkedin-touch" href="#"></a>
+
−
                    </div>
+
−
                </div>
+
−
            </div>
+
−
            <!-- effect-4 html end -->
+
−
           
+
−
            <!-- effect-5 html -->
+
−
            <div class="single-member effect-5">
+
−
            <div class="member-image">
+
−
                <img src="images/member_270x210.jpg" alt="Member">
+
−
                </div>
+
−
                <div class="member-info">
+
−
                <h3>Sophia</h3>
+
−
                    <h5>ShowGilr</h5>
+
−
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+
−
                    <div class="social-touch icon-colored">
+
−
                    <a class="fb-touch" href="#"></a>
+
−
                        <a class="tweet-touch" href="#"></a>
+
−
                        <a class="linkedin-touch" href="#"></a>
+
−
                    </div>
+
−
                </div>
+
−
            </div>
+
−
            <!-- effect-5 html end -->
+
−
           
+
−
            <!-- effect-6 html -->
+
−
            <div class="single-member effect-6">
+
−
            <div class="member-image">
+
−
                <img src="images/member_270x210.jpg" alt="Member">
+
−
                </div>
+
−
                <div class="member-info">
+
−
                <h3>Sophia</h3>
+
−
                    <h5>ShowGilr</h5>
+
−
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+
−
                    <div class="social-touch icon-colored">
+
−
                    <a class="fb-touch" href="#"></a>
+
−
                        <a class="tweet-touch" href="#"></a>
+
−
                        <a class="linkedin-touch" href="#"></a>
+
−
                    </div>
+
−
                </div>
+
−
                <div class="border-green"></div>
+
−
            </div>
+
−
            <!-- effect-6 html end -->
+
−
           
+
−
            <!-- effect-7 html -->
+
−
            <div class="single-member effect-7">
+
−
                <div class="member-info">
+
−
                <h3>Sophia</h3>
+
−
                    <h5>ShowGilr</h5>
+
−
                </div>
+
−
                <div class="member-image">
+
−
                <img src="images/member_270x210.jpg" alt="Member">
+
−
                </div>
+
−
                <div class="more-info">
+
−
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt.</p>
+
−
                    <div class="social-touch icon-colored">
+
−
                    <a class="fb-touch" href="#"></a>
+
−
                        <a class="tweet-touch" href="#"></a>
+
−
                        <a class="linkedin-touch" href="#"></a>
+
−
                    </div>
+
−
                </div>
+
−
            </div>
+
−
            <!-- effect-7 html end -->
+
−
           
+
−
            <!-- effect-8 html -->
+
−
            <div class="single-member effect-8">
+
−
                <div class="member-info">
+
−
                <h3>Sophia</h3>
+
−
                    <h5>ShowGilr</h5>
+
−
                </div>
+
−
                <div class="member-image">
+
−
                <img src="images/member_270x210.jpg" alt="Member">
+
−
                </div>
+
−
                <div class="more-info">
+
−
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, Lorem ipsum dolor sit amet.</p>
+
−
                    <div class="social-touch icon-colored">
+
−
                    <a class="fb-touch" href="#"></a>
+
−
                        <a class="tweet-touch" href="#"></a>
+
−
                        <a class="linkedin-touch" href="#"></a>
+
−
                    </div>
+
−
                </div>
+
−
            </div>
+
−
            <!-- effect-8 html end -->
+
−
           
+
−
            <!-- effect-9 html -->
+
−
            <div class="single-member effect-9">
+
−
                <div class="member-info">
+
−
                <h3>Sophia</h3>
+
−
                    <h5>ShowGilr</h5>
+
−
                </div>
+
−
                <div class="member-image">
+
−
                <img src="images/member_270x210.jpg" alt="Member">
+
−
                </div>
+
−
                <div class="more-info">
+
−
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt.</p>
+
−
                    <div class="social-touch icon-colored">
+
−
                    <a class="fb-touch" href="#"></a>
+
−
                        <a class="tweet-touch" href="#"></a>
+
−
                        <a class="linkedin-touch" href="#"></a>
+
−
                    </div>
+
−
                </div>
+
−
            </div>
+
−
            <!-- effect-9 html end -->
+
−
        </div>
+
−
    <!-- Team members structure start -->
+
−
    </div>
+
−
</div>
+
  
−
<div class="footer">
+
/*= effect-6 css =*/
−
<div class="footer_left">
+
.effect-6{max-height: 289px; min-height: 289px; overflow: hidden;}
−
<div class="footer_title">Contact Us</div>
+
.effect-6 .member-info {background-color: #fff; position: absolute; width: 100%; top: 0; left: 0; height: 82px; transition: 0.3s; z-index: 2;}
−
<div class="footer_text">
+
.effect-6 .member-image{margin-top: 82px; float: left; width: 100%; position: relative; transition: 0.3s; z-index: 4; overflow: hidden;}
−
E-Mail: igem-smmu@smmu.edu.cn<br>
+
.effect-6 .member-image img{width: 100%;}
−
Phone: +86 021-81870925
+
.effect-6:hover .member-info{height: 215px; transition: 0.3s; z-index: 6; border-radius: 0 0 50% 50%; overflow: hidden;}
−
</div>
+
.effect-6:hover .member-image{margin-top: 100px; transition: 0.3s; border-radius: 0;}
−
</div>
+
/*= effect-6 css end =*/
−
<div class="footer_right">
+
−
<div class="footer_title"></div>
+
−
<div class="footer_text">
+
−
© 2019. SMMU. All rights reserved.
+
−
</div>
+
−
</div>
+
−
</div>
+
  
−
</div>
+
/*= effect-7 css =*/
 +
.effect-7{max-height: 289px; min-height: 289px; overflow: hidden;}
 +
.effect-7 h3{line-height: 35px;}
 +
.effect-7 .member-image{position: absolute; bottom: 0; width: 100%; transition: 0.4s; z-index: 1;}
 +
.effect-7 .member-image img{width: 100%; transition: 0.4s; opacity: 1; height: 100%;}
 +
.effect-7 .more-info{height: 208px; transition: 0.4s; overflow: hidden; position: relative; background-color: #fff;}
 +
.effect-7:hover .member-image{bottom: 40%;}
 +
.effect-7:hover .member-image img{width: 0; height: 0; transition: 0.4s; opacity: 0;}
 +
/*= effect-7 css end =*/
  
−
<script src="https://2019.igem.org/Template:SMMU-China/JS_material_cards_min?action=raw&ctype=text/javascript"></script>
+
/*= effect-8 css =*/
−
<script src="https://2019.igem.org/Template:SMMU-China/JS_team_jquery_min?action=raw&ctype=text/javascript" type="text/javascript"></script>
+
.effect-8{max-height: 289px; min-height: 289px; overflow: hidden;  perspective: 800px;}
−
<script>
+
.effect-8 h3{line-height: 35px;}
−
$(function() {
+
.effect-8 .member-image{position: absolute; bottom: 0; width: 100%; transition: 0.4s; z-index: 1;}
−
$('.material-card').materialCard({
+
.effect-8 .member-image img{width: 100%; transition: 0.4s; height: 100%;}
−
icon_close: 'fa-chevron-left',
+
.effect-8 .more-info{height: 208px; transition: 0.4s; overflow: hidden; position: relative; background-color: #fff;}
−
icon_open: 'fa-thumbs-o-up',
+
.effect-8:hover .member-image{transform: rotateX(82deg); transform-origin: center bottom 0; transition: 0.4s;}
−
icon_spin: 'fa-spin-fast',
+
/*= effect-8 css end =*/
−
card_activator: 'click'
+
−
});
+
−
//        $('.active-with-click .material-card').materialCard();
+
−
window.setTimeout(function() {
+
−
$('.material-card:eq(1)').materialCard('open');
+
−
}, 2000);
+
−
$('.material-card').on('shown.material-card show.material-card hide.material-card hidden.material-card', function (event) {
+
−
console.log(event.type, event.namespace, $(this));
+
−
});
+
−
});
+
−
</script>
+
  
−
</html>
+
/*= effect-9 css =*/
 +
.effect-9{max-height: 289px; min-height: 289px; overflow: hidden;  perspective: 800px;}
 +
.effect-9 h3{line-height: 35px;}
 +
.effect-9 .member-image{position: absolute; bottom: 0; width: 100%; transition: 0.4s; z-index: 1;}
 +
.effect-9 .member-image img{width: 100%; transition: 0.4s; height: 100%;}
 +
.effect-9 .more-info{height: 208px; transition: 0.4s; overflow: hidden; position: relative; background-color: #fff;}
 +
.effect-9:hover .member-image{transform: translateY(100%); transition: 0.4s;}
 +
/*= effect-9 css end =*/
 +
 
 +
/*= Media Query
 +
=============== */
 +
@media only screen and (max-width: 980px){
 +
.row{width: 100%; margin: 110px 0;}
 +
.team-members{text-align: center;}
 +
.single-member{float: none; display: inline-block; vertical-align: bottom;}
 +
}
 +
/*= Media Query End
 +
=================== */

Revision as of 05:02, 9 September 2019

.big_framework{background-color: #1F1F1F; }

  • {margin: 0; padding: 0; box-sizing: border-box;}

.container{font-size: 16px; margin: 0 auto; max-width: 1000px;} .row{width: 103%; float: left; margin: 110px -1.5%;}

/*= common css to all effects =*/ .single-member{width: 280px; float: left; margin: 30px 2.5%; background-color: #fff; text-align: center; position: relative;} .member-image img{max-width: 100%; vertical-align: middle;} h3 {font-size: 24px; font-weight: normal; margin: 10px 0 0; text-transform: uppercase;} h5 {font-size: 16px; font-weight: 300; margin: 0 0 15px; line-height: 22px;} p {font-size: 14px; font-weight: 300; line-height: 22px; padding: 0 30px; margin-bottom: 10px;} .social-touch a{display: inline-block; width: 27px; height: 26px; vertical-align: middle; margin: 0 2px; background-image: url(../images/social-icons.png); background-repeat: no-repeat; opacity: 0.7; transition: 0.3s;} .social-touch a:hover{opacity: 1; transition: 0.3s;} .fb-touch{background-position: 0 0;} .tweet-touch{background-position: -35px 0;} .linkedin-touch{background-position: -71px 0;} .icon-colored .fb-touch{background-position: 0 -27px;} .icon-colored .tweet-touch{background-position: -35px -27px;} .icon-colored .linkedin-touch{background-position: -71px -27px;} /*= common css to all effects end =*/

/*= effect-1 css =*/ .effect-1{border-radius: 5px 5px 0 0; padding-bottom: 40px;} .effect-1 .member-image {border: 2px solid #fff; border-radius: 60px 0; display: inline-block; margin-top: -72px; overflow: hidden; transition: 0.3s;} .effect-1 .social-touch{background-color: #e13157; position: absolute; left: 0; bottom: 0; height: 5px; overflow: hidden; padding: 5px 0 0; width: 100%; transition: 0.3s;} .effect-1 .member-image img{transition: 0.3s; border-radius: 60px 0;} .effect-1:hover .member-image{border-color: #e13157; transition: 0.3s; border-radius: 50%;} .effect-1:hover .social-touch{padding: 6px 0; height: 38px; transition: 0.3s;} /*= effect-1 css end =*/

/*= effect-2 css =*/ .effect-2{max-height: 302px; min-height: 302px; overflow: hidden;} .effect-2 h3{padding-top: 7px; line-height: 33px;} .effect-2 .member-image{border-bottom: 5px solid #1fb554; height: 212px; overflow: hidden; width: 100%; transition: 0.4s; display: inline-block; float: none; vertical-align: middle;} .effect-2 .member-info{transition: 0.4s;} .effect-2 .member-image img{width: 100%; vertical-align: bottom;} .effect-2 .social-touch{background-color: #1fb554; float: left; left: 0; bottom: 0; overflow: hidden; padding: 5px 0; width: 100%; transition: 0.4s;} .effect-2:hover .member-image{height: 81px; transition: 0.4s;} /*= effect-2 css end =*/

/*= effect-3 css =*/ .effect-3{max-height: 302px; min-height: 302px; overflow: hidden;} .effect-3 h3{padding-top: 7px; line-height: 33px;} .effect-3 .member-image{border-bottom: 5px solid #e5642b; transition: 0.4s; height: 212px; width: 100%; display: inline-block; float: none; vertical-align: middle;} .effect-3 .member-info{transition: 0.4s;} .effect-3 .member-image img{width: 100%; vertical-align: bottom;} .effect-3 .social-touch{background-color: #e5642b; float: left; left: 0; bottom: 0; overflow: hidden; padding: 5px 0; width: 100%; transition: 0.4s;} .effect-3:hover .member-image{border-bottom: 0; border-radius: 0 0 50px 50px; height: 81px; display: inline-block; overflow: hidden; width: 109px; transition: 0.4s;} /*= effect-3 css end =*/

/*= effect-4 css =*/ .effect-4{max-height: 289px; min-height: 289px; overflow: hidden;} .effect-4 h3{line-height: 35px;} .effect-4 .member-image{position: absolute; width: 100%; transition: 0.4s;} .effect-4 .member-image img{width: 100%;} .effect-4 .more-info{height: 0; transition: 0.4s; overflow: hidden; z-index: 9; position: relative; background-color: #fff;} .effect-4:hover .more-info{height: 208px; transition: 0.4s;} /*= effect-4 css end =*/

/*= effect-5 css =*/ .effect-5{max-height: 289px; min-height: 289px; overflow: hidden;} .effect-5 .member-info {background-color: #fff; position: absolute; width: 100%; top: 0; left: 0; height: 82px; transition: 0.3s; z-index: 2;} .effect-5 .member-image{margin-top: 82px; float: left; width: 100%; position: relative; transition: 0.3s; z-index: 4;} .effect-5 .member-image img{width: 100%;} .effect-5 .member-info:before{border-left: 140px solid transparent; border-right: 140px solid transparent; border-top: 15px solid #fff; bottom: -15px; content: ""; left: 0; position: absolute; z-index: 9;} .effect-5:hover .member-info{height: 215px; transition: 0.3s; z-index: 6;} .effect-5:hover .member-image{margin-top: 200px; transition: 0.3s;} /*= effect-5 css end =*/

/*= effect-6 css =*/ .effect-6{max-height: 289px; min-height: 289px; overflow: hidden;} .effect-6 .member-info {background-color: #fff; position: absolute; width: 100%; top: 0; left: 0; height: 82px; transition: 0.3s; z-index: 2;} .effect-6 .member-image{margin-top: 82px; float: left; width: 100%; position: relative; transition: 0.3s; z-index: 4; overflow: hidden;} .effect-6 .member-image img{width: 100%;} .effect-6:hover .member-info{height: 215px; transition: 0.3s; z-index: 6; border-radius: 0 0 50% 50%; overflow: hidden;} .effect-6:hover .member-image{margin-top: 100px; transition: 0.3s; border-radius: 0;} /*= effect-6 css end =*/

/*= effect-7 css =*/ .effect-7{max-height: 289px; min-height: 289px; overflow: hidden;} .effect-7 h3{line-height: 35px;} .effect-7 .member-image{position: absolute; bottom: 0; width: 100%; transition: 0.4s; z-index: 1;} .effect-7 .member-image img{width: 100%; transition: 0.4s; opacity: 1; height: 100%;} .effect-7 .more-info{height: 208px; transition: 0.4s; overflow: hidden; position: relative; background-color: #fff;} .effect-7:hover .member-image{bottom: 40%;} .effect-7:hover .member-image img{width: 0; height: 0; transition: 0.4s; opacity: 0;} /*= effect-7 css end =*/

/*= effect-8 css =*/ .effect-8{max-height: 289px; min-height: 289px; overflow: hidden; perspective: 800px;} .effect-8 h3{line-height: 35px;} .effect-8 .member-image{position: absolute; bottom: 0; width: 100%; transition: 0.4s; z-index: 1;} .effect-8 .member-image img{width: 100%; transition: 0.4s; height: 100%;} .effect-8 .more-info{height: 208px; transition: 0.4s; overflow: hidden; position: relative; background-color: #fff;} .effect-8:hover .member-image{transform: rotateX(82deg); transform-origin: center bottom 0; transition: 0.4s;} /*= effect-8 css end =*/

/*= effect-9 css =*/ .effect-9{max-height: 289px; min-height: 289px; overflow: hidden; perspective: 800px;} .effect-9 h3{line-height: 35px;} .effect-9 .member-image{position: absolute; bottom: 0; width: 100%; transition: 0.4s; z-index: 1;} .effect-9 .member-image img{width: 100%; transition: 0.4s; height: 100%;} .effect-9 .more-info{height: 208px; transition: 0.4s; overflow: hidden; position: relative; background-color: #fff;} .effect-9:hover .member-image{transform: translateY(100%); transition: 0.4s;} /*= effect-9 css end =*/

/*= Media Query =============== */ @media only screen and (max-width: 980px){ .row{width: 100%; margin: 110px 0;} .team-members{text-align: center;} .single-member{float: none; display: inline-block; vertical-align: bottom;} } /*= Media Query End =================== */