Team:UESTC

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
-
{{Team:UESTC/hidden}}
+
/*
-
<html xmlns="http://www.w3.org/1999/xhtml">
+
    nav style
-
<head>
+
    */
-
     <title>main</title>
+
nav{
-
     <link type="text/css" href="https://2013.igem.org/Template:Team:UESTC/style.css?action=raw&ctype=text/css" rel="stylesheet"/>
+
position:fixed;
-
     <script src="https://2013.igem.org/Team:UESTC/js/libs/modernizr-2.0.6.min.js?action=raw&ctype=text/javascript"></script>
+
z-index: 50;
-
     <style type="text/css">
+
top:15px;
-
        .panel {
+
    width:100%;
-
            width:100%;
+
    height:45px;
-
        }
+
    background-color:#EC6100;
-
     </style>
+
    left:0%;
-
     <!-- javascript for responsive drop menu -->
+
    text-align:center;
-
    <script type="text/javascript">
+
}
 +
.toggleMenu {
 +
    display: none;
 +
    background: #666;
 +
    padding: 10px 15px;
 +
    color: #fff;
 +
    position: absolute;
 +
    top: 83px;
 +
    left: 0px;
 +
}
 +
.nav {
 +
    position:relative;
 +
    top:0px;
 +
    display: inline-block;
 +
    margin:0px;
 +
    padding:0px;
 +
    list-style: none;
 +
    background:#EC6100;
 +
    height: 45px;
 +
    font:1.6em BuxtonSketch,arial,verdana;
 +
}
 +
.nav:before,
 +
.nav:after {
 +
    content: " ";
 +
    display: block;
 +
}
 +
.nav:after {
 +
    clear: both;
 +
}
 +
.nav ul {
 +
    list-style: none;
 +
    width: 9em;
 +
}
 +
.nav a {
 +
    padding: 10px 15px;
 +
    color:#fff;
 +
}
 +
.nav .current a, .nav li:hover > a {
 +
    background:#7788aa url('https://static.igem.org/mediawiki/2013/1/12/UESTC_downArrow.png') repeat-x 0 -20px;
 +
    color:#000;
 +
text-decoration:none;
 +
}
 +
.nav li {
 +
    position: relative;
 +
}
 +
.nav > li {
 +
     float: left;
 +
    border-top: 1px solid #EC6100;
 +
}
 +
.nav > li > .parent {
 +
     background-image: url('https://static.igem.org/mediawiki/2013/1/12/UESTC_downArrow.png');
 +
    background-repeat: no-repeat;
 +
    background-position: right;
 +
}
 +
.nav > li > a {
 +
    display: block;
 +
}
 +
.nav li  ul {
 +
    position: absolute;
 +
    left: -9999px;
 +
}
 +
.nav > li.hover > ul {
 +
    left: 0;
 +
    top:20px;
 +
}
 +
.nav li li.hover ul {
 +
    left: 100%;
 +
    top: 0;
 +
}
 +
.nav li li a {
 +
    display: block;
 +
    background: #EC6100;
 +
    position: relative;
 +
    z-index:100;
 +
    border-top: 1px solid #175e4c;
 +
}
 +
.nav li li li a {
 +
    background:#EC6100;
 +
    z-index:200;
 +
    border-top: 1px solid #1d7a62;
 +
}
 +
.nav ul li:first-child > a {
 +
}
 +
.nav ul li:last-child > a {
 +
}
 +
.nav ul {
 +
    padding:0;
 +
    width:170px;
 +
    background-color:#EC6100;
 +
    border:1px solid #7788aa;
 +
}
 +
/*
 +
    projects nav style
 +
    */
 +
#nav_proj {
 +
    width: 100%;
 +
    height: 100px;
 +
    z-index:50;
 +
    background-color:yellow;
 +
}
 +
/*
 +
    team info nav style
 +
    */
 +
#nav_team {
 +
    width: 100%;
 +
    height: 100px;
 +
    z-index:50;
 +
    background-color:yellow;
 +
}
 +
/*
 +
    home part style
 +
    */
 +
#home {
 +
    height: 560px;
 +
    background-color:#0EA6EA;
 +
