Difference between revisions of "Team:SYSU-MEDICINE"

 
(71 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 17: Line 17:
 
     <style>
 
     <style>
 
         /*font*/
 
         /*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*/
 
         /*override wiki*/
Line 37: Line 44:
 
         #globalWrapper {
 
         #globalWrapper {
 
             font-size: 100%;
 
             font-size: 100%;
 +
            padding-bottom: 0;
 
         }
 
         }
         .mw-content-ltr ol, .mw-content-rtl .mw-content-ltr ol{
+
         #content {
             margin: 0;
+
             margin-bottom: 0;
 
         }
 
         }
 
         /*nav*/
 
         /*nav*/
Line 46: Line 54:
 
             height: 50px;
 
             height: 50px;
 
             margin-bottom:0;
 
             margin-bottom:0;
 +
            z-index: 25;
 
         }
 
         }
 
         .navbar-inverse .navbar-brand {
 
         .navbar-inverse .navbar-brand {
Line 57: 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*/
 
         .carousel {
 
         .carousel {
 
             margin-bottom: -30px;
 
             margin-bottom: -30px;
 +
            background-color: #f2f2f2;
 
         }
 
         }
 
         .carousel-control.left, .carousel-control.left:hover, .carousel-control.right, .carousel-control.right:hover{
 
         .carousel-control.left, .carousel-control.left:hover, .carousel-control.right, .carousel-control.right:hover{
Line 77: Line 94:
 
         }
 
         }
 
         .carousel-inner{
 
         .carousel-inner{
             top:-25px;
+
             top:-35px;
 
         }
 
         }
 
         .carousel-caption {
 
         .carousel-caption {
             top: 60px;
+
             top: 100px;
 
         }
 
         }
 
         .carousel-caption h1{
 
         .carousel-caption h1{
Line 89: Line 106:
 
         }
 
         }
 
         .carousel-indicators{
 
         .carousel-indicators{
             bottom: 220px;
+
             bottom: 160px;
 +
        }
 +
        ol.carousel-indicators{
 +
            margin: 0 auto;
 +
            width: auto;
 +
            left: 47%;
 
         }
 
         }
 
         /*video container*/
 
         /*video container*/
         .jumbotron {
+
         #jumbo-video.jumbotron {
 
             background-color: #f2f2f2;
 
             background-color: #f2f2f2;
 +
            padding-top: 0;
 +
            padding-bottom: 0;
 
         }
 
         }
         .video-caontainer {
+
         .video-container {
 
             position: relative;
 
             position: relative;
             top:-200px;
+
             top:-100px;
            height:400px;
+
 
             width:1170px;
 
             width:1170px;
 
             background-color: #fff;
 
             background-color: #fff;
 
             margin:0 auto;
 
             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;
 +
 +
        }
 +
        #jumbo-footer.jumbotron>.footer-container{
 +
            width: 1170px;
 +
            margin: 20px auto;
 +
            font-size: 18px;
 +
            color: #888;
 +
            /*font-weight: bold;*/
 +
        }
 +
        #jumbo-footer.jumbotron>.footer-container .line{
 +
            height: 2px;
 +
            background-color: #bbb;
 +
            width: 100%;
 +
        }
 +
        #jumbo-footer.jumbotron>.footer-container .contact {
 +
            margin-top: 20px;
 +
            margin-left: 10px;
 +
            height: 140px;
 +
        }
 +
        #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;
 +
 +
        }
 +
        .index-content .img-container .my-icon>img{
 +
            position: absolute;
 +
            width: 100%;
 +
            height: 100%;
 +
            z-index:2;
 +
        }
 +
        .index-content .img-container .my-icon>img:hover{
 +
            cursor: pointer;
 +
        }
 +
        .index-content .img-container .my-card{
 +
            position: relative;
 +
            display: none;
 +
            width: 500px;
 +
            top: 25px;
 +
            left: 25px;
 +
            z-index: 10;
 +
            right: 470px;
 +
        }
 +
        .index-content .img-container .my-card>img{
 +
            width: 100%;
 +
        }
 +
        .index-content .img-container .my-card>.card-text{
 +
            position: relative;
 +
            left: 100px;
 +
            top: -72px;
 +
 +
        }
 +
        .index-content .img-container .my-card>.card-text>a{
 +
            font-size: 20px;
 +
            color: dodgerblue;
 +
        }
 +
        #icon-1{
 +
            left: 550px;
 +
            top: 110px;
 +
        }
 +
        #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>
 
     </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");
 +
 +
            });
 +
            $(".third-level-menu").mouseleave(function() {
 +
                console.log("mouse in");
 +
                $(this).removeClass("open");
 +
            });
 +
            $(".dropdown").mouseenter(function() {
 +
                $(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>
 
</head>
 
<body>
 
<body>
    <nav class="navbar navbar-inverse">
+
<nav class="navbar navbar-inverse">
        <div class="container-fluid">
+
    <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
+
        <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
+
        <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
+
            <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="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
+
                <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
+
                <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
+
                <span class="icon-bar"></span>
                </button>
+
            </button>
                <a class="navbar-brand" href="https://2016.igem.org/Team:SYSU-MEDICINE">
+
            <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">
+
                <img style="height: 40px; width: 40px; margin-top: -10px " src="https://2016.igem.org/wiki/skins/Igem/images/IGEM_white_letters.png">
                </a>
+
            </a>
                <a class="navbar-brand" href="https://2016.igem.org/Team:SYSU-MEDICINE">SYSU-MEDICINE</a>
+
            <a class="navbar-brand" href="https://2016.igem.org/Team:SYSU-MEDICINE">SYSU-MEDICINE</a>
            </div>
+
        </div>
  
            <!-- Collect the nav links, forms, and other content for toggling -->
+
        <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
+
            <ul class="nav navbar-nav navbar-right">
                    <li class="active"><a href="https://2016.igem.org/Team:SYSU-MEDICINE">HOME</a></li>
+
                <li class="active"><a href="https://2016.igem.org/Team:SYSU-MEDICINE">HOME</a></li>
                    <li class="dropdown">
+
                <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>
+
                    <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">
+
                    <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/Description">Description</a></li>
                            <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Collaborations">★  Collaborations</a></li>
+
                        <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Results">Results</a></li>
                         </ul>
+
                         <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Protocol">Protocol</a></li>
                    </li>
+
                        <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Notebook">Notebook</a></li>
                    <li class="dropdown">
+
                        <li class="dropdown third-level-menu">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">PROJECT<span class="caret"></span></a>
+
                            <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="dropdown-menu">
+
                             <ul class="third-level-list 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/Proof">Proof of Concept</a></li>
                            <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Design">★  Design</a></li>
+
                                <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Demonstrate">Demonstrate</a></li>
                            <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Experiments">Experiments</a></li>
+
                             </ul>
                             <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Proof">Proof of Concept</a></li>
+
                        </li>
                            <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Demonstrate">Demonstrate</a></li>
+
                    </ul>
                             <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Results">Results</a></li>
+
                </li>
                            <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Notebook">Notebook</a></li>
+
                <li class="dropdown">
                        </ul>
+
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">HUMAN PRACTICES<span class="caret"></span></a>
                    </li>
+
                    <ul class="dropdown-menu">
                    <li class="dropdown">
+
                        <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Our_Story">Our Story</a></li>
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">PARTS<span class="caret"></span></a>
+
                        <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Interview">Interview</a></li>
                        <ul class="dropdown-menu">
+
                        <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Ethics">Ethics</a></li>
                            <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Parts">Parts</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/Basic_Part">★ Basic Parts</a></li>
+
                         <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Products">Products</a></li>
                            <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Composite_Part">★ Composite Parts</a></li>
+
                        <li class="dropdown third-level-menu">
                            <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Part_Collection">★ Part Collection</a></li>
+
                            <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>
+
                            <ul class="third-level-list dropdown-menu">
                    </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/Safety">SAFETY</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/Attributions">★  ATTRIBUTIONS</a></li>
+
                                <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Integrated_Practices">Integrated Practices</a></li>
                    <li class="dropdown">
+
                                <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Engagement">Engagement</a></li>
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">HUMAN PRACTICES<span class="caret"></span></a>
+
                             </ul>
                        <ul class="dropdown-menu">
+
                        </li>
                            <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Human_Practices">Human Practices</a></li>
+
                    </ul>
                            <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/HP/Silver">★ Silver</a></li>
+
                </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/Modeling">MODELING</a></li>
                            <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Integrated_Practices">★ Integrated Practices</a></li>
+
                <li class="dropdown">
                             <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Engagement">★ Engagement</a></li>
+
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">TEAM<span class="caret"></span></a>
                        </ul>
+
                    <ul class="dropdown-menu">
                    </li>
+
                        <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Team">Team</a></li>
                    <li class="dropdown">
+
                        <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Attributions">Attributions</a></li>
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">AWARDS<span class="caret"></span></a>
+
                        <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Collaborations">Collaborations</a></li>
                        <ul class="dropdown-menu">
+
                    </ul>
                            <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Entrepreneurship">★ Entrepreneurship</a></li>
+
                </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>
+
  
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
+
                <li class="dropdown">
        <!-- Indicators -->
+
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">PARTS<span class="caret"></span></a>
        <ol class="carousel-indicators">
+
                    <ul class="dropdown-menu">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
+
                        <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Parts">Parts</a></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
+
                        <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Basic_Part">Basic Parts</a></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
+
                        <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Composite_Part">Composite Parts</a></li>
         </ol>
+
                        <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>
  
         <!-- Wrapper for slides -->
+
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner" role="listbox">
+
    <!-- Indicators -->
            <div class="item active">
+
    <ol class="carousel-indicators">
                <img style='height: auto ;width: 100%' src="https://static.igem.org/mediawiki/2016/2/26/Home_1.png" alt="SYSU-MEDICINE">
+
         <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <div class="carousel-caption">
+
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                    <h1>SYSU-MEDICINE</h1>
+
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                    <h2>MSCalvalry: MSCs of Next Generation</h2>
+
    </ol>
                 </div>
+
 
 +
    <!-- 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">
+
        </div>
                <img style='height: auto ;width: 100%' src="https://static.igem.org/mediawiki/2016/2/26/Home_1.png" alt="...">
+
        <div class="item">
                <div class="carousel-caption">
+
            <img style='height: auto ;width: 100%' src="https://static.igem.org/mediawiki/2016/f/f4/T--SYSU-MEDICINE--home-1.jpeg" alt="...">
                    <h1>SYSU-MEDICINE</h1>
+
            <div class="carousel-caption">
                    <h2>MSCalvalry: MSCs of Next Generation</h2>
+
                <h1 style="font-size:80px">SYSU-MEDICINE</h1>
                 </div>
+
                <h2 style="line-height:1.5;">MSCalvalry: </br>
 +
                 MSCs of Next Generation</h2>
 
             </div>
 
             </div>
            <div class="item">
+
        </div>
                <img style='height: auto ;width: 100%' src="https://static.igem.org/mediawiki/2016/2/26/Home_1.png" alt="...">
+
        <div class="item">
                <div class="carousel-caption">
+
            <img style='height: auto ;width: 100%' src="https://static.igem.org/mediawiki/2016/4/45/T--SYSU-MEDICINE--home-2.jpeg" alt="...">
                    <h1>SYSU-MEDICINE</h1>
+
            <div class="carousel-caption">
                    <h2>MSCalvalry: MSCs of Next Generation</h2>
+
                <h1 style="font-size:80px">SYSU-MEDICINE</h1>
                 </div>
+
                <h2 style="line-height:1.5;">MSCalvalry: </br>
 +
                 MSCs of Next Generation</h2>
 
             </div>
 
             </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>
    <div class="jumbotron">
 
        <div class="video-caontainer">
 
  
 +
    <!-- 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 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>
</body>
 
<!--
 
<div class="column full_size" >
 
<img src="https://static.igem.org/mediawiki/2016/2/26/Home_1.png">
 
 
</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>
<h2> Background </h2>
+
<p>
+
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.
+
<br>
+
<br>
+
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.
+
<br>
+
<br>
+
</p >
+
 
+
<h2>Current Design</h2>
+
<p>
+
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.
+
<br>
+
<br>
+
</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">
 +
                <img style="height: 100px" src="https://static.igem.org/mediawiki/2016/d/df/T--SYSU-MEDICINE--SYSU-MEDICINE.png">
 +
            </div>
 +
        </div>
 +
        <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 class="column half_size" >
 
<h5>Before you start: </h5>
 
<p> Please read the following pages:</p>
 
<ul>
 
<li>  <a href="https://2016.igem.org/Requirements">Requirements page </a> </li>
 
<li> <a href="https://2016.igem.org/Wiki_How-To">Wiki Requirements page</a></li>
 
<li> <a href="https://2016.igem.org/Resources/Template_Documentation"> Template Documentation </a></li>
 
</ul>
 
 
</div>
 
</div>
  
<div class="column half_size" >
+
<!-- Wechat QRCode Modal -->
<div class="highlight">
+
<div class="modal fade" id="wechatModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="false">
<h5> Styling your wiki </h5>
+
    <div class="modal-dialog" role="document">
<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>
+
        <div class="modal-content">
<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 class="column full_size" >
+
            <div class="modal-body">
<h5> Wiki template information </h5>
+
                <img style="height: 300px;width: 300px;" src="https://static.igem.org/mediawiki/2016/0/07/T--SYSU-MEDICINE--wechat-qrcode.png">
<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>
 +
    </div>
 
</div>
 
</div>
 
+
</body>
 
+
 
+
 
+
<div class="column half_size" >
+
<h5> Editing your wiki </h5>
+
<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>
+
<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>
+
 
+
<div class="column half_size" >
+
<h5>Tips</h5>
+
<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>
+
<ul>
+
<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" >
+
<h5>Inspiration</h5>
+
<p> You can also view other team wikis for inspiration! Here are some examples:</p>
+
<ul>
+
<li> <a href="https://2014.igem.org/Team:SDU-Denmark/"> 2014 SDU Denmark </a> </li>
+
<li> <a href="https://2014.igem.org/Team:Aalto-Helsinki">2014 Aalto-Helsinki</a> </li>
+
<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>
+
-->
+
 
+
 
+
 
+
 
+
 
+
 
</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.