Difference between revisions of "Team:SYSU-MEDICINE"

 
(45 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 65: 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 {*/
Line 76: Line 80:
 
         .dropdown-menu>li>a {
 
         .dropdown-menu>li>a {
 
             font-weight: 600;
 
             font-weight: 600;
 +
        }
 +
        .third-level-list {
 +
            top: -10px;
 +
            left: 150px;
 
         }
 
         }
 
         /*carousel*/
 
         /*carousel*/
Line 141: 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 154: 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 167: 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 208: 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 232: Line 266:
 
             width: 332px;
 
             width: 332px;
 
             margin-top: 100px;
 
             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">
 
     <script type="text/javascript">
 
         $(document).ready(function() {
 
         $(document).ready(function() {
−
             console.log('ready');
+
//          wechat qr code
−
             $("modal-backdrop fade in").click(function() {
+
             var canHide= true;
−
                 $(this).removeClass("in");
+
            $('#wechatModal').on('show.bs.modal', function (e) {
−
                 console.log('click');
+
                // 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);
 +
                    }
 +
                });
 
             });
 
             });
 
         });
 
         });
Line 267: Line 451:
 
             <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">
 
−
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">TEAM<span class="caret"></span></a>
 
−
                    <ul class="dropdown-menu">
 
−
                        <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Team">Team</a></li>
 
−
                        <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Collaborations">★  Collaborations</a></li>
 
−
                    </ul>
 
−
                </li>
 
 
                 <li class="dropdown">
 
                 <li class="dropdown">
 
                     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">PROJECT<span class="caret"></span></a>
 
                     <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/Description">★  Description</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/Design">★  Design</a></li>
+
−
                        <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Experiments">Experiments</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/Demonstrate">★ Demonstrate</a></li>
+
 
                         <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Results">Results</a></li>
 
                         <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Results">Results</a></li>
 +
                        <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Protocol">Protocol</a></li>
 
                         <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Notebook">Notebook</a></li>
 
                         <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Notebook">Notebook</a></li>
 +
                        <li class="dropdown third-level-menu">
 +
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">For Judgement <span class="glyphicon glyphicon-chevron-right"></span></a>
 +
                            <ul class="third-level-list dropdown-menu">
 +
                                <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Proof">Proof of Concept</a></li>
 +
                                <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Demonstrate">Demonstrate</a></li>
 +
                            </ul>
 +
                        </li>
 
                     </ul>
 
                     </ul>
 
                 </li>
 
                 </li>
 
                 <li class="dropdown">
 
                 <li class="dropdown">
−
                     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">PARTS<span class="caret"></span></a>
+
                     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">HUMAN PRACTICES<span class="caret"></span></a>
 
                     <ul class="dropdown-menu">
 
                     <ul class="dropdown-menu">
−
                         <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Parts">Parts</a></li>
+
                         <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Our_Story">Our Story</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/Interview">Interview</a></li>
−
                         <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Composite_Part">★ Composite Parts</a></li>
+
                         <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Ethics">Ethics</a></li>
−
                         <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Part_Collection">★ Part Collection</a></li>
+
                         <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Legislation">Legislation</a></li>
 +
                        <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Products">Products</a></li>
 +
                        <li class="dropdown third-level-menu">
 +
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">For Judgement <span class="glyphicon glyphicon-chevron-right"></span></a>
 +
                            <ul class="third-level-list dropdown-menu">
 +
                                <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/HP/Silver">Silver</a></li>
 +
                                <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/HP/Gold">Gold</a></li>
 +
                                <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Integrated_Practices">Integrated Practices</a></li>
 +
                                <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Engagement">Engagement</a></li>
 +
                            </ul>
 +
                        </li>
 
                     </ul>
 
                     </ul>
 
                 </li>
 
                 </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/Modeling">MODELING</a></li>
−
                <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Attributions">★  ATTRIBUTIONS</a></li>
+
 
                 <li class="dropdown">
 
                 <li class="dropdown">
−
                     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">HUMAN PRACTICES<span class="caret"></span></a>
+
                     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">TEAM<span class="caret"></span></a>
 
                     <ul class="dropdown-menu">
 
                     <ul class="dropdown-menu">
−
                         <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Human_Practices">Human Practices</a></li>
+
                         <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Team">Team</a></li>
−
                        <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/HP/Silver">★ Silver</a></li>
+
                         <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Attributions">Attributions</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/Collaborations">Collaborations</a></li>
−
                         <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Integrated_Practices">★ Integrated Practices</a></li>
+
−
                         <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Engagement">★ Engagement</a></li>
+
 
                     </ul>
 
                     </ul>
 
                 </li>
 
                 </li>
 +
 
                 <li class="dropdown">
 
                 <li class="dropdown">
−
                     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">AWARDS<span class="caret"></span></a>
+
                     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">PARTS<span class="caret"></span></a>
 
                     <ul class="dropdown-menu">
 
                     <ul class="dropdown-menu">
−
                         <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Entrepreneurship">★ Entrepreneurship</a></li>
+
                         <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Parts">Parts</a></li>
−
                         <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Hardware">★ Hardware</a></li>
+
                         <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Basic_Part">Basic Parts</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/Composite_Part">Composite Parts</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/Part_Collection">Part Collection</a></li>
