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

Line 1: Line 1:
−
.big_framework{background-color: #1F1F1F; }
+
{{SMMU-China}}
−
*{margin: 0; padding: 0; box-sizing: border-box;}
+
<html>
−
.container{font-size: 16px; margin: 0 auto; max-width: 1000px;}
+
−
.row{width: 103%; float: left; margin: 110px -1.5%;}
+
  
−
/*= common css to all effects =*/
+
<link rel="stylesheet" href="https://2019.igem.org/wiki/index.php?title=Template:SMMU-China/CSS_main&action=raw&ctype=text/css" />
−
.single-member{width: 280px; float: left; margin: 30px 2.5%; background-color: #fff; text-align: center; position: relative;}
+
<!--<link rel="stylesheet" href="main.css" />-->
−
.member-image img{max-width: 100%; vertical-align: middle;}
+
<link rel="stylesheet" href="https://2019.igem.org/wiki/index.php?title=Template:SMMU-China/CSS_team&action=raw&ctype=text/css" />
−
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 =*/
+
<style type="text/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;}
+
</style>
−
.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 =*/
+
<div class="big_framework">
−
.effect-2{max-height: 302px; min-height: 302px; overflow: hidden;}
+
<div class="index-nav">
−
.effect-2 h3{padding-top: 7px; line-height: 33px;}
+
<div class="index-nav-frame clearfix">
−
.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="nav-line">
−
.effect-2 .member-info{transition: 0.4s;}
+
<div class="index-nav-frame-logo-mobile">
−
.effect-2 .member-image img{width: 100%; vertical-align: bottom;}
+
<img src="https://static.igem.org/mediawiki/2019/a/a5/T--SMMU-China--xiaotian_logo.png" alt="XiaoTian">
−
.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>
−
/*= effect-2 css end =*/
+
<div class="nav-small" tabindex="-1">
 +
<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>
  
−
/*= effect-3 css =*/
+
<div class="page_banner">
−
.effect-3{max-height: 302px; min-height: 302px; overflow: hidden;}
+
<img src="https://static.igem.org/mediawiki/2019/8/82/T--SMMU-China--page_banner_default.jpg" alt="page_banner_default">
−
.effect-3 h3{padding-top: 7px; line-height: 33px;}
+
</div>
−
.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 =*/
+
<div class="page_big_title_box">
−
.effect-4{max-height: 289px; min-height: 289px; overflow: hidden;}
+
<div class="page_big_title">Team</div>
−
.effect-4 h3{line-height: 35px;}
+
<div class="page_big_subtitle">This is a descriptive paragraph.</div>
−
.effect-4 .member-image{position: absolute; width: 100%; transition: 0.4s;}
+
</div>
−
.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 =*/
+
<div class="medium_framework">
−
.effect-5{max-height: 289px; min-height: 289px; overflow: hidden;}
+
<div class="container">
−
.effect-5 .member-info {background-color: #fff; position: absolute; width: 100%; top: 0; left: 0; height: 82px; transition: 0.3s; z-index: 2;}
+
    <!-- Team members structure start -->
−
.effect-5 .member-image{margin-top: 82px; float: left; width: 100%; position: relative; transition: 0.3s; z-index: 4;}
+
    <div class="team-members row">
−
.effect-5 .member-image img{width: 100%;}
+
        <!-- effect-1 html -->
−
.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="single-member effect-1">
−
.effect-5:hover .member-info{height: 215px; transition: 0.3s; z-index: 6;}
+
            <div class="member-image">
−
.effect-5:hover .member-image{margin-top: 200px; transition: 0.3s;}
+
                <img src="images/member_140x145.jpg" alt="Member">
−
/*= effect-5 css end =*/
+
                </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-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>
  
−
/*= effect-6 css =*/
+
<div class="footer">
−
.effect-6{max-height: 289px; min-height: 289px; overflow: hidden;}
+
<div class="footer_left">
−
.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_title">Contact Us</div>
−
.effect-6 .member-image{margin-top: 82px; float: left; width: 100%; position: relative; transition: 0.3s; z-index: 4; overflow: hidden;}
+
<div class="footer_text">
−
.effect-6 .member-image img{width: 100%;}
+
E-Mail: igem-smmu@smmu.edu.cn<br>
−
.effect-6:hover .member-info{height: 215px; transition: 0.3s; z-index: 6; border-radius: 0 0 50% 50%; overflow: hidden;}
+
Phone: +86 021-81870925
−
.effect-6:hover .member-image{margin-top: 100px; transition: 0.3s; border-radius: 0;}
+
</div>
−
/*= effect-6 css end =*/
+
</div>
 +
<div class="footer_right">
 +
<div class="footer_title"></div>
 +
<div class="footer_text">
 +
© 2019. SMMU. All rights reserved.
 +
</div>
 +
</div>
 +
</div>
  
−
/*= effect-7 css =*/
+
</div>
−
.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 =*/
+
<script src="https://2019.igem.org/Template:SMMU-China/JS_material_cards_min?action=raw&ctype=text/javascript"></script>
−
.effect-8{max-height: 289px; min-height: 289px; overflow: hidden;  perspective: 800px;}
+
<script src="https://2019.igem.org/Template:SMMU-China/JS_team_jquery_min?action=raw&ctype=text/javascript" type="text/javascript"></script>
−
.effect-8 h3{line-height: 35px;}
+
<script>
−
.effect-8 .member-image{position: absolute; bottom: 0; width: 100%; transition: 0.4s; z-index: 1;}
+
$(function() {
−
.effect-8 .member-image img{width: 100%; transition: 0.4s; height: 100%;}
+
$('.material-card').materialCard({
−
.effect-8 .more-info{height: 208px; transition: 0.4s; overflow: hidden; position: relative; background-color: #fff;}
+
icon_close: 'fa-chevron-left',
−
.effect-8:hover .member-image{transform: rotateX(82deg); transform-origin: center bottom 0; transition: 0.4s;}
+
icon_open: 'fa-thumbs-o-up',
−
/*= effect-8 css end =*/
+
icon_spin: 'fa-spin-fast',
 +
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>
  
−
/*= effect-9 css =*/
+
</html>
−
.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

XiaoTian
Home
Home
PROJECT
Description
Design
Experiments
Notebook
Contribution
Results
Demonstrate
Improve
Attributions
PARTS
Parts Overview
Basic Parts
Composite Parts
Part Collection
Safety
Safety
HUMAN PRACTICES
Human Practices
Education & Engagement
AWARDS
Model
Software
page_banner_default
Team
This is a descriptive paragraph.
Member

Sophia

ShowGilr

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Member

Sophia

ShowGilr

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Member

Sophia

ShowGilr

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Sophia

ShowGilr
Member

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.

Member

Sophia

ShowGilr

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Member

Sophia

ShowGilr

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Sophia

ShowGilr
Member

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.

Sophia

ShowGilr
Member

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, Lorem ipsum dolor sit amet.

Sophia

ShowGilr
Member

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.

Contact Us
E-Mail: igem-smmu@smmu.edu.cn
Phone: +86 021-81870925
© 2019. SMMU. All rights reserved.