background:-webkit-gradient(linear,left top,left bottom,from(#0EA6EA),to(#F8FCFE));
 +
background:-ms-gradient(linear,left top,left bottom,from(#0EA6EA),to(#F8FCFE));
 +
background:gradient(linear,left top,left bottom,from(#0EA6EA),to(#F8FCFE));
 +
background:-moz-linear-gradient(top,#0EA6EA,#F8FCFE);
 +
background:-0-linear-gradient(top,#0EA6EA,#F8FCFE);
 +
background:linear-gradient(top,#0EA6EA,#F8FCFE);
 +
filter: progid:DXImageTransform.Microsoft.gradient(enabled='false',startColorstr='#0EA6EA',endColorstr='#F8FCFE');
 +
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(enabled='false',startColorstr='#0EA6EA',endColorstr='#F8FCFE')";
 +
    z-index:0;
 +
}
 +
#logo {
 +
    height: 150px;
 +
    width:46.875%;/* 600/1280 */
 +
     margin:0 auto;
 +
    position:relative;
 +
    top:50px;
 +
    z-index:10;
 +
}
 +
    #logo #team_logo {
 +
        float: left;
 +
    }
 +
    #logo #igem_logo {
 +
        float: right;
 +
    }
 +
/*
 +
    moving cloud style
 +
    */
 +
#experiment{
 +
position: relative;
 +
top:0px;
 +
    height:200px;
 +
z-index: 5;
 +
}
 +
#background {
 +
background: url('https://2013.igem.org/File:Cloud_back.png') repeat-x;
 +
    background: url('https://static.igem.org/mediawiki/2013/7/70/UESTC_cloud2.png') 5% 5%, url('https://static.igem.org/mediawiki/2013/3/33/Cloud_front.jpg') 50% 50%, url('https://2013.igem.org/File:Cloud_back.png') 90% 110% repeat-x;
 +
     top: -136px;
 +
    left: 0;
 +
    right: 0;
 +
    position:absolute;
 +
     -webkit-transition: left 300s linear;
 +
     -moz-transition: left 300s linear;
 +
    -o-transition: left 300s linear;
 +
    -ms-transition: left 300s linear;
 +
    transition: left 300s linear;
 +
    z-index: 5;
 +
    height:275px;
 +
}
-
        var _gaq = _gaq || [];
+
body:target #background {
-
        _gaq.push(['_setAccount', 'UA-36212355-2']);
+
    left: -5000px;
-
        _gaq.push(['_trackPageview']);
+
}
-
        (function () {
+
body:hover #background {
-
            var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+
    left: -9999px;
-
            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+
}
-
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+
#hi {
-
        })();
+
    height: auto;
-
 
+
    width: 46.875%; /* 600/1280 */
-
        var ww = document.body.clientWidth;
+
    position:relative;
-
 
+
    top:-110px;
-
        $(document).ready(function () {
+
    margin:0 auto;
-
            $(".nav li a").each(function () {
+
    font: 1.8em BuxtonSketch,arial,verdana;
-
                if ($(this).next().length > 0) {
+
    z-index:5;
-
                    $(this).addClass("parent");
+
    text-align:center;
-
                };
+
}
-
            })
+
#team_photo {
-
 
+
    position:relative;
-
            $(".toggleMenu").click(function (e) {
+
    top: -56px;
-
                e.preventDefault();
+
    display:block;
-
                $(this).toggleClass("active");
+
    margin:0 auto;
-
                $(".nav").toggle();
+
    z-index:5;
-
            });
+
}
-
            adjustMenu();
+
/*
-
        })
+
     responsive pic
-
 
+
     */
-
        $(window).bind('resize orientationchange', function () {
+
img {
-
            ww = document.body.clientWidth;
+
     max-width: 100%;
-
            adjustMenu();
+
}
-
        });
+
#proj_slides {
-
 
+
    height: 700px;
-
        var adjustMenu = function () {
+
    background-color:orange;
-
            if (ww < 768) {
+
    z-index:1;
-
                $(".toggleMenu").css("display", "inline-block");
+
}
-
                if (!$(".toggleMenu").hasClass("active")) {
+
/*
-
                    $(".nav").hide();
+
     project slideshow style
-
                } else {
+
    */
-
                    $(".nav").show();
+
#camera_wrap_1 {
-
                }
+
    max-width: 1280px;
-
                $(".nav li").unbind('mouseenter mouseleave');
+
    max-height:600px;
-
                $(".nav li a.parent").unbind('click').bind('click', function (e) {
+
    width:95%;
-
                    // must be attached to anchor element to prevent bubbling
+
    margin: 0 2.25%;
-
                    e.preventDefault();
+
    z-index:5;
-
                    $(this).parent("li").toggleClass("hover");
+
}
-
                });
+
     #camera_wrap_1 h1 {
-
            }
