Difference between revisions of "Team:SYSU-MEDICINE"

 
(28 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{
 
         .navbar-nav>li{
Line 148: 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 161: 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 239: 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 265: Line 268:
 
             z-index: 2000;
 
             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">
Line 305: Line 385:
 
             $(".dropdown").mouseleave(function() {
 
             $(".dropdown").mouseleave(function() {
 
                 $(this).removeClass("open");
 
                 $(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 365: Line 486:
 
                     </ul>
 
                     </ul>
 
                 </li>
 
                 </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/Modeling">MODELING</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">TEAM<span class="caret"></span></a>
Line 402: 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 437: 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 451: 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 461: Line 584:
 
<div class="index-content">
 
<div class="index-content">
 
     <div class="img-container">
 
     <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>

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.