Difference between revisions of "Team:SYSU-MEDICINE"

 
(56 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{
 
         #HQ_page h1,#HQ_page h2,#HQ_page h3,#HQ_page h4,#HQ_page h5,#HQ_page p{
−
             font-family:"Helvetica-Neue-635ac8fbe16985","Arial",sans-serif;
+
             font-family:"HelveticaNeueW02-45Ligh","Arial",sans-serif;
 
         }
 
         }
 
         #HQ_page p{
 
         #HQ_page p{
Line 53: Line 54:
 
             height: 50px;
 
             height: 50px;
 
             margin-bottom:0;
 
             margin-bottom:0;
 +
            z-index: 25;
 
         }
 
         }
 
         .navbar-inverse .navbar-brand {
 
         .navbar-inverse .navbar-brand {
Line 64: 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;
 +
        }
 +
        .navbar-nav>li{
 +
            top: -5px;
 
         }
 
         }
 
         /*.mw-content-ltr ul, .mw-content-rtl .mw-content-ltr ul {*/
 
         /*.mw-content-ltr ul, .mw-content-rtl .mw-content-ltr ul {*/
−
            /*margin: 0 0.1;*/
+
        /*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 84: Line 94:
 
         }
 
         }
 
         .carousel-inner{
 
         .carousel-inner{
−
             top:-25px;
+
             top:-35px;
 
         }
 
         }
 
         .carousel-caption {
 
         .carousel-caption {
Line 119: Line 129:
 
         .video-container>.video {
 
         .video-container>.video {
 
             width: 100%;
 
             width: 100%;
 +
            margin-top: -10px;
 
         }
 
         }
 
         .video-container>.text{
 
         .video-container>.text{
Line 138: Line 149:
 
         }
 
         }
 
         .video-container>.text>.right p{
 
         .video-container>.text>.right p{
−
             line-height: 1.2em;
+
             line-height: 1.5em;
 
             font-size: 20px;
 
             font-size: 20px;
 +
            color: #333;
 
         }
 
         }
 
         .video-container>.text>.left h1{
 
         .video-container>.text>.left h1{
Line 151: Line 163:
 
             line-height: 1.3em;
 
             line-height: 1.3em;
 
             margin-top: -20px;
 
             margin-top: -20px;
 +
            color: #333;
 
         }
 
         }
 
         #jumbo-footer.jumbotron {
 
         #jumbo-footer.jumbotron {
Line 164: Line 177:
 
             padding-right:10px;
 
             padding-right:10px;
 
             height: 250px;
 
             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{
 
         #jumbo-footer.jumbotron>.footer-container{
Line 205: Line 242:
 
             color: #888;
 
             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:hover, #jumbo-footer.jumbotron>.footer-container .contact ul li a:active, #jumbo-footer.jumbotron>.footer-container .contact ul li a:focus {
 
             color: #888;
 
             color: #888;
 
             text-decoration: none;
 
             text-decoration: none;
Line 225: Line 262:
 
             width: 25px;
 
             width: 25px;
 
             height: 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 id="jumbo-video" class="jumbotron">
+
 
−
        <div class="video-container">
+
     <!-- Controls -->
−
            <div class="video">
+
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
−
                <img style="width:100%" src="https://static.igem.org/mediawiki/2016/1/1a/T--SYSU-MEDICINE--video.jpg">
+
        <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>
−
             <div class="text">
+
             <div class="right">
−
                 <div class="left">
+
                 <p>
−
                     <h1>MSCavalry</h1>
+
                     Inflammatory diseases are an increasing cause of disability and even fatality.
−
                    <h3>-----MSCs of<br/>next generation</h3>
+
                    Currently, apart from common treatments, MSCs therapy is a promising candidate for curing inflammatory diseases.
−
                </div>
+
                    However, intravascular injected MSCs are criticized for its low homing efficiency and ambiguous distribution in human body.
−
                <div class="right">
+
                </p>
−
                    <p>
+
                <p>
−
                        Inflammatory diseases are an increasing cause of disability and even fatality.
+
                    This year, MSCavalry: MSCs of Next Generation is coming.
−
                        Currently, apart from common treatments, MSCs therapy is a promising candidate for curing inflammatory diseases.
+
                    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.
−
                        However, intravascular injected MSCs are criticized for its low homing efficiency and ambiguous distribution in human body.
+
                </p>
−
                    </p>
+
−
                    <p>
+
−
                        This year, MSCavalry: MSCs of next generation is coming.
+
−
                        SYSU-MEDICINE decide 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>
 
     </div>
 
     </div>
−
    <!--content-->
+
</div>
−
     <div style="height: 600px">
+
<!--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>
 
     </div>
−
    <!--footer-->
+
</div>
−
    <div class="jumbotron" id="jumbo-footer">
+
<!--footer-->
−
        <div class="container">
+
<div class="jumbotron" id="jumbo-footer">
−
            <div class="col-md-4">
+
    <div class="container">
−
                <div style="height: 100%;background-color: #bbb"></div>
+
        <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>
−
                <div style="height: 100%;background-color: #bbb"></div>
+
        <div class="col-md-4">
−
            </div>
+
             <div class="img-container">
−
             <div class="col-md-4">
+
                 <img src="https://static.igem.org/mediawiki/2016/5/5e/T--SYSU-MEDICINE--home-part4-img2.jpeg">
−
                 <div style="height: 100%;background-color: #bbb"></div>
+
 
             </div>
 
             </div>
 
         </div>
 
         </div>
−
         <div class="footer-container">
+
         <div class="col-md-4">
−
             <div class="title">
+
             <div class="img-container">
−
                 Contact us
+
                 <img src="https://static.igem.org/mediawiki/2016/f/fa/T--SYSU-MEDICINE--home-part4-img3.jpeg">
 
             </div>
 
             </div>
−
             <div class="line"></div>
+
        </div>
−
            <div class="contact">
+
    </div>
−
                <ul class="float-contact">
+
    <div class="footer-container">
−
                    <li>
+
        <div class="title">
−
                        <a href="#">
+
             Contact us
−
                            <img src="https://static.igem.org/mediawiki/2016/0/06/T--SYSU-MEDICINE--weibo.png">
+
        </div>
−
                            iGEMxSYSU-MEDICINE
+
        <div class="line"></div>
−
                        </a>
+
        <div class="contact">
−
                    </li>
+
            <ul class="float-contact">
−
                    <li>
+
                <li>
−
                        <a href="#">
+
                    <a href="http://weibo.com/u/5999650333">
−
                            <img style="height: 27px; width: 27px" src="https://static.igem.org/mediawiki/2016/a/a1/T--SYSU-MEDICINE--facebook.png">
+
                        <img style="height: 32px; width: 32px" src="https://static.igem.org/mediawiki/2016/0/06/T--SYSU-MEDICINE--weibo.png">
−
                            IGEM SYSU-Medicine
+
                        iGEMxSYSU-MEDICINE
−
                        </a>
+
                    </a>
−
                    </li>
+
                </li>
−
                    <li>
+
                <li>
−
                        <a href="#">
+
                    <a href="https://www.facebook.com/IGEM-SYSU-Medicine">
−
                            <img src="https://static.igem.org/mediawiki/2016/4/43/T--SYSU-MEDICINE--email.png">
+
                        <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">
−
                            SYSU_MEDICINE@163.com
+
                        IGEM SYSU-Medicine
−
                        </a>
+
                    </a>
−
                    </li>
+
                </li>
−
                </ul>
+
                <li>
−
                <ul class="float-contact">
+
                    <a href="#">
−
                    <li>
+
                        <img src="https://static.igem.org/mediawiki/2016/4/43/T--SYSU-MEDICINE--email.png">
−
                        <a href="#">
+
                        SYSU_MEDICINE@163.com
−
                            <img src="https://static.igem.org/mediawiki/2016/6/6e/T--SYSU-MEDICINE--wechat.png">
+
                    </a>
−
                            SYSU-MEDICINE
+
                </li>
−
                        </a>
+
            </ul>
−
                    </li>
+
            <ul class="float-contact">
−
                    <li>
+
                <li>
−
                        <a href="#">
+
                    <a href="#" data-toggle="modal" data-target="#wechatModal">
−
                            <img src="https://static.igem.org/mediawiki/2016/1/1c/T--SYSU-MEDICINE--twitter.png">
+
                        <img src="https://static.igem.org/mediawiki/2016/6/6e/T--SYSU-MEDICINE--wechat.png">
−
                            iGEM SYSU-MEDICINE
+
                        SYSU-MEDICINE
−
                        </a>
+
                    </a>
−
                    </li>
+
                </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>
+
            </ul>
−
                <div class="float-contact-right">
+
            <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="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">
+
                <img style="height: 100px" src="https://static.igem.org/mediawiki/2016/d/df/T--SYSU-MEDICINE--SYSU-MEDICINE.png">
−
                </div>
+
 
             </div>
 
             </div>
−
            <div class="line"></div>
+
        </div>
−
            <div class="copyright">
+
        <div class="line"></div>
−
                <div class="text">
+
        <div class="copyright">
−
                    &copy; 2016 SYSU-MEDICINE. All Rights Reserved.
+
            <div class="text">
−
                </div>
+
                &copy; 2016 SYSU-MEDICINE. All Rights Reserved.
−
                <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="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>
 +
 +
<!-- Wechat QRCode Modal -->
 +
<div class="modal fade" id="wechatModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="false">
 +
    <div class="modal-dialog" role="document">
 +
        <div class="modal-content">
 +
 +
            <div class="modal-body">
 +
                <img style="height: 300px;width: 300px;" src="https://static.igem.org/mediawiki/2016/0/07/T--SYSU-MEDICINE--wechat-qrcode.png">
 +
            </div>
 +
 
         </div>
 
         </div>
 
     </div>
 
     </div>
 +
</div>
 
</body>
 
</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.