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

Line 1: Line 1:
−
<html>
+
{{XJTU-China/style}}
−
<style>
+
<html lang="en" dir="ltr">
−
:root {
+
−
    --d: 700ms;
+
−
    --e: cubic-bezier(0.19, 1, 0.22, 1);
+
−
}
+
−
.card {
+
−
    position: relative;
+
−
    display: flex;
+
−
    align-items: flex-end;
+
−
    overflow: hidden;
+
−
    padding: 1rem;
+
−
    width: 270px;
+
−
    height: 360px;
+
−
    text-align: center;
+
−
    color: whitesmoke;
+
−
    background-color: whitesmoke;
+
−
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.1), 0 4px 4px rgba(0, 0, 0, 0.1), 0 8px 8px rgba(0, 0, 0, 0.1), 0 16px 16px rgba(0, 0, 0, 0.1);
+
−
  }
+
  
−
  .card:before {
+
<head>
−
     content: "";
+
     <title>Team:XJTU-China/Team</title>
−
     position: absolute;
+
    <meta charset="utf-8">
−
    top: 0;
+
     <meta name="keywords" content="iGEM,Xi'an Jiaotong University,XJTU-China,Tryptophan,
−
     left: 0;
+
        Trp,Biosynthesis,E.coli">
−
    width: 100%;
+
     <meta name="description"
−
    height: 110%;
+
        content="Welcome to 2021 XJTU-China. Here is the brief into. of our talented teammates and mentors">
−
    background-size: cover;
+
     <meta name="viewport"
−
     background-position: 0 0;
+
        content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
−
    transition: transform calc(var(--d) * 1.5) var(--e);
+
     <link rel="stylesheet" type="text/css"
−
     pointer-events: none;
+
        href="https://2021.igem.org/wiki/index.php?title=Template:XJTU-China&action=raw&ctype=text/css" />
−
  }
+
     <link rel="stylesheet" type="text/css"
−
  .card:after {
+
        href="https://2021.igem.org/wiki/index.php?title=Template:XJTU-China/font_awesome_min&action=raw&ctype=text/css" />
−
     content: "";
+
     <link rel="stylesheet" type="text/css"
−
    display: block;
+
        href="https://2021.igem.org/wiki/index.php?title=Template:XJTU-China/bootstrap&action=raw&ctype=text/css" />
−
    position: absolute;
+
     <style>
−
     top: 0;
+
        .card#Weiping:before {
−
    left: 0;
+
            background-image: url(https://static.igem.org/mediawiki/2021/b/b9/T--XJTU-China--25.jpg);
−
    width: 100%;
+
        }
−
     height: 200%;
+
−
    pointer-events: none;
+
−
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.009) 11.7%, rgba(0, 0, 0, 0.034) 22.1%, rgba(0, 0, 0, 0.072) 31.2%, rgba(0, 0, 0, 0.123) 39.4%, rgba(0, 0, 0, 0.182) 46.6%, rgba(0, 0, 0, 0.249) 53.1%, rgba(0, 0, 0, 0.32) 58.9%, rgba(0, 0, 0, 0.394) 64.3%, rgba(0, 0, 0, 0.468) 69.3%, rgba(0, 0, 0, 0.54) 74.1%, rgba(0, 0, 0, 0.607) 78.8%, rgba(0, 0, 0, 0.668) 83.6%, rgba(0, 0, 0, 0.721) 88.7%, rgba(0, 0, 0, 0.762) 94.1%, rgba(0, 0, 0, 0.79) 100%);
+
−
    transform: translateY(-50%);
+
−
    transition: transform calc(var(--d) * 2) var(--e);
+
−
  }
+
  
−
  .content {
+
        .card#Wei:before {
−
    position: relative;
+
            background-image: url(https://static.igem.org/mediawiki/2021/0/0b/T--XJTU-China--crew-bg.jpg);
−
    display: flex;
+
        }
−
    flex-direction: column;
+
−
    align-items: center;
+
−
    width: 100%;
+
−
    height: 100%;
+
−
    padding: 1rem;
+
−
    transition: transform var(--d) var(--e);
+
−
    z-index: 1;
+
−
  }
+
−
  .content > * + * {
+
−
    margin-top: 1rem;
+
−
  }
+
  
−
  .card .content p {
+
        .card#Lei:before {
−
      font-family: 'eras';
+
            background-image: url(https://static.igem.org/mediawiki/2021/f/fd/T--XJTU-China--bg.jpg);
−
      font-size: 16px;
+
        }
−
      text-align: justify!important;
+
    </style>
−
  }
+
</head>
  