+
        font: 2em arial,verdana;
-
            else if (ww >= 768) {
+
        color:white;
-
                $(".toggleMenu").css("display", "none");
+
     }
-
                $(".nav").show();
+
-
                $(".nav li").removeClass("hover");
+
-
                $(".nav li a").unbind('click');
+
-
                $(".nav li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function () {
+
-
                    // must be attached to li so that mouseleave is not triggered when hover over submenu
+
-
                    $(this).toggleClass('hover');
+
-
                });
+
-
            }
+
-
        }
+
-
    </script>
+
-
 
+
-
     <!-- css for responsive slideshow -->
+
-
     <link rel='stylesheet' id='camera-css'  href='https://2013.igem.org/Team:UESTC/camera.css?action=raw&ctype=text/css' type='text/css' media='all'>
+
-
 
+
-
     <!-- javascript for responsive slideshow -->
+
-
    <script type='text/javascript' src='https://2013.igem.org/Team:UESTC/jquery.min.js?action=raw&ctype=text/javascript'></script>
+
-
    <script type='text/javascript' src='https://2013.igem.org/Team:UESTC/jquery.mobile.customized.min.js?action=raw&ctype=text/javascript'></script>
+
-
    <script type='text/javascript' src='https://2013.igem.org/Team:UESTC/jquery.easing.1.3.js?action=raw&ctype=text/javascript'></script>
+
-
    <script type='text/javascript' src='https://2013.igem.org/Team:UESTC/camera.min.js?action=raw&ctype=text/javascript'></script>
+
-
    <script>
+
-
        jQuery(function () {
+
-
 
+
-
            jQuery('#camera_wrap_1').camera({
+
-
                thumbnails: true
+
-
            });
+
-
 
+
-
            jQuery('#camera_wrap_2').camera({
+
-
                height: '400px',
+
-
                loader: 'bar',
+
-
                pagination: false,
+
-
                thumbnails: true
+
-
            });
+
-
        });
+
-
</script>
+
-
</head>
+
-
<body>
+
-
     <nav class="panel">
+
-
        <a class="toggleMenu" href="#">Menu</a>
+
-
        <ul class="nav">
+
-
<li>
+
-
<a href="https://2013.igem.org/Team:UESTC">Home</a>
+
-
</li>
+
-
<li>
+
-
<a href="https://2013.igem.org/Team:UESTC/#project">Project</a>
+
-
                <ul>
+
-
                    <li style="display:list-item;">
+
-
                        <div class="panel" id="nav_proj">
+
-
                            <p>jdkkjflajflajfljjalfjsafjl</p>
+
-
                        </div>
+
-
                    </li>
+
-
</ul>
+
-
</li>
+
-
<li>
+
-
<a href="https://2013.igem.org/Team:UESTC/#team info">Team Info</a>
+
-
                <ul>
+
-
                    <li style="display:list-item;">
+
-
                        <div class="panel" id="nav_team">
+
-
                            <p>jdkkjflajflajfljjalfjsafjl</p>
+
-
                        </div>
+
-
                    </li>
+
-
</ul>
+
-
</li>
+
-
<li>
+
-
<a href="https://2013.igem.org/Team:UESTC/#notebook">Notebook</a>
+
-
                <ul>
+
-
                    <li style="display:list-item;">
+
-
                        details
+
-
                    </li>
+
-
</ul>
+
-
</li>
+
-
<li>
+
-
<a href="https://2013.igem.org/Team:UESTC/#mf">Medal Fufillment</a>
+
-
</li>
+
-
<li>
+
-
<a href="https://2013.igem.org/Team:UESTC/#hp">Human Practice</a>
+
-
</li>
+
-
</ul><!-- end of .nav ul-->
+
-
    </nav>
+
-
    <div class="panel" id="home">
+
-
        <div id="logo">
+
-
            <a href="https://2013.igem.org/Team:UESTC"><img  id="team_logo" src="https://static.igem.org/mediawiki/2013/a/aa/UESTC_logo2.png"/></a>
+
-
            <a href="https://2013.igem.org/Main_Page"><img id="igem_logo" src="https://static.igem.org/mediawiki/2013/3/3a/UESTC_igemlogo1.png" /></a>
+
-
        </div><!--end of #logo-->
