Difference between revisions of "Team:SYSU-MEDICINE"

 
(73 intermediate revisions by 3 users not shown)
Line 9: Line 9:
 
     <link rel="icon" type="image/png" href="https://static.igem.org/mediawiki/2016/2/2a/T--SYSU-MEDICINE--logo_32%2A32.png" sizes="32x32">
 
     <link rel="icon" type="image/png" href="https://static.igem.org/mediawiki/2016/2/2a/T--SYSU-MEDICINE--logo_32%2A32.png" sizes="32x32">
 
     <!-- Latest compiled and minified CSS -->
 
     <!-- Latest compiled and minified CSS -->
−
     <link href='//cdn.webfont.youziku.com/webfonts/nomal/92549/46882/57f3d7e1f629d81a5077d03f.css' rel='stylesheet' type='text/css' />
+
     <!--<link href='//cdn.webfont.youziku.com/webfonts/nomal/92549/46882/57f3d7e1f629d81a5077d03f.css' rel='stylesheet' type='text/css' />-->
 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 
     <!--jQuery-->
 
     <!--jQuery-->
Line 16: Line 16:
 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
 
     <style>
 
     <style>
 +
        /*font*/
 +
        @font-face{font-family:"HelveticaNeueW02-45Ligh";src:url('//www.eyeem.com/css/fonts/88fcd49a-13c7-4d0c-86b1-ad1e258bd75d.eot?#iefix');src:url('//www.eyeem.com/css/fonts/88fcd49a-13c7-4d0c-86b1-ad1e258bd75d.eot?#iefix') format("eot"),url('//www.eyeem.com/css/fonts/9a2e4855-380f-477f-950e-d98e8db54eac.woff') format("woff"),url('//www.eyeem.com/css/fonts/fa82d0ee-4fbd-4cc9-bf9f-226ad1fcbae2.ttf') format("truetype"),url('//www.eyeem.com/css/fonts/48d599a6-92b5-4d43-a4ac-8959f6971853.svg#48d599a6-92b5-4d43-a4ac-8959f6971853') format("svg")}
 
         *{
 
         *{
−
             font-family:"Helvetica-Neue-635ac8fbe16985","Arial",sans-serif;
+
             font-family:"HelveticaNeueW02-45Ligh","Arial",sans-serif;
−
             letter-spacing: 0.1em;
+
             letter-spacing: 0.4px;
−
 
+
            line-height: 1.5em;
 +
        }
 +
        #HQ_page h1,#HQ_page h2,#HQ_page h3,#HQ_page h4,#HQ_page h5,#HQ_page p{
 +
            font-family:"HelveticaNeueW02-45Ligh","Arial",sans-serif;
 +
        }
 +
        #HQ_page p{
 +
            font-size: 20px;
 
         }
 
         }
 +
        /*override wiki*/
 
         .menu_wrapper, #top_title, #sideMenu{display: none;}
 
         .menu_wrapper, #top_title, #sideMenu{display: none;}
 
         #content {
 
         #content {
