Difference between revisions of "Team:XJTLU-CHINA"

Line 2: Line 2:
 
<html>
 
<html>
  
−
<body>
+
 
−
<div style="height: 80px"></div>
+
 
−
<div class="container-fluid">
+
<head>
−
     <div class="row">
+
    <link href='http://cdn.webfont.youziku.com/webfonts/nomal/121999/47548/5b8e3c0af629d815dc523894.css' rel='stylesheet' type='text/css' />
−
        <div class="col-md-2 col-sm-1 col-xs-1"></div>
+
    <link href='http://cdn.webfont.youziku.com/webfonts/nomal/121999/47547/5b8e3f45f629d815dc523897.css' rel='stylesheet' type='text/css' />
−
         <div class="col-md-8 col-sm-10 col-xs-10" style="font-size: 18px; text-align: justify">
+
    <link href='http://cdn.webfont.youziku.com/webfonts/nomal/121999/47858/5b8e421af629d815dc52389b.css' rel='stylesheet' type='text/css' />
−
             <h1 style="text-align: center;padding-bottom: 20px">Project Description</h1>
+
    <link rel="stylesheet" type="text/css" href="css/animate.css">
−
             Composed of neurons, nervous system constitutes the marvel and also the most important part of life, which transmits signals and coordinates actions. Neurological damage and neurodegenerative diseases are intractable threats to human life. However, extant therapies have varied defects which, to a large extent, hinder the treatments to these problems. For molecular medication, a highly selective semipermeable membrane called blood-brain barrier (BBB) separates the circulating blood from the brain and extracellular fluid in the central nervous system (CNS), posing a major obstacle for drugs to function in the brain. Even though some drugs are capable of crossing this barrier, its non-specificity becomes the major concern of undermining CNS or causing inestimable side effects. Concurrently, viral gene therapy, for its immature technology and also the risk of eliciting immune response, is negated to be a persuasive treatment strategy.
+
    <link rel="stylesheet" type="text/css" href="css/magic.min.css">
−
             <br>
+
    <link rel="stylesheet" type="text/css" href="css/homePageMo.css" media="screen and (min-width:814px)">
−
             <br>
+
     <link rel="stylesheet" type="text/css" href="css/hover-min.css">
−
             Therefore, this year, we decided to engineer human embryonic kidney cells (HEK293T) to produce desired exosomes (kind of cell derived vesicles with diameter between 30 nm ~100nm) that are naturally capable of passing BBB. Our project involves mainly 4 parts: RNA packaging, exosome production boosting, exosome delivery and target cell characterization. After engineering, the resultant HEK293T cells may produce exosomes in large quantity and the exosomes contain therapeutic RNA molecules which can be translated in target neurons to strengthen either neuroregeneration or cure or alleviate neurodegenerative diseases. Moreover, the exosomes produced are also conferred an increased ability to specifically target neurons.