+
-
        <div class="panel" id="experiment"> <div id="background"></div></div><!-- moving cloud bg-->
+
-
        <div id="hi">
+
-
            <p>Hi! We are 2013 iGEM Competition  Software Team UESTC</p>
+
-
            <p>(University of Electronic Science and Technology of China)</p>
+
-
        </div>
+
-
        <img id="team_photo" src="https://static.igem.org/mediawiki/2013/4/4a/UESTC_team_photo.jpg" />
+
-
     </div><!--end of #home-->
+
-
    <div class="panel" id="proj_slides">
+
-
        <div class="panel camera_wrap camera_azure_skin" id="camera_wrap_1">
+
-
            <div data-thumb="" data-src="https://static.igem.org/mediawiki/2013/6/6d/UESTC_proj1.jpg">
+
-
                <div class="camera_caption fadeFromBottom">
+
-
                    <h1>Blueprint</h1>
+
-
                        <p>No matter who you are, a scientist proficient in synthetic biology or a greenhand who only cares about
+
-
                                            output, Blueprint is your best choice. Two major parts are provided: Interactive part & Automatic part.
+
-
                                            In the first part, you are free to get what you want linking any parts we provide. But you have to make sense,  
+
-
                                            of course. In the second part, the only thing you need to do is to determine the inducer and the output.
+
-
                                            Then, you can sit back and wait for our software to provide you with the optimized circuit. Wow!</p>
+
-
                </div>
+
-
            </div>
+
-
            <div data-thumb="" data-src="https://static.igem.org/mediawiki/2013/3/3f/UESTC_proj1_%282%29.jpg">
+
-
                <div class="camera_caption fadeFromBottom">
+
-
                    <h1>Transpeeder</h1>
+
-
                        <p>The satisfying amino acid or nucleic acid sequences that the user submitted will be compared to the chosen
+
-
                                            CD sequences by ClustalW, the sequence which has highest similarity with SD sequences are defined as the
+
-
                                            slow-translating sequence, on the contrary, the one which has lowest similarity with SD sequences are defined
+
-
                                            as the fast-translating sequence.</p>
+
-
                </div>
+
-
            </div>
+
-
            <div data-thumb="" data-src="https://static.igem.org/mediawiki/2013/3/37/UESTC_proj3.jpg">
+
-
                <div class="camera_caption fadeFromBottom">
+
-
                    <h1>iBricks</h1>
+
-
                    <p>  iBricks is an iphone game concerning synthetic biology.
+
-
  In this game, what you need to do is to synthesize protein to compound a cell.
+
-
  You are provided with several basic parts to synthesize protein.
+
-
  Once you accomplish combining these parts into a circuit, you will enter into transcription process, during which phage will continuously attack your circuit.
+
-
  To protect it, you can press on these phages to kill them.
+
-
  You can also utilize several tools to eliminate phages with higher efficiency.
+
-
  After successfully synthesizing the protein, you can get new parts that increase the possibility of successfully synthesizing proteins.
+
-
  With several synthesized proteins, you can accomplish the goal of synthesizing a complete cell.</p>
+
-
                </div>
+
-
            </div>
+
-
        </div><!-- #camera_wrap_1 -->
+
-
     </div><!-- end of #proj_slides -->
+
-
</body>
+
-
</html>
+

Revision as of 15:29, 22 August 2013

/* 

   nav style
   */

