|
|
| Line 9: |
Line 9: |
| | <style> | | <style> |
| | | | |
| − | .no-js #loader { display: none; }
| + | @keyframes bounce{ |
| − | .js #loader { display: block; position: absolute; left: 100px; top: 0; }
| + | 0%{background-size: 150px; background-position: 600px 250px;} |
| − | .se-pre-con {
| + | 25%{background-size: 150px 140px; background-position: 600px 260px;} |
| − | position: fixed;
| + | 50%{background-size: 150px; background-position: 600px 250px;} |
| − | left: 0px;
| + | 75%{background-size: 150px 160px; background-position: 600px 240px;} |
| − | top: 0px;
| + | 100%{background-size: 150px; background-position: 600px 250px;} |
| − | width: 100%;
| + | |
| − | height: 100%;
| + | |
| − | z-index: 9999;
| + | |
| − | background: url(https://static.igem.org/mediawiki/2016/7/7b/Manchester_logo.gif) center no-repeat #fff;
| + | |
| − | background-size: 150px;
| + | |
| | } | | } |
| | | | |
| | | | |
| | | | |
| − | .box-shadow-menu { | + | .no-js #loader { display: none; } |
| − | position: relative;
| + | .js #loader { display: block |
| − | padding-left: 1.25em;
| + | |
| − | display:none;
| + | |
| − | right : 0;
| + | |
| − | border: 1px solid black;
| + | |
| − | background: orange;
| + | |
| − | padding: 17px;
| + | |
| − | top: 15px;
| + | |
| − | width: 100%;
| + | |
| − | text-align: center;
| + | |
| − | text-decoration : none;
| + | |
| − | color: black;
| + | |
| − | cursor: pointer;
| + | |
| − | height: 20px;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | .box-shadow-menu:before {
| + | |
| − | content: "";
| + | |
| − | position: absolute;
| + | |
| − | right: 30px;
| + | |
| − | top: 0.6em;
| + | |
| − | width: 2em;
| + | |
| − | height: 0.35em;
| + | |
| − | background: black;
| + | |
| − | box-shadow:
| + | |
| − | 0 0.5em 0 0 black,
| + | |
| − | 0 1em 0 0 black;
| + | |
| − | }
| + | |
| − |
| + | |
| − | #vid{
| + | |
| − | margin-bottom: 0px;
| + | |
| − | padding:0;
| + | |
| − | position:relative;
| + | |
| − | z-index:-999;
| + | |
| − | height: 100vh;
| + | |
| − | width: 90%;
| + | |
| − | margin-left: 50px;
| + | |
| − | margin-right: auto;
| + | |
| − | margin-top: -10px;
| + | |
| − | }
| + | |
| − | | + | |
| − | @keyframes down {
| + | |
| − | 0% {border-color:purple transparent transparent transparent; }
| + | |
| − | 25% {border-color:yellow transparent transparent transparent;}
| + | |
| − | 50% {border-color:blue transparent transparent transparent ; }
| + | |
| − | 75% {border-color:green transparent transparent transparent ;}
| + | |
| − | 100% {border-color:purple transparent transparent transparent;}
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | /********************************* menu bar formatting ********************************/
| + | |
| − | nav {
| + | |
| − | text-align: center;
| + | |
| − | margin-bottom: 50px;
| + | |
| − | }
| + | |
| − | | + | |
| − | nav ul ul{
| + | |
| − | display: none;
| + | |
| − | z-index: 100;
| + | |
| − | }
| + | |
| − | | + | |
| − | nav ul li:hover > ul {
| + | |
| − | display: block;
| + | |
| − | animation: fadein 0.5s;
| + | |
| − | }
| + | |
| − | | + | |
| − | #nav_bar { | + | |
| − | background-color: orange;
| + | |
| − | display:block;
| + | |
| − | font-size:20px;
| + | |
| − | list-style: none;
| + | |
| − | box-shadow: 0px 0px 9px black;
| + | |
| − | border-radius: 10px;
| + | |
| − | width: 100%;
| + | |
| − | height: 40px;
| + | |
| − | z-index: 100;
| + | |
| − | margin: auto;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | .navbar-fixed {
| + | |
| − | background-color: orange;
| + | |
| − | position: fixed;
| + | |
| − | display:block;
| + | |
| − | font-size:20px;
| + | |
| − | list-style: none;
| + | |
| − | box-shadow: 0px 0px 9px black;
| + | |
| − | border-radius: 10px;
| + | |
| − | width: 100%;
| + | |
| − | left: 20px;
| + | |
| − | top: 15px;
| + | |
| − | }
| + | |
| − | | + | |
| − | nav ul li {
| + | |
| − | float: left;
| + | |
| − | position: relative;
| + | |
| − | | + | |
| − | }
| + | |
| − | | + | |
| − | nav ul > li a:link{
| + | |
| − | color: white;
| + | |
| − | display: block;
| + | |
| − | text-align: center;
| + | |
| − | text-decoration: none;
| + | |
| − | padding: 5px 15px;
| + | |
| − | background-color: orange;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | nav ul > li a:visited{
| + | |
| − | color: white;
| + | |
| − | display: block;
| + | |
| − | text-align: center;
| + | |
| − | text-decoration: none;
| + | |
| − | padding: 5px 15px;
| + | |
| − | background-color: orange;
| + | |
| − | }
| + | |
| − | | + | |
| − | nav ul li:hover a{
| + | |
| − | color: black;
| + | |
| − | text-decoration: none;
| + | |
| − | border-right: 1px solid black;
| + | |
| − | border-left: 1px solid black;
| + | |
| − | border-radius: 5px;
| + | |
| − | background-color: orange;
| + | |
| − | }
| + | |
| − | | + | |
| − | nav ul > li:active > a{
| + | |
| − | background-color: gold;
| + | |
| − | color: green;
| + | |
| − | | + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | nav ul ul{
| + | |
| − | position: absolute;
| + | |
| − | top: 80%;
| + | |
| − | border-radius: 0px;
| + | |
| − | padding: 0;
| + | |
| − | width: 180px;
| + | |
| − | z-index: 100;
| + | |
| − | list-style: none;
| + | |
| − | border-radius: 10px;
| + | |
| − | }
| + | |
| − | | + | |
| − | nav ul ul li{
| + | |
| − | float: none;
| + | |
| − | position: relative;
| + | |
| − | border-bottom: 1px solid black;
| + | |
| − | box-shadow: 0px 0px 9px black;
| + | |
| − | }
| + | |
| − | | + | |
| − | nav ul ul li a:link {
| + | |
| − | padding: 5px 15px;
| + | |
| − | color: white;
| + | |
| − | font-family: "Times New Roman"
| + | |
| − | }
| + | |
| − | | + | |
| − | nav ul ul li a:visited {
| + | |
| − | padding: 5px 15px;
| + | |
| − | color: white;
| + | |
| − | font-family: "Times New Roman"
| + | |
| − | }
| + | |
| − | nav ul ul > li:hover > a{
| + | |
| − | color: black;
| + | |
| − | border: 1px solid black;
| + | |
| − | font-weight: bold;
| + | |
| − | box-shadow: 0px 0px 9px black;
| + | |
| − | border-radius: 5px;
| + | |
| − | }
| + | |
| − | | + | |
| − | nav ul > ul > li:active > a{
| + | |
| − | background-color: gold;
| + | |
| − | }
| + | |
| − | | + | |
| − | .active {
| + | |
| − | float: left;
| + | |
| − | display: block;
| + | |
| − | }
| + | |
| − | | + | |
| − | .active a:link{
| + | |
| − | display: block;
| + | |
| − | color: green;
| + | |
| − | text-align: center;
| + | |
| − | text-decoration:none;
| + | |
| − | padding: 10px 30px;
| + | |
| − | background-color:gold;
| + | |
| − | }
| + | |
| − | | + | |
| − | .active a:visited{
| + | |
| − | display: block;
| + | |
| − | color: green;
| + | |
| − | text-align: center;
| + | |
| − | text-decoration:none;
| + | |
| − | padding: 10px 30px;
| + | |
| − | background-color:gold;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | .active a:hover {
| + | |
| − | color:#4CAF50;
| + | |
| − | }
| + | |
| − |
| + | |
| − | .dropbtn {
| + | |
| − | display: none;
| + | |
| − | position: absolute;
| + | |
| − | }
| + | |
| − | | + | |
| − | .dropbtn li a {
| + | |
| − | color: white;
| + | |
| − | background-color: orange;
| + | |
| − | padding: 12px 16px;
| + | |
| − | text-decoration: none;
| + | |
| − | display: block;
| + | |
| − | }
| + | |
| − | | + | |
| − | .dropbtn li a:hover {
| + | |
| − | color: black;
| + | |
| − | width: 80%;
| + | |
| − | }
| + | |
| − | | + | |
| − | .dropdown_content:hover .dropbtn{
| + | |
| − | display: block;
| + | |
| − | }
| + | |
| − | | + | |
| − | .dropdown_content:hover{
| + | |
| − | background: light-orange;
| + | |
| − | }
| + | |
| − | | + | |
| − | @keyframes fadein {
| + | |
| − | from { opacity: 0; }
| + | |
| − | to { opacity: 1; }
| + | |
| − | }
| + | |
| − | | + | |
| − | @media screen and (min-width:700px){
| + | |
| − | #nav_bar{ display:block}
| + | |
| − | }
| + | |
| − | | + | |
| − | @media screen and (max-width:700px){
| + | |
| − | nav ul li{display: block; float:none; border:1px solid grey;}
| + | |
| − | nav ul ul {width:100%}
| + | |
| − | #nav_bar{ top: 15px; position:relative; display: none; font-size:15px; width:100%; right:0; left:auto; height:auto;}
| + | |
| − | #vid{ display: none}
| + | |
| − | .empty{ display:none;}
| + | |
| − | .box-shadow-menu { display: block;}
| + | |
| − | .se-pre-con{display:none}
| + | |
| − | }
| + | |
| − | | + | |
| − | a.special:link {
| + | |
| − | padding:0;
| + | |
| − | background: gold;
| + | |
| − | border-radius: 10px 0 0 10px;
| + | |
| − | }
| + | |
| − | | + | |
| − | a.special:visited {
| + | |
| − | padding:0;
| + | |
| − | background: gold;
| + | |
| − | border-radius: 10px 0 0 10px;
| + | |
| − | }
| + | |
| − | | + | |
| − | /********************************* CONTENT OF THE PAGE ********************************/
| + | |
| − | | + | |
| − | | + | |
| − | /* Wrapper for the content */
| + | |
| − | .content_wrapper {
| + | |
| − | width: 100%;
| + | |
| − | margin: 0px;
| + | |
| − | padding:0px 0px;
| + | |
| − | float:left;
| + | |
| − | background-color:red;
| + | |
| − | }
| + | |
| − | | + | |
| − | /*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%;
| + | |
| − | }
| + | |
| − | .quarter_size {
| + | |
| − | width: 25%;
| + | |
| − | }
| + | |
| − | .quarter_size img {
| + | |
| − | padding: 10px 15px;
| + | |
| − | width: 89.5%;
| + | |
| − | }
| + | |
| − | .animate {
| + | |
| − | color: purple;
| + | |
| − | animation: myfirst 1s linear infinite ;
| + | |
| − | }
| + | |
| − | @keyframes myfirst {
| + | |
| − | 0% {color:purple; }
| + | |
| − | 25% {color:yellow;}
| + | |
| − | 50% {color:blue; }
| + | |
| − | 75% {color:green;}
| + | |
| − | 100% {color:purple;}
| + | |
| − | }
| + | |
| − | | + | |
| − | .unique {
| + | |
| − | width:95px;
| + | |
| − | color:#3b5998;
| + | |
| − | background-color:white;
| + | |
| − | font-family:"Arial Black";
| + | |
| − | text-decoration: none;
| + | |
| − | }
| + | |
| − | | + | |
| − | .unique:hover {
| + | |
| − | width:95px;
| + | |
| − | background-color: #3b5998;
| + | |
| − | color: white;
| + | |
| − | text-decoration: none;
| + | |
| − | }
| + | |
| − | | + | |
| − | .unique a{
| + | |
| − | color:#3b5998;
| + | |
| − | background-color:white;
| + | |
| − | font-family:"Arial Black";
| + | |
| − | text-decoration: none;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | .unique:hover a{
| + | |
| − | background-color: #3b5998;
| + | |
| − | color: white;
| + | |
| − | text-decoration: none;
| + | |
| − | transition: all 0.4s ease
| + | |
| − | }
| + | |
| − | | + | |
| − | .unique1 {
| + | |
| − | width:75px;
| + | |
| − | color:#4099FF;
| + | |
| − | background-color:white;
| + | |
| − | font-family:"Arial Black";
| + | |
| − | text-decoration: none;
| + | |
| − | }
| + | |
| − | | + | |
| − | .unique1:hover {
| + | |
| − | width:75px;
| + | |
| − | background-color: #4099FF;
| + | |
| − | color: white;
| + | |
| − | text-decoration: none;
| + | |
| − | }
| + | |
| − | | + | |
| − | .unique1 a{
| + | |
| − | color:#4099FF;
| + | |
| − | background-color:white;
| + | |
| − | font-family:"Arial Black";
| + | |
| − | text-decoration: none;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | .unique1:hover a{
| + | |
| − | background-color: #4099FF;
| + | |
| − | color: white;
| + | |
| − | text-decoration: none;
| + | |
| − | transition: all 0.4s ease
| + | |
| − | }
| + | |
| − |
| + | |
| − | body{
| + | |
| − | position: absolute;
| + | |
| − | left:0px;
| + | |
| − | background: linear-gradient(to right, #add8e6 , #A6D785);
| + | |
| − | }
| + | |
| − | | + | |
| − | </style>
| + | |
| − | | + | |
| − | </head>
| + | |
| − | | + | |
| − | <body>
| + | |
| − | | + | |
| − | | + | |
| − | <center>
| + | |
| − | <div class="empty">
| + | |
| − | <a href="#nav_bar" id="link" title="click me!!:D" style="width:100%;height:100vh;position:absolute; left:0px;">
| + | |
| − | <div style="width:100%;height:100vh;position:absolute; left:0px;"> </a>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | | + | |
| − | <video id="vid" loop autoplay>
| + | |
| − | | + | |
| − | <source src="https://static.igem.org/mediawiki/2016/b/bd/T--Manchester--iGEM_banner.mp4" type="video/mp4" >
| + | |
| − | | + | |
| − | </video>
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | </div>
| + | |
| − | </center>
| + | |
| − | | + | |
| − | <a class="box-shadow-menu">
| + | |
| − | </a>
| + | |
| − | | + | |
| − | <nav>
| + | |
| − | | + | |
| − | <ul id="nav_bar">
| + | |
| − | <li>
| + | |
| − | <a class="special "href="https://2016.igem.org/Team:Manchester" title="Home"><img src="https://static.igem.org/mediawiki/2016/7/7b/Manchester_logo.gif" style="width:40px; height:40px"></img></a>
| + | |
| − | </li>
| + | |
| − | <li ><a href="https://2016.igem.org/Team:Manchester/Team"><strong>Team</strong></a>
| + | |
| − | | + | |
| − | <ul>
| + | |
| − | <li><a href="https://2016.igem.org/Team:Manchester/Team">Team</a></li>
| + | |
| − | <li><a href="https://2016.igem.org/Team:Manchester/Collaborations">Collaborations</a></li>
| + | |
| − | </ul>
| + | |
| − | | + | |
| − | </li>
| + | |
| − | | + | |
| − | <li class="dropdown_content"><a href="https://2016.igem.org/Team:Manchester/Description"><strong>Project</strong></a>
| + | |
| − | | + | |
| − | <ul>
| + | |
| − | <li><a href="https://2016.igem.org/Team:Manchester/Description">Description</a></li>
| + | |
| − | <li><a href="https://2016.igem.org/Team:Manchester/Results">Result</a></li>
| + | |
| − | <li><a href="https://2016.igem.org/Team:Manchester/Notebook">Notebook</a></li>
| + | |
| − | </ul>
| + | |
| − | | + | |
| − | </li>
| + | |
| − | | + | |
| − | <li class="dropdown_content"><a href="https://2016.igem.org/Team:Manchester/Parts"><strong>Parts</strong></a>
| + | |
| − | | + | |
| − | <ul>
| + | |
| − | <li><a href="https://2016.igem.org/Team:Manchester/Parts">Parts</a></li>
| + | |
| − | <li><a href="https://2016.igem.org/Team:Manchester/Basic_Part">Basic Part</a></li>
| + | |
| − | <li><a href="https://2016.igem.org/Team:Manchester/Composite_Part">Composite part</a></li>
| + | |
| − | <li><a href="https://2016.igem.org/Team:Manchester/Part_Collection">Parts collection</a></li>
| + | |
| − | </ul>
| + | |
| − | | + | |
| − | </li>
| + | |
| − | | + | |
| − | <li class="dropdown_content"><a href="https://2016.igem.org/Team:Manchester/Safety"><strong>Safety</strong></a></li>
| + | |
| − | <li class="dropdown_content"><a href="https://2016.igem.org/Team:Manchester/Attributions"><strong>Attributions</strong></a></li>
| + | |
| − | <li class="dropdown_content"><a href="https://2016.igem.org/Team:Manchester/Human_Practices"><strong>Human Practices</strong></a>
| + | |
| − | | + | |
| − | <ul>
| + | |
| − | <li><a href="https://2016.igem.org/Team:Manchester/Human_Practices">Human Practices</a></li>
| + | |
| − | <li><a href="https://2016.igem.org/Team:Manchester/HP/Gold">Gold</a></li>
| + | |
| − | <li><a href="https://2016.igem.org/Team:Manchester/HP/Silver">Sliver</a></li>
| + | |
| − | </ul>
| + | |
| − | | + | |
| − | | + | |
| − | </li>
| + | |
| − | <li class="dropdown_content"><a href="https://2016.igem.org/Team:Manchester/Model"><strong>Awards</strong></a>
| + | |
| − |
| + | |
| − | <ul>
| + | |
| − | <li><a href="https://2016.igem.org/Team:Manchester/Model">Modelling</a></li>
| + | |
| − | | + | |
| − | </li>
| + | |
| − | </ul>
| + | |
| − | | + | |
| − | </nav>
| + | |
| − | | + | |
| − | | + | |
| − | <!-- MathJax (LaTeX for the web) -->
| + | |
| − | <script type="text/x-mathjax-config">
| + | |
| − | MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
| + | |
| − | </script>
| + | |
| − | <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
| + | |
| − | | + | |
| − | <script>
| + | |
| − | $(document).ready(function(){
| + | |
| − | $(".box-shadow-menu").click(function(){
| + | |
| − | $("#nav_bar").toggle();
| + | |
| − | });
| + | |
| − | $( window ).resize(function() {
| + | |
| − | $("#nav_bar").show();
| + | |
| − | });
| + | |
| − | });
| + | |
| − | | + | |
| − | | + | |
| − | </script>
| + | |
| − | | + | |
| − | <script>
| + | |
| − | $(window).load(function() {
| + | |
| − | // Animate loader off screen
| + | |
| − | $(".se-pre-con").fadeOut("slow");;
| + | |
| − | });
| + | |
| − | </script>
| + | |
| − | | + | |
| − | | + | |
| − | <div class="se-pre-con"></div>
| + | |
| − | </body>
| + | |
| − | | + | |
| − | </html>
| + | |