Line 35: Line 44:
 
         #globalWrapper {
 
         #globalWrapper {
 
             font-size: 100%;
 
             font-size: 100%;
 +
            padding-bottom: 0;
 
         }
 
         }
 +
        #content {
 +
            margin-bottom: 0;
 +
        }
 +
        /*nav*/
 
         .navbar {
 
         .navbar {
 
             border-radius: 0;
 
             border-radius: 0;
 
             height: 50px;
 
             height: 50px;
 +
            margin-bottom:0;
 +
            z-index: 25;
 
         }
 
         }
 
         .navbar-inverse .navbar-brand {
 
         .navbar-inverse .navbar-brand {
Line 50: Line 66:
 
         .navbar-inverse .navbar-nav>li>a {
 
         .navbar-inverse .navbar-nav>li>a {
 
             color: #fff;
 
             color: #fff;
−
             font-weight:600;
+
             font-weight:bold;
 
         }
 
         }
 
         .navbar-inverse .navbar-nav>li>a:hover {
 
         .navbar-inverse .navbar-nav>li>a:hover {
 
             color: #999;
 
             color: #999;
−
             font-weight:600;
+
             font-weight:bold;
 
         }
 
         }
−
         .mw-content-ltr ul, .mw-content-rtl .mw-content-ltr ul {
+
         .navbar-nav>li{
−
             margin: 0;
+
             top: -5px;
 
         }
 
         }
 +
        /*.mw-content-ltr ul, .mw-content-rtl .mw-content-ltr ul {*/
 +
        /*margin: 0 0.1;*/
 +
        /*}*/
 
         .dropdown-menu>li>a {
 
         .dropdown-menu>li>a {
 
             font-weight: 600;
 
             font-weight: 600;
 
         }
 
         }
 +
        .third-level-list {
 +
            top: -10px;
 +
            left: 150px;
 +
        }
 +
        /*carousel*/
 +
        .carousel {
 +
            margin-bottom: -30px;
 +
            background-color: #f2f2f2;
 +
        }
 +
        .carousel-control.left, .carousel-control.left:hover, .carousel-control.right, .carousel-control.right:hover{
 +
            background-image: linear-gradient(to right,rgba(0,0,0,.0) 0,rgba(0,0,0,0) 100%);
 +
        }
 +
        .carousel-inner{
 +
            top:-35px;
 +
        }
 +
        .carousel-caption {
 +
            top: 100px;
 +
        }
 +
        .carousel-caption h1{
 +
            font-weight:bolder;
 +
        }
 +
        .carousel-caption h2{
 +
            font-weight:bold;
 +
        }
 +
        .carousel-indicators{
 +
            bottom: 160px;
 +
        }
 +
        ol.carousel-indicators{
 +
            margin: 0 auto;
 +
            width: auto;
 +
            left: 47%;
 +
        }
 +
        /*video container*/
 +
        #jumbo-video.jumbotron {
 +
            background-color: #f2f2f2;
 +
            padding-top: 0;
 +
            padding-bottom: 0;
 +
        }
 +
        .video-container {
 +
            position: relative;
 +
            top:-100px;
 +
            width:1170px;
 +
            background-color: #fff;
 +
            margin:0 auto;
 +
            padding: 100px 150px;
 +
        }
 +
        .video-container>.video {
 +
            width: 100%;
 +
            margin-top: -10px;
 +
        }
 +
        .video-container>.text{
 +
            margin-left: 20px;
 +
            margin-right: 20px;
 +
            margin-top: 40px;
 +
            height: 270px;
 +
        }
 +
        .video-container>.text>.left {
 +
            width: 30%;
 +
            display: inline-block;
 +
            float: left;
 +
        }
 +
        .video-container>.text>.right {
 +
            width: 66%;
 +
            /*padding-top: 20px;*/
 +
            display:inline-block;
 +
            float:right;
 +
        }
 +
        .video-container>.text>.right p{
 +
            line-height: 1.5em;
 +
            font-size: 20px;
 +
            color: #333;
 +
        }
 +
        .video-container>.text>.left h1{
 +
            font-size: 40px;
 +
            font-weight: bold;
 +
            margin-top: 10px;
 +
            line-height: 1em;
 +
        }
 +
        .video-container>.text>.left h3{
 +
            font-size: 30px;
 +
            line-height: 1.3em;
 +
            margin-top: -20px;
 +
            color: #333;
 +
        }
 +
        #jumbo-footer.jumbotron {
 +
            padding-top: 20px;
 +
            padding-bottom: 30px;
 +
            margin-bottom: 0;
 +
        }
 +
        #jumbo-footer.jumbotron>.container {
 +
            width: 1300px;
 +
        }
 +
        #jumbo-footer.jumbotron>.container>.col-md-4{
 +
            padding-left:10px;
 +
            padding-right:10px;
 +
            height: 250px;
 +
        }
 +
        #jumbo-footer.jumbotron>.container>.col-md-4 .img-container{
 +
            height: 100%;
 +
            text-align:center;
 +
            overflow: hidden;
 +
        }
 +
        #jumbo-footer.jumbotron>.container>.col-md-4 img{
 +
            width: 100%;
 +
            height: 100%;
 +
            margin-top: 0;
 +
            margin-left: 0;
 +
        }
 +
        #jumbo-footer.jumbotron>.container>.col-md-4 img:hover{
 +
            width: 105%;
 +
            height: 105%;
 +
            margin-top: -6px;
 +
            margin-left: -8px;
 +
            cursor: pointer;
 +
            -webkit-transition: width 0.5s, height 0.5s, margin-top 0.5s, margin-left 0.5s;
 +
            -moz-transition: width 0.5s, height 0.5s, margin-top 0.5s, margin-left 0.5s;
 +
            -ms-transition: width 0.5s, height 0.5s, margin-top 0.5s, margin-left 0.5s;
 +
            -o-transition: width 0.5s, height 0.5s, margin-top 0.5s, margin-left 0.5s;
 +
            transition: width 0.5s, height 0.5s, margin-top 0.5s, margin-left 0.5s;
  
−
    </style>
+
        }
−
</head>
+
        #jumbo-footer.jumbotron>.footer-container{
−
<body>
+
            width: 1170px;
−
    <nav class="navbar navbar-inverse">
+
            margin: 20px auto;
−
         <div class="container-fluid">
+
            font-size: 18px;
−
             <!-- Brand and toggle get grouped for better mobile display -->
+
            color: #888;
−
             <div class="navbar-header">
+
            /*font-weight: bold;*/
−
                <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>
+
        #jumbo-footer.jumbotron>.footer-container .line{
−
                    <span class="icon-bar"></span>
+
            height: 2px;
−
                    <span class="icon-bar"></span>
+
            background-color: #bbb;
−
                    <span class="icon-bar"></span>
+
            width: 100%;
−
                </button>
+
         }
−
                <a class="navbar-brand" href="https://2016.igem.org/Team:SYSU-MEDICINE">
+
        #jumbo-footer.jumbotron>.footer-container .contact {
−
                    <img style="height: 40px; width: 40px; margin-top: -10px " src="https://2016.igem.org/wiki/skins/Igem/images/IGEM_white_letters.png">
+
             margin-top: 20px;
−
                </a>
+
            margin-left: 10px;