−
                        <li><a href="https://2016.igem.org/Team:SYSU-MEDICINE/Model">★ Model</a></li>
+
 
                     </ul>
 
                     </ul>
 
                 </li>
 
                 </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>
 
             </ul>
 
         </div><!-- /.navbar-collapse -->
 
         </div><!-- /.navbar-collapse -->
Line 333: Line 523:
 
     <div class="carousel-inner" role="listbox">
 
     <div class="carousel-inner" role="listbox">
 
         <div class="item active">
 
         <div class="item active">
−
             <img style='height: auto ;width: 100%' src="https://static.igem.org/mediawiki/2016/2/26/Home_1.png" alt="SYSU-MEDICINE">
+
             <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 class="carousel-caption">
−
                 <h1>SYSU-MEDICINE</h1>
+
                  
−
                <h2>MSCalvalry: MSCs of Next Generation</h2>
+
 
             </div>
 
             </div>
 
         </div>
 
         </div>
 
         <div class="item">
 
         <div class="item">
−
             <img style='height: auto ;width: 100%' src="https://static.igem.org/mediawiki/2016/2/26/Home_1.png" alt="...">
+
             <img style='height: auto ;width: 100%' src="https://static.igem.org/mediawiki/2016/f/f4/T--SYSU-MEDICINE--home-1.jpeg" alt="...">
 
             <div class="carousel-caption">
 
             <div class="carousel-caption">
−
                 <h1>SYSU-MEDICINE</h1>
+
                 <h1 style="font-size:80px">SYSU-MEDICINE</h1>
−
                 <h2>MSCalvalry: MSCs of Next Generation</h2>
+
                 <h2 style="line-height:1.5;">MSCalvalry: </br>
 +
                MSCs of Next Generation</h2>
 
             </div>
 
             </div>
 
         </div>
 
         </div>
 
         <div class="item">
 
         <div class="item">
−
             <img style='height: auto ;width: 100%' src="https://static.igem.org/mediawiki/2016/2/26/Home_1.png" alt="...">
+
             <img style='height: auto ;width: 100%' src="https://static.igem.org/mediawiki/2016/4/45/T--SYSU-MEDICINE--home-2.jpeg" alt="...">
 
             <div class="carousel-caption">
 
             <div class="carousel-caption">
−
                 <h1>SYSU-MEDICINE</h1>
+
                 <h1 style="font-size:80px">SYSU-MEDICINE</h1>
−
                 <h2>MSCalvalry: MSCs of Next Generation</h2>
+
                 <h2 style="line-height:1.5;">MSCalvalry: </br>
 +
                MSCs of Next Generation</h2>
 
             </div>
 
             </div>
 
         </div>
 
         </div>
Line 368: Line 559:
 
     <div class="video-container">
 
     <div class="video-container">
 
         <div class="video">
 
         <div class="video">
−
             <img style="width:100%" src="https://static.igem.org/mediawiki/2016/1/1a/T--SYSU-MEDICINE--video.jpg">
+
             <!--<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>
 
         <div class="text">
 
         <div class="text">
 
             <div class="left">
 
             <div class="left">
 
                 <h1>MSCavalry</h1>
 
                 <h1>MSCavalry</h1>
−
                 <h3>-----MSCs of<br/>next generation</h3>
+
                 <h3>-----MSCs of<br/>Next Generation</h3>
 
             </div>
 
             </div>
 
             <div class="right">
 
             <div class="right">
Line 382: Line 574:
 
                 </p>
 
                 </p>
 
                 <p>
 
                 <p>
−
                     This year, MSCavalry: MSCs of next generation is coming.
+
                     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.
+
                     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>
 
                 </p>
 
             </div>
 
             </div>
Line 390: Line 582:
 
</div>
 
</div>
 
<!--content-->
 
<!--content-->
−
<div style="height: 600px">
+
<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>
 
</div>
 
<!--footer-->
 
<!--footer-->
Line 397: Line 640:
 
     <div class="container">
 
     <div class="container">
 
         <div class="col-md-4">
 
         <div class="col-md-4">
−
             <div style="height: 100%;background-color: #bbb"></div>
+
             <div class="img-container">
 +
                <img src="https://static.igem.org/mediawiki/2016/c/cc/T--SYSU-MEDICINE--home-part4-img1.png">
 +
            </div>
 
         </div>
 
         </div>
 
         <div class="col-md-4">
 
         <div class="col-md-4">
−
             <div style="height: 100%;background-color: #bbb"></div>
+
             <div class="img-container">
 +
                <img src="https://static.igem.org/mediawiki/2016/5/5e/T--SYSU-MEDICINE--home-part4-img2.jpeg">
 +
            </div>
 
         </div>
 
         </div>
 
         <div class="col-md-4">
 
         <div class="col-md-4">
−
             <div style="height: 100%;background-color: #bbb"></div>
+
             <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>
 
     </div>
Line 467: Line 716:
  
 
<!-- Wechat QRCode Modal -->
 
<!-- Wechat QRCode Modal -->
−
<div class="modal fade" id="wechatModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
+
<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-dialog" role="document">
 
         <div class="modal-content">
 
         <div class="modal-content">

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.