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

Line 5: Line 5:
 
<!--<link rel="stylesheet" href="main.css" />-->
 
<!--<link rel="stylesheet" href="main.css" />-->
 
<link rel="stylesheet" href="https://2019.igem.org/wiki/index.php?title=Template:SMMU-China/CSS_team&action=raw&ctype=text/css" />
 
<link rel="stylesheet" href="https://2019.igem.org/wiki/index.php?title=Template:SMMU-China/CSS_team&action=raw&ctype=text/css" />
−
<link rel="stylesheet" href="https://2019.igem.org/wiki/index.php?title=Template:SMMU-China/CSS_teambootstrap_min&action=raw&ctype=text/css" />
 
−
<link rel="stylesheet" href="https://2019.igem.org/wiki/index.php?title=Template:SMMU-China/CSS_font-awesome_min&action=raw&ctype=text/css" />
 
  
 
<style type="text/css">
 
<style type="text/css">
Line 137: Line 135:
  
 
<div class="medium_framework">
 
<div class="medium_framework">
−
<section class="container">
+
<div class="container">
−
<div class="row active-with-click">
+
    <!-- Team members structure start -->
−
<div class="col-md-4 col-sm-6 col-xs-12">
+
    <div class="team-members row">
−
<article class="material-card Red">
+
        <!-- effect-1 html -->
−
<h2>
+
        <div class="single-member effect-1">
−
<span>Christopher Walken</span>
+
            <div class="member-image">
−
<strong>
+
                <img src="images/member_140x145.jpg" alt="Member">
−
<i class="fa fa-fw fa-star"></i>
+
                </div>
−
The Deer Hunter
+
                <div class="member-info">
−
</strong>
+
                <h3>Sophia</h3>
−
</h2>
+
                    <h5>ShowGilr</h5>
−
<div class="mc-content">
+
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
−
<div class="img-container">
+
                    <div class="social-touch">
−
<img class="img-responsive" src="img/thumb-christopher-walken.jpg">
+
                    <a class="fb-touch" href="#"></a>
−
</div>
+
                        <a class="tweet-touch" href="#"></a>
−
<div class="mc-description">
+
                        <a class="linkedin-touch" href="#"></a>
−
He has appeared in more than 100 films and television shows, including The Deer Hunter, Annie Hall, The Prophecy trilogy, The Dogs of War ...
+
                    </div>
−
</div>
+
                </div>
−
</div>
+
            </div>
−
<a class="mc-btn-action">
+
            <!-- effect-1 html end -->
−
<i class="fa fa-bars"></i>
+
           
−
</a>
+
            <!-- effect-2 html -->
−
<div class="mc-footer">
+
            <div class="single-member effect-2">
−
<h4>
+
            <div class="member-image">
−
Social
+
                <img src="images/member_270x210.jpg" alt="Member">
−
</h4>
+
                </div>
−
<a class="fa fa-fw fa-facebook"></a>
+
                <div class="member-info">
−
<a class="fa fa-fw fa-twitter"></a>
+
                <h3>Sophia</h3>
−
<a class="fa fa-fw fa-linkedin"></a>
+
                    <h5>ShowGilr</h5>
−
<a class="fa fa-fw fa-google-plus"></a>
+
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
−
</div>
+
                    <div class="social-touch">
−
</article>
+
                    <a class="fb-touch" href="#"></a>
−
</div>
+
                        <a class="tweet-touch" href="#"></a>
−
<div class="col-md-4 col-sm-6 col-xs-12">
+
                        <a class="linkedin-touch" href="#"></a>
−
<article class="material-card Pink">
+
                    </div>
−
<h2>
+
                </div>
−
<span>Sean Penn</span>
+
            </div>
−
<strong>
+
            <!-- effect-2 html end -->
−
<i class="fa fa-fw fa-star"></i>
+
           
−
Mystic River
+
            <!-- effect-3 html -->
−
</strong>
+
            <div class="single-member effect-3">
−
</h2>
+
            <div class="member-image">
−
<div class="mc-content">
+
                <img src="images/member_270x210.jpg" alt="Member">
−
<div class="img-container">
+
                </div>
−
<img class="img-responsive" src="img/thumb-sean-penn.jpg">
+
                <div class="member-info">
−
</div>
+
                <h3>Sophia</h3>
−
<div class="mc-description">
+
                    <h5>ShowGilr</h5>
−
He has won two Academy Awards, for his roles in the mystery drama Mystic River (2003) and the biopic Milk (2008). Penn began his acting career in television with a brief appearance in a 1974 episode of Little House on the Prairie ...
+
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
−
</div>
+
                    <div class="social-touch">
−
</div>
+
                    <a class="fb-touch" href="#"></a>
−
<a class="mc-btn-action">
+
                        <a class="tweet-touch" href="#"></a>
