(86 intermediate revisions by 5 users not shown) | |||
Line 15: | Line 15: | ||
<link rel="stylesheet" type="text/css" | <link rel="stylesheet" type="text/css" | ||
href="https://2016.igem.org/Template:Sheffield/style/slide?action=raw&ctype=text/css" /> | href="https://2016.igem.org/Template:Sheffield/style/slide?action=raw&ctype=text/css" /> | ||
+ | |||
+ | <link rel="stylesheet" type="text/css" | ||
+ | href="https://2016.igem.org/Template:Sheffield/style/banner?action=raw&ctype=text/css" /> | ||
+ | |||
<link rel="stylesheet" type="text/css" | <link rel="stylesheet" type="text/css" | ||
− | href="https://2016.igem.org/Template:Sheffield/style/ | + | href="https://2016.igem.org/Template:Sheffield/style/front?action=raw&ctype=text/css" /> |
+ | |||
+ | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> | ||
+ | |||
+ | <script | ||
+ | src="https://2016.igem.org/Template:Sheffield/scripts/popover?action=raw&ctype=text/javascript"></script> | ||
+ | |||
+ | <script | ||
+ | src="https://2016.igem.org/Template:Sheffield/scripts/front?action=raw&ctype=text/javascript"></script> | ||
<script | <script | ||
src="https://2016.igem.org/Template:Sheffield/scripts/min?action=raw&ctype=text/javascript"></script> | src="https://2016.igem.org/Template:Sheffield/scripts/min?action=raw&ctype=text/javascript"></script> | ||
Line 33: | Line 45: | ||
margin-left:0px; | margin-left:0px; | ||
} | } | ||
− | + | #results { | |
− | + | width:600px; | |
− | + | height:300px; | |
+ | z-index:100; | ||
+ | background-color:rgba(52, 50, 50, 0.85); | ||
+ | border:#eac100 2px solid; | ||
+ | border-radius:5px; | ||
+ | top:50%; | ||
+ | left:50%; | ||
+ | margin-top:-150px; | ||
+ | margin-left:-300px; | ||
+ | position:fixed; | ||
+ | padding:20px; | ||
+ | text-align:center; | ||
+ | } | ||
− | # | + | #results span { |
− | + | color:#eac100; | |
+ | } | ||
+ | |||
+ | .close-results { | ||
+ | border:5px solid #eac100; | ||
+ | padding:10px; | ||
+ | width:300px; | ||
+ | cursor:pointer; | ||
+ | color: #C4AE00; | ||
+ | font-size: 40px; | ||
+ | } | ||
+ | .close-results h3 { | ||
+ | border:5px solid #eac100; | ||
+ | padding:10px; | ||
+ | width:300px; | ||
+ | cursor:pointer; | ||
+ | color: #C4AE00; | ||
+ | font-size: 40px; | ||
+ | } | ||
+ | .table-link { | ||
+ | border-left:#9246D0 1px solid; | ||
+ | border-right:#9246D0 1px solid; | ||
+ | width:250px; | ||
+ | } | ||
+ | #button-link img { | ||
+ | width:200px; | ||
+ | float:none; | ||
+ | } | ||
+ | #button-link p { | ||
+ | font-size:30px; | ||
+ | text-align:center; | ||
} | } | ||
− | # | + | #page th, #page td, #page table { |
border:rgba(1,1,1,0); | border:rgba(1,1,1,0); | ||
padding:0px; | padding:0px; | ||
Line 47: | Line 101: | ||
background-color:rgba(1,1,1,0) ; | background-color:rgba(1,1,1,0) ; | ||
} | } | ||
− | # | + | |
+ | #page h1 { | ||
font-family:Century Gothic; | font-family:Century Gothic; | ||
font-weight:normal; | font-weight:normal; | ||
} | } | ||
+ | |||
+ | #shield p { | ||
+ | font-size:25px; | ||
+ | } | ||
+ | |||
+ | @media (min-width:992px) and (max-width:1199px) { | ||
+ | |||
+ | |||
+ | } | ||
+ | |||
+ | @media (min-width:768px) and (max-width:991px) { | ||
+ | #shield p { | ||
+ | font-size:20px; | ||
+ | } | ||
+ | #shield li { | ||
+ | font-size:20px; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @media (max-width:767px) { | ||
+ | #shield p { | ||
+ | font-size:15px; | ||
+ | margin:10px; | ||
+ | } | ||
+ | |||
+ | #shield li { | ||
+ | font-size:12px; | ||
+ | } | ||
+ | #shield h2 { | ||
+ | font-size:30px; | ||
+ | margin-left:5px; | ||
+ | } | ||
+ | |||
+ | #shield span { | ||
+ | font-size:18px; | ||
+ | } | ||
+ | .table-link { | ||
+ | width:200px; | ||
+ | } | ||
+ | #button-link img { | ||
+ | width:75px; | ||
+ | } | ||
+ | #button-link h3 { | ||
+ | font-size:20px; | ||
+ | } | ||
+ | } | ||
+ | @media( max-width:767px) { | ||
+ | #results { | ||
+ | width:300px; | ||
+ | height:250px; | ||
+ | z-index:100; | ||
+ | top:50%; | ||
+ | left:50%; | ||
+ | margin-top:-125px; | ||
+ | margin-left:-150px; | ||
+ | position:fixed; | ||
+ | padding:10px; | ||
+ | text-align:center; | ||
+ | } | ||
+ | #results p { | ||
+ | font-size:15px; | ||
+ | } | ||
+ | |||
+ | } | ||
</style> | </style> | ||
+ | |||
</head> | </head> | ||
− | <body style=" | + | <body style="background-color:black"> |
+ | <div id="page"> | ||
<nav class="navbar navbar-default navbar-fixed-top"> | <nav class="navbar navbar-default navbar-fixed-top"> | ||
<div class="container"> | <div class="container"> | ||
Line 62: | Line 183: | ||
<div class="navbar-header"> | <div class="navbar-header"> | ||
<div class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> | <div class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> | ||
− | <img src="https://static.igem.org/mediawiki/2016/ | + | <img src="https://static.igem.org/mediawiki/2016/a/a5/T--Sheffield--Website-home-mobile.png"> |
</div> | </div> | ||
<!-- <a class="navbar-brand" href="#">Igem Sheff 16</a> --> | <!-- <a class="navbar-brand" href="#">Igem Sheff 16</a> --> | ||
Line 75: | Line 196: | ||
<th> | <th> | ||
<div class="navimagediv"> | <div class="navimagediv"> | ||
− | <a href=" | + | <a href="https://2016.igem.org/Team:Sheffield"><img src="https://static.igem.org/mediawiki/2016/1/18/T--Sheffield--navbar-logo.png"></a> |
</div> | </div> | ||
</th> | </th> | ||
Line 81: | Line 202: | ||
</li> | </li> | ||
<li class="dropdown" id="li-home"> | <li class="dropdown" id="li-home"> | ||
− | <a href=" | + | <a href="https://2016.igem.org/Team:Sheffield" > |
<center> | <center> | ||
<table id="navtable"> | <table id="navtable"> | ||
Line 100: | Line 221: | ||
</li> | </li> | ||
<li class="dropdown"> | <li class="dropdown"> | ||
− | + | <a href="https://2016.igem.org/Team:Sheffield/Description" class="dropdown-toggle" > | |
<center> | <center> | ||
<table id="navtable"> | <table id="navtable"> | ||
Line 121: | Line 242: | ||
<li class="dropdown"> | <li class="dropdown"> | ||
− | <a href=" | + | <a href="https://2016.igem.org/Team:Sheffield/project" class="dropdown-toggle" > |
<center> | <center> | ||
<table id="navtable"> | <table id="navtable"> | ||
Line 142: | Line 263: | ||
<li class="dropdown"> | <li class="dropdown"> | ||
− | <a href=" | + | <a href="https://2016.igem.org/Team:Sheffield/Team" class="dropdown-toggle" > |
<center> | <center> | ||
<table id="navtable"> | <table id="navtable"> | ||
Line 163: | Line 284: | ||
<li class="dropdown"> | <li class="dropdown"> | ||
− | <a href=" | + | <a href="https://2016.igem.org/Team:Sheffield/Notebook" class="dropdown-toggle" > |
<center> | <center> | ||
<table id="navtable"> | <table id="navtable"> | ||
Line 184: | Line 305: | ||
<li class="dropdown"> | <li class="dropdown"> | ||
− | <a href=" | + | <a href="https://2016.igem.org/Team:Sheffield/judging" class="dropdown-toggle" > |
<center> | <center> | ||
<table id="navtable"> | <table id="navtable"> | ||
Line 208: | Line 329: | ||
<div id="shield"> | <div id="shield"> | ||
− | + | <div id="front"> | |
− | + | <div class="back-video"> | |
− | + | <video loop muted autoplay class="fullscreen-bg"> | |
− | < | + | <source src="https://static.igem.org/mediawiki/2016/c/cc/T--Sheffield--front-background.mp4"> |
− | + | </video> | |
− | + | ||
− | < | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | </ | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
</div> | </div> | ||
+ | <div class="tablet left-box"> | ||
+ | |||
+ | <div class = "left-but"><h1>New Here?</h1></div> | ||
− | + | </div> | |
− | + | ||
− | + | ||
− | <div class = " | + | <div class="tablet right-box"> |
− | + | <div class = "right-but"><h1>Our Theme</h1></div> | |
</div> | </div> | ||
− | < | + | <img class="front-img" src="https://static.igem.org/mediawiki/2016/7/75/T--Sheffield--website-frontimg.png"> |
− | + | ||
− | + | <div class = "phone left-but"><h1>New Here?</h1></div> | |
− | + | <div class = "phone right-but"><h1>Our Theme</h1></div> | |
− | + | ||
− | + | <div id="music"> | |
− | + | <center> | |
− | + | <audio controls> | |
− | + | <source src="https://static.igem.org/mediawiki/2016/9/92/T--Sheffield--IronMarch.mp3" type="audio/mpeg"> | |
− | + | Your browser does not support this audio element. | |
− | + | </audio> | |
− | + | <p>Credit to John Howard for making this wonderful song for us</p> | |
− | + | <div class="close-music"> | |
− | + | <h3>Close</h3> | |
− | + | </div> | |
− | + | </center> | |
− | + | </div> | |
− | + | ||
− | + | </div> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | <div id="about"> | |
− | + | <div class="container"> | |
− | + | <div class="jumbotron"> | |
− | + | <h2>How to use the website - a note from the team</h2> | |
− | + | <p>We welcome you to team Sheffield's wiki for 2016. The website has been designed to run on all devices big or small. We have made the website as interactive as possible.</p> | |
− | + | <p>For the best experience we recommend using a <span>CHROME</span> browser</p> | |
− | + | <p><span>A few things to look out for:</span></p> | |
− | + | <ol> | |
− | + | <li><p>Anytime you see a banner like this:</p> | |
− | + | <center> | |
− | + | <img style="width:200px;float:none" src="https://static.igem.org/mediawiki/2016/8/8e/T--Sheffield--banner-long.png"> | |
− | + | </center> | |
− | + | <p>It will display the text below for that section</p></li> | |
− | + | <li>Words like this <button class="btn btn-lg btn-danger" data-placement="top" data-toggle="popover" title="Important word" data-content="A text definition goes here. Click the button to close me">click me</button> are part of our interactive glossary. Click them to bring up a quick definition of the word and click them again to close</li> | |
− | + | <li>Or if you want to see all our terms look out for the glossary image to take you to our fulls set of definitions</li> | |
− | + | <center> | |
− | + | <a href="https://2016.igem.org/Team:Sheffield/glossary"> | |
− | + | <img style="width:200px;float:none"src="https://static.igem.org/mediawiki/2016/8/86/T--Sheffield--Glossary.png"></a></center> | |
− | + | <li><p><span>Wondering where to start?</span></p><p>Click on our introduction button to start you off</li> | |
− | + | <center> | |
− | + | <div class="table-link"> | |
− | </ | + | <a href="https://2016.igem.org/Team:Sheffield/Description"> |
− | </ | + | <table id="button-link"> |
+ | <tr> | ||
+ | <td><center> | ||
+ | <img src="https://static.igem.org/mediawiki/2016/5/53/T--Sheffield--Intro-Icon.png"> | ||
+ | </center> </td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td><p>INTRODUCTION</p></td> | ||
+ | </tr> | ||
+ | </table> | ||
+ | </a> | ||
+ | </div> | ||
+ | </center> | ||
+ | </ol> | ||
+ | <center> | ||
+ | <div class="close-jumbo"> | ||
+ | <h3>Close</h3> | ||
+ | </div> | ||
+ | </center> | ||
+ | </div> | ||
+ | <div class="back-video"> | ||
+ | <video loop muted autoplay class="fullscreen-bg"> | ||
+ | <source src="https://static.igem.org/mediawiki/2016/c/cc/T--Sheffield--front-background.mp4"> | ||
+ | </video> | ||
</div> | </div> | ||
− | + | ||
− | + | </div> | |
− | + | </div> | |
− | + | <div> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
</div> | </div> | ||
</div> | </div> | ||
Line 460: | Line 421: | ||
================================================== --> | ================================================== --> | ||
<!-- Placed at the end of the document so the pages load faster --> | <!-- Placed at the end of the document so the pages load faster --> | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
Latest revision as of 00:14, 3 December 2016
New Here?
Our Theme
New Here?
Our Theme
Credit to John Howard for making this wonderful song for us
Close
How to use the website - a note from the team
We welcome you to team Sheffield's wiki for 2016. The website has been designed to run on all devices big or small. We have made the website as interactive as possible.
For the best experience we recommend using a CHROME browser
A few things to look out for:
Anytime you see a banner like this:
It will display the text below for that section
- Words like this are part of our interactive glossary. Click them to bring up a quick definition of the word and click them again to close
- Or if you want to see all our terms look out for the glossary image to take you to our fulls set of definitions
Wondering where to start?
Click on our introduction button to start you off