nav{ position:fixed; z-index: 50; top:15px; 

   width:100%;
   height:45px;
   background-color:#EC6100;
   left:0%;
   text-align:center;

} .toggleMenu { 

   display:  none;
   background: #666;
   padding: 10px 15px;
   color: #fff;
   position: absolute;
   top: 83px;
   left: 0px;

} .nav { 

   position:relative;
   top:0px;
   display: inline-block;
   margin:0px;
   padding:0px;
   list-style: none;
   background:#EC6100;
   height: 45px;
   font:1.6em BuxtonSketch,arial,verdana;

} .nav:before, .nav:after { 

   content: " "; 
   display: block;

} .nav:after { 

   clear: both;

} .nav ul { 

   list-style: none;
   width: 9em;

} .nav a { 

   padding: 10px 15px;
   color:#fff;

} .nav .current a, .nav li:hover > a { 

   background:#7788aa url('https://static.igem.org/mediawiki/2013/1/12/UESTC_downArrow.png') repeat-x 0 -20px;
   color:#000;

text-decoration:none; } .nav li { 

   position: relative;

} .nav > li { 

   float: left;
   border-top: 1px solid #EC6100;

} .nav > li > .parent { 

   background-image: url('https://static.igem.org/mediawiki/2013/1/12/UESTC_downArrow.png');
   background-repeat: no-repeat;
   background-position: right;

} .nav > li > a { 

   display: block;

} .nav li ul { 

   position: absolute;
   left: -9999px;

} .nav > li.hover > ul { 

   left: 0;
   top:20px;

} .nav li li.hover ul { 

   left: 100%;
   top: 0;

} .nav li li a { 

   display: block;
   background: #EC6100;
   position: relative;
   z-index:100;
   border-top: 1px solid #175e4c;

} .nav li li li a { 

   background:#EC6100;
   z-index:200;
   border-top: 1px solid #1d7a62;

} .nav ul li:first-child > a { } .nav ul li:last-child > a { } .nav ul { 

   padding:0;
   width:170px;
   background-color:#EC6100;
   border:1px solid #7788aa;

} /* 

   projects nav style
   */
  1. nav_proj { 
   width: 100%;
   height: 100px;
   z-index:50;
   background-color:yellow;

} /* 

   team info nav style
   */
  1. nav_team { 
   width: 100%;
   height: 100px;
   z-index:50;
   background-color:yellow;

} /* 

   home part style
   */
  1. home { 
   height: 560px;
   background-color:#0EA6EA;

background:-webkit-gradient(linear,left top,left bottom,from(#0EA6EA),to(#F8FCFE)); background:-ms-gradient(linear,left top,left bottom,from(#0EA6EA),to(#F8FCFE)); background:gradient(linear,left top,left bottom,from(#0EA6EA),to(#F8FCFE)); background:-moz-linear-gradient(top,#0EA6EA,#F8FCFE); background:-0-linear-gradient(top,#0EA6EA,#F8FCFE); background:linear-gradient(top,#0EA6EA,#F8FCFE); filter: progid:DXImageTransform.Microsoft.gradient(enabled='false',startColorstr='#0EA6EA',endColorstr='#F8FCFE'); -ms-filter:"progid:DXImageTransform.Microsoft.gradient(enabled='false',startColorstr='#0EA6EA',endColorstr='#F8FCFE')"; 

   z-index:0;

}

  1. logo { 
   height: 150px;
   width:46.875%;/* 600/1280 */
   margin:0 auto;
   position:relative;
   top:50px;
   z-index:10;

} 

   #logo #team_logo {
       float: left;
   }
   #logo #igem_logo {
       float: right;
   }

/* 

   moving cloud style
   */
  1. experiment{ 
	position: relative;
	top:0px;
   height:200px;
	z-index: 5;
}
  1. background {

background: url('https://2013.igem.org/File:Cloud_back.png') repeat-x; 

   background: url('https://static.igem.org/mediawiki/2013/7/70/UESTC_cloud2.png') 5% 5%, url('https://static.igem.org/mediawiki/2013/3/33/Cloud_front.jpg') 50% 50%, url('https://2013.igem.org/File:Cloud_back.png') 90% 110% repeat-x;
   top: -136px;
   left: 0;
   right: 0;
   position:absolute;
   -webkit-transition: left 300s linear;
   -moz-transition: left 300s linear;
   -o-transition: left 300s linear;
   -ms-transition: left 300s linear;
   transition: left 300s linear;
   z-index: 5;
   height:275px;

}

body:target #background { 

   left: -5000px;

}

body:hover #background { 

   left: -9999px;

}

  1. hi { 
   height: auto;
   width: 46.875%; /* 600/1280 */
   position:relative;
   top:-110px;
   margin:0 auto;
   font: 1.8em BuxtonSketch,arial,verdana;
   z-index:5;
   text-align:center;

}

  1. team_photo { 
   position:relative;
   top: -56px;
   display:block;
   margin:0 auto;
   z-index:5;

} /* 

   responsive pic
   */

img { 

   max-width: 100%;

}

  1. proj_slides { 
   height: 700px;
   background-color:orange;
   z-index:1;

} /* 

   project slideshow style
   */
  1. camera_wrap_1 { 
   max-width: 1280px;
   max-height:600px;
   width:95%;
   margin: 0 2.25%;
   z-index:5;

} 

   #camera_wrap_1 h1 {
       font: 2em arial,verdana;
       color:white;
   }
Retrieved from "http://2013.igem.org/Team:UESTC"