−
<i class="fa fa-bars"></i>
+
                        <a class="linkedin-touch" href="#"></a>
−
</a>
+
                    </div>
−
<div class="mc-footer">
+
                </div>
−
<h4>
+
            </div>
−
Social
+
            <!-- effect-3 html end -->
−
</h4>
+
           
−
<a class="fa fa-fw fa-facebook"></a>
+
            <!-- effect-4 html -->
−
<a class="fa fa-fw fa-twitter"></a>
+
            <div class="single-member effect-4">
−
<a class="fa fa-fw fa-linkedin"></a>
+
                <div class="member-info">
−
<a class="fa fa-fw fa-google-plus"></a>
+
                <h3>Sophia</h3>
−
</div>
+
                    <h5>ShowGilr</h5>
−
</article>
+
                </div>
−
</div>
+
                <div class="member-image">
−
<div class="col-md-4 col-sm-6 col-xs-12">
+
                <img src="images/member_270x210.jpg" alt="Member">
−
<article class="material-card Purple">
+
                </div>
−
<h2>
+
                <div class="more-info">
−
<span>Clint Eastwood</span>
+
                <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>
−
<strong>
+
                    <div class="social-touch icon-colored">
−
<i class="fa fa-fw fa-star"></i>
+
                    <a class="fb-touch" href="#"></a>
−
Million Dollar Baby
+
                        <a class="tweet-touch" href="#"></a>
−
</strong>
+
                        <a class="linkedin-touch" href="#"></a>
−
</h2>
+
                    </div>
−
<div class="mc-content">
+
                </div>
−
<div class="img-container">
+
            </div>
−
<img class="img-responsive" src="img/thumb-clint-eastwood.jpg">
+
            <!-- effect-4 html end -->
−
</div>
+
           
−
<div class="mc-description">
+
            <!-- effect-5 html -->
−
He rose to international fame with his role as the Man with No Name in Sergio Leone's Dollars trilogy of spaghetti Westerns during the 1960s ...
+
            <div class="single-member effect-5">
−
</div>
+
            <div class="member-image">
−
</div>
+
                <img src="images/member_270x210.jpg" alt="Member">
−
<a class="mc-btn-action">
+
                </div>
−
<i class="fa fa-bars"></i>
+
                <div class="member-info">
−
</a>
+
                <h3>Sophia</h3>
−
<div class="mc-footer">
+
                    <h5>ShowGilr</h5>
−
<h4>
+
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
−
Social
+
                    <div class="social-touch icon-colored">
−
</h4>
+
                    <a class="fb-touch" href="#"></a>
−
<a class="fa fa-fw fa-facebook"></a>
+
                        <a class="tweet-touch" href="#"></a>
−
<a class="fa fa-fw fa-twitter"></a>
+
                        <a class="linkedin-touch" href="#"></a>
−
<a class="fa fa-fw fa-linkedin"></a>
+
                    </div>
−
<a class="fa fa-fw fa-google-plus"></a>
+
                </div>
−
</div>
+
            </div>
−
</article>
+
            <!-- effect-5 html end -->
−
</div>
+
           
−
<!--</div>-->
+
            <!-- effect-6 html -->
−
<!--<div class="row active-with-hover">-->
+
            <div class="single-member effect-6">
−
<div class="col-md-4 col-sm-6 col-xs-12">
+
            <div class="member-image">
−
<article class="material-card Deep-Purple">
+
                <img src="images/member_270x210.jpg" alt="Member">
−
<h2>
+
                </div>
−
<span>Dustin Hoffman</span>
+
                <div class="member-info">
−
<strong>
+
                <h3>Sophia</h3>
−
<i class="fa fa-fw fa-star"></i>
+
                    <h5>ShowGilr</h5>
−
Kramer vs. Kramer
+
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
−
</strong>
+
                    <div class="social-touch icon-colored">
−
</h2>
+
                    <a class="fb-touch" href="#"></a>
−
<div class="mc-content">
+
                        <a class="tweet-touch" href="#"></a>
−
<div class="img-container">
+
                        <a class="linkedin-touch" href="#"></a>
−
<img class="img-responsive" src="img/thumb-dustin-hoffman.jpg">
+
                    </div>
−
</div>
+
                </div>
−
<div class="mc-description">
+
                <div class="border-green"></div>
−
He has been known for his versatile portrayals of antiheroes and vulnerable characters.[3] He won the Academy Award for Kramer vs. Kramer in 1979 ...
+
            </div>
−
</div>
+
            <!-- effect-6 html end -->
−
</div>
+
           
−
<a class="mc-btn-action">
+
            <!-- effect-7 html -->
−
<i class="fa fa-bars"></i>
+
            <div class="single-member effect-7">
−
</a>
+
                <div class="member-info">