+
    <script type="text/javascript" src="javascript/jquery-3.3.1.js"></script>
 +
    <script type="text/javascript">
 +
         $(document).ready(function () {
 +
            $('#downButton').click(function(){
 +
                $("html, body").animate({scrollTop:$("#learnMore").offset().top},1000);
 +
            });
 +
        })
 +
        $(document).ready(function () {
 +
            $('#link1').click(function(){
 +
                $("html, body").animate({scrollTop:$("#partOne").offset().top},800);
 +
            });
 +
        })
 +
        $(document).ready(function () {
 +
            $('#link2').click(function(){
 +
                $("html, body").animate({scrollTop:$("#partTwo").offset().top},800);
 +
            });
 +
        })
 +
        $(document).ready(function () {
 +
            $('#link3').click(function(){
 +
                $("html, body").animate({scrollTop:$("#partThree").offset().top},800);
 +
            });
 +
        })
 +
    </script>
 +
    <link href="navBarcss/responsive-menu.css" rel="stylesheet">
 +
    <link href="navBarcss/styles.css" rel="stylesheet">
 +
 
 +
    <script src="js/modernizr.min.js" type="text/javascript"></script>
 +
    <script src="js/modernizr-custom.js" type="text/javascript"></script>
 +
    <script src="js/responsive-menu.js" type="text/javascript"></script>
 +
    <script>
 +
        jQuery(function ($) {
 +
            var menu = $('.rm-nav').rMenu({
 +
                minWidth: '960px',
 +
            });
 +
        });
 +
    </script>
 +
    <style>
 +
        li{
 +
            background-color: transparent;
 +
        }
 +
    </style>
 +
    <style>
 +
        *, *:before, *:after {
 +
            box-sizing: border-box;
 +
        }
 +
 
 +
        html {
 +
            font-size: 18px;
 +
            line-height: 1.5;
 +
             font-weight: 300;
 +
            color: #333;
 +
            font-family: "Nunito Sans", sans-serif;
 +
        }
 +
 
 +
        body {
 +
            margin: 0;
 +
            padding: 0;
 +
            height: 100vh;
 +
            background-color: #ecf0f9;
 +
            background-attachment: fixed;
 +
        }
 +
 
 +
        .content {
 +
            display: flex;
 +
            margin: 0 auto;
 +
            justify-content: center;
 +
            align-items: center;
 +
            flex-wrap: wrap;
 +
            width: 100%;
 +
            padding-top: 40px;
 +
            padding-bottom: 40px;
 +
        }
 +
 
 +
        .heading {
 +
             width: 100%;
 +
            margin-left: 1rem;
 +
            font-weight: 900;
 +
            font-size: 1.618rem;
 +
            text-transform: uppercase;
 +
            letter-spacing: .1ch;
 +
            line-height: 1;
 +
            padding-bottom: .5em;
 +
            margin-bottom: 1rem;
 +
            position: relative;
 +
        }
 +
        .heading:after {
 +
            display: block;
 +
            content: '';
 +
            position: absolute;
 +
            width: 60px;
 +
            height: 4px;
 +
            background: linear-gradient(135deg, #1a9be6, #1a57e6);
 +
            bottom: 0;
 +
        }
 +
 
 +
        .description {
 +
            width: 100%;
 +
            margin-top: 0;
 +
            margin-left: 1rem;
 +
            margin-bottom: 3rem;
 +
        }
 +
 
 +
        .card {
 +
            color: inherit;
 +
            cursor: pointer;
 +
            width: 300px;
 +
            min-width: 300px;
 +
            height: 400px;
 +
            min-height: 400px;
 +
            perspective: 1000px;
 +
            margin: 2.5rem;
 +
            position: relative;
 +
        }
 +
        @media screen and (max-width: 800px) {
 +
            .card {
 +
                width: calc(50% - 2rem);
 +
            }
 +
        }
 +
        @media screen and (max-width: 500px) {
 +
            .card {
 +
                width: 100%;
 +
            }
 +
        }
 +
 
 +
        .front,
 +
        .back {
 +
            display: flex;
 +
            border-radius: 6px;
 +
            background-position: center;
 +
            background-size: cover;
 +
            text-align: center;
 +
            justify-content: center;
 +
            align-items: center;
 +
            position: absolute;
 +
            height: 100%;
 +
            width: 100%;
 +
            -webkit-backface-visibility: hidden;
 +
            backface-visibility: hidden;
 +
            transform-style: preserve-3d;
 +
            transition: ease-in-out 600ms;
 +
        }
 +
 
 +
        .front {
 +
            background-size: cover;
 +
            padding: 2rem;
 +
            font-size: 1.618rem;
 +
            font-weight: 600;
 +
            color: #fff;
 +
            overflow: hidden;
 +
            font-family: Poppins, sans-serif;
 +
        }
 +
        .front:before {
 +
             position: absolute;
 +
             display: block;
 +
             content: '';
 +
            top: 0;
 +
            left: 0;
 +
            right: 0;
 +
            bottom: 0;
 +
            background: linear-gradient(135deg, #1a9be6, #1a57e6);
 +
            opacity: .25;
 +
            z-index: -1;
 +
        }
 +
        .card:hover .front {
 +
            transform: rotateY(180deg);
 +
        }
 +
        .card:nth-child(even):hover .front {
 +
            transform: rotateY(-180deg);
 +
        }
 +
 
 +
        .back {
 +
            background: #fff;
 +
            transform: rotateY(-180deg);
 +
            padding: 0 2em;
 +
        }
 +
        .card:hover .back {
 +
            transform: rotateY(0deg);
 +
        }
 +
        .card:nth-child(even) .back {
 +
            transform: rotateY(180deg);
 +
        }
 +
        .card:nth-child(even):hover .back {
 +
            transform: rotateY(0deg);
 +
        }
 +
 
 +
        .button {
 +
            transform: translateZ(40px);
 +
            cursor: pointer;
 +
            -webkit-backface-visibility: hidden;
 +
            backface-visibility: hidden;
 +
            font-weight: bold;
 +
            color: #fff;
 +
            padding: .5em 1em;
 +
            border-radius: 100px;
 +
            font: inherit;
 +
            background: linear-gradient(135deg, #1a9be6, #1a57e6);
 +
            border: none;
 +
            position: relative;
 +
            transform-style: preserve-3d;
 +
            transition: 300ms ease;
 +
        }
 +
        .button:before {
 +
            transition: 300ms ease;
 +
            position: absolute;
 +
            display: block;
 +
            content: '';
 +
            transform: translateZ(-40px);
 +
            -webkit-backface-visibility: hidden;
 +
            backface-visibility: hidden;
 +
            height: calc(100% - 20px);
 +
            width: calc(100% - 20px);
 +
            border-radius: 100px;
 +
            left: 10px;
 +
            top: 16px;
 +
            box-shadow: 0 0 10px 10px rgba(26, 87, 230, 0.25);
 +
            background-color: rgba(26, 87, 230, 0.25);
 +
        }
 +
        .button:hover {
 +
            transform: translateZ(55px);
 +
        }
 +
        .button:hover:before {
 +
            transform: translateZ(-55px);
 +
        }
 +
        .button:active {
 +
            transform: translateZ(20px);
 +
        }
 +
        .button:active:before {
 +
            transform: translateZ(-20px);
 +
            top: 12px;
 +
        }
 +
        .nav__link:hover{
 +
            background-color: transparent;
 +
        }
 +
    </style>
 +
    <link rel="stylesheet" href="filtercss/main.css">
 +
    <link rel="stylesheet" href="dist/sortable.min.css">
 +
    <script type="text/javascript" src="./dist/sortable.min.js"></script>
 +
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
 +
    <link rel="stylesheet" type="text/css" href="css/homepage.css">
 +
    <link rel="stylesheet" type="text/css" href="imgcss/style1.css" />
 +
    <script src="imgjs/modernizr-custom.js"></script>
 +
    <style>
 +
        a{
 +
            text-decoration: none;
 +
        }
 +
        a:hover{
 +
            text-decoration: none;
 +
        }
 +
    </style>
 +
</head>
 +
 
 +
 
 +
 
 +
<body style="padding: 0px; background-color: transparent">
 +
<!-- Button trigger modal -->
 +
<!-- Modal -->
 +
<div class="modal fade bs-example-modal-lg" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="box-shadow: none; margin-top: 0px">
 +
    <div class="modal-dialog modal-lg" role="document" style="box-shadow: none; margin-top: 0px">
 +
        <div class="modal-content" style="box-shadow: none; border: none; background: transparent; margin-top: 0px">
 +
            <div class="modal-header" style="border: none">
 +
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true" style="color: white; opacity: unset">&times;</span></button>
 +
            </div>
 +
            <div class="modal-body" style="border: none">
 +
                <img class="abstract" src="images/home1.png">
 +
            </div>
 
         </div>
 
         </div>
−
        <div class="col-md-2 col-sm-1 col-xs-1"></div>
 
 
     </div>
 
     </div>
 
</div>
 
</div>
−
</body>
 
  
 +
<div class="modal fade bs-example-modal-lg" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="box-shadow: none; margin-top: 0px">
 +
    <div class="modal-dialog modal-lg" role="document" style="box-shadow: none; margin-top: 0px">
 +
        <div class="modal-content" style="box-shadow: none; border: none; background: transparent; margin-top: 0px">
 +
            <div class="modal-header" style="border: none">
 +
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true" style="color: white; opacity: unset">&times;</span></button>
 +
            </div>
 +
            <div class="modal-body" style="border: none">
 +
                <img class="abstract" src="images/home2.png">
 +
            </div>
 +
        </div>
 +
    </div>
 +
</div>
  
 +
<div class="modal fade bs-example-modal-lg" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="box-shadow: none; margin-top: 0px">
 +
    <div class="modal-dialog modal-lg" role="document" style="box-shadow: none; margin-top: 0px">
 +
        <div class="modal-content" style="box-shadow: none; border: none; background: transparent; margin-top: 0px">
 +
            <div class="modal-header" style="border: none">
 +
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true" style="color: white; opacity: unset">&times;</span></button>
 +
            </div>
 +
            <div class="modal-body" style="border: none">
 +
                <img class="abstract" src="images/home3.png">
 +
            </div>
 +
        </div>
 +
    </div>
 +
</div>
  
  
 +
 +
 +
 +
<nav class="navbar navbar-default navbar-fixed-top" style="box-shadow: 1px 2px 4px rgba(43,43,43,0.5); margin-bottom: 0px">
 +
    <div class="container-fluid">
 +
        <!-- Brand and toggle get grouped for better mobile display -->
 +
        <div class="navbar-header">
 +
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
 +
                <span class="sr-only">Toggle navigation</span>
 +
                <span class="icon-bar"></span>
 +
                <span class="icon-bar"></span>
 +
                <span class="icon-bar"></span>
 +
            </button>
 +
            <a class="navbar-brand" href="#">Brand</a>
 +
        </div>
 +
 +
        <!-- Collect the nav links, forms, and other content for toggling -->
 +
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
 +
            <ul class="nav navbar-nav">
 +
                <li style="margin-left: 100px"><a href="homePage.html">Home</a></li>
 +
                <li class="dropdown">
 +
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Project <span class="caret"></span></a>
 +
                    <ul class="dropdown-menu">
 +
                        <li><a href="#">...</a></li>
 +
                        <li><a href="#">...</a></li>
 +
                    </ul>
 +
                </li>
 +
                <li class="dropdown">
 +
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Modelling <span class="caret"></span></a>
 +
                    <ul class="dropdown-menu">
 +
                        <li><a href="Modeling.html">Our Model</a></li>
 +
                        <li><a href="Modelling1.html">Modelling 1</a></li>
 +
                        <li><a href="Modelling%202.html">Modelling 2</a></li>
 +
                        <li><a href="Modelling3.html">Modelling 3</a></li>
 +
                    </ul>
 +
                </li>
 +
                <li class="dropdown">
 +
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Notebook <span class="caret"></span></a>
 +
                    <ul class="dropdown-menu">
 +
                        <li><a href="Lab%20Book.html">Lab Book</a></li>
 +
                    </ul>
 +
                </li>
 +
                <li class="dropdown">
 +
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Team <span class="caret"></span></a>
 +
                    <ul class="dropdown-menu">
 +
                        <li><a href="Members.html">Members</a></li>
 +
                        <li><a href="#">Attribution</a></li>
 +
                        <li><a href="#">Collaboration</a></li>
 +
                    </ul>
 +
                </li>
 +
                <li><a href="#">Safety</a></li>
 +
                <li><a href="#">InterLab</a></li>
 +
            </ul>
 +
 +
        </div><!-- /.navbar-collapse -->
 +
    </div><!-- /.container-fluid -->
 +
</nav>
 +
 +
 +
<div id="carousel-example-generic" class="container-fluid carousel slide visible-lg visible-md visible-sm visible-xs" data-ride="carousel" style="width: 100%; height: 620px; border-radius: 0px; margin-top: 50px">
 +
    <!-- Indicators -->
 +
    <ol class="carousel-indicators">
 +
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
 +
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
 +
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
 +
    </ol>
 +
 +
    <!-- Wrapper for slides -->
 +
    <div class="carousel-inner" role="listbox">
 +
        <div id="slidei" class="item active" style="height: 620px">
 +
            <div class="carousel-caption">
 +
                <h1>巨幕不知道放哪张图片</h1>
 +
                <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
 +
            </div>
 +
        </div>
 +
        <div id="slide1" class="item" style="height: 620px">
 +
            <div class="carousel-caption">
 +
                <h1>巨幕不知道放哪张图片</h1>
 +
                <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
 +
            </div>
 +
        </div>
 +
        <div class="item" style="height: 620px">
 +
            <div class="carousel-caption">
 +
                <h1>巨幕不知道放哪张图片</h1>
 +
                <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
 +
            </div>
 +
        </div>
 +
    </div>
 +
 +
    <!-- Controls -->
 +
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
 +
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
 +
        <span class="sr-only">Previous</span>
 +
    </a>
 +
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
 +
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
 +
        <span class="sr-only">Next</span>
 +
    </a>
 +
</div>
 +
 +
 +
<!--<div class="visible-lg visible-md visible-sm" style="height: 200px; padding-top: 60px; text-align: center">
 +
    <a href="#anchor" id="downButton"><button type="button" class="btn btn-default btn-lg animated flipInY">Default button</button></a>
 +
</div>-->
 +
<div id="anchor">
 +
</div>
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
<div class="container-fluid" style="padding-bottom:80px; background-color: rgb(84,146,197); background-position: center; padding-right: 0px; padding-left: 0px">
 +
    <div style="background-color: white; box-shadow: 0px 0px 4px rgba(0,0,0,0.56);">
 +
    <div class="container-fluid" id="partOne" style="padding-left: 80px; padding-right: 80px">
 +
        <div class="container-fluid" style="background-color: white; padding-top:50px; width: 100%; margin-top: 0px;">
 +
 +
            <div class="col-md-7 wow">
 +
                <h1 style="font-size: 40px; color: gray">First featurette heading.</h1>
 +
                <h2 style="font-size: 30px; color: rgba(0,0,0,0.34)">It'll blow your mind.</h2>
 +
                <p style="font-size: 18px">
 +
                    Donec ullamcorper nulla non metus auctor fringilla.
 +
                    Vestibulum id ligula porta felis euismod semper.
 +
                    Praesent commodo cursus magna, vel scelerisque nisl consectetur.
 +
                    Fusce dapibus, tellus ac cursus commodo.
 +
                    Donec ullamcorper nulla non metus auctor fringilla.
 +
                    Vestibulum id ligula porta felis euismod semper.
 +
                    Praesent commodo cursus magna, vel scelerisque nisl consectetur.
 +
                    Fusce dapibus, tellus ac cursus commodo.
 +
                    Praesent commodo cursus magna, vel scelerisque nisl consectetur.
 +
                    Fusce dapibus, tellus ac cursus commodo.
 +
                    Praesent commodo cursus magna, vel scelerisque nisl consectetur.
 +
                    Fusce dapibus, tellus ac cursus commodo.
 +
                </p>
 +
            </div>
 +
            <div class="col-md-5 center hidden-xs hidden-sm" style="text-align: center; padding-top: 20px">
 +
                <img data-toggle="tooltip" data-placement="top" title="听说好像要做成这种效果，但是不知道内容是什么" style="width: 70%" class="abstract wow hvr-grow" src="images/home1.png" onclick="clickImage()">
 +
            </div>
 +
        </div>
 +
    </div>
 +
 +
    <div class="container-fluid" style="padding-top: 40px;padding-left: 80px; padding-right: 80px" id="partTwo">
 +
        <div class="container-fluid" style="background-color: white; padding-top:50px; width: 100%; margin-top: 0px; border-top: 1px solid #337ab7">
 +
 +
            <div class="col-md-5 center hidden-xs hidden-sm" style="text-align: left; padding-top: 20px">
 +
 +
                    <img data-toggle="tooltip" data-placement="top" title="这张也没告诉我" class="abstract wow hvr-grow" src="images/home2.png" onclick="clickImage1()">
 +
            </div>
 +
            <div class="col-md-7 wow">
 +
                <h1 style="font-size: 40px; color: gray">First featurette heading.</h1>
 +
                <h2 style="font-size: 30px; color: rgba(0,0,0,0.34)">It'll blow your mind.</h2>
 +
                <p style="font-size: 18px">
 +
                    Donec ullamcorper nulla non metus auctor fringilla.
 +
                    Vestibulum id ligula porta felis euismod semper.
 +
                    Praesent commodo cursus magna, vel scelerisque nisl consectetur.
 +
                    Fusce dapibus, tellus ac cursus commodo.
 +
                    Donec ullamcorper nulla non metus auctor fringilla.
 +
                    Vestibulum id ligula porta felis euismod semper.
 +
                    Praesent commodo cursus magna, vel scelerisque nisl consectetur.
 +
                    Fusce dapibus, tellus ac cursus commodo.
 +
                    Praesent commodo cursus magna, vel scelerisque nisl consectetur.
 +
                    Fusce dapibus, tellus ac cursus commodo.
 +
                    Praesent commodo cursus magna, vel scelerisque nisl consectetur.
 +
                    Fusce dapibus, tellus ac cursus commodo.
 +
                </p>
 +
            </div>
 +
 +
        </div>
 +
    </div>
 +
 +
    <div class="container-fluid" style="padding-top: 50px;padding-left: 80px; padding-right: 80px" id="partThree">
 +
        <div class="container-fluid" style="background-color: white; padding-top:50px; padding-bottom: 50px; width: 100%; margin-top: 0px; border-top: 1px solid #337ab7">
 +
 +
            <div class="col-md-7 wow">
 +
                <h1 style="font-size: 40px; color: gray">First featurette heading.</h1>
 +
                <h2 style="font-size: 30px; color: rgba(0,0,0,0.34)">It'll blow your mind.</h2>
 +
                <p style="font-size: 18px">
 +
                    Donec ullamcorper nulla non metus auctor fringilla.
 +
                    Vestibulum id ligula porta felis euismod semper.
 +
                    Praesent commodo cursus magna, vel scelerisque nisl consectetur.
 +
                    Fusce dapibus, tellus ac cursus commodo.
 +
                    Donec ullamcorper nulla non metus auctor fringilla.
 +
                    Vestibulum id ligula porta felis euismod semper.
 +
                    Praesent commodo cursus magna, vel scelerisque nisl consectetur.
 +
                    Fusce dapibus, tellus ac cursus commodo.
 +
                    Praesent commodo cursus magna, vel scelerisque nisl consectetur.
 +
                    Fusce dapibus, tellus ac cursus commodo.
 +
                    Praesent commodo cursus magna, vel scelerisque nisl consectetur.
 +
                    Fusce dapibus, tellus ac cursus commodo.
 +
                </p>
 +
            </div>
 +
            <div class="col-md-5 center hidden-xs hidden-sm" style="text-align: center; padding-top: 20px">
 +
                <img data-toggle="tooltip" data-placement="bottom" title="这张同样没告诉我" style="width: 60%" class="abstract wow hvr-grow" src="images/home3.png" onclick="clickImage2()">
 +
            </div>
 +
        </div>
 +
    </div>
 +
    </div>
 +
</div>
 +
 +
 +
 +
 +
 +
 +
 +
<div style="border-top: 1px solid rgba(0,0,0,0.15); background-color: white; padding-bottom: 50px">
 +
    <div style="text-align: center; padding-top: 40px; ">
 +
        <h1 style="margin: 0px auto; font-family:'Impact'; color: #337ab7;">Collaborators and Supporters</h1>
 +
    </div>
 +
    <div class="container-fluid" style="margin-top: 50px">
 +
        <div class="row" style="padding: 0px 100px">
 +
            <div class="col-md-4" style="padding:0 5%;">
 +
                <div style="height: 100%">
 +
                    <img style="margin-top: 50px" src="images/qide.png">
 +
                    <img style="margin-top: 70px" src="images/NEB_logo.png">
 +
                </div>
 +
            </div>
 +
            <div class="col-md-4" style="padding:0 5%;">
 +
                <div style="height: 100%">
 +
                    <img src="images/Genscript.png">
 +
                    <img style="margin-top: 30px" src="images/xjtlubio.png">
 +
                </div>
 +
            </div>
 +
            <div class="col-md-4" style="padding:0 5%;">
 +
                <div>
 +
                    <img style="margin-top: 60px" src="images/math.png">
 +
                    <img style="margin-top: 100px" src="images/Synbio_tech_logo.png">
 +
                </div>
 +
            </div>
 +
        </div>
 +
    </div>
 +
</div>
 +
<div class="container-fluid" style="border-top: 1px solid rgba(0,0,0,0.15); height: 240px; padding-top: 30px; background-color: rgb(84,146,197);">
 +
 +
 +
 +
    <div class="row" style="padding: 0px 50px">
 +
        <div class="col-md-1"></div>
 +
        <div class="col-md-4">
 +
            <div>
 +
                <p style="font-size: 26px; font-family:'Open-Sans-L'; color: white;">Location</p>
 +
            </div>
 +
            <div>
 +
                <p style="line-height: 15px; font-size: 16px;font-family:'Lato-Light'; color: white;">Rm 363, Science Building</p>
 +
                <p style="line-height: 15px; font-size: 16px;font-family:'Lato-Light'; color: white;">Xi'an Jiaotong-Liverpool University</p>
 +
                <p style="line-height: 15px; font-size: 16px;font-family:'Lato-Light'; color: white;">111 Ren'ai Road, Suzhou, China</p>
 +
                <p style="line-height: 16px; font-size: 16px;font-family:'Lato-Light'; color: white;">215123</p>
 +
            </div>
 +
        </div>
 +
        <div class="col-md-4">
 +
            <div>
 +
                <p style="font-size: 26px; font-family:'Open-Sans-L'; color: white;">Social</p>
 +
            </div>
 +
            <div>
 +
                <p style="line-height: 15px; font-size: 16px;font-family:'Lato-Light'; color: white;">FB</p>
 +
            </div>
 +
        </div>
 +
        <div class="col-md-3">
 +
            <div>
 +
                <p style="font-size: 26px; font-family:'Open-Sans-L'; color: white;">Get in touch</p>
 +
            </div>
 +
            <div>
 +
                <p style="line-height: 15px; font-size: 16px;font-family:'Lato-Light'; color: white;">igem@xjtlu.edu.cn</p>
 +
            </div>
 +
        </div>
 +
    </div>
 +
</div>
 +
 +
 +
 +
 +
<script>
 +
    function clickImage() {
 +
        $('#myModal').modal('show');
 +
    }
 +
</script>
 +
<script>
 +
    function clickImage1() {
 +
        $('#myModal1').modal('show');
 +
    }
 +
</script>
 +
<script>
 +
    function clickImage2() {
 +
        $('#myModal2').modal('show');
 +
    }
 +
</script>
 +
 +
<script type="text/javascript" src="javascript/wow.min.js"></script>
 +
<script type="text/javascript" src="javascript/bootstrap.min.js"></script>
 +
<script type="text/javascript">
 +
    new WOW().init();
 +
</script>
 +
 +
<script>
 +
 +
    $('.jump').hover(function () {
 +
        $(this.firstElementChild).addClass('animated bounce');
 +
    },3);
 +
 +
</script>
 +
<script src="imgjs/imagesloaded.pkgd.min.js"></script>
 +
<script src="imgjs/masonry.pkgd.min.js"></script>
 +
<script src="imgjs/classie.js"></script>
 +
<script src="imgjs/main.js"></script>
 +
<script>
 +
    (function() {
 +
        // create SVG circle overlay and append it to the preview element
 +
        function createCircleOverlay(previewEl) {
 +
            var dummy = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
 +
            dummy.setAttributeNS(null, 'version', '1.1');
 +
            dummy.setAttributeNS(null, 'width', '100%');
 +
            dummy.setAttributeNS(null, 'height', '100%');
 +
            dummy.setAttributeNS(null, 'class', 'overlay');
 +
            var g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
 +
            var circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
 +
            circle.setAttributeNS(null, 'cx', 0);
 +
            circle.setAttributeNS(null, 'cy', 0);
 +
            circle.setAttributeNS(null, 'r', Math.sqrt(Math.pow(previewEl.offsetWidth,2) + Math.pow(previewEl.offsetHeight,2)));
 +
            dummy.appendChild(g);
 +
            g.appendChild(circle);
 +
            previewEl.appendChild(dummy);
 +
        }
 +
 +
        new GridFx(document.querySelector('.grid'), {
 +
            onInit : function(instance) {
 +
                createCircleOverlay(instance.previewEl);
 +
            },
 +
            onResize : function(instance) {
 +
                instance.previewEl.querySelector('svg circle').setAttributeNS(null, 'r', Math.sqrt(Math.pow(instance.previewEl.offsetWidth,2) + Math.pow(instance.previewEl.offsetHeight,2)));
 +
            },
 +
            onOpenItem : function(instance, item) {
 +
                // item's image
 +
                var gridImg = item.querySelector('img'),
 +
                    gridImgOffset = gridImg.getBoundingClientRect(),
 +
                    win = {width: document.documentElement.clientWidth, height: window.innerHeight},
 +
                    SVGCircleGroupEl = instance.previewEl.querySelector('svg > g'),
 +
                    SVGCircleEl = SVGCircleGroupEl.querySelector('circle');
 +
 +
                SVGCircleEl.setAttributeNS(null, 'r', Math.sqrt(Math.pow(instance.previewEl.offsetWidth,2) + Math.pow(instance.previewEl.offsetHeight,2)));
 +
                // set the transform for the SVG g node. This will animate the circle overlay. The origin of the circle depends on the position of the clicked item.
 +
                if( gridImgOffset.left + gridImg.offsetWidth/2<win.width/2 ) {
 +
                    SVGCircleGroupEl.setAttributeNS(null, 'transform', 'translate(' + win.width + ', ' + (gridImgOffset.top + gridImg.offsetHeight/2 < win.height/2 ? win.height : 0) + ')');
 +
                }
 +
                else {
 +
                    SVGCircleGroupEl.setAttributeNS(null, 'transform', 'translate(0, ' + (gridImgOffset.top + gridImg.offsetHeight/2 < win.height/2 ? win.height : 0) + ')');
 +
                }
 +
            }
 +
        });
 +
    })();
 +
</script>
 +
 +
<script>
 +
    $(function () {
 +
        $('[data-toggle="tooltip"]').tooltip()
 +
    })
 +
    $('#frfr').tooltip(options)
 +
</script>
 +
</body>
  
 
</html>
 
</html>

Revision as of 17:33, 10 October 2018

First featurette heading.

It'll blow your mind.

Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo. Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.

First featurette heading.

It'll blow your mind.

Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo. Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.

First featurette heading.

It'll blow your mind.

Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo. Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.

Collaborators and Supporters

Location

Rm 363, Science Building

Xi'an Jiaotong-Liverpool University

111 Ren'ai Road, Suzhou, China

215123

Social

FB

Get in touch

igem@xjtlu.edu.cn