Difference between revisions of "Template:Manchester/CSS1"

Line 9: Line 9:
 
<style>
 
<style>
  
−
@keyframes bounce{
+
.box-shadow-menu {
−
    0%{background-size: 150px; background-position: 600px 250px;}
+
  position: relative;
−
    25%{background-size: 150px 140px; background-position: 600px 260px;}
+
  padding-left: 1.25em;
−
    50%{background-size: 150px; background-position: 600px 250px;}
+
  display:none;
−
    75%{background-size: 150px 160px; background-position: 600px 240px;}
+
  right : 0;
−
    100%{background-size: 150px; background-position: 600px 250px;}
+
  border: 1px solid black;
 +
  background: orange;
 +
  padding: 17px;
 +
  top: 15px;
 +
  width: 100%;
 +
  text-align: center;
 +
  text-decoration : none;
 +
  color: black;
 +
  cursor: pointer;
 +
  height: 20px;
 
}
 
}
  
  
  
−
.no-js #loader { display: none; }
+
.box-shadow-menu:before {
−
.js #loader { display: block
+
  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;}
 +
}
 +
 
 +
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>
 +
</body>
 +
 
 +
</html>

Revision as of 23:28, 23 August 2016