−
                <a class="navbar-brand" href="https://2016.igem.org/Team:SYSU-MEDICINE">SYSU-MEDICINE</a>
+
            height: 140px;
−
             </div>
+
        }
 +
        #jumbo-footer.jumbotron>.footer-container .title{
 +
             font-weight: bold;
 +
        }
 +
        #jumbo-footer.jumbotron>.footer-container .contact ul{
 +
            list-style: none;
 +
            padding-left: 0;
 +
            margin-left: 0;
 +
        }
 +
        #jumbo-footer.jumbotron>.footer-container .contact ul.float-contact {
 +
            float:left;
 +
            width: 400px;
 +
        }
 +
        #jumbo-footer.jumbotron>.footer-container .contact ul li {
 +
            margin-top: 5px;
 +
            margin-bottom: 5px;
 +
        }
 +
        #jumbo-footer.jumbotron>.footer-container .contact ul li a img{
 +
            width: 30px;
 +
            height: 30px;
 +
        }
 +
        #jumbo-footer.jumbotron>.footer-container .contact ul li a {
 +
            color: #888;
 +
        }
 +
        #jumbo-footer.jumbotron>.footer-container .contact ul li a:hover, #jumbo-footer.jumbotron>.footer-container .contact ul li a:active, #jumbo-footer.jumbotron>.footer-container .contact ul li a:focus {
 +
            color: #888;
 +
            text-decoration: none;
 +
        }
 +
        #jumbo-footer.jumbotron>.footer-container .contact .float-contact-right {
 +
            float:right;
 +
        }
 +
        #jumbo-footer.jumbotron>.footer-container .copyright{
 +
            margin-top: 5px;
 +
        }
 +
        #jumbo-footer.jumbotron>.footer-container .copyright .text {
 +
            font-size: 16px;
 +
            float: left;
 +
        }
 +
        #jumbo-footer.jumbotron>.footer-container .copyright .icon{
 +
            float: right;
 +
        }
 +
        #jumbo-footer.jumbotron>.footer-container .copyright .icon img {
 +
            width: 25px;
 +
            height: 25px;
 +
        }
 +
        #wechatModal .modal-dialog{
 +
            width: 332px;
 +
            margin-top: 100px;
 +
            z-index: 2000;
 +
        }
 +
        /*img content*/
 +
        .index-content .img-container{
 +
            width: 1070px;
 +
            margin: 0 auto;
 +
            background-image: url("https://static.igem.org/mediawiki/2016/6/64/T--SYSU-MEDICINE--home-home-body-img2.png");
 +
            background-repeat: no-repeat;
 +
            background-size: cover;
 +
            height: 1400px;
 +
        }
 +
        .index-content .img-container .my-icon{
 +
             position:relative;
 +
            width: 60px;
 +
            height: 60px;
  
−
            <!-- Collect the nav links, forms, and other content for toggling -->
+
        }
−
             <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+
        .index-content .img-container .my-icon>img{
−
                <ul class="nav navbar-nav navbar-right">
+
             position: absolute;
−
                    <li class="active"><a href="https://2016.igem.org/Team:SYSU-MEDICINE">HOME</a></li>
+
            width: 100%;
−
                    <li class="dropdown">
+
            height: 100%;
−
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">TEAM<span class="caret"></span></a>
+
            z-index:2;
−
                        <ul class="dropdown-menu">
+
        }
−
                            <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Team">Team</a></li>
+
        .index-content .img-container .my-icon>img:hover{
−
                            <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Collaborations">★  Collaborations</a></li>
+
            cursor: pointer;
−
                        </ul>
+
        }
−
                    </li>
+
        .index-content .img-container .my-card{
−
                    <li class="dropdown">
+
            position: relative;
−
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">PROJECT<span class="caret"></span></a>
+
            display: none;
−
                        <ul class="dropdown-menu">
+
            width: 500px;
−
                            <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Description">★  Description</a></li>
+
            top: 25px;
−
                            <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Design">★  Design</a></li>
+
            left: 25px;
−
                            <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Experiments">Experiments</a></li>
+
            z-index: 10;
−
                            <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Proof">★ Proof of Concept</a></li>
+
            right: 470px;
−
                            <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Demonstrate">★ Demonstrate</a></li>
+
        }
−
                            <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Results">Results</a></li>
+
        .index-content .img-container .my-card>img{
−
                            <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Notebook">Notebook</a></li>
+
            width: 100%;
−
                        </ul>
+
        }
−
                    </li>
