Difference between revisions of "Team:SYSU-MEDICINE"

 
(22 intermediate revisions by 3 users not shown)
Line 17: Line 17:
 
     <style>
 
     <style>
 
         /*font*/
 
         /*font*/
−
         @font-face{font-family:"HelveticaNeueW02-45Ligh";src:url(https://www.eyeem.com/css/fonts/88fcd49a-13c7-4d0c-86b1-ad1e258bd75d.eot?#iefix);src:url(https://www.eyeem.com/css/fonts/88fcd49a-13c7-4d0c-86b1-ad1e258bd75d.eot?#iefix) format("eot"),url(https://www.eyeem.com/css/fonts/9a2e4855-380f-477f-950e-d98e8db54eac.woff) format("woff"),url(https://www.eyeem.com/css/fonts/fa82d0ee-4fbd-4cc9-bf9f-226ad1fcbae2.ttf) format("truetype"),url(https://www.eyeem.com/css/fonts/48d599a6-92b5-4d43-a4ac-8959f6971853.svg#48d599a6-92b5-4d43-a4ac-8959f6971853) format("svg")}
+
         @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:"Arial",sans-serif;
+
             font-family:"HelveticaNeueW02-45Ligh","Arial",sans-serif;
 
             letter-spacing: 0.4px;
 
             letter-spacing: 0.4px;
 
             line-height: 1.5em;
 
             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:"Arial",sans-serif;
+
             font-family:"HelveticaNeueW02-45Ligh","Arial",sans-serif;
 
         }
 
         }
 
         #HQ_page p{
 
         #HQ_page p{
Line 66: 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{
 
         .navbar-nav>li{
Line 149: 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 162: 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 240: 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 277: Line 279:
 
         .index-content .img-container .my-icon{
 
         .index-content .img-container .my-icon{
 
             position:relative;
 
             position:relative;
−
             width: 70px;
+
             width: 60px;
−
             height: 70px;
+
             height: 60px;
  
 
         }
 
         }
Line 295: Line 297:
 
             width: 500px;
 
             width: 500px;
 
             top: 25px;
 
             top: 25px;
−
             left: 30px;
+
             left: 25px;
−
             z-index: 1;
+
             z-index: 10;
 +
            right: 470px;
 
         }
 
         }
 
         .index-content .img-container .my-card>img{
 
         .index-content .img-container .my-card>img{
 
             width: 100%;
 
             width: 100%;
−
            z-index: 1;
 
 
         }
 
         }
 +
        .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{
 
         #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;
 
             left: 550px;
 
             top: 100px;
 
             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">
Line 349: Line 387:
 
             });
 
             });
 
//            card display
 
//            card display
−
//            var containerTop = $(".img-container").offset().top;
+
            var containerTop = $(".img-container").offset().top;
−
//            var containerLeft= $(".img-container").offset().left;
+
            var containerLeft= $(".img-container").offset().left;
−
//            for (var i = 1; i <= 1; ++i) {
+
            var iconToCard = [];
−
//                var icon = $("#icon-" + i),
+
            for (var i = 1; i <= 8; ++i) {
−
//                        card = $("#card-" + i),
+
                var icon = $("#icon-" + i),
−
//                        left,
+
                        card = $("#card-" + i),
−
//                        top;
+
                        left,
−
//                if (typeof icon === "undefined") continue;
+
                        top;
−
//                left = icon.offset().left + icon.width() - containerLeft;
+
                iconToCard.push(card);
−
//                top = icon.offset().top - containerTop;
+
                left = icon.offset().left + icon.width() - containerLeft;
−
//                console.log("left: "+left+" top: "+top);
+
                top = icon.offset().top - containerTop;
−
//               card.css("left", left);
+
                console.log("left: "+left+" top: "+top);
−
//                card.css("top", top);
+
                if (left > 700) {
−
//            }
+
                    console.log(card);
 +
//                   card.css("right", "470");
 +
                    card.css("left", "auto");
 +
                }
 +
            }
 
             $(".my-icon").mouseenter(function() {
 
             $(".my-icon").mouseenter(function() {
 
                 var id = $(this).attr("id");
 
                 var id = $(this).attr("id");
−
                 var num = id.split("-")[1];
+
                 var num = parseInt(id.split("-")[1]);
−
                 $("#card-"+num).css("display", "block");
+
                 $(this).children("img").css("z-index", "20");
 +
//                iconToCard[num-1].css("display", "block");
 +
                iconToCard[num-1].fadeIn('fast');
 
             });
 
             });
 
             $(".my-icon").mouseleave(function() {
 
             $(".my-icon").mouseleave(function() {
 
                 var id = $(this).attr("id");
 
                 var id = $(this).attr("id");
−
                 var num = id.split("-")[1];
+
                 var num = parseInt(id.split("-")[1]);
−
                 $("#card-"+num).css("display", "none");
+
 
 +
//                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 469: 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 504: 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 518: 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 533: Line 589:
 
                 <img src="https://static.igem.org/mediawiki/2016/6/68/T--SYSU-MEDICINE--home-Card1.png">
 
                 <img src="https://static.igem.org/mediawiki/2016/6/68/T--SYSU-MEDICINE--home-Card1.png">
 
             </div>
 
             </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>
  

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.