(50 intermediate revisions by 4 users not shown) | |||
Line 31: | Line 31: | ||
float: left; | float: left; | ||
top: 0px; | top: 0px; | ||
− | background-color: # | + | background-color: #592e2e; |
margin-top:0px; | margin-top:0px; | ||
width: 10%; | width: 10%; | ||
Line 46: | Line 46: | ||
width: 10%; | width: 10%; | ||
height: 100%; | height: 100%; | ||
− | |||
padding-left: 20px; | padding-left: 20px; | ||
padding-top: 25px; | padding-top: 25px; | ||
Line 71: | Line 70: | ||
} | } | ||
− | . | + | .line { |
position: fixed; | position: fixed; | ||
float: left; | float: left; | ||
Line 77: | Line 76: | ||
left:10%; | left:10%; | ||
background-color: #aadffa; | background-color: #aadffa; | ||
− | width: | + | width: 1%; |
+ | height: 100%; | ||
+ | padding-right:-20px; | ||
+ | padding-top:10px; | ||
+ | } | ||
+ | |||
+ | .left { | ||
+ | position: fixed; | ||
+ | float: left; | ||
+ | top: 0px; | ||
+ | left:12%; | ||
+ | background-color: #aadffa; | ||
+ | width:10%; | ||
height: 100%; | height: 100%; | ||
padding-right:-20px; | padding-right:-20px; | ||
Line 107: | Line 118: | ||
transition: 0.3s; | transition: 0.3s; | ||
font-weight:bold; | font-weight:bold; | ||
− | font-size: | + | font-size:18px; |
} | } | ||
Line 116: | Line 127: | ||
transition:all 0.3s; | transition:all 0.3s; | ||
transform: scale(1.15); | transform: scale(1.15); | ||
+ | } | ||
+ | .left li:before { | ||
+ | content: ''; | ||
+ | height: 100%; | ||
+ | left: 0; | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | -webkit-transition: width 0.2s ease-in; | ||
+ | transition: width 0.2s ease-in; | ||
+ | width: 3px; | ||
+ | z-index: -1; | ||
+ | } | ||
+ | |||
+ | |||
+ | .left li:hover:before { | ||
+ | -webkit-transition: width 0.2s ease-in; | ||
+ | transition: width 0.2s ease-in; | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | .left li.open:hover before { | ||
+ | -webkit-transition: width 0.2s ease-in; | ||
+ | transition: width 0.2s ease-in; | ||
+ | width: 100%; | ||
} | } | ||
Line 130: | Line 165: | ||
top:0px; | top:0px; | ||
z-index: -1; | z-index: -1; | ||
− | + | ||
} | } | ||
Line 137: | Line 172: | ||
position:absolute; | position:absolute; | ||
float: left; | float: left; | ||
− | top: | + | top:20%; |
left:28%; | left:28%; | ||
font-size: 48px; | font-size: 48px; | ||
Line 149: | Line 184: | ||
float: left; | float: left; | ||
top:110%; | top:110%; | ||
− | left: | + | left:20%; |
width:71%; | width:71%; | ||
font-size: 18px; | font-size: 18px; | ||
z-index: 2; | z-index: 2; | ||
− | |||
margin-left:50px; | margin-left:50px; | ||
line-height: 35px; | line-height: 35px; | ||
Line 161: | Line 195: | ||
.content .h1{ | .content .h1{ | ||
margin-top: 20px; | margin-top: 20px; | ||
− | font-size: | + | font-size: 33px; |
font-weight: bold; | font-weight: bold; | ||
color: #aadffa; | color: #aadffa; | ||
Line 171: | Line 205: | ||
text-align:center; | text-align:center; | ||
font-size: 8x; | font-size: 8x; | ||
− | + | ||
} | } | ||
Line 177: | Line 211: | ||
display: inline-block; | display: inline-block; | ||
text-indent:2em; | text-indent:2em; | ||
− | font-size: | + | font-size: 16px; |
padding-top: 20px; | padding-top: 20px; | ||
padding-bottom: 20px; | padding-bottom: 20px; | ||
− | |||
} | } | ||
Line 221: | Line 254: | ||
color:#202020; | color:#202020; | ||
transition:1s .5s opacity; | transition:1s .5s opacity; | ||
+ | line-height:24px; | ||
} | } | ||
Line 240: | Line 274: | ||
+ | #contact{ | ||
+ | border-radius: 15px; | ||
+ | width: 90%; | ||
+ | height:auto; | ||
+ | background:rgba(255,255,255,0.4); | ||
+ | /* border: 2.5px solid rgba(0,0,0,0.7);*/ | ||
+ | z-index: 5; | ||
+ | text-align: center; | ||
+ | display: block; | ||
+ | margin-bottom: 100px; | ||
+ | } | ||
+ | |||
+ | #contact h3{ | ||
+ | font-size: 22px; | ||
+ | margin-top:35px; | ||
+ | margin-bottom:10px; | ||
+ | color : #5b3d3d; | ||
+ | } | ||
+ | |||
+ | #contact span{ | ||
+ | margin-top: 15px; | ||
+ | font-size: 19px; | ||
+ | color : #826767; | ||
+ | } | ||
+ | |||
+ | #contact img{ | ||
+ | margin-top: 10px; | ||
+ | transition: all 0.4s; | ||
+ | margin-bottom: 30px; | ||
+ | } | ||
+ | |||
+ | #contact img:hover{ | ||
+ | transform: scale(1.15); | ||
+ | transition: all 0.4s; | ||
+ | } | ||
+ | |||
+ | #btn{ | ||
+ | display: none; | ||
+ | position: fixed; | ||
+ | left: 90%; | ||
+ | bottom: 40px; | ||
+ | height:80px; | ||
+ | width: 80px; | ||
+ | background: url(https://static.igem.org/mediawiki/2018/d/d1/T--Tongji-Software--top.png) no-repeat left top; | ||
+ | background-size:100% auto; | ||
+ | } | ||
</style> | </style> | ||
+ | <link rel="stylesheet" href="https://2018.igem.org/wiki/index.php?title=Template:Tongji-Software/test/css/style.css&action=raw&ctype=text/css"> | ||
<body> | <body> | ||
Line 260: | Line 341: | ||
<a href="https://2018.igem.org/Team:Tongji-Software/Requirements" original-title="Project"><li><img src="https://static.igem.org/mediawiki/2018/5/5f/T--Tongji-Software--Req.svg" width="35%" ></li></a> | <a href="https://2018.igem.org/Team:Tongji-Software/Requirements" original-title="Project"><li><img src="https://static.igem.org/mediawiki/2018/5/5f/T--Tongji-Software--Req.svg" width="35%" ></li></a> | ||
− | <a href="https://2018.igem.org/Team:Tongji-Software/ | + | <a href="https://2018.igem.org/Team:Tongji-Software/Human_Practices" original-title="Project"><li><img src="https://static.igem.org/mediawiki/2018/c/cc/T--Tongji-Software--Hum.svg" width="35%" ></li></a> |
− | <a href="https://2018.igem.org/Team:Tongji-Software/ | + | <a href="https://2018.igem.org/Team:Tongji-Software/Medal" original-title="Project"><li><img src="https://static.igem.org/mediawiki/2018/8/8b/T--Tongji-Software--Med.svg" width="35%" ></li></a> |
</ul> | </ul> | ||
</div> | </div> | ||
− | + | <div class="line"></div> | |
− | <div class="left"> | + | <div><a href="javascript:;" id="btn" title="Return to Top"></a></div> |
+ | <div id = "wrapper"> | ||
+ | <div class="left" id = "sidebar-wrapper"> | ||
<ul> | <ul> | ||
<li><a href="#Overview">Overview</a></li> | <li><a href="#Overview">Overview</a></li> | ||
Line 289: | Line 372: | ||
− | <div class="content"> | + | <div class="content" id="con"> |
Line 318: | Line 401: | ||
<b>Xiaotian Yu</b></br> | <b>Xiaotian Yu</b></br> | ||
<span class="top">Bioinformatics</span> | <span class="top">Bioinformatics</span> | ||
− | <figcaption> In this project, I’m in charge of modeling, data analyzing | + | <figcaption> In this project, I’m in charge of modeling, data analyzing. Thanks to iGEM for this opportunity to cooperate with my creative and reliable teammates. I hope that our software will play a significant role in metabolic pathway design in the future!</figcaption> |
</figure> | </figure> | ||
</div> | </div> | ||
Line 328: | Line 411: | ||
</figure> | </figure> | ||
</div> | </div> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
Line 350: | Line 428: | ||
</div> | </div> | ||
<div class="flip-3d"> | <div class="flip-3d"> | ||
− | <figure> <img src="https://static.igem.org/mediawiki/2018/b/bc/ | + | <figure> <img src="https://static.igem.org/mediawiki/2018/archive/b/bc/20181012123042%21T--Tongji-Software--Team-Yuejia.jpeg" width="100%"> |
<b>Yuejia Li</b></br> | <b>Yuejia Li</b></br> | ||
<span class="top">Industrial Design</span> | <span class="top">Industrial Design</span> | ||
− | <figcaption>This is a | + | <figcaption>This is a challenge for me to help raise up a team’s image through the visual identity and interface design. I am always fond of exploring the possibilities in the inter-discipline. I believe that iGEM has offered me the chance to make it more realistic this time!</figcaption> |
</figure> | </figure> | ||
</div> | </div> | ||
Line 361: | Line 439: | ||
xdbwiehocurnviomtoinb</br> | xdbwiehocurnviomtoinb</br> | ||
</span> | </span> | ||
− | |||
Line 368: | Line 445: | ||
<b>Xiangzhen Li</b></br> | <b>Xiangzhen Li</b></br> | ||
<span class="top">Computer Engineering</span> | <span class="top">Computer Engineering</span> | ||
− | <figcaption>I have rich experience in Web front-end programming, modeling and data analysis &processing. More importantly, I have a strong interest in using computer science tools to solve various interdisciplinary problems. | + | <figcaption>I have rich experience in Web front-end programming, modeling and data analysis &processing. More importantly, I have a strong interest in using computer science tools to solve various interdisciplinary problems.I like Beijing Opera and literature. </figcaption> |
</figure> | </figure> | ||
</div> | </div> | ||
Line 375: | Line 452: | ||
</div> | </div> | ||
− | < | + | </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> |
− | + | ||
− | + | ||
− | </br> </br></br></br></br> </br></br></br></br> </br></br></br></br> </br></br></br> | + | |
− | + | ||
− | + | ||
Line 412: | Line 484: | ||
</div> | </div> | ||
</div> | </div> | ||
+ | |||
</div> | </div> | ||
+ | </div> | ||
+ | <script src="https://2018.igem.org/wiki/index.php?title=Template:Tongji-Software/test/js/jquery-1.8.3.min.js&action=raw&ctype=text/javascript"></script> | ||
+ | <script src="https://2018.igem.org/wiki/index.php?title=Template:Tongji-Software/test/js/bootstrap.min.js&action=raw&ctype=text/javascript"></script> | ||
+ | <script type="text/javascript"> | ||
+ | $(document).ready(function () { | ||
+ | var trigger = $('.icon'), | ||
+ | slide = $('.left'), | ||
+ | isClosed = true; | ||
+ | |||
+ | trigger.mouseover(function () { | ||
+ | cross_out(); | ||
+ | }); | ||
+ | slide.mouseleave(function () { | ||
+ | cross_in(); | ||
+ | }); | ||
+ | |||
+ | function cross_out() { | ||
+ | if (isClosed == true) { | ||
+ | trigger.removeClass('is-open'); | ||
+ | trigger.addClass('is-closed'); | ||
+ | |||
+ | $('#wrapper').toggleClass('toggled'); | ||
+ | isClosed = false; | ||
+ | } | ||
+ | } | ||
+ | function cross_in() { | ||
+ | if (isClosed == false) { | ||
+ | trigger.removeClass('is-closed'); | ||
+ | trigger.addClass('is-open'); | ||
+ | |||
+ | $('#wrapper').toggleClass('toggled'); | ||
+ | isClosed = true; | ||
+ | } | ||
+ | } | ||
+ | }); | ||
+ | </script> | ||
+ | |||
+ | <script> | ||
+ | window.onload = function(){ | ||
+ | |||
+ | var mybtn = document.getElementById("btn"); | ||
+ | var Time1 = null; | ||
+ | var isTop = true; | ||
+ | mybtn.onclick = function(){ | ||
+ | |||
+ | Time1 = setInterval(function(){ | ||
+ | var osTop = document.body.scrollTop||document.documentElement.scrollTop; | ||
+ | |||
+ | var speed = Math.ceil(osTop/2); | ||
+ | |||
+ | document.body.scrollTop = document.documentElement.scrollTop = osTop - speed; | ||
+ | if(osTop <= 0){ | ||
+ | |||
+ | clearInterval(Time1); | ||
+ | } | ||
+ | isTop = true ; | ||
+ | },100) | ||
+ | } | ||
+ | |||
+ | |||
+ | window.onscroll = function(){ | ||
+ | |||
+ | var osTop = document.body.scrollTop||document.documentElement.scrollTop; | ||
+ | |||
+ | var clientHeight = document.documentElement.clientHeight; | ||
+ | |||
+ | if (osTop>clientHeight) { | ||
+ | mybtn.style.display = "block" | ||
+ | } | ||
+ | else{ | ||
+ | mybtn.style.display = "none" | ||
+ | } | ||
+ | if (!isTop) { | ||
+ | clearInterval(Time1); | ||
+ | } | ||
+ | isTop = false; | ||
+ | } | ||
+ | } | ||
+ | </script> | ||
</body> | </body> | ||
</html> | </html> |
Latest revision as of 16:25, 17 October 2018
Team
Overview
The collective is the source of power and the cradle of wisdom.
Our team is consisted of different people with same passion for inter-discipline. Differences make the team integrated. Some of us were best friends before iGEM 2018. Some of us didn’t even meet. We are from various majors, biology, biotechnology, bioinformatics, computer engineering & design.
Since we only have seven team members, each of us has made great difference in our project.
Team members
xdbwiehocurnviomtoinb
Instructors