+
        .index-content .img-container .my-card>.card-text{
−
                    <li class="dropdown">
+
            position: relative;
−
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">PARTS<span class="caret"></span></a>
+
            left: 100px;
−
                        <ul class="dropdown-menu">
+
             top: -72px;
−
                            <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Parts">Parts</a></li>
+
−
                            <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Basic_Part">★ Basic Parts</a></li>
+
−
                            <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Composite_Part">★ Composite Parts</a></li>
+
−
                            <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Part_Collection">★ Part Collection</a></li>
+
−
                        </ul>
+
−
                    </li>
+
−
                    <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Safety">SAFETY</a></li>
+
−
                    <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Attributions">★  ATTRIBUTIONS</a></li>
+
−
                    <li class="dropdown">
+
−
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">HUMAN PRACTICES<span class="caret"></span></a>
+
−
                        <ul class="dropdown-menu">
+
−
                            <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Human_Practices">Human Practices</a></li>
+
−
                            <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/HP/Silver">★ Silver</a></li>
+
−
                            <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/HP/Gold">★ Gold</a></li>
+
−
                            <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Integrated_Practices">★ Integrated Practices</a></li>
+
−
                            <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Engagement">★ Engagement</a></li>
+
−
                        </ul>
+
−
                    </li>
+
−
                    <li class="dropdown">
+
−
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">AWARDS<span class="caret"></span></a>
+
−
                        <ul class="dropdown-menu">
+
−
                            <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Entrepreneurship">★ Entrepreneurship</a></li>
+
−
                            <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Hardware">★ Hardware</a></li>
+
−
                            <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Software">★ Software</a></li>
+
−
                            <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Measurement">★  Measurement</a></li>
+
−
                            <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Model">★ Model</a></li>
+
−
                        </ul>
+
−
                    </li>
+
−
                </ul>
+
−
             </div><!-- /.navbar-collapse -->
+
−
        </div><!-- /.container-fluid -->
+
−
    </nav>
+
−
</body>
+
−
<!--
+
−
<div class="column full_size" >
+
−
<img src="https://static.igem.org/mediawiki/2016/2/26/Home_1.png">
+
−
</div>
+
  
−
<div class="column full_size" >
+
        }
−
<h2> Background </h2>
+
        .index-content .img-container .my-card>.card-text>a{
−
<p>
+
            font-size: 20px;
−
Mesenchymal stem cells (MSCs) are promising candidates for cell-based therapy to treat several diseases. Up to now, MSCs are used in over 600 ongoing clinical trials (June, 2016) like treating IBD, diabetes, encephalitis, etc. MSCs in current clinical use are isolated from bone marrow, adipose tissue and the umbilical cord. Different from the embryonic stem cells, MSCs have been shown to be highly immunosuppressive. In many studies, MSCs were found to suppress adaptive immune system as well as inherent immune system in multiple inflammatory diseases, which make MSCs a promising tool in treating inflammatory disease.
+
            color: dodgerblue;
−
<br>
+
        }
−
<br>
+
        #icon-1{
−
Despite significant advantages, clinical trials of MSCs have produced mixed results which may significantly impede the advancement of MSC-based therapies. One of the most important reasons is for the inefficient homing ability of MSC that only a few MSC can indeed arrived the inflamed tissue after systematic administration and exert their immunomodulatory function.
+
            left: 550px;
−
<br>
+
            top: 110px;
−
<br>
+
        }
−
</p >
+
        #icon-2{
 +
            left: 20px;
 +
            top: 120px;
 +
        }
 +
        #icon-3{
 +
            left: 20px;
 +
            top: 120px;
 +
        }
 +
        #icon-4{
 +
            left: 20px;
 +
            top: 120px;
 +
        }
 +
        #icon-5{
 +
            left: 550px;
 +
            top: 100px;
 +
        }
 +
        #icon-6{
 +
            left: 800px;
 +
            top: 530px;
 +
        }
 +
        #icon-7{
 +
            left: 480px;
 +
            top: 820px;
 +
        }
 +
        #icon-8{
 +
            left: 40px;
 +
            top: 730px;
 +
        }
 +
    </style>
 +
    <script type="text/javascript">
 +
        $(document).ready(function() {
 +
//          wechat qr code
 +
            var canHide= true;
 +
            $('#wechatModal').on('show.bs.modal', function (e) {
 +
                // do something...
 +
                $("#wechatModal").after('<div class="modal-backdrop fade in"></div>');
 +
            });
 +
            $(".modal").click(function() {
 +
//                console.log("click");
 +
                //$(this).remove();
 +
                if (canHide) {
 +
                    $(".modal-backdrop").remove();
 +
                    $('#wechatModal').modal('hide');
 +
                }
 +
            });
 +
            $(".modal-dialog").click(function() {
 +
                canHide = false;
 +
            });
 +
            $(".modal").mousemove(function() {
 +
                canHide = true;
 +
            });
 +
            $(".third-level-list").css("left", "120px");
 +
//          third level menu on nav
 +
            $(".third-level-menu").mouseenter(function() {
 +
                console.log("mouse in");
 +
                $(this).addClass("open");
  
−
<h2>Current Design</h2>
+
            });
−
<p>
+
            $(".third-level-menu").mouseleave(function() {
−
This summer, next generation of MSCs are coming. We intend to construct a circuit of three plasmids that will be able to reinforce the locating function of MSCs. Previous studies have demonstrated that immune cells depend on chemokine receptors to accomplish directional moving. In our project, we are going to empower MSCs with chemokine receptors in order to ensure its effective homing. At the same time, with the purpose of locating in vivo MSC and assuring their arrival at the inflamed tissue, we will introduce several kinds of positioning system into our system and detect them by various methods.
+
                console.log("mouse in");
−
<br>
+
                $(this).removeClass("open");
−
<br>
+
            });
−
</p>
+
            $(".dropdown").mouseenter(function() {
−
</div>
+
                $(this).addClass("open");
−
-->
+
            });
 +
            $(".dropdown").mouseleave(function() {
 +
                $(this).removeClass("open");
 +
            });
 +
//            card display
 +
            var containerTop = $(".img-container").offset().top;
 +
            var containerLeft= $(".img-container").offset().left;
 +
            var iconToCard = [];
 +
            for (var i = 1; i <= 8; ++i) {
 +
                var icon = $("#icon-" + i),
 +
                        card = $("#card-" + i),
 +
                        left,
 +
                        top;
 +
                iconToCard.push(card);
 +
                left = icon.offset().left + icon.width() - containerLeft;
 +
                top = icon.offset().top - containerTop;
 +
                console.log("left: "+left+" top: "+top);
 +
                if (left > 700) {
 +
                    console.log(card);
 +
//                    card.css("right", "470");
 +
                    card.css("left", "auto");
 +
                }
 +
            }
 +
            $(".my-icon").mouseenter(function() {
 +
                var id = $(this).attr("id");
 +
                var num = parseInt(id.split("-")[1]);
 +
                $(this).children("img").css("z-index", "20");
 +
//                iconToCard[num-1].css("display", "block");
 +
                iconToCard[num-1].fadeIn('fast');
 +
            });
 +
            $(".my-icon").mouseleave(function() {
 +
                var id = $(this).attr("id");
 +
                var num = parseInt(id.split("-")[1]);
  
 +
//                iconToCard[num-1].css("display", "none");
 +
                var t = $(this);
 +
                iconToCard[num-1].fadeOut({
 +
                    duration:'fast',
 +
                    done: function() {
 +
                        (function(t) {
 +
                            t.children("img").css("z-index", "2");
 +
                        })(t);
 +
                    }
 +
                });
 +
            });
 +
        });
 +
    </script>
 +
</head>
 +
<body>
 +
<nav class="navbar navbar-inverse">
 +
    <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="https://2016.igem.org/Team:SYSU-MEDICINE">
 +
                <img style="height: 40px; width: 40px; margin-top: -10px " src="https://2016.igem.org/wiki/skins/Igem/images/IGEM_white_letters.png">
 +
            </a>
 +
            <a class="navbar-brand" href="https://2016.igem.org/Team:SYSU-MEDICINE">SYSU-MEDICINE</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 navbar-right">
 +
                <li class="active"><a href="https://2016.igem.org/Team:SYSU-MEDICINE">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="https://2016.igem.org/Team:SYSU-MEDICINE/Description">Description</a></li>
 +
                        <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Results">Results</a></li>
 +
                        <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Protocol">Protocol</a></li>
 +
                        <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Notebook">Notebook</a></li>
 +
                        <li class="dropdown third-level-menu">
 +
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">For Judgement <span class="glyphicon glyphicon-chevron-right"></span></a>
 +
                            <ul class="third-level-list dropdown-menu">
 +
                                <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Proof">Proof of Concept</a></li>
 +
                                <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Demonstrate">Demonstrate</a></li>
 +
                            </ul>
 +
                        </li>
 +
                    </ul>
 +
                </li>
 +
                <li class="dropdown">
 +
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">HUMAN PRACTICES<span class="caret"></span></a>
 +
                    <ul class="dropdown-menu">
 +
                        <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Our_Story">Our Story</a></li>
 +
                        <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Interview">Interview</a></li>
 +
                        <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Ethics">Ethics</a></li>
 +
                        <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Legislation">Legislation</a></li>
 +
                        <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Products">Products</a></li>
 +
                        <li class="dropdown third-level-menu">
 +
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">For Judgement <span class="glyphicon glyphicon-chevron-right"></span></a>
 +
                            <ul class="third-level-list dropdown-menu">
 +
                                <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/HP/Silver">Silver</a></li>
 +
                                <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/HP/Gold">Gold</a></li>
 +
                                <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Integrated_Practices">Integrated Practices</a></li>
 +
                                <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Engagement">Engagement</a></li>
 +
                            </ul>
 +
                        </li>
 +
                    </ul>
 +
                </li>
 +
                <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Modeling">MODELING</a></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="https://2016.igem.org/Team:SYSU-MEDICINE/Team">Team</a></li>
 +
                        <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Attributions">Attributions</a></li>
 +
                        <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Collaborations">Collaborations</a></li>
 +
                    </ul>
 +
                </li>
  
 +
                <li class="dropdown">
 +
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">PARTS<span class="caret"></span></a>
 +
                    <ul class="dropdown-menu">
 +
                        <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Parts">Parts</a></li>
 +
                        <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Basic_Part">Basic Parts</a></li>
 +
                        <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Composite_Part">Composite Parts</a></li>
 +
                        <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Part_Collection">Part Collection</a></li>
 +
                    </ul>
 +
                </li>
 +
                <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Safety">SAFETY</a></li>
 +
                <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Judging">JUDGING</a></li>
 +
            </ul>
 +
        </div><!-- /.navbar-collapse -->
 +
    </div><!-- /.container-fluid -->
 +