−
<div class="mc-footer">
+
                <h3>Sophia</h3>
−
<h4>
+
                    <h5>ShowGilr</h5>
−
Social
+
                </div>
−
</h4>
+
                <div class="member-image">
−
<a class="fa fa-fw fa-facebook"></a>
+
                <img src="images/member_270x210.jpg" alt="Member">
−
<a class="fa fa-fw fa-twitter"></a>
+
                </div>
−
<a class="fa fa-fw fa-linkedin"></a>
+
                <div class="more-info">
−
<a class="fa fa-fw fa-google-plus"></a>
+
                <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>
+
                    <div class="social-touch icon-colored">
−
</article>
+
                    <a class="fb-touch" href="#"></a>
−
</div>
+
                        <a class="tweet-touch" href="#"></a>
−
<div class="col-md-4 col-sm-6 col-xs-12">
+
                        <a class="linkedin-touch" href="#"></a>
−
<article class="material-card Indigo">
+
                    </div>
−
<h2>
+
                </div>
−
<span>Edward Norton</span>
+
            </div>
−
<strong>
+
            <!-- effect-7 html end -->
−
<i class="fa fa-fw fa-star"></i>
+
           
−
American History X
+
            <!-- effect-8 html -->
−
</strong>
+
            <div class="single-member effect-8">
−
</h2>
+
                <div class="member-info">
−
<div class="mc-content">
+
                <h3>Sophia</h3>
−
<div class="img-container">
+
                    <h5>ShowGilr</h5>
−
<img class="img-responsive" src="img/thumb-edward-norton.jpg">
+
                </div>
−
</div>
+
                <div class="member-image">
−
<div class="mc-description">
+
                <img src="images/member_270x210.jpg" alt="Member">
−
He has been nominated for three Academy Awards for his work in the films Primal Fear, American History X and Birdman. He also starred in other roles ...
+
                </div>
−
</div>
+
                <div class="more-info">
−
</div>
+
                <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>
−
<a class="mc-btn-action">
+
                    <div class="social-touch icon-colored">
−
<i class="fa fa-bars"></i>
+
                    <a class="fb-touch" href="#"></a>
−
</a>
+
                        <a class="tweet-touch" href="#"></a>
−
<div class="mc-footer">
+
                        <a class="linkedin-touch" href="#"></a>
−
<h4>
+
                    </div>
−
Social
+
                </div>
−
</h4>
+
            </div>
−
<a class="fa fa-fw fa-facebook"></a>
+
            <!-- effect-8 html end -->
−
<a class="fa fa-fw fa-twitter"></a>
+
           
−
<a class="fa fa-fw fa-linkedin"></a>
+
            <!-- effect-9 html -->
−
<a class="fa fa-fw fa-google-plus"></a>
+
            <div class="single-member effect-9">
−
</div>
+
                <div class="member-info">
−
</article>
+
                <h3>Sophia</h3>
−
</div>
+
                    <h5>ShowGilr</h5>
−
<div class="col-md-4 col-sm-6 col-xs-12">
+
                </div>
−
<article class="material-card Blue">
+
                <div class="member-image">
−
<h2>
+
                <img src="images/member_270x210.jpg" alt="Member">
−
<span>Michael Caine</span>
+
                </div>
−
<strong>
+
                <div class="more-info">
−
<i class="fa fa-fw fa-star"></i>
+
                <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>
−
Educated Rita
+
                    <div class="social-touch icon-colored">
−
</strong>
+
                    <a class="fb-touch" href="#"></a>
−
</h2>
+
                        <a class="tweet-touch" href="#"></a>
−
<div class="mc-content">
+
                        <a class="linkedin-touch" href="#"></a>
−
<div class="img-container">
+
                    </div>
−
<img class="img-responsive" src="img/thumb-michael-caine.jpg">
+
                </div>
−
</div>
+
            </div>
−
<div class="mc-description">
+
            <!-- effect-9 html end -->
−
English actor and author. Renowned for his distinctive working class cockney accent, Caine has appeared in over 115 films and is regarded as a British ...
+
        </div>
−
</div>
+
    <!-- Team members structure start -->
−
</div>
+
    </div>
−
<a class="mc-btn-action">
+
−
<i class="fa fa-bars"></i>
+
−
</a>
+
−
<div class="mc-footer">
+
−
<h4>
+
−
Social
+
−
</h4>
+
−
<a class="fa fa-fw fa-facebook"></a>
+
−
<a class="fa fa-fw fa-twitter"></a>
+
−
<a class="fa fa-fw fa-linkedin"></a>
+
−
<a class="fa fa-fw fa-google-plus"></a>
+
−
</div>
+
−
</article>
+
−
</div>
+
−
</div>
+
−
</section>
+
 
</div>
 
</div>
  

Revision as of 05:01, 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.