(67 intermediate revisions by 3 users not shown) | |||
Line 1: | Line 1: | ||
<html> | <html> | ||
− | |||
− | |||
− | |||
<style> | <style> | ||
+ | body { | ||
+ | margin: 0; | ||
+ | background-color: #f2f2f2!important; | ||
+ | } | ||
+ | |||
+ | .firstHeading, .logo_2016 { | ||
+ | display: none; | ||
+ | } | ||
+ | #sideMenu{ | ||
+ | display: none; | ||
+ | } | ||
+ | #content { | ||
+ | margin-left: auto; | ||
+ | align-self: center; | ||
+ | } | ||
− | + | .navdiv-wrapper { | |
+ | height: 40px; | ||
+ | background: rgb(82, 81, 81); | ||
+ | } | ||
− | + | .navdiv-cover { | |
− | + | height: 40px; | |
− | + | position: absolute; | |
− | + | background: rgb(82, 81, 81); | |
+ | width: 200vw; | ||
+ | left: -100vw; | ||
− | + | } | |
− | + | ||
− | + | #content .navdiv { | |
− | + | float: none; | |
− | + | margin: 0 auto; | |
− | + | left: 0; | |
− | + | } | |
− | + | ||
− | + | #content .navdiv>a { | |
− | + | position: relative; | |
− | + | } | |
− | + | #content .navdiv ul{ | |
− | + | width: 100%; | |
− | + | height: 40px; | |
− | + | background: rgb(82, 81, 81); | |
− | + | line-height: 20px; | |
− | + | color: white; | |
− | + | margin-right: 15px; | |
− | + | margin-top: 40px; | |
− | + | margin-left: 0px; | |
− | + | text-align: center; | |
+ | |||
+ | } | ||
+ | |||
+ | #content .navdiv ul li a { | ||
+ | text-decoration: none; | ||
+ | color: white; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | |||
+ | #content .navdiv ul li a:hover{ | ||
+ | text-decoration: none; | ||
+ | color: white; | ||
+ | background: rgb(255, 128, 167); | ||
+ | -webkit-transition: all 0.3s ease; | ||
+ | -moz-transition: all 0.3s ease; | ||
+ | -ms-transition: all 0.3s ease; | ||
+ | -o-transition: all 0.3s ease; | ||
+ | transition: all 0.3s ease; | ||
+ | } | ||
+ | |||
+ | #content .navdiv ul li{ | ||
+ | list-style-type: none; | ||
+ | display: inline-block; | ||
+ | position: relative; | ||
+ | color: white; | ||
+ | padding-bottom: 10px; | ||
+ | padding-top: 10px; | ||
+ | padding-left: 20px; | ||
+ | padding-right: 20px; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | |||
+ | #content .navdiv ul li:hover{ | ||
+ | background: rgb(255, 128, 167); | ||
+ | color: white; | ||
+ | -webkit-transition: all 0.3s ease; | ||
+ | -moz-transition: all 0.3s ease; | ||
+ | -ms-transition: all 0.3s ease; | ||
+ | -o-transition: all 0.3s ease; | ||
+ | transition: all 0.3s ease; | ||
+ | |||
+ | } | ||
+ | |||
+ | .navdiv h1{ | ||
+ | width: 300px; | ||
+ | float: left; | ||
+ | cursor: pointer; | ||
+ | margin-left: 15px; | ||
+ | } | ||
+ | |||
+ | .navdiv .logo-wrapper { | ||
+ | position: absolute; | ||
+ | top: -30px; | ||
+ | background: white; | ||
+ | height: 40px; | ||
+ | border: 10px solid rgb(82, 81, 81);; | ||
+ | height: 100px; | ||
+ | border-radius: 100px; | ||
+ | } | ||
+ | |||
+ | .navdiv .logo-wrapper img { | ||
+ | height: 100px; | ||
+ | width: 100px; | ||
+ | padding: 0px 0px 0px 0px; | ||
+ | } | ||
− | + | .navdiv .logo-wrapper#team-logo { | |
− | + | left: -95px; | |
− | + | } | |
− | + | ||
− | + | .navdiv .logo-wrapper#main-logo { | |
+ | left: 920px; | ||
+ | } | ||
− | + | /*.navdiv .logo-wrapper#main-logo { | |
− | + | height: 66px; | |
− | + | left: -134px; | |
− | + | border-width: 7px; | |
− | + | top: -22px; | |
− | + | }*/ | |
− | + | ||
− | + | /*.navdiv .logo-wrapper#main-logo img { | |
− | + | height: 56px; | |
− | + | }*/ | |
− | + | ||
− | + | #content .submenu { | |
− | + | display: none; | |
− | + | position: absolute; | |
− | + | left: 0; | |
+ | top: 40px; | ||
+ | } | ||
+ | |||
+ | #content .submenu a { | ||
+ | color: black; | ||
+ | background: rgb(82, 81, 81); | ||
+ | text-decoration: none; | ||
+ | text-align: left; | ||
+ | display: block; | ||
+ | padding: 10px; | ||
+ | } | ||
+ | |||
+ | #content .submenu a:hover{ | ||
+ | color: white; | ||
+ | background: rgb(160, 158, 158); | ||
+ | border: none; | ||
+ | } | ||
+ | |||
+ | #content .navdiv ul li:hover .submenu { | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | /********************************* CONTENT OF THE PAGE ********************************/ | ||
+ | ul.img-list { | ||
+ | list-style-type: none; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | text-align: center; | ||
+ | |||
+ | } | ||
− | + | ul.img-list li { | |
− | + | display: inline-block; | |
− | + | height: 150px; | |
− | + | margin: 0 0 5px 0; | |
− | + | border: solid 2px; | |
− | + | position: relative; | |
− | + | width: 150px; | |
+ | width: calc(33% - 6px); | ||
+ | } | ||
− | + | ul.img-list img { | |
− | + | width: 100%; | |
− | + | height: 100% | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ul.img-home { | |
− | + | list-style-type: none; | |
− | + | margin: 0; | |
− | + | padding: 0; | |
− | + | text-align: center; | |
− | + | width: 950px | |
− | + | ||
+ | } | ||
− | + | ul.img-home li { | |
− | + | display: inline-block; | |
− | + | margin: 5px 0 0 0; | |
− | + | border: 0px; | |
− | + | position: relative | |
+ | } | ||
− | + | ul.img-home img { | |
− | + | width: 100%; | |
− | + | height: 100% | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ul.header a { | |
+ | color: white; | ||
+ | } | ||
− | + | ul.header a:hover { | |
− | + | color: black; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | span.text-content { | |
− | + | background: rgba(255,255,255,0.7); | |
− | + | color: black; | |
− | + | font-size: 16px; | |
− | + | cursor: pointer; | |
− | + | display: table; | |
− | + | height: 100%; | |
− | + | left: 0; | |
− | + | position: absolute; | |
− | + | vertical-align: middle; | |
− | + | top: 0; | |
− | + | width: 100%; | |
− | + | opacity: 0; | |
− | + | -webkit-transition: opacity 500ms; | |
− | + | -moz-transition: opacity 500ms; | |
− | + | -o-transition: opacity 500ms; | |
− | + | transition: opacity 500ms; | |
− | + | } | |
− | + | span.text-content span { | |
− | + | display: table-cell; | |
− | + | text-align: center; | |
− | + | vertical-align: middle; | |
− | + | } | |
− | + | ul.img-list li:hover span.text-content { | |
− | + | opacity: 1; | |
− | + | } | |
− | + | ul.img-home li:hover span.text-content { | |
− | + | opacity: 1; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
Line 227: | Line 253: | ||
border-bottom:0px; | border-bottom:0px; | ||
color:#f20253; | color:#f20253; | ||
+ | font family: georgia; | ||
} | } | ||
Line 322: | Line 349: | ||
} | } | ||
− | . | + | /* Wrapper for the content */ |
− | + | .content_wrapper { | |
− | + | width: 85%; | |
− | + | margin-left:150px; | |
− | + | padding:10px 0px; | |
− | + | float:left; | |
− | + | background-color:white; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | } | + | |
− | /* | + | /*LAYOUT */ |
+ | .column { | ||
+ | padding: 10px 0px; | ||
+ | float:left; | ||
+ | background-color:white; | ||
+ | } | ||
− | + | .full_size { | |
+ | width:100%; | ||
+ | } | ||
− | + | .full_size img { | |
+ | padding: 10px 15px; | ||
+ | width:96.5%; | ||
+ | } | ||
− | + | .half_size { | |
− | + | width: 50%; | |
− | + | } | |
− | + | .half_size img { | |
− | + | padding: 10px 15px; | |
− | + | width: 93%; | |
} | } | ||
− | + | .clear { | |
+ | clear:both; | ||
+ | } | ||
− | + | .highlight { | |
− | + | width: 90%; | |
− | + | margin: auto; | |
− | + | padding: 15px 5px; | |
− | + | background-color: #f2f2f2; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
+ | .judges-will-not-evaluate { | ||
+ | border: 4px solid #72c9b6; | ||
+ | display: block; | ||
+ | margin: 5px 15px; | ||
+ | width: 95%; | ||
+ | font-weight:bold; | ||
+ | } | ||
</style> | </style> | ||
+ | <!-- HTML --> | ||
+ | |||
+ | <div class="navdiv-wrapper"> | ||
+ | <div class="navdiv-cover"></div> | ||
+ | <div class="navdiv"> | ||
+ | <a href="https://2016.igem.org"> | ||
+ | <div id="main-logo" class="logo-wrapper"> | ||
+ | <img src="https://static.igem.org/mediawiki/2016/1/12/T--MIT--igemlogopink.svg"> | ||
+ | </div> | ||
+ | </a> | ||
+ | <a href="https://2016.igem.org/Team:MIT"> | ||
+ | <div id="team-logo" class="logo-wrapper"> | ||
+ | <img src="https://static.igem.org/mediawiki/2016/9/94/T--MIT--teamlogo1.svg"> | ||
+ | </div> | ||
+ | </a> | ||
+ | <ul> | ||
+ | <li><a href="https://2016.igem.org/Team:MIT/Description">BACKGROUND</a></li> | ||
+ | |||
+ | <li><a href="https://2016.igem.org/Team:MIT/Experiments">EXPERIMENTS</a> | ||
+ | <div class="submenu"> | ||
+ | <a href="https://2016.igem.org/Team:MIT/Experiments/Promoters ">Synthetic Promoters</a> | ||
+ | <a href="https://2016.igem.org/Team:MIT/Experiments/miRNA">microRNA</a> | ||
+ | <a href="https://2016.igem.org/Team:MIT/Experiments/Recombinases ">Recombinase</a> | ||
+ | <a href="https://2016.igem.org/Team:MIT/Proof">Proof of Concept</a> | ||
+ | <a href="https://2016.igem.org/Team:MIT/Collaborations">Collaborations</a> | ||
+ | </div> | ||
+ | </li> | ||
+ | |||
+ | <li><a href="https://2016.igem.org/Team:MIT/Diagnosis_and_Future_Implications">FUTURE WORK</a> | ||
+ | <div class="submenu"> | ||
+ | <a href="https://2016.igem.org/Team:MIT/Genetic_Circuit">Circuit Design</a> | ||
+ | <a href="https://2016.igem.org/Team:MIT/Clinical_Applications">Clinical Applications</a> | ||
+ | </div> | ||
+ | </li> | ||
+ | |||
+ | <li><a href="https://2016.igem.org/Team:MIT/Human_Practices">HUMAN PRACTICES</a> | ||
+ | <div class="submenu"> | ||
+ | <a href="https://2016.igem.org/Team:MIT/Mammalian_synthetic_biology_kit">Parts Toolbox</a> | ||
+ | <a href="https://2016.igem.org/Team:MIT/accessible_protocols">Accessible Protocols</a> | ||
+ | <a href="https://2016.igem.org/Team:MIT/Integrated_Practices">Integrated Human Practices</a> | ||
+ | <a href="https://2016.igem.org/Team:MIT/Engagement">Public Outreach</a> | ||
+ | <a href="https://2016.igem.org/Team:MIT/InterLab">Interlab Study</a> | ||
+ | </div> | ||
+ | </li> | ||
+ | |||
+ | |||
+ | <li><a href="https://2016.igem.org/Team:MIT/Notebook">NOTEBOOK</a> | ||
+ | <div class="submenu"> | ||
+ | <a href="https://2016.igem.org/Team:MIT/Notebook">Lab Notebook</a> | ||
+ | <a href="https://2016.igem.org/Team:MIT/Parts">Parts</a> | ||
+ | <a href="https://2016.igem.org/Team:MIT/Part_Collection">Mammalian Parts Collection</a> | ||
+ | <a href="https://2016.igem.org/Team:MIT/Attributions">Attributions</a> | ||
+ | <a href="https://2016.igem.org/Team:MIT/Safety">Safety</a> | ||
− | + | </div> | |
− | + | </li> | |
− | + | ||
− | + | <li><a href="https://2016.igem.org/Team:MIT/Awards">AWARDS</a> | |
− | + | <div class="submenu"> | |
− | + | <a href="https://2016.igem.org/Team:MIT/HP/Silver">HP Silver</a> | |
− | + | <a href="https://2016.igem.org/Team:MIT/HP/Gold">HP Gold</a> | |
− | + | <a href="https://2016.igem.org/Team:MIT/Integrated_Practices">Integrated HP</a> | |
− | </ | + | <a href="https://2016.igem.org/Team:MIT/Basic_Part">Basic Part</a> |
− | + | ||
− | + | ||
− | + | </div></li> | |
− | + | <li><a href="https://2016.igem.org/Team:MIT/Team">TEAM</a> | |
− | + | </li> | |
− | + | ||
− | + | ||
− | + | </ul> | |
− | + | </div> | |
− | + | </div> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | </div> | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | <div | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
</html> | </html> |
Latest revision as of 21:27, 19 October 2016