</nav>
  
 +
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
 +
    <!-- 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 class="item active">
 +
            <img style='height: auto ;width: 100%' src="https://static.igem.org/mediawiki/2016/c/c3/T--SYSU-MEDICINE--home-3.jpeg" alt="SYSU-MEDICINE">
 +
            <div class="carousel-caption">
 +
               
 +
            </div>
 +
        </div>
 +
        <div class="item">
 +
            <img style='height: auto ;width: 100%' src="https://static.igem.org/mediawiki/2016/f/f4/T--SYSU-MEDICINE--home-1.jpeg" alt="...">
 +
            <div class="carousel-caption">
 +
                <h1 style="font-size:80px">SYSU-MEDICINE</h1>
 +
                <h2 style="line-height:1.5;">MSCalvalry: </br>
 +
                MSCs of Next Generation</h2>
 +
            </div>
 +
        </div>
 +
        <div class="item">
 +
            <img style='height: auto ;width: 100%' src="https://static.igem.org/mediawiki/2016/4/45/T--SYSU-MEDICINE--home-2.jpeg" alt="...">
 +
            <div class="carousel-caption">
 +
                <h1 style="font-size:80px">SYSU-MEDICINE</h1>
 +
                <h2 style="line-height:1.5;">MSCalvalry: </br>
 +
                MSCs of Next Generation</h2>
 +
            </div>
 +
        </div>
 +
    </div>
  
−
<!--
+
    <!-- Controls -->
−
<div class="column half_size" >
+
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
−
<h5>Before you start: </h5>
+
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
−
<p> Please read the following pages:</p>
+
        <span class="sr-only">Previous</span>
−
<ul>
+
    </a>
−
<li>  <a href="https://2016.igem.org/Requirements">Requirements page </a> </li>
+
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
−
<li> <a href="https://2016.igem.org/Wiki_How-To">Wiki Requirements page</a></li>
+
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
−
<li> <a href="https://2016.igem.org/Resources/Template_Documentation"> Template Documentation </a></li>
+
        <span class="sr-only">Next</span>
−
</ul>
+
    </a>
−
</div>
+
−
 
+
−
<div class="column half_size" >
+
−
<div class="highlight">
+
−
<h5> Styling your wiki </h5>
+
−
<p>You may style this page as you like or you can simply leave the style as it is. You can easily keep the styling and edit the content of these default wiki pages with your project information and completely fulfill the requirement to document your project.</p>
+
−
<p>While you may not win Best Wiki with this styling, your team is still eligible for all other awards. This default wiki meets the requirements, it improves navigability and ease of use for visitors, and you should not feel it is necessary to style beyond what has been provided.</p>
+
 
</div>
 
</div>
 +
<div id="jumbo-video" class="jumbotron">
 +
    <div class="video-container">
 +
        <div class="video">
 +
            <!--<img style="width:100%" src="https://static.igem.org/mediawiki/2016/1/1a/T&#45;&#45;SYSU-MEDICINE&#45;&#45;video.jpg">-->
 +
            <video width="870"  controls="controls" src="https://static.igem.org/mediawiki/2016/8/85/T--SYSU-MEDICINE--video.mp4"></video>
 +
        </div>
 +
        <div class="text">
 +
            <div class="left">
 +
                <h1>MSCavalry</h1>
 +
                <h3>-----MSCs of<br/>Next Generation</h3>
 +
            </div>
 +
            <div class="right">
 +
                <p>
 +
                    Inflammatory diseases are an increasing cause of disability and even fatality.
 +
                    Currently, apart from common treatments, MSCs therapy is a promising candidate for curing inflammatory diseases.
 +
                    However, intravascular injected MSCs are criticized for its low homing efficiency and ambiguous distribution in human body.
 +
                </p>
 +
                <p>
 +
                    This year, MSCavalry: MSCs of Next Generation is coming.
 +
                    SYSU-MEDICINE decided to engineer a set of MSCs (homo sapiens) with higher accuracy and we hope that our project can pave the way for future MSCs clinical application.
 +
                </p>
 +
            </div>
 +
        </div>
 +
    </div>
 
</div>
 
</div>
 +
<!--content-->
 +
<div class="index-content">
 +
    <div class="img-container">
 +
        <div class="my-icon" id="icon-1">
 +
            <img src="https://static.igem.org/mediawiki/2016/7/72/T--SYSU-MEDICINE--home-Button1.png">
 +
            <div class="my-card" id="card-1">
 +
                <img src="https://static.igem.org/mediawiki/2016/6/68/T--SYSU-MEDICINE--home-Card1.png">
 +
            </div>
 +
        </div>
 +
        <div class="my-icon" id="icon-2">
 +
            <img src="https://static.igem.org/mediawiki/2016/0/0e/T--SYSU-MEDICINE--home-Button4.png">
 +
            <div class="my-card" id="card-2">
 +
                <img src="https://static.igem.org/mediawiki/2016/b/b9/T--SYSU-MEDICINE--home-Card4.png">
 +
            </div>
 +
        </div>
 +
        <div class="my-icon" id="icon-3">
 +
            <img src="https://static.igem.org/mediawiki/2016/b/b5/T--SYSU-MEDICINE--home-Button3.png">
 +
            <div class="my-card" id="card-3">
 +
                <img src="https://static.igem.org/mediawiki/2016/e/ef/T--SYSU-MEDICINE--home-Card3.png">
 +
            </div>
 +
        </div>
 +
        <div class="my-icon" id="icon-4">
 +
            <img src="https://static.igem.org/mediawiki/2016/7/77/T--SYSU-MEDICINE--home-Button2.png">
 +
            <div class="my-card" id="card-4">
 +
                <img src="https://static.igem.org/mediawiki/2016/8/82/T--SYSU-MEDICINE--home-Card2.png">
 +
            </div>
 +
        </div>
 +
        <div class="my-icon" id="icon-5">
 +
            <img src="https://static.igem.org/mediawiki/2016/d/d3/T--SYSU-MEDICINE--home-Button5.png">
 +
            <div class="my-card" id="card-5">
 +
                <img src="https://static.igem.org/mediawiki/2016/2/2f/T--SYSU-MEDICINE--home-Card5.png">
 +
            </div>
 +
        </div>
 +
        <div class="my-icon" id="icon-6">
 +
            <img src="https://static.igem.org/mediawiki/2016/e/e6/T--SYSU-MEDICINE--home-Button6.png">
 +
            <div class="my-card" id="card-6">
 +
                <img src="https://static.igem.org/mediawiki/2016/d/d6/T--SYSU-MEDICINE--home-Card6.png">
 +
                <span class="card-text"><a href=" https://2016.igem.org/Team:SYSU-MEDICINE/Description">Click to go to the details page ></a></span>
 +
            </div>
 +
        </div>
 +
        <div class="my-icon" id="icon-7">
 +
            <img src="https://static.igem.org/mediawiki/2016/e/e6/T--SYSU-MEDICINE--home-Button7.png">
 +
            <div class="my-card" id="card-7">
 +
                <img src="https://static.igem.org/mediawiki/2016/d/d3/T--SYSU-MEDICINE--home-Card7.png">
 +
            </div>
 +
        </div>
 +
        <div class="my-icon" id="icon-8">
 +
            <img src="https://static.igem.org/mediawiki/2016/b/ba/T--SYSU-MEDICINE--home-Button8.png">
 +
            <div class="my-card" id="card-8">
 +
                <img src="https://static.igem.org/mediawiki/2016/b/b9/T--SYSU-MEDICINE--home-Card8.png">
 +
            </div>
 +
        </div>
  
−
<div class="column full_size" >
+
    </div>
−
<h5> Wiki template information </h5>
+
−
<p>We have created these wiki template pages to help you get started and to help you think about how your team will be evaluated. You can find a list of all the pages tied to awards here at the <a href="https://2016.igem.org/Judging/Pages_for_Awards/Instructions">Pages for awards</a> link. You must edit these pages to be evaluated for medals and awards, but ultimately the design, layout, style and all other elements of your team wiki is up to you!</p>
+
−
 
+
 
</div>
 
</div>
 +
<!--footer-->
 +
<div class="jumbotron" id="jumbo-footer">
 +
    <div class="container">
 +
        <div class="col-md-4">
 +
            <div class="img-container">
 +
                <img src="https://static.igem.org/mediawiki/2016/c/cc/T--SYSU-MEDICINE--home-part4-img1.png">
 +
            </div>
 +
        </div>
 +
        <div class="col-md-4">
 +
            <div class="img-container">
 +
                <img src="https://static.igem.org/mediawiki/2016/5/5e/T--SYSU-MEDICINE--home-part4-img2.jpeg">
 +
            </div>
 +
        </div>
 +
        <div class="col-md-4">
 +
            <div class="img-container">
 +
                <img src="https://static.igem.org/mediawiki/2016/f/fa/T--SYSU-MEDICINE--home-part4-img3.jpeg">
 +
            </div>
 +
        </div>
 +
    </div>
 +
    <div class="footer-container">
 +
        <div class="title">
 +
            Contact us
 +
        </div>
 +
        <div class="line"></div>
 +
        <div class="contact">
 +
            <ul class="float-contact">
 +
                <li>
 +
                    <a href="http://weibo.com/u/5999650333">
 +
                        <img style="height: 32px; width: 32px" src="https://static.igem.org/mediawiki/2016/0/06/T--SYSU-MEDICINE--weibo.png">
 +
                        iGEMxSYSU-MEDICINE
 +
                    </a>
 +
                </li>
 +
                <li>
 +
                    <a href="https://www.facebook.com/IGEM-SYSU-Medicine">
 +
                        <img style="height: 27px; width: 27px; margin-left: 2px;margin-right:2px;" src="https://static.igem.org/mediawiki/2016/a/a1/T--SYSU-MEDICINE--facebook.png">
 +
                        IGEM SYSU-Medicine
 +
                    </a>
 +
                </li>
 +
                <li>
 +
                    <a href="#">
 +
                        <img src="https://static.igem.org/mediawiki/2016/4/43/T--SYSU-MEDICINE--email.png">
 +
                        SYSU_MEDICINE@163.com
 +
                    </a>
 +
                </li>
 +
            </ul>
 +
            <ul class="float-contact">
 +
                <li>
 +
                    <a href="#" data-toggle="modal" data-target="#wechatModal">
 +
                        <img src="https://static.igem.org/mediawiki/2016/6/6e/T--SYSU-MEDICINE--wechat.png">
 +
                        SYSU-MEDICINE
 +
                    </a>
 +
                </li>
 +
                <li>
 +
                    <a href="https://twitter.com/IgemSysu">
 +
                        <img src="https://static.igem.org/mediawiki/2016/1/1c/T--SYSU-MEDICINE--twitter.png">
 +
                        iGEM SYSU-MEDICINE
 +
                    </a>
 +
                </li>
  
−
 
+
            </ul>
−
 
+
            <div class="float-contact-right">
−
 
+
                <img style="width: 140px" src="https://static.igem.org/mediawiki/2016/5/5e/T--SYSU-MEDICINE--Igemlogo_banner.png">
−
<div class="column half_size" >
+
                <img style="height: 100px" src="https://static.igem.org/mediawiki/2016/d/df/T--SYSU-MEDICINE--SYSU-MEDICINE.png">
−
<h5> Editing your wiki </h5>
+
            </div>
−
<p>On this page you can document your project, introduce your team members, document your progress and share your iGEM experience with the rest of the world! </p>
+
        </div>
−
<p> <a href="https://2016.igem.org/wiki/index.php?title=Team:Example&action=edit"> </a>Use WikiTools - Edit in the black menu bar to edit this page</p>
+
        <div class="line"></div>
 +
        <div class="copyright">
 +
            <div class="text">
 +
                &copy; 2016 SYSU-MEDICINE. All Rights Reserved.
 +
            </div>
 +
            <div class="icon" >
 +
                <img src="https://static.igem.org/mediawiki/2016/f/f5/T--SYSU-MEDICINE--china_2x.png">
 +
                <img src="https://static.igem.org/mediawiki/2016/a/a9/T--SYSU-MEDICINE--SYSU.png">
 +
            </div>
 +
        </div>
 +
    </div>
  
 
</div>
 
</div>
  
−
<div class="column half_size" >
+
<!-- Wechat QRCode Modal -->
−
<h5>Tips</h5>
+
<div class="modal fade" id="wechatModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="false">
−
<p>This wiki will be your team’s first interaction with the rest of the world, so here are a few tips to help you get started: </p>
+
    <div class="modal-dialog" role="document">
−
<ul>
+
        <div class="modal-content">
−
<li>State your accomplishments! Tell people what you have achieved from the start. </li>
+
−
<li>Be clear about what you are doing and how you plan to do this.</li>
+
−
<li>You have a global audience! Consider the different backgrounds that your users come from.</li>
+
−
<li>Make sure information is easy to find; nothing should be more than 3 clicks away.  </li>
+
−
<li>Avoid using very small fonts and low contrast colors; information should be easy to read.  </li>
+
−
<li>Start documenting your project as early as possible; don’t leave anything to the last minute before the Wiki Freeze. For a complete list of deadlines visit the <a href="https://2016.igem.org/Calendar">iGEM 2016 calendar</a> </li>
+
−
<li>Have lots of fun! </li>
+
−
</ul>
+
−
</div>
+
  
−
<div class="column half_size" >
+
            <div class="modal-body">
−
<h5>Inspiration</h5>
+
                <img style="height: 300px;width: 300px;" src="https://static.igem.org/mediawiki/2016/0/07/T--SYSU-MEDICINE--wechat-qrcode.png">
−
<p> You can also view other team wikis for inspiration! Here are some examples:</p>
+
            </div>
−
<ul>
+
 
−
<li> <a href="https://2014.igem.org/Team:SDU-Denmark/"> 2014 SDU Denmark </a> </li>
+
        </div>
−
<li> <a href="https://2014.igem.org/Team:Aalto-Helsinki">2014 Aalto-Helsinki</a> </li>
+
    </div>
−
<li> <a href="https://2014.igem.org/Team:LMU-Munich">2014 LMU-Munich</a> </li>
+
−
<li> <a href="https://2014.igem.org/Team:Michigan"> 2014 Michigan</a></li>
+
−
<li> <a href="https://2014.igem.org/Team:ITESM-Guadalajara">2014 ITESM-Guadalajara </a></li>
+
−
<li> <a href="https://2014.igem.org/Team:SCU-China"> 2014 SCU-China </a></li>
+
−
</ul>
+
 
</div>
 
</div>
−
-->
+
</body>
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
 
</html>
 
</html>

Latest revision as of 02:56, 20 October 2016

MSCavalry

-----MSCs of
Next Generation

Inflammatory diseases are an increasing cause of disability and even fatality. Currently, apart from common treatments, MSCs therapy is a promising candidate for curing inflammatory diseases. However, intravascular injected MSCs are criticized for its low homing efficiency and ambiguous distribution in human body.

This year, MSCavalry: MSCs of Next Generation is coming. SYSU-MEDICINE decided to engineer a set of MSCs (homo sapiens) with higher accuracy and we hope that our project can pave the way for future MSCs clinical application.