−
  .card .content span{
+
<body>
−
     font-family: 'montserrat';
+
     <!--banner-->
−
     font-size: 18px;
+
     <section>
−
     font-weight: bold;
+
        <div class="container row fixedBackground">
−
    font-style: italic;
+
            <div class="fixedBackgroundImg"
 +
                style="background-image: url(https://static.igem.org/mediawiki/2021/0/0b/T--XJTU-China--crew-bg.jpg);"></div>
 +
            <div class="pageHeadline"><span>Crew</span></div>
 +
        </div>
 +
     </section>
 +
    <!-- main -->
 +
    <section>
 +
        <div class="container teamIntro" style="width: 80%;">
 +
            <hgroup class="text-center">
 +
                <h2>Crew</h2>
 +
                <h4><i>The incredibly talented youngsters</i></h4>
 +
            </hgroup>
 +
            <div class="row mt-5">
 +
                <div class="col-3">
 +
                    <div class="card" id="Hongyu">
 +
                        <div class="content">
 +
                            <h2>Chen Hongyu</h2>
 +
                            <span></span>
 +
                            <button class="btn btn-default" data-dialog="dialog-Hongyu">Explore</button>
 +
                        </div>
 +
                    </div>
 +
                </div>
 +
                <div class="col-3">
 +
                    <div>
 +
                        <div class="card" id="Weiping">
 +
                            <div class="content">
 +
                                <h2>Zhang Weiping</h2>
 +
                                <span>Night owl, Born explorer, Lab dweller</span>
 +
                                <button class="btn btn-default" data-dialog="dialog-Weiping">Explore</button>
 +
                            </div>
 +
                        </div>
 +
                    </div>
 +
                </div>
 +
                <div class="col-3">
 +
                    <div class="card" id="Hailong">
 +
                        <div class="content">
 +
                            <h2>Yao Hailong</h2>
 +
                            <span>Cooperative, Responsible, Sociable</span>
 +
                            <button class="btn btn-default" data-dialog="dialog-Hailong">Explore</button>
 +
                        </div>
 +
                    </div>
 +
                </div>
 +
            </div>
 +
            <div class="row mt-5">
 +
                <div class="col-3">
 +
                    <div class="card" id="Chunlin">
 +
                        <div class="content">
 +
                            <h2>Chunlin</h2>
 +
                            <span>Game, 2.5 Dimensions, Procrastination</span>
 +
                            <button class="btn btn-default" data-dialog="dialog-Chunlin">Explore</button>
 +
                        </div>
 +
                    </div>
 +
                </div>
 +
                <div class="col-3">
 +
                    <div class="card" id="Chuxiao">
 +
                        <div class="content">
 +
                            <h2>Chuxiao</h2>
 +
                            <span>Hard-working, Ambitious, Cooperative</span>
 +
                            <button class="btn btn-default" data-dialog="dialog-Chunlin">Explore</button>
 +
                        </div>
 +
                    </div>
 +
                </div>
 +
                <div class="col-3">
 +
                    <div class="card" id="Daiyun">
 +
                        <div class="content">
 +
                            <h2>Mountain View</h2>
 +
                            <p>Check out all of these gorgeous mountain trips with beautiful views of, you guessed it,
 +
                                the mountains</p>
 +
                            <button class="btn">view</button>
 +
                        </div>
 +
                    </div>
 +
                </div>
 +
            </div>
 +
            <div class="row mt-5">
 +
                <div class="col-3">
 +
                    <div class="card" id="Donglin">
 +
                        <div class="content">
 +
                            <p class="copy">Check out all of these gorgeous mountain trips with beautiful views of, you
 +
                                guessed it,
 +
                                the mountains. Acturally, I have no idea about how long the sentences should be, coz all
 +
                                the boxes here are in unique size that is flexible depending on the general size of the
 +
                                window</p>
 +
                        </div>
 +
                    </div>
 +
                </div>
 +
                <div class="col-3">
 +
                    <div class="card" id="Jing">
 +
                        <div class="content">
 +
                            <h2>Mountain View</h2>
 +
                            <p>Check out all of these gorgeous mountain trips with beautiful views of, you guessed it,
 +
                                the mountains</p>
 +
                            <button class="btn">view</button>
 +
                        </div>
 +
                    </div>
 +
                </div>
 +
                <div class="col-3">
 +
                    <div class="card" id="Jinqun">
 +
                        <div class="content">
 +
                            <h2>Mountain View</h2>
 +
                            <p>Check out all of these gorgeous mountain trips with beautiful views of, you guessed it,
 +
                                the mountains</p>
 +
                            <button class="btn">view</button>
 +
                        </div>
 +
                    </div>
 +
                </div>
 +
            </div>
 +
            <div class="row mt-5">
 +
                <div class="col-3">
 +
                    <div class="card" id="Jintian">
 +
                        <div class="content">
 +
                            <p class="copy">Check out all of these gorgeous mountain trips with beautiful views of, you
 +
                                guessed it,
 +
                                the mountains. Acturally, I have no idea about how long the sentences should be, coz all
 +
                                the boxes here are in unique size that is flexible depending on the general size of the
 +
                                window</p>
 +
                        </div>
 +
                    </div>
 +
                </div>
 +
                <div class="col-3">
 +
                    <div class="card" id="Shengbo">
 +
                        <div class="content">
 +
                            <h2>Mountain View</h2>
 +
                            <p>Check out all of these gorgeous mountain trips with beautiful views of, you guessed it,
 +
                                the mountains</p>
 +
                            <button class="btn">view</button>
 +
                        </div>
 +
                    </div>
 +
                </div>
 +
                <div class="col-3">
 +
                    <div class="card" id="Shuyue">
 +
                        <div class="content">
 +
                            <h2>Mountain View</h2>
 +
                            <p>Check out all of these gorgeous mountain trips with beautiful views of, you guessed it,
 +
                                the mountains</p>
 +
                            <button class="btn">view</button>
 +
                        </div>
 +
                    </div>
 +
                </div>
 +
            </div>
 +
            <div class="row mt-5">
 +
                <div class="col-3">
 +
                    <div class="card" id="Wenxi">
 +
                        <div class="content">
 +
                            <p class="copy">Check out all of these gorgeous mountain trips with beautiful views of, you
 +
                                guessed it,
 +
                                the mountains. Acturally, I have no idea about how long the sentences should be, coz all
 +
                                the boxes here are in unique size that is flexible depending on the general size of the
 +
                                window</p>
 +
                        </div>
 +
                    </div>
 +
                </div>
 +
                <div class="col-3">
 +
                    <div class="card" id="Wenxin">
 +
                        <div class="content">
 +
                            <h2>Mountain View</h2>
 +
                            <p>Check out all of these gorgeous mountain trips with beautiful views of, you guessed it,
 +
                                the mountains</p>
 +
                            <button class="btn">view</button>
 +
                        </div>
 +
                    </div>
 +
                </div>
 +
                <div class="col-3">
 +
                    <div class="card" id="Yiduo">
 +
                        <div class="content">
 +
                            <h2>Mountain View</h2>
 +
                            <p>Check out all of these gorgeous mountain trips with beautiful views of, you guessed it,
 +
                                the mountains</p>
 +
                            <button class="btn">view</button>
 +
                        </div>
 +
                    </div>
 +
                </div>
 +
            </div>
 +
            <div class="row mt-5">
 +
                <div class="col-3">
 +
                    <div class="card" id="Yihan">
 +
                        <div class="content">
 +
                            <p class="copy">Check out all of these gorgeous mountain trips with beautiful views of, you
 +
                                guessed it,
 +
                                the mountains. Acturally, I have no idea about how long the sentences should be, coz all
 +
                                the boxes here are in unique size that is flexible depending on the general size of the
 +
                                window</p>
 +
                        </div>
 +
                    </div>
 +
                </div>
 +
                <div class="col-3">
 +
                    <div class="card" id="Youcheng">
 +
                        <div class="content">
 +
                            <h2>Mountain View</h2>
 +
                            <p>Check out all of these gorgeous mountain trips with beautiful views of, you guessed it,
 +
                                the mountains</p>
 +
                            <button class="btn">view</button>
 +
                        </div>
 +
                    </div>
 +
                </div>
 +
                <div class="col-3">
 +
                    <div class="card" id="Zeyu">
 +
                        <div class="content">
 +
                            <h2>Mountain View</h2>
 +
                            <p>Check out all of these gorgeous mountain trips with beautiful views of, you guessed it,
 +
                                the mountains</p>
 +
                            <button class="btn">view</button>
 +
                        </div>
 +
                    </div>
 +
                </div>
 +
            </div>
 +
            <div class="row mt-5">
 +
                <div class="col-3">
 +
                    <div class="card" id="Zhuomiao">
 +
                        <div class="content">
 +
                            <p class="copy">Check out all of these gorgeous mountain trips with beautiful views of, you
 +
                                guessed it,
 +
                                the mountains. Acturally, I have no idea about how long the sentences should be, coz all
 +
                                the boxes here are in unique size that is flexible depending on the general size of the
 +
                                window</p>
 +
                        </div>
 +
                    </div>
 +
                </div>
 +
            </div>
 +
        </div>
 +
        <hr class="mt-5">
 +
        <div class="container teamIntro" style="width: 80%;">
 +
            <hgroup class="text-center">
 +
                <h2>Instructors</h2>
 +
                <h4><i>Our highly respected mentors</i></h4>
 +
            </hgroup>
 +
            <div class="row mt-5">
 +
                <div class="col-3">
 +
                    <div class="card" id="Weiping">
 +
                        <div class="content">
 +
                            <p class="copy">Check out all of these gorgeous mountain trips with beautiful views of, you
 +
                                guessed it,
 +
                                the mountains. Acturally, I have no idea about how long the sentences should be, coz all
 +
                                the boxes here are in unique size that is flexible depending on the general size of the
 +
                                window</p>
 +
                        </div>
 +
                    </div>
 +
                </div>
 +
                <div class="col-3">
 +
                    <div class="card" id="Wei">
 +
                        <div class="content">
 +
                            <h2>Mountain View</h2>
 +
                            <p>Check out all of these gorgeous mountain trips with beautiful views of, you guessed it,
 +
                                the mountains</p>
 +
                            <button class="btn">view</button>
 +
                        </div>
 +
                    </div>
 +
                </div>
 +
                <div class="col-3">
 +
                    <div class="card" id="Lei">
 +
                        <div class="content">
 +
                            <h2>Mountain View</h2>
 +
                            <p>Check out all of these gorgeous mountain trips with beautiful views of, you guessed it,
 +
                                the mountains</p>
 +
                            <button class="btn">view</button>
 +
                        </div>
 +
                    </div>
 +
                </div>
 +
            </div>
 +
            <div class="row mt-5">
 +
                <div class="col-3">
 +
                    <div class="card" id="Weiping">
 +
                        <div class="content">
 +
                            <p class="copy">Check out all of these gorgeous mountain trips with beautiful views of, you
 +
                                guessed it,
 +
                                the mountains. Acturally, I have no idea about how long the sentences should be, coz all
 +
                                the boxes here are in unique size that is flexible depending on the general size of the
 +
                                window</p>
 +
                        </div>
 +
                    </div>
 +
                </div>
 +
                <div class="col-3">
 +
                    <div class="card" id="Wei">
 +
                        <div class="content">
 +
                            <h2>Mountain View</h2>
 +
                            <p>Check out all of these gorgeous mountain trips with beautiful views of, you guessed it,
 +
                                the mountains</p>
 +
                            <button class="btn">view</button>
 +
                        </div>
 +
                    </div>
 +
                </div>
 +
                <div class="col-3">
 +
                    <div class="card" id="Lei">
 +
                        <div class="content">
 +
                            <h2>Mountain View</h2>
 +
                            <p>Check out all of these gorgeous mountain trips with beautiful views of, you guessed it,
 +
                                the mountains</p>
 +
                            <button class="btn">view</button>
 +
                        </div>
 +
                    </div>
 +
                </div>
 +
            </div>
 +
            <div class="row mt-5">
 +
                <div class="col-3">
 +
                    <div class="card" id="Weiping">
 +
                        <div class="content">
 +
                            <p class="copy">Check out all of these gorgeous mountain trips with beautiful views of, you
 +
                                guessed it,
 +
                                the mountains. Acturally, I have no idea about how long the sentences should be, coz all
 +
                                the boxes here are in unique size that is flexible depending on the general size of the
 +
                                window</p>
 +
                        </div>
 +
                    </div>
 +
                </div>
 +
                <div class="col-3">
 +
                    <div class="card" id="Wei">
 +
                        <div class="content">
 +
                            <h2>Mountain View</h2>
 +
                            <p>Check out all of these gorgeous mountain trips with beautiful views of, you guessed it,
 +
                                the mountains</p>
 +
                            <button class="btn">view</button>
 +
                        </div>
 +
                    </div>
 +
                </div>
 +
                <div class="col-3">
 +
                    <div class="card" id="Lei">
 +
                        <div class="content">
 +
                            <h2>Mountain View</h2>
 +
                            <p>Check out all of these gorgeous mountain trips with beautiful views of, you guessed it,
 +
                                the mountains</p>
 +
                            <button class="btn">view</button>
 +
                        </div>
 +
                    </div>
 +
                </div>
 +
            </div>
 +
        </div>
 +
    </section>
  
−
  }
