(146 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
− | |||
<html> | <html> | ||
− | |||
− | + | <style type="text/css"> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | #sideMenu, #top_title, .patrollink {display:none;} | |
− | + | #content {background:transparent; margin-top:30px; padding:0px; width:100%;} | |
− | + | body { | |
− | + | font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, serif; | |
− | + | font-size: 18px; | |
− | + | line-height: 1.5em; | |
− | + | color: #6b3b25; | |
− | + | background: url(https://static.igem.org/mediawiki/2018/b/b9/T--SJTU-software--background.png); | |
− | + | background-size: 100%; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ul{ | |
− | + | list-style:none; | |
− | + | ||
− | + | } | |
− | + | .wrapper { | |
− | + | width: 1000px; | |
− | + | margin: auto auto auto auto; | |
− | + | background: #dedad3; | |
− | + | -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5); | |
− | + | -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5); | |
− | + | -o-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5); | |
− | + | box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5); | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | /*-----------------------------------------------------------------------------------*/ | |
− | + | /* HEADER(url(https://raw.githubusercontent.com/sjtusoftware2018/2018iGEM_wiki/master/images/bg.png)) | |
− | + | /*-----------------------------------------------------------------------------------*/ | |
+ | header { | ||
+ | background: url(https://static.igem.org/mediawiki/2018/b/b9/T--SJTU-software--header.png); | ||
+ | min-height: 155px; | ||
} | } | ||
− | + | header #logo { | |
− | + | margin-top: 36px; | |
+ | margin-bottom: 20px; | ||
+ | float: left; | ||
} | } | ||
− | + | header #logo:hover { | |
− | + | opacity: 0.8; | |
} | } | ||
− | + | header #logo img { | |
− | + | display: block; | |
− | + | margin: 0 0 0 55px; | |
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | header #title { | |
− | + | color: #6b3b25; | |
− | + | margin-top: 45px; | |
− | + | margin-left: 260px; | |
− | + | font-size: 42px; | |
− | + | font-weight: 700; | |
+ | text-shadow: 0px 1px 0 rgba(255, 255, 255, 0.5); | ||
+ | /* text-align: center; */ | ||
+ | } | ||
+ | header #subtitle{ | ||
+ | color: #6b3b25; | ||
+ | margin-top: 26px; | ||
+ | margin-left: 260px; | ||
+ | font-size: 26px; | ||
+ | font-weight: 500; | ||
+ | text-shadow: 0px 1px 0 rgba(255, 255, 255, 0.5); | ||
+ | } | ||
+ | /*---------------------------------------------------------------*/ | ||
− | . | + | /*-----------------------------------------------------------------------------------*/ |
− | + | /* Nav | |
− | + | /*-----------------------------------------------------------------------------------*/ | |
− | + | nav { | |
+ | background: url(https://static.igem.org/mediawiki/2018/5/54/T--SJTU-software--nav.png) no-repeat top center; | ||
+ | height: 65px; | ||
+ | width: 1038px; | ||
+ | margin-left: -20px; | ||
+ | font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial; | ||
+ | font-size: 16px; | ||
+ | font-weight: 700; | ||
} | } | ||
− | + | nav #menu-icon { | |
− | + | display: none; | |
− | + | background: red; | |
− | + | width: 40px; | |
− | + | height: 40px; | |
+ | } | ||
+ | nav #nav { | ||
+ | display: block; | ||
+ | margin-left: 35px; | ||
+ | /* substract 15 from the link padding */ | ||
} | } | ||
− | + | nav #nav > li { | |
− | + | display: block; | |
+ | float: left; | ||
+ | /* Subnavigation ----------------------------------------------------*/ | ||
} | } | ||
− | + | nav #nav > li:hover a, | |
− | + | nav #nav > li.current-menu-item a, | |
+ | nav #nav > li.current_page_item a { | ||
+ | background: #62493d; | ||
+ | text-shadow: 0px 2px 0px #444; | ||
} | } | ||
− | + | nav #nav > li > a { | |
− | + | display: block; | |
− | + | line-height: 65px; | |
+ | padding-left: 15px; | ||
+ | padding-right: 15px; | ||
+ | text-decoration: none; | ||
+ | color: #dedad3; | ||
+ | text-shadow: 0px 2px 0px #c68301; | ||
} | } | ||
− | .sf-menu a { | + | nav #nav > li.important a { |
− | + | color: #ffe09f; | |
− | + | } | |
+ | nav #nav > li ul { | ||
+ | margin-top: 20px; | ||
+ | background: #62493d; | ||
+ | } | ||
+ | nav #nav > li ul li { | ||
+ | border-bottom: 1px solid #806d63; | ||
+ | } | ||
+ | nav #nav > li ul li:last-child { | ||
+ | border-bottom: none; | ||
+ | } | ||
+ | nav #nav > li ul a { | ||
+ | display: block; | ||
+ | color: #dedad3; | ||
+ | text-decoration: none; | ||
+ | line-height: 1.5em; | ||
+ | padding: 15px; | ||
+ | } | ||
+ | nav #nav > li ul a:hover { | ||
+ | color: #e09402; | ||
+ | } | ||
+ | /*-----------------------------------------------------------------------------------*/ | ||
+ | |||
+ | /*** ESSENTIAL STYLES ***/ | ||
+ | |||
+ | .sf-menu, .sf-menu * { | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | list-style: none; | ||
+ | } | ||
+ | |||
+ | .sf-menu ul { | ||
+ | position: absolute; | ||
+ | top: -999em; | ||
+ | margin-left: 0em; | ||
+ | width: 10em; /* left offset of submenus need to match (see below) */ | ||
+ | |||
+ | } | ||
+ | .sf-menu ul li { | ||
+ | width: 100%; | ||
+ | } | ||
+ | .sf-menu li:hover { | ||
+ | visibility: inherit; /* fixes IE7 'sticky bug' */ | ||
+ | } | ||
+ | .sf-menu li { | ||
+ | float: left; | ||
+ | position: relative; | ||
+ | } | ||
+ | .sf-menu a { | ||
+ | display: block; | ||
+ | position: relative; | ||
+ | } | ||
+ | .sf-menu li:hover ul, | ||
+ | .sf-menu li.sfHover ul { | ||
+ | left: 0; | ||
+ | top: 2.5em; /* match top ul list item height */ | ||
+ | z-index: 99; | ||
+ | } | ||
+ | ul.sf-menu li:hover li ul, | ||
+ | ul.sf-menu li.sfHover li ul { | ||
+ | top: -999em; | ||
+ | } | ||
+ | ul.sf-menu li li:hover ul, | ||
+ | ul.sf-menu li li.sfHover ul { | ||
+ | left: 10em; /* match ul width */ | ||
+ | top: 0; | ||
+ | } | ||
+ | ul.sf-menu li li:hover li ul, | ||
+ | ul.sf-menu li li.sfHover li ul { | ||
+ | top: -999em; | ||
+ | } | ||
+ | ul.sf-menu li li li:hover ul, | ||
+ | ul.sf-menu li li li.sfHover ul { | ||
+ | left: 10em; /* match ul width */ | ||
+ | top: 0; | ||
+ | } | ||
+ | /* MAIN | ||
+ | /*-----------------------------------------------------------------------------------*/ | ||
+ | #main { | ||
+ | min-height: 500px; | ||
+ | position: relative; | ||
+ | border-top: 5px solid #c6c2bc; | ||
} | } | ||
− | + | #main .tagline { | |
− | + | font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial; | |
− | + | line-height: 1.3em; | |
− | + | font-size: 36px; | |
− | + | font-weight: 700; | |
+ | text-shadow: 0px 1px 0 rgba(255, 255, 255, 0.5); | ||
+ | text-align: center; | ||
+ | margin-bottom: 40px; | ||
+ | margin-right: 30px; | ||
+ | margin-left: 30px; | ||
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | /* cf: contain floats*/ | |
− | + | .cf:before, | |
− | + | .cf:after { | |
− | + | content: " "; /* 1 */ | |
− | + | display: table; /* 2 */ | |
− | + | } | |
− | + | .cf:after { | |
− | + | clear: both; | |
− | + | } | |
− | + | /* | |
− | + | * For IE 6/7 only | |
− | + | * Include this rule to trigger hasLayout and contain floats. | |
− | + | */ | |
− | + | .cf { | |
− | + | *zoom: 1; | |
− | + | } | |
− | + | /* ==========================================================================*/ | |
− | + | .slider-wrapper{ | |
− | + | margin: 30px auto 0px auto; | |
− | + | width: 940px; | |
− | + | } | |
+ | |||
+ | /* The Nivo Slider styles */ | ||
+ | .nivoSlider { | ||
+ | position:relative; | ||
+ | width:100%; | ||
+ | height:auto; | ||
+ | overflow: hidden; | ||
− | + | border: 5px solid #fff; | |
− | + | margin-left: -5px; /* Adjust 5px because of the border width 5px*/ | |
− | + | ||
− | + | -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,.2); | |
− | + | -moz-box-shadow: 0px 0px 5px rgba(0,0,0,.2); | |
− | + | -o-box-shadow: 0px 0px 5px rgba(0,0,0,.2); | |
− | + | box-shadow: 0px 0px 5px rgba(0,0,0,.2); | |
− | + | ||
− | + | } | |
− | + | .nivoSlider img { | |
− | + | position:absolute; | |
− | + | top:0px; | |
− | + | left:0px; | |
− | + | max-width: none; | |
− | + | } | |
− | } | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | .nivo-main-image { | |
− | + | display: block !important; | |
− | + | position: relative !important; | |
− | + | width: 100% !important; | |
− | + | } | |
− | + | /* If an image is wrapped in a link */ | |
− | + | .nivoSlider a.nivo-imageLink { | |
− | + | position:absolute; | |
− | + | top:0px; | |
− | + | left:0px; | |
− | + | width:100%; | |
− | + | height:100%; | |
− | + | border:0; | |
− | + | padding:0; | |
− | + | margin:0; | |
− | + | z-index:6; | |
− | + | display:none; | |
− | + | } | |
− | + | /* The slices and boxes in the Slider */ | |
− | + | .nivo-slice { | |
− | + | display:block; | |
− | + | position:absolute; | |
− | + | z-index:5; | |
− | + | height:100%; | |
− | + | top:0; | |
− | + | } | |
− | + | .nivo-box { | |
− | + | display:block; | |
− | + | position:absolute; | |
− | + | z-index:5; | |
− | + | overflow:hidden; | |
− | + | } | |
− | + | .nivo-box img { display:block; } | |
− | + | /* Caption styles */ | |
− | + | .nivo-caption { | |
− | + | position:absolute; | |
− | + | left:0px; | |
− | + | bottom:0px; | |
− | + | background:#000; | |
− | + | color:#fff; | |
− | + | width:100%; | |
− | + | z-index:8; | |
− | + | padding: 5px 10px; | |
− | + | opacity: 0.8; | |
− | + | overflow: hidden; | |
− | + | display: none; | |
− | + | -moz-opacity: 0.8; | |
− | + | filter:alpha(opacity=8); | |
− | + | -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ | |
− | + | -moz-box-sizing: border-box; /* Firefox, other Gecko */ | |
− | + | box-sizing: border-box; /* Opera/IE 8+ */ | |
− | + | } | |
− | + | .nivo-caption p { | |
− | + | padding:5px; | |
− | + | margin:0; | |
− | + | } | |
− | + | .nivo-caption a { | |
− | + | display:inline !important; | |
− | + | } | |
− | + | .nivo-html-caption { | |
− | + | display:none; | |
− | + | } | |
− | + | /* Direction nav styles (e.g. Next & Prev) */ | |
− | + | .nivo-directionNav a { | |
− | + | position:absolute; | |
− | + | top:45%; | |
− | + | z-index:9; | |
− | + | cursor:pointer; | |
− | + | } | |
− | + | .nivo-prevNav { | |
− | + | left:0px; | |
− | + | } | |
− | + | .nivo-nextNav { | |
− | + | right:0px; | |
− | + | } | |
− | + | /* Control nav styles (e.g. 1,2,3...) */ | |
− | + | .nivo-controlNav { | |
− | + | text-align:left; | |
− | + | padding: 10px 0 15px 0px; | |
− | + | } | |
− | + | .nivo-controlNav a { | |
− | + | display: inline-block; | |
− | + | cursor:pointer; | |
− | + | background: #62493d; | |
− | + | width: 10px; | |
− | + | height: 10px; | |
− | + | text-indent: -9000px; | |
− | + | margin-right: 5px; | |
− | + | ||
− | + | -moz-border-radius: 10px; | |
− | + | -webkit-border-radius: 10px; | |
− | + | border-radius: 10px; | |
− | + | ||
− | + | border: 2px solid #f1f1f1; | |
− | + | border-top: 2px solid #ffffff; | |
− | + | ||
− | + | -webkit-box-shadow: 0px 0px 2px rgba(0,0,0,.3); | |
− | + | -moz-box-shadow: 0px 0px 2px rgba(0,0,0,.3); | |
− | + | -o-box-shadow: 0px 0px 2px rgba(0,0,0,.3); | |
− | + | box-shadow: 0px 0px 2px rgba(0,0,0,.2); | |
− | + | } | |
− | + | .nivo-controlNav a.active { | |
− | + | background: #e09402; | |
− | + | } | |
− | + | /* Widgets block | |
− | + | /*-----------------------------------------------------------------------------------*/ | |
− | + | .widget-cols { | |
− | + | position: relative; | |
− | + | display: block; | |
− | + | background: #62493d url(https://static.igem.org/mediawiki/2018/e/e5/T--SJTU-software--widgets.png) repeat; | |
− | + | font-size: 14px; | |
− | + | color: #e7d7ba; | |
− | + | text-shadow: 0px -1px 0 rgba(0, 0, 0, 0.5); | |
− | + | text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.4); | |
− | + | border-top: 4px solid #e09402; | |
− | + | padding-left: 10px; | |
− | + | padding-top: 10px; | |
− | + | margin: auto; | |
− | + | height:230px; | |
− | + | } | |
− | + | .widget-cols h1, | |
− | + | .widget-cols h2, | |
− | + | .widget-cols h3, | |
− | + | .widget-cols h4, | |
− | + | .widget-cols h5, | |
− | + | .widget-cols h6 { | |
− | + | font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial; | |
− | + | color: #e09402; | |
− | + | margin-bottom: 20px; | |
− | + | font-weight: 700; | |
− | + | } | |
− | + | .widget-cols a { | |
− | + | color: #e09402; | |
− | + | text-decoration: none; | |
− | + | } | |
− | + | .widget-cols a:hover { | |
− | + | color: #e7d7ba; | |
− | + | border-bottom: 1px dotted #e7d7ba; | |
− | + | } | |
− | + | .widget-cols > ul { | |
− | .widget-cols > li { | + | width: 230px; |
− | + | list-style:none; | |
− | + | float: left; | |
− | + | margin-left: 10px; | |
− | + | margin-bottom: 20px; | |
− | + | } | |
− | + | .widget-cols > li { | |
− | + | width: 220px; | |
− | + | float: left; | |
− | + | margin-left: 5px; | |
− | + | margin-bottom: 20px; | |
− | + | } | |
− | + | .widget-cols .scroll { | |
− | + | content: ''; | |
− | + | position: absolute; | |
− | + | top: -40px; | |
− | + | left: 50%; | |
− | + | margin-left: -23px; | |
− | + | background: url(https://static.igem.org/mediawiki/2018/f/ff/T--SJTU-software--bottom-arrow.png) no-repeat; | |
− | + | height: 41px; | |
− | + | width: 46px; | |
− | + | } | |
− | + | .widget-cols .scroll:hover { | |
− | + | background-position: 0px -41px; | |
+ | } | ||
+ | .multiplebgs .widget-cols { | ||
+ | background-image: url(https://static.igem.org/mediawiki/2018/9/91/T--SJTU-software--widgets-shadow.png), url(https://static.igem.org/mediawiki/2018/e/e5/T--SJTU-software--widgets.png); | ||
+ | background-repeat: repeat-x, repeat; | ||
+ | background-position: left bottom, left bottom; | ||
+ | } | ||
− | + | .footer-divider { | |
− | + | background: #5a453b; | |
− | + | border-top: 1px solid #644d42; | |
− | + | border-bottom: 1px solid #523f35; | |
− | + | height: 8px; | |
− | + | width: 100%; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | /* FOOTER | |
− | + | /*-----------------------------------------------------------------------------------*/ | |
+ | footer { | ||
+ | position: relative; | ||
+ | text-align: center; | ||
+ | padding: 15px 15px 15px 15px; | ||
+ | font-size: 22px; | ||
+ | color: #e09402; | ||
+ | background: #62493d url(https://static.igem.org/mediawiki/2018/b/b6/T--SJTU-software--footer.png) repeat-x center top; | ||
+ | text-shadow: 0px -1px 0 rgba(0, 0, 0, 0.5); | ||
+ | } | ||
+ | footer:after { | ||
+ | content: ''; | ||
+ | position: absolute; | ||
+ | bottom: -46px; | ||
+ | height: 46px; | ||
+ | right: 6px; | ||
+ | width: 100%; | ||
+ | width: 940px\9; | ||
+ | background: url(https://static.igem.org/mediawiki/2018/5/5b/T--SJTU-software--main-shadow.png) no-repeat top center; | ||
+ | } | ||
+ | footer a { | ||
+ | text-decoration: none; | ||
+ | color: #e09402; | ||
+ | } | ||
+ | footer a:hover { | ||
+ | color: #fff; | ||
+ | } | ||
+ | </style> | ||
<body> | <body> | ||
<div class="wrapper"> | <div class="wrapper"> | ||
<!-- HEADER --> | <!-- HEADER --> | ||
<header class="cf"> | <header class="cf"> | ||
− | <div id="logo"><a href="https://2018.igem.org/Team:SJTU-software"> <img src="https:// | + | <div id="logo"><a href="https://2018.igem.org/Team:SJTU-software"> <img src="https://static.igem.org/mediawiki/2018/0/04/T--SJTU-software--teamlogo.png" height="90"/></a></div> |
<div id="title">SJTU-software</div> | <div id="title">SJTU-software</div> | ||
− | <div id="subtitle">Metlab: a metabolic network | + | <div id="subtitle">Metlab: a metabolic network research tool box</div> |
</header> | </header> | ||
Line 468: | Line 481: | ||
<nav class="cf"> | <nav class="cf"> | ||
<ul id="nav" class="sf-menu"> | <ul id="nav" class="sf-menu"> | ||
− | <li | + | <li><a href="https://2018.igem.org/Team:SJTU-software">HOME</a></li> |
<li><a href="">TEAM</a> | <li><a href="">TEAM</a> | ||
<ul> | <ul> | ||
− | <li><a href="https://2018.igem.org/Team:SJTU-software/ | + | <li><a href="https://2018.igem.org/Team:SJTU-software/Team">TEAM</a></li> |
− | <li><a href="https://2018.igem.org/Team:SJTU-software/ | + | <li><a href="https://2018.igem.org/Team:SJTU-software/Video">VIDEO</a></li> |
+ | <li><a href="https://2018.igem.org/Team:SJTU-software/Collaborations">COLLABRATIONS</a></li> | ||
</ul> | </ul> | ||
</li> | </li> | ||
<li><a href="">PROJECT</a> | <li><a href="">PROJECT</a> | ||
<ul> | <ul> | ||
− | <li><a href="">DESCRIPTION</a></li> | + | <li><a href="https://2018.igem.org/Team:SJTU-software/Description">DESCRIPTION</a></li> |
− | <li><a href=""> | + | <li><a href="https://2018.igem.org/Team:SJTU-software/Document">DOCUMENT</a></li> |
− | <li><a href=""> | + | <li><a href="https://2018.igem.org/Team:SJTU-software/Design">DESIGN</a></li> |
− | <li><a href=" | + | <li><a href="https://2018.igem.org/Team:SJTU-software/Demonstrate">DEMONSTRATE</a></li> |
− | + | <li><a href="https://2018.igem.org/Team:SJTU-software/Improve">IMPROVE</a></li> | |
− | <li><a href="">IMPROVE</a></li> | + | <li><a href="https://2018.igem.org/Team:SJTU-software/Attributions">ATTRIBUTIONS</a></li> |
− | <li><a href="">ATTRIBUTIONS</a></li> | + | |
</ul> | </ul> | ||
</li> | </li> | ||
<li><a href="">HUMAN PRACTICE</a> | <li><a href="">HUMAN PRACTICE</a> | ||
<ul> | <ul> | ||
− | <li><a href=" | + | <li><a href="https://2018.igem.org/Team:SJTU-software/Human_Practices">INTERCRATED AND GOLD</a></li> |
− | + | <li><a href="https://2018.igem.org/Team:SJTU-software/Public_Engagement">PUBLIC ENGAGEMENT</a></li> | |
− | <li><a href="">PUBLIC ENGAGEMENT</a></li> | + | |
</ul> | </ul> | ||
+ | </li> | ||
+ | <li><a href="https://2018.igem.org/Team:SJTU-software/Safety">SAFETY</a> | ||
</li> | </li> | ||
</ul> | </ul> | ||
Line 497: | Line 511: | ||
<!-- ENDS NAV--> | <!-- ENDS NAV--> | ||
− | + | </div> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
</body> | </body> | ||
</html> | </html> |
Latest revision as of 07:42, 17 October 2018