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

Line 1: Line 1:
−
{{XJTU-China/style}}
+
<html>
−
<html lang="en" dir="ltr">
+
<style>
 +
: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);
 +
  }
  
−
<head>
+
  .card:before {
−
     <title>Team:XJTU-China/Team</title>
+
     content: "";
−
    <meta charset="utf-8">
+
     position: absolute;
−
     <meta name="keywords" content="iGEM,Xi'an Jiaotong University,XJTU-China,Tryptophan,
+
    top: 0;
−
        Trp,Biosynthesis,E.coli">
+
     left: 0;
−
     <meta name="description"
+
    width: 100%;
−
        content="Welcome to 2021 XJTU-China. Here is the brief into. of our talented teammates and mentors">
+
    height: 110%;
−
     <meta name="viewport"
+
    background-size: cover;
−
        content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
+
     background-position: 0 0;
−
     <link rel="stylesheet" type="text/css"
+
    transition: transform calc(var(--d) * 1.5) var(--e);
−
        href="https://2021.igem.org/wiki/index.php?title=Template:XJTU-China&action=raw&ctype=text/css" />
+
     pointer-events: none;
−
     <link rel="stylesheet" type="text/css"
+
  }
−
        href="https://2021.igem.org/wiki/index.php?title=Template:XJTU-China/font_awesome_min&action=raw&ctype=text/css" />
+
  .card:after {
−
     <link rel="stylesheet" type="text/css"
+
     content: "";
−
        href="https://2021.igem.org/wiki/index.php?title=Template:XJTU-China/bootstrap&action=raw&ctype=text/css" />
+
    display: block;
−
     <style>
+
    position: absolute;
−
        .card#Weiping:before,
+
     top: 0;
−
        #dialog-Weiping .dialog__content {
+
    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);
 +
  }
  
−
        .card#Wei:before {
+
  .content {
−
            background-image: url(https://static.igem.org/mediawiki/2021/0/0b/T--XJTU-China--crew-bg.jpg);
+
    position: relative;
−
        }
+
    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#Lei:before {
+
  .card .content p {
−
            background-image: url(https://static.igem.org/mediawiki/2021/f/fd/T--XJTU-China--bg.jpg);
+
      font-family: 'eras';
−
        }
+
      font-size: 16px;
−
    </style>
+
      text-align: justify!important;
−
</head>
+
  }
  
−
<body>
+
  .card .content span{
−
     <!--banner-->
+
     font-family: 'montserrat';
−
     <section>
+
     font-size: 18px;
−
        <div class="container row fixedBackground">
+
     font-weight: bold;
−
            <div class="fixedBackgroundImg"
+
    font-style: italic;
−
                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>
+
−
                            <p>Check out all of these gorgeous mountain trips with beautiful views of, you guessed it,
+
−
                                the mountains</p>
+
−
                            <button class="btn btn-primary" data-dialog="dialog-Hongyu">Intro.</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-primary" data-dialog="dialog-Weiping">Intro.</button>
+
−
                            </div>
+
−
                        </div>
+
−
                    </div>
+
−
                </div>
+
−
                <div class="col-3">
+
−
                    <div class="card" id="Hailong">
+
−
                        <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="Chunlin">
+
−
                        <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="Chuxiao">
+
−
                        <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="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>
+
−
        <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>
+
−
        <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'
+
−
                            }
+
−
                        }
+
−
                    }
+
−
                },
+
−
            };
+
  
−
            const tooltips = Array.from(document.querySelectorAll('.tooltip__neo'));
+
  .card .content h2{
 +
    font-family: 'montserrat';
 +
    font-weight: bold;
 +
    color: #7298ff;
 +
  }
  
−
            class Tooltip {
+
  @media (hover: hover) and (min-width: 600px) {
−
                constructor(el) {
+
    .card:after {
−
                    this.DOM = {};
+
      transform: translateY(0);
−
                    this.DOM.el = el;
+
    }
−
                    this.type = this.DOM.el.getAttribute('data-type');
+
 
−
                    this.DOM.trigger = this.DOM.el.querySelector('.tooltip__trigger');
+
    .content {
−
                    this.DOM.triggerSpan = this.DOM.el.querySelector('.tooltip__trigger-text');
+
      transform: translateY(calc(100% - 4.5rem));
−
                    this.DOM.base = this.DOM.el.querySelector('.tooltip__base');
+
    }
−
                    this.DOM.shape = this.DOM.base.querySelector('.tooltip__shape');
+
    .content > *:not(.title) {
−
                    if (this.DOM.shape) {
+
      opacity: 0;
−
                        this.DOM.path = this.DOM.shape.childElementCount > 1 ? Array.from(this.DOM.shape.querySelectorAll('path')) : this.DOM.shape.querySelector('path');
+
      transform: translateY(1rem);
−
                    }
+
      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);
 
−
                }
 
−
            }
 
  
−
            const init = (() => tooltips.forEach(t => new Tooltip(t)))();
+
  .teamIntro .row {
−
        }
+
     justify-content: center;
−
        )();
+
  }
−
     </script>
+
−
    <!-- Dialog -->
+
−
    <script>
+
−
        // dialog.js
+
−
        initDialog(2);
+
−
    </script>
+
−
</body>
+
  
−
</html>
+
  .teamIntro .row>div {
−
{{XJTU-China/teamCSS}}
+
    display: flex;
−
{{XJTU-China/header}}
+
    justify-content: center;
−
{{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:38, 18 October 2021