+
    <!-- dialog -->
 +
    <section>
 +
        <div id="dialog-Hongyu" class="dialog">
 +
            <div class="dialog__overlay"></div>
 +
            <div class="dialog__content">
 +
                <h2>why can't i see me</h2>
 +
                <p></p>
 +
            </div>
 +
        </div>
 +
        <div id="dialog-Weiping" class="dialog xjtuText">
 +
            <div class="dialog__overlay"></div>
 +
            <div class="dialog__content">
 +
                <h2>why can't i see me</h2>
 +
                <div class="row">
 +
                    <div class="highlightBox col-12">
 +
                        <div class="row">
 +
                            <div class="col-4">
 +
                                <div class="imgWrapper centerize">
 +
                                    <img src="https://static.igem.org/mediawiki/2021/3/3f/T--XJTU-China--collab_1.jpg"
 +
                                        width="90%">
 +
                                </div>
 +
                            </div>
 +
                            <div class="col-8">
 +
                                <p>Zhang Weiping, undergrad in Xi’an Jiaotong University, supporter of Manchester
 +
                                    United, Hakka
 +
                                    people,
 +
                                    and determined to be a promising scientist in biology. I found the joy of gene
 +
                                    editing
 +
                                    during iGEM
 +
                                    2020 as a fledging learner, hence trying to explore synthetic biology after the
 +
                                    one-year
 +
                                    incubation.
 +
                                    Hope to see you guys in Great Jamboree and please stay tuned on XJTU-China’s
 +
                                    performance!
 +
                                </p>
 +
                            </div>
 +
                        </div>
 +
                    </div>
 +
                </div>
 +
            </div>
 +
        </div>
 +
    </section>
 +
    <!--JS-->
 +
    <script type="text/javascript"
 +
        src="https://2021.igem.org/wiki/index.php?title=Template:XJTU-China/jquery&action=raw&ctype=text/javascript"></script>
 +
    <script type="text/javascript"
 +
        src="https://2021.igem.org/wiki/index.php?title=Template:XJTU-China/bootstrapJS&action=raw&ctype=text/javascript"></script>
 +
    <script type="text/javascript"
 +
        src="https://2021.igem.org/wiki/index.php?title=Template:XJTU-China/lottie&action=raw&ctype=text/javascript"></script>
 +
    <script type="text/javascript"
 +
        src="https://2021.igem.org/wiki/index.php?title=Template:XJTU-China/anime&action=raw&ctype=text/javascript"></script>
 +
    <script type="text/javascript"
 +
        src="https://2021.igem.org/wiki/index.php?title=Template:XJTU-China/teamImages&action=raw&ctype=text/javascript"></script>
 +
    <script type="text/javascript"
 +
        src="https://2021.igem.org/wiki/index.php?title=Template:XJTU-China/modernizr&action=raw&ctype=text/javascript"></script>
 +
    <script type="text/javascript"
 +
        src="https://2021.igem.org/wiki/index.php?title=Template:XJTU-China/dialog&action=raw&ctype=text/javascript"></script>
 +
    <script type="text/javascript"
 +
        src="https://2021.igem.org/wiki/index.php?title=Template:XJTU-China/BbBxRG&action=raw&ctype=text/javascript"></script>
 +
    <!-- tooltip animation -->
 +
    <script>
 +
        var fTooltip = (function () {
 +
            const config = {
 +
                indis: {
 +
                    in: {
 +
                        base: {
 +
                            duration: 500,
 +
                            easing: 'easeOutQuint',
 +
                            translateY: [100, 0],
 +
                            opacity: {
 +
                                value: 1,
 +
                                duration: 50,
 +
                                easing: 'linear'
 +
                            }
 +
                        },
 +
                        shape: {
 +
                            duration: 350,
 +
                            easing: 'easeOutBack',
 +
                            scaleY: {
 +
                                value: [1.3, 1],
 +
                                duration: 1300,
 +
                                easing: 'easeOutElastic',
 +
                                elasticity: 500
 +
                            },
 +
                            scaleX: {
 +
                                value: [0.3, 1],
 +
                                duration: 1300,
 +
                                easing: 'easeOutElastic',
 +
                                elasticity: 500
 +
                            },
 +
                        },
 +
                        path: {
 +
                            duration: 450,
 +
                            easing: 'easeInOutQuad',
 +
                            d: 'M 44.5,24 C 148,24 252,24 356,24 367,24 376,32.9 376,44 L 376,256 C 376,267 367,276 356,276 252,276 148,276 44.5,276 33.4,276 24.5,267 24.5,256 L 24.5,44 C 24.5,32.9 33.4,24 44.5,24 Z'
 +
                        },
 +
                        content: {
 +
                            duration: 300,
 +
                            delay: 50,
 +
                            easing: 'easeOutQuad',
 +
                            translateY: [10, 0],
 +
                            opacity: {
 +
                                value: 1,
 +
                                easing: 'linear',
 +
                                duration: 100
 +
                            }
 +
                        },
 +
                        trigger: {
 +
                            translateY: [
 +
                                { value: '-50%', duration: 100, easing: 'easeInQuad' },
 +
                                { value: ['50%', '0%'], duration: 100, easing: 'easeOutQuad' }
 +
                            ],
 +
                            opacity: [
 +
                                { value: 0, duration: 100, easing: 'easeInQuad' },
 +
                                { value: 1, duration: 100, easing: 'easeOutQuad' }
 +
                            ],
 +
                            color: {
 +
                                value: '#6fbb95',
 +
                                duration: 1,
 +
                                delay: 100,
 +
                                easing: 'easeOutQuad'
 +
                            }
 +
                        }
 +
                    },
 +
                    out: {
 +
                        base: {
 +
                            duration: 320,
 +
                            delay: 50,
 +
                            easing: 'easeInOutQuint',
 +
                            scaleY: 1.5,
 +
                            scaleX: 0,
 +
                            translateY: -100,
 +
                            opacity: {
 +
                                value: 0,
 +
                                duration: 100,
 +
                                delay: 130,
 +
                                easing: 'linear'
 +
                            }
 +
                        },
 +
                        path: {
 +
                            duration: 300,
 +
                            delay: 50,
 +
                            easing: 'easeInOutQuint',
 +
                            d: 'M 44.5,24 C 138,4.47 246,-6.47 356,24 367,26.9 376,32.9 376,44 L 376,256 C 376,267 367,279 356,276 231,240 168,241 44.5,276 33.8,279 24.5,267 24.5,256 L 24.5,44 C 24.5,32.9 33.6,26.3 44.5,24 Z'
 +
                        },
 +
                        content: {
 +
                            duration: 300,
 +
                            easing: 'easeInOutQuad',
 +
                            translateY: -40,
 +
                            opacity: {
 +
                                value: 0,
 +
                                duration: 100,
 +
                                delay: 135,
 +
                                easing: 'linear'
 +
                            }
 +
                        },
 +
                        trigger: {
 +
                            translateY: [
 +
                                { value: '-50%', duration: 100, easing: 'easeInQuad' },
 +
                                { value: ['50%', '0%'], duration: 100, easing: 'easeOutQuad' }
 +
                            ],
 +
                            opacity: [
 +
                                { value: 0, duration: 100, easing: 'easeInQuad' },
 +
                                { value: 1, duration: 100, easing: 'easeOutQuad' }
 +
                            ],
 +
                            color: {
 +
                                value: '#666',
 +
                                duration: 1,
 +
                                delay: 100,
 +
                                easing: 'easeOutQuad'
 +
                            }
 +
                        }
 +
                    }
 +
                },
 +
            };
  
−
  .card .content h2{
+
            const tooltips = Array.from(document.querySelectorAll('.tooltip__neo'));
−
    font-family: 'montserrat';
+
−
    font-weight: bold;
+
−
    color: #7298ff;
+
−
  }
+
  
−
  @media (hover: hover) and (min-width: 600px) {
+
            class Tooltip {
−
    .card:after {
+
                constructor(el) {
−
      transform: translateY(0);
+
                    this.DOM = {};
−
    }
+
                    this.DOM.el = el;
−
 
+
                    this.type = this.DOM.el.getAttribute('data-type');
−
    .content {
+
                    this.DOM.trigger = this.DOM.el.querySelector('.tooltip__trigger');
−
      transform: translateY(calc(100% - 4.5rem));
+
                    this.DOM.triggerSpan = this.DOM.el.querySelector('.tooltip__trigger-text');
−
    }
+
                    this.DOM.base = this.DOM.el.querySelector('.tooltip__base');
−
    .content > *:not(.title) {
+
                    this.DOM.shape = this.DOM.base.querySelector('.tooltip__shape');
−
      opacity: 0;
+
                    if (this.DOM.shape) {
−
      transform: translateY(1rem);
+
                        this.DOM.path = this.DOM.shape.childElementCount > 1 ? Array.from(this.DOM.shape.querySelectorAll('path')) : this.DOM.shape.querySelector('path');
−
      transition: transform var(--d) var(--e), opacity var(--d) var(--e);
+
                    }
−
    }
+
                    this.DOM.deco = this.DOM.base.querySelector('.tooltip__deco');
−
 
+
                    this.DOM.content = this.DOM.base.querySelector('.tooltip__content');
−
    .card:hover,
+
−
  .card:focus-within {
+
−
      align-items: center;
+
−
    }
+
−
    .card:hover:before,
+
−
  .card:focus-within:before {
+
−
      transform: translateY(-4%);
+
−
    }
+
−
    .card:hover:after,
+
−
  .card:focus-within:after {
+
−
      transform: translateY(-50%);
+
−
    }
+
−
    .card:hover .content,
+
−
  .card:focus-within .content {
+
−
      transform: translateY(0);
+
−
    }
+
−
    .card:hover .content > *:not(.title),
+
−
  .card:focus-within .content > *:not(.title) {
+
−
      opacity: 1;
+
−
      transform: translateY(0);
+
−
      transition-delay: calc(var(--d) / 8);
+
−
    }
+
−
 
+
−
    .card:focus-within:before, .card:focus-within:after,
+
−
  .card:focus-within .content,
+
−
  .card:focus-within .content > *:not(.title) {
+
−
      transition-duration: 0s;
+
−
    }
+
−
  }
+
  
 +
                    this.DOM.letters = this.DOM.content.querySelector('.tooltip__letters');
 +
                    if (this.DOM.letters) {
 +
                        // Create spans for each letter.
 +
                        charming(this.DOM.letters);
 +
                        // Redefine content.
 +
                        this.DOM.content = this.DOM.letters.querySelectorAll('span');
 +
                    }
 +
                    this.initEvents();
 +
                }
 +
                initEvents() {
 +
                    this.mouseenterFn = () => {
 +
                        this.mouseTimeout = setTimeout(() => {
 +
                            this.isShown = true;
 +
                            this.show();
 +
                        }, 75);
 +
                    }
 +
                    this.mouseleaveFn = () => {
 +
                        clearTimeout(this.mouseTimeout);
 +
                        if (this.isShown) {
 +
                            this.isShown = false;
 +
                            this.hide();
 +
                        }
 +
                    }
 +
                    this.DOM.trigger.addEventListener('mouseenter', this.mouseenterFn);
 +
                    this.DOM.trigger.addEventListener('mouseleave', this.mouseleaveFn);
 +
                    this.DOM.trigger.addEventListener('touchstart', this.mouseenterFn);
 +
                    this.DOM.trigger.addEventListener('touchend', this.mouseleaveFn);
 +
                }
 +
                show() {
 +
                    this.animate('in');
 +
                }
 +
                hide() {
 +
                    this.animate('out');
 +
                }
 +
                animate(dir) {
 +
                    if (config[this.type][dir].base) {
 +
                        anime.remove(this.DOM.base);
 +
                        let baseAnimOpts = { targets: this.DOM.base };
 +
                        anime(Object.assign(baseAnimOpts, config[this.type][dir].base));
 +
                    }
 +
                    if (config[this.type][dir].shape) {
 +
                        anime.remove(this.DOM.shape);
 +
                        let shapeAnimOpts = { targets: this.DOM.shape };
 +
                        anime(Object.assign(shapeAnimOpts, config[this.type][dir].shape));
 +
                    }
 +
                    if (config[this.type][dir].path) {
 +
                        anime.remove(this.DOM.path);
 +
                        let shapeAnimOpts = { targets: this.DOM.path };
 +
                        anime(Object.assign(shapeAnimOpts, config[this.type][dir].path));
 +
                    }
 +
                    if (config[this.type][dir].content) {
 +
                        anime.remove(this.DOM.content);
 +
                        let contentAnimOpts = { targets: this.DOM.content };
 +
                        anime(Object.assign(contentAnimOpts, config[this.type][dir].content));
 +
                    }
 +
                    if (config[this.type][dir].deco) {
 +
                        anime.remove(this.DOM.deco);
 +
                        let decoAnimOpts = { targets: this.DOM.deco };
 +
                        anime(Object.assign(decoAnimOpts, config[this.type][dir].deco));
 +
                    }
 +
                }
 +
                destroy() {
 +
                    this.DOM.trigger.removeEventListener('mouseenter', this.mouseenterFn);
 +
                    this.DOM.trigger.removeEventListener('mouseleave', this.mouseleaveFn);
 +
                    this.DOM.trigger.removeEventListener('touchstart', this.mouseenterFn);
 +
                    this.DOM.trigger.removeEventListener('touchend', this.mouseleaveFn);
 +
                }
 +
            }
  
−
  .teamIntro .row {
+
            const init = (() => tooltips.forEach(t => new Tooltip(t)))();
−
     justify-content: center;
+
        }
−
  }
+
        )();
 +
     </script>
 +
    <!-- Dialog -->
 +
    <script>
 +
        // dialog.js
 +
        initDialog(2);
 +
    </script>
 +
</body>
  
−
  .teamIntro .row>div {
+
</html>
−
    display: flex;
+
{{XJTU-China/teamCSS}}
−
    justify-content: center;
+
{{XJTU-China/header}}
−
  }
+
{{XJTU-China/footer}}
−
 
+
−
  .card .content button{
+
−
    position: absolute;
+
−
    bottom: 5%;
+
−
  }
+
−
 
+
−
  .dialog__content {
+
−
    background-image: url(https://static.igem.org/mediawiki/2021/f/fd/T--XJTU-China--bg.jpg);
+
−
    background-position: center;
+
−
    background-size: cover;
+
−
    overflow: hidden;
+
−
  }
+
−
 
+
−
  </style>
+
−
  </html>
+

Revision as of 13:45, 18 October 2021

Team:XJTU-China/Team

Crew

Crew

The incredibly talented youngsters

Chen Hongyu

Zhang Weiping

Night owl, Born explorer, Lab dweller

Yao Hailong

Cooperative, Responsible, Sociable

Chunlin

Game, 2.5 Dimensions, Procrastination

Chuxiao

Hard-working, Ambitious, Cooperative

Mountain View

Check out all of these gorgeous mountain trips with beautiful views of, you guessed it, the mountains

Check out all of these gorgeous mountain trips with beautiful views of, you guessed it, the mountains. Acturally, I have no idea about how long the sentences should be, coz all the boxes here are in unique size that is flexible depending on the general size of the window

Mountain View

Check out all of these gorgeous mountain trips with beautiful views of, you guessed it, the mountains

Mountain View

Check out all of these gorgeous mountain trips with beautiful views of, you guessed it, the mountains

Check out all of these gorgeous mountain trips with beautiful views of, you guessed it, the mountains. Acturally, I have no idea about how long the sentences should be, coz all the boxes here are in unique size that is flexible depending on the general size of the window

Mountain View

Check out all of these gorgeous mountain trips with beautiful views of, you guessed it, the mountains

Mountain View

Check out all of these gorgeous mountain trips with beautiful views of, you guessed it, the mountains

Check out all of these gorgeous mountain trips with beautiful views of, you guessed it, the mountains. Acturally, I have no idea about how long the sentences should be, coz all the boxes here are in unique size that is flexible depending on the general size of the window

Mountain View

Check out all of these gorgeous mountain trips with beautiful views of, you guessed it, the mountains

Mountain View

Check out all of these gorgeous mountain trips with beautiful views of, you guessed it, the mountains

Check out all of these gorgeous mountain trips with beautiful views of, you guessed it, the mountains. Acturally, I have no idea about how long the sentences should be, coz all the boxes here are in unique size that is flexible depending on the general size of the window

Mountain View

Check out all of these gorgeous mountain trips with beautiful views of, you guessed it, the mountains

Mountain View

Check out all of these gorgeous mountain trips with beautiful views of, you guessed it, the mountains

Check out all of these gorgeous mountain trips with beautiful views of, you guessed it, the mountains. Acturally, I have no idea about how long the sentences should be, coz all the boxes here are in unique size that is flexible depending on the general size of the window

Instructors

Our highly respected mentors

Check out all of these gorgeous mountain trips with beautiful views of, you guessed it, the mountains. Acturally, I have no idea about how long the sentences should be, coz all the boxes here are in unique size that is flexible depending on the general size of the window

Mountain View

Check out all of these gorgeous mountain trips with beautiful views of, you guessed it, the mountains

Mountain View

Check out all of these gorgeous mountain trips with beautiful views of, you guessed it, the mountains

Check out all of these gorgeous mountain trips with beautiful views of, you guessed it, the mountains. Acturally, I have no idea about how long the sentences should be, coz all the boxes here are in unique size that is flexible depending on the general size of the window

Mountain View

Check out all of these gorgeous mountain trips with beautiful views of, you guessed it, the mountains

Mountain View

Check out all of these gorgeous mountain trips with beautiful views of, you guessed it, the mountains

Check out all of these gorgeous mountain trips with beautiful views of, you guessed it, the mountains. Acturally, I have no idea about how long the sentences should be, coz all the boxes here are in unique size that is flexible depending on the general size of the window

Mountain View

Check out all of these gorgeous mountain trips with beautiful views of, you guessed it, the mountains

Mountain View

Check out all of these gorgeous mountain trips with beautiful views of, you guessed it, the mountains

why can't i see me

why can't i see me

Zhang Weiping, undergrad in Xi’an Jiaotong University, supporter of Manchester United, Hakka people, and determined to be a promising scientist in biology. I found the joy of gene editing during iGEM 2020 as a fledging learner, hence trying to explore synthetic biology after the one-year incubation. Hope to see you guys in Great Jamboree and please stay tuned on XJTU-China’s performance!

contact us

Xi'an Jiaotong University
28 Xianning West Road
Xi'an, Shaanxi, China, 710049
xjtu_igem@xjtu.edu.cn
Made with ❤️ by  
XJTU-iGEMers