Line 1: | Line 1: | ||
− | |||
<html> | <html> | ||
+ | <meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
+ | <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
+ | <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> | ||
+ | <style> | ||
+ | #sideMenu | ||
+ | { | ||
+ | display:none; /* Disable the display of the annoying side main menu*/ | ||
+ | } | ||
+ | |||
+ | #top_title | ||
+ | { | ||
+ | display:none; /* Disable the annoying title*/ | ||
+ | } | ||
+ | #content { padding:0px; width:100%; margin-left:0%; margin-right:0%;} | ||
+ | </style> | ||
− | < | + | <head> |
− | < | + | <meta charset="utf-8"> |
+ | <meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
+ | <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
+ | </head> | ||
+ | <!-- ////////////////////// START TOP HEADER /////////////////////// --> | ||
+ | <head> | ||
+ | <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
+ | <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> | ||
+ | <style> | ||
+ | body { | ||
+ | background-color:white; | ||
+ | } | ||
+ | .top { | ||
+ | position: absolute; | ||
+ | top: -10px; | ||
+ | left: 0px; | ||
+ | background: #140731; | ||
+ | width: 100%; | ||
+ | height: 110px; | ||
+ | font-family: Corbel; | ||
+ | overflow: visible; | ||
+ | } | ||
+ | .mid { | ||
+ | position: absolute; | ||
+ | left: 0px; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | font-family: Corbel; | ||
+ | z-index:-1; | ||
+ | } | ||
+ | .headline { | ||
+ | color: #ffe; | ||
+ | text-align: center; | ||
+ | padding-top: 40px; | ||
+ | padding-bottom: 60px; | ||
+ | } | ||
+ | .header-subnav { | ||
+ | background: #140731; | ||
+ | width: 100%; | ||
+ | position: absolute; | ||
+ | text-align: center; | ||
+ | margin: 0 auto; | ||
+ | top: 100px; | ||
+ | left: -30px; | ||
+ | font-family: Corbel; | ||
+ | } | ||
+ | .header-subnav li { | ||
+ | float: none; | ||
+ | display: inline-block; | ||
+ | } | ||
+ | .header-subnav li a { | ||
+ | padding: 15px 1rem; | ||
+ | font-size: 13px; | ||
+ | text-decoration: none; | ||
+ | color: #ffe; | ||
+ | text-transform: uppercase; | ||
+ | display: block; | ||
+ | font-weight: bold; | ||
+ | letter-spacing: 1px; | ||
+ | transition: all 0.35s ease-in-out; | ||
+ | border-radius: 4px; | ||
+ | } | ||
+ | .header-subnav li a.is-active { | ||
+ | background: rgba(250, 250, 250, 0.15); | ||
+ | } | ||
+ | .header-subnav li a:hover { | ||
+ | background: #d0d0d0; | ||
+ | color: #140731; | ||
+ | transition: all 0.35s ease-in-out; | ||
+ | } | ||
+ | .fixed1 { | ||
+ | position: fixed; | ||
+ | top: 13px; | ||
+ | } | ||
+ | .circle { | ||
+ | position:absolute; | ||
+ | left: 1160px; | ||
+ | top: 30px; | ||
+ | width: 180px; | ||
+ | height: 180px; | ||
+ | background: #140731; | ||
+ | -moz-border-radius: 90px; | ||
+ | -webkit-border-radius: 90px; | ||
+ | border-radius: 90px; | ||
+ | } | ||
+ | .left { | ||
+ | position: fixed; | ||
+ | left: 0px; | ||
+ | top: 175px; | ||
+ | font-family: Corbel; | ||
+ | background: rgba(250, 250, 250, 0.15); | ||
+ | width: 150px; | ||
+ | z-index:+1; | ||
+ | } | ||
+ | .left-tab { | ||
+ | background-color: rgba(250, 250, 250, 0.1); | ||
+ | display: block; | ||
+ | font-size: 20px; | ||
+ | color: #140731; | ||
+ | -webkit-transition-duration: 0.4s; | ||
+ | transition-duration: 0.4s; | ||
+ | padding-right: 40px; | ||
+ | padding-left: 5px; | ||
+ | padding-top: 5px; | ||
+ | padding-bottom: 5px; | ||
+ | z-index:+1; | ||
+ | } | ||
+ | .left-tab:hover { | ||
+ | background-color: #FF8800; | ||
+ | color: #140731; | ||
+ | font-size: 20px; | ||
+ | -webkit-transition-duration: 0.4s; | ||
+ | transition-duration: 0.4s; | ||
+ | padding-right: -20px; | ||
+ | padding-left: 5px; | ||
+ | border-radius: 4px; | ||
+ | } | ||
+ | .button { | ||
+ | background-color: rgba(250, 250, 250, 0.1); | ||
+ | display: block; | ||
+ | font-size: 16px; | ||
+ | color: #140731; | ||
+ | -webkit-transition-duration: 0.4s; | ||
+ | transition-duration: 0.4s; | ||
+ | padding-right: 40px; | ||
+ | padding-left: 5px; | ||
+ | padding-top: 5px; | ||
+ | padding-bottom: 5px; | ||
+ | z-index:+1; | ||
+ | } | ||
+ | .wrapper { | ||
+ | background: white; | ||
+ | width: 900px; | ||
+ | height: 500px; | ||
+ | border-radius: 5px; | ||
+ | position: relative; | ||
+ | overflow: hidden; | ||
+ | backface-visibility: hidden; | ||
+ | } | ||
− | + | .frame{ | |
− | + | background: transparent; | |
+ | width: 600px; | ||
+ | height: 500px; | ||
+ | border-top: solid 45px white; | ||
+ | border-right: solid 5px white; | ||
+ | border-bottom: solid 5px white; | ||
+ | border-left: solid 5px white; | ||
+ | position: absolute; | ||
+ | z-index: 1; | ||
+ | } | ||
+ | input[type='radio'] { | ||
+ | -webkit-appearance: none; | ||
+ | background: #FF8800; | ||
+ | border-radius: 4px; | ||
+ | border-color: #FF8800; | ||
+ | width: 119px; | ||
+ | height: 35px; | ||
+ | margin: 5px 0 5px 5px; | ||
+ | background-size: 225px 70px; | ||
+ | position: relative; | ||
+ | left: 200px; | ||
+ | float: left; | ||
+ | display: inline; | ||
+ | top: 0; | ||
+ | border-radius: 5px; | ||
+ | z-index: 99999; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | input[type='radio']:before{ | ||
+ | content: attr(data-tooltip); | ||
+ | color: black; | ||
+ | font-size: 20px; | ||
+ | font-family: Corbel; | ||
+ | font-weight:bold; | ||
+ | text-align:center; | ||
+ | position: absolute; | ||
+ | top:5px; | ||
+ | left:25px; | ||
+ | } | ||
+ | input[type='radio']:hover{ | ||
+ | background: white; | ||
+ | color: #FF8800; | ||
+ | border-color: #FF8800; | ||
+ | } | ||
− | + | input[type='radio']:checked{ | |
+ | background: white; | ||
+ | border-color: #FF8800; | ||
+ | } | ||
+ | .tab { | ||
+ | margin-left: -20px; | ||
+ | transition: .3s ease-out; | ||
+ | } | ||
+ | .tab li{ | ||
+ | background: #fff; | ||
+ | color: black; | ||
+ | width: 1000px; | ||
+ | height: 500px; | ||
+ | display: inline; | ||
+ | float: left; | ||
+ | bottom: 0; | ||
+ | z-index: -1; | ||
+ | } | ||
+ | .tab1:checked ~ ul{ | ||
+ | transform: translateY(0); | ||
+ | } | ||
+ | .tab2:checked ~ ul{ | ||
+ | transform: translateY(-500px); | ||
+ | } | ||
− | + | .tab3:checked ~ ul{ | |
− | + | transform: translateY(-1000px); | |
− | + | } | |
− | + | ||
− | + | .tab4:checked ~ ul{ | |
+ | transform: translateY(-1500px); | ||
+ | } | ||
− | + | hr1 { | |
− | + | border: 0; | |
− | + | width: 80%; | |
− | + | color: #140731; | |
+ | background-color: #140731; | ||
+ | height: 2px; | ||
+ | } | ||
− | < | + | hr { |
− | + | border: 0; | |
− | </ | + | width: 80%; |
+ | color: #FF8800; | ||
+ | background-color: #FF8800; | ||
+ | height: 2px; | ||
+ | } | ||
+ | </style> | ||
+ | </head> | ||
− | </ | + | <script> |
+ | /* Dynamic top menu positioning | ||
+ | * | ||
+ | */ | ||
+ | var num = 110; //number of pixels before modifying styles | ||
+ | $(window).bind('scroll', function () { | ||
+ | if ($(window).scrollTop() > num) { | ||
+ | $('.header-subnav').addClass('fixed1'); | ||
+ | } else { | ||
+ | $('.header-subnav').removeClass('fixed1'); | ||
+ | } | ||
+ | }); | ||
+ | //USE SCROLL WHEEL FOR THIS FIDDLE DEMO | ||
− | |||
− | |||
− | |||
− | |||
− | <ul> | + | </script> |
− | <li> | + | |
− | <li> | + | <body> |
− | <li> | + | <div class="top"> |
− | <li> | + | <img alt="" style="position:absolute;z-index:++1;float:left;margin-top:20px;width:390px;height:80px;" src="https://static.igem.org/mediawiki/2016/b/bb/CGU_Taiwan--logo2.jpg"> |
− | <li> | + | <img style="position:absolute;left:1170px;top:35px;z-index:+1;width:155px;height:180px;" src="https://static.igem.org/mediawiki/2016/8/8a/CGU_Taiwan--logo9.jpg"> |
− | <li> | + | <a name='anchor0'></a> |
− | <li> | + | <div class="circle"></div> |
+ | </div> | ||
+ | |||
+ | <header class="top"> | ||
+ | <h1 class="headline">Leijuvant <small></small></h1> | ||
+ | <ul class="header-subnav"> | ||
+ | <li><a href="https://2016.igem.org/Team:CGU_Taiwan">HOME</a></li> | ||
+ | <li><a href="https://2016.igem.org/Team:CGU_Taiwan/Achievements">ACHIEVEMENTS</a></li> | ||
+ | <li><a href="https://2016.igem.org/Team:CGU_Taiwan/Description">PROJECT</a></li> | ||
+ | <li><a href="https://2016.igem.org/Team:CGU_Taiwan/Software">MODELING</a></li> | ||
+ | <li><a href="https://2016.igem.org/Team:CGU_Taiwan/Human_Practices">HUMAN PRACTICES</a></li> | ||
+ | <li><a href="https://2016.igem.org/Team:CGU_Taiwan/Team">PEOPLE</a></li> | ||
+ | <li class="dropdown"><a href="https://2016.igem.org/Team:CGU_Taiwan/Interlab">INTERLAB</a></li> | ||
+ | <li class="dropdown"><a href="https://2016.igem.org/Team:CGU_Taiwan/Safety">SAFETY</a></li> | ||
+ | <li><a href="https://2016.igem.org/Team:CGU_Taiwan/Parts">PARTS</a></li> | ||
</ul> | </ul> | ||
+ | </header> | ||
+ | |||
+ | <div class="mid" style="top:155px;"> | ||
+ | <h1 style="font-size:40px;color:#140731;text-decoration:none;position:absolute;left:600px;top:10px;margin:20px;">People</h1> | ||
+ | <img src="https://static.igem.org/mediawiki/2016/4/44/CGU_Taiwan--team%280%29.jpg" style="width:100%;position:absolute;top:30px;z-index:+1;"> | ||
</div> | </div> | ||
+ | <a name='anchor1'></a> | ||
+ | <div class="mid" style="top:650px;background-color:white;"> | ||
+ | <br><br><br> | ||
+ | <h1 style="font-size:30px;color:#FF8800;text-decoration:none;position:absolute;left:180px;top:50px;margin:20px;">Our Team<HR style="border-color:#FF8800;width:920px;position:absolute;left:180px;top:5px;size:2px;"></h1> | ||
+ | |||
+ | <p style="color:black;text-decoration:none;font-size:18px;position:absolute;left:200px;top:100px;margin-right:100px;margin-left:50px;margin-top:30px;text-align:justify;">Our team consists of 11 members majoring in biomedical sciences or electronic engineering to represent CGU participating in iGEM. We are resourceful, thriving on challenge and eager leaners. Everyone brings what he or she has learned into full play. After interdisciplinary brainstorm for several months, we hope to contribute to the society and world by providing another possibility of adjuvant during the iGEM project. </p> | ||
+ | </div> | ||
+ | </body> | ||
</html> | </html> |
Revision as of 13:33, 19 October 2016
Leijuvant
People
Our Team
Our team consists of 11 members majoring in biomedical sciences or electronic engineering to represent CGU participating in iGEM. We are resourceful, thriving on challenge and eager leaners. Everyone brings what he or she has learned into full play. After interdisciplinary brainstorm for several months, we hope to contribute to the society and world by providing another possibility of adjuvant during the iGEM project.