Difference between revisions of "Template:UNSW Australia/Header"

 
(52 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
<div class="header" id="description-header">
 
<div class="top-icon-div">
 
<img class="top-icon" src="https://static.igem.org/mediawiki/2018/9/9b/T--UNSW_Australia--Icon-project.png">
 
</div>
 
<div class="bottom-icon-div">
 
<img class="bottom-icon" src="https://static.igem.org/mediawiki/2018/f/f2/T--UNSW_Australia--Icon-project-bw.png">
 
</div>
 
<h1 class="shadow-text main-heading">Description</h1>
 
<div class="header-line">
 
<div id="project-shadow-line" class="header-line-shadow"></div>
 
</div>
 
</div>
 
 
<div class="header" id="design-header">
 
<div class="top-icon-div">
 
<img class="top-icon" src="https://static.igem.org/mediawiki/2018/9/9b/T--UNSW_Australia--Icon-project.png">
 
</div>
 
<div class="bottom-icon-div">
 
<img class="bottom-icon" src="https://static.igem.org/mediawiki/2018/f/f2/T--UNSW_Australia--Icon-project-bw.png">
 
</div>
 
<h1 class="shadow-text main-heading">Design</h1>
 
<div class="header-line">
 
<div id="project-shadow-line" class="header-line-shadow"></div>
 
</div>
 
</div>
 
 
<div class="header" id="cloning-header">
 
<div class="top-icon-div">
 
<img class="top-icon" src="https://static.igem.org/mediawiki/2018/8/8d/T--UNSW_Australia--Icon-lab.png">
 
</div>
 
<div class="bottom-icon-div">
 
<img class="bottom-icon" src="https://static.igem.org/mediawiki/2018/f/f3/T--UNSW_Australia--Icon-lab-bw.png">
 
</div>
 
<h1 class="shadow-text main-heading">Cloning</h1>
 
<div class="header-line">
 
<div id="lab-shadow-line" class="header-line-shadow"></div>
 
</div>
 
</div>
 
 
<div class="header" id="experiments-header">
 
<div class="top-icon-div">
 
<img class="top-icon" src="https://static.igem.org/mediawiki/2018/8/8d/T--UNSW_Australia--Icon-lab.png">
 
</div>
 
<div class="bottom-icon-div">
 
<img class="bottom-icon" src="https://static.igem.org/mediawiki/2018/f/f3/T--UNSW_Australia--Icon-lab-bw.png">
 
</div>
 
<h1 class="shadow-text main-heading">Experiments</h1>
 
<div class="header-line">
 
<div id="lab-shadow-line" class="header-line-shadow"></div>
 
</div>
 
</div>
 
 
<div class="header" id="interlab-header">
 
<div class="top-icon-div">
 
<img class="top-icon" src="https://static.igem.org/mediawiki/2018/8/8d/T--UNSW_Australia--Icon-lab.png">
 
</div>
 
<div class="bottom-icon-div">
 
<img class="bottom-icon" src="https://static.igem.org/mediawiki/2018/f/f3/T--UNSW_Australia--Icon-lab-bw.png">
 
</div>
 
<h1 class="shadow-text main-heading">Interlab</h1>
 
<div class="header-line">
 
<div id="lab-shadow-line" class="header-line-shadow"></div>
 
</div>
 
</div>
 
 
<div class="header" id="assays-header">
 
<div class="top-icon-div">
 
<img class="top-icon" src="https://static.igem.org/mediawiki/2018/8/8d/T--UNSW_Australia--Icon-lab.png">
 
</div>
 
<div class="bottom-icon-div">
 
<img class="bottom-icon" src="https://static.igem.org/mediawiki/2018/f/f3/T--UNSW_Australia--Icon-lab-bw.png">
 
</div>
 
<h1 class="shadow-text main-heading">Assays</h1>
 
<div class="header-line">
 
<div id="lab-shadow-line" class="header-line-shadow"></div>
 
</div>
 
</div>
 
 
<div class="header" id="protein-header">
 
<div class="top-icon-div">
 
<img class="top-icon" src="https://static.igem.org/mediawiki/2018/8/8d/T--UNSW_Australia--Icon-lab.png">
 
</div>
 
<div class="bottom-icon-div">
 
<img class="bottom-icon" src="https://static.igem.org/mediawiki/2018/f/f3/T--UNSW_Australia--Icon-lab-bw.png">
 
</div>
 
<h1 class="shadow-text main-heading">Protein Expression</h1>
 
<div class="header-line">
 
<div id="lab-shadow-line" class="header-line-shadow"></div>
 
</div>
 
</div>
 
 
<div class="header" id="results-header">
 
<div class="top-icon-div">
 
<img class="top-icon" src="https://static.igem.org/mediawiki/2018/8/8d/T--UNSW_Australia--Icon-lab.png">
 
</div>
 
<div class="bottom-icon-div">
 
<img class="bottom-icon" src="https://static.igem.org/mediawiki/2018/f/f3/T--UNSW_Australia--Icon-lab-bw.png">
 
</div>
 
<h1 class="shadow-text main-heading">Results</h1>
 
<div class="header-line">
 
<div id="lab-shadow-line" class="header-line-shadow"></div>
 
</div>
 
</div>
 
 
<div class="header" id="plants-header">
 
<div class="top-icon-div">
 
<img class="top-icon" src="https://static.igem.org/mediawiki/2018/8/8d/T--UNSW_Australia--Icon-lab.png">
 
</div>
 
<div class="bottom-icon-div">
 
<img class="bottom-icon" src="https://static.igem.org/mediawiki/2018/f/f3/T--UNSW_Australia--Icon-lab-bw.png">
 
</div>
 
<h1 class="shadow-text main-heading">Plants</h1>
 
<div class="header-line">
 
<div id="lab-shadow-line" class="header-line-shadow"></div>
 
</div>
 
</div>
 
 
<div class="header" id="team-header">
 
<div class="top-icon-div">
 
<img class="top-icon" src="https://static.igem.org/mediawiki/2018/9/97/T--UNSW_Australia--Icon-people.png">
 
</div>
 
<div class="bottom-icon-div">
 
<img class="bottom-icon" src="https://static.igem.org/mediawiki/2018/a/aa/T--UNSW_Australia--Icon-people-bw.png">
 
</div>
 
<h1 class="shadow-text main-heading">Team</h1>
 
<div class="header-line">
 
<div id="people-shadow-line" class="header-line-shadow"></div>
 
</div>
 
</div>
 
 
<div class="header" id="collaborations-header">
 
<div class="top-icon-div">
 
<img class="top-icon" src="https://static.igem.org/mediawiki/2018/9/97/T--UNSW_Australia--Icon-people.png">
 
</div>
 
<div class="bottom-icon-div">
 
<img class="bottom-icon" src="https://static.igem.org/mediawiki/2018/a/aa/T--UNSW_Australia--Icon-people-bw.png">
 
</div>
 
<h1 class="shadow-text main-heading">Collaborations</h1>
 
<div class="header-line">
 
<div id="people-shadow-line" class="header-line-shadow"></div>
 
</div>
 
</div>
 
 
<div class="header" id="attributions-header">
 
<div class="top-icon-div">
 
<img class="top-icon" src="https://static.igem.org/mediawiki/2018/9/97/T--UNSW_Australia--Icon-people.png">
 
</div>
 
<div class="bottom-icon-div">
 
<img class="bottom-icon" src="https://static.igem.org/mediawiki/2018/a/aa/T--UNSW_Australia--Icon-people-bw.png">
 
</div>
 
<h1 class="shadow-text main-heading">Attributions</h1>
 
<div class="header-line">
 
<div id="people-shadow-line" class="header-line-shadow"></div>
 
</div>
 
</div>
 
 
<div class="header" id="hp-header">
 
<div class="top-icon-div">
 
<img class="top-icon" src="https://static.igem.org/mediawiki/2018/3/33/T--UNSW_Australia--Icon-hp.png">
 
</div>
 
<div class="bottom-icon-div">
 
<img class="bottom-icon" src="https://static.igem.org/mediawiki/2018/2/2b/T--UNSW_Australia--Icon-hp-bw.png">
 
</div>
 
<h1 class="shadow-text main-heading">Human Practices</h1>
 
<div class="header-line">
 
<div id="hp-shadow-line" class="header-line-shadow"></div>
 
</div>
 
</div>
 
 
 
<div class="header" id="parts-header">
 
<div class="top-icon-div">
 
<img class="top-icon" src="https://static.igem.org/mediawiki/2018/c/c0/T--UNSW_Australia--Icon-parts.png">
 
</div>
 
<div class="bottom-icon-div">
 
<img class="bottom-icon" src="https://static.igem.org/mediawiki/2018/f/fe/T--UNSW_Australia--Icon-parts-bw.png">
 
</div>
 
<h1 class="shadow-text main-heading">Parts</h1>
 
<div class="header-line">
 
<div id="parts-shadow-line" class="header-line-shadow"></div>
 
</div>
 
</div>
 
 
<div class="header" id="parts-header">
 
<div class="top-icon-div">
 
<img class="top-icon" src="https://static.igem.org/mediawiki/2018/c/c0/T--UNSW_Australia--Icon-parts.png">
 
</div>
 
<div class="bottom-icon-div">
 
<img class="bottom-icon" src="https://static.igem.org/mediawiki/2018/f/fe/T--UNSW_Australia--Icon-parts-bw.png">
 
</div>
 
<h1 class="shadow-text main-heading">Parts</h1>
 
<div class="header-line">
 
<div id="parts-shadow-line" class="header-line-shadow"></div>
 
</div>
 
</div>
 
 
<div class="header" id="composite-header">
 
<div class="top-icon-div">
 
<img class="top-icon" src="https://static.igem.org/mediawiki/2018/1/16/T--UNSW_Australia--Icon-docs.png">
 
</div>
 
<div class="bottom-icon-div">
 
<img class="bottom-icon" src="https://static.igem.org/mediawiki/2018/d/d4/T--UNSW_Australia--Icon-docs-bw.png">
 
</div>
 
<h1 class="shadow-text main-heading">Composite Part</h1>
 
<div class="header-line">
 
<div id="docs-shadow-line" class="header-line-shadow"></div>
 
</div>
 
</div>
 
 
<div class="header" id="composite-header">
 
<div class="top-icon-div">
 
<img class="top-icon" src="https://static.igem.org/mediawiki/2018/1/16/T--UNSW_Australia--Icon-docs.png">
 
</div>
 
<div class="bottom-icon-div">
 
<img class="bottom-icon" src="https://static.igem.org/mediawiki/2018/d/d4/T--UNSW_Australia--Icon-docs-bw.png">
 
</div>
 
<h1 class="shadow-text main-heading">Composite Part</h1>
 
<div class="header-line">
 
<div id="docs-shadow-line" class="header-line-shadow"></div>
 
</div>
 
</div>
 
 
<div class="header" id="improved-header">
 
<div class="top-icon-div">
 
<img class="top-icon" src="https://static.igem.org/mediawiki/2018/1/16/T--UNSW_Australia--Icon-docs.png">
 
</div>
 
<div class="bottom-icon-div">
 
<img class="bottom-icon" src="https://static.igem.org/mediawiki/2018/d/d4/T--UNSW_Australia--Icon-docs-bw.png">
 
</div>
 
<h1 class="shadow-text main-heading">Improved Part</h1>
 
<div class="header-line">
 
<div id="docs-shadow-line" class="header-line-shadow"></div>
 
</div>
 
</div>
 
 
<div class="header" id="software-header">
 
<div class="top-icon-div">
 
<img class="top-icon" src="https://static.igem.org/mediawiki/2018/1/16/T--UNSW_Australia--Icon-docs.png">
 
</div>
 
<div class="bottom-icon-div">
 
<img class="bottom-icon" src="https://static.igem.org/mediawiki/2018/d/d4/T--UNSW_Australia--Icon-docs-bw.png">
 
</div>
 
<h1 class="shadow-text main-heading">Part Software</h1>
 
<div class="header-line">
 
<div id="docs-shadow-line" class="header-line-shadow"></div>
 
</div>
 
</div>
 
  
 
<style>
 
<style>
Line 253: Line 6:
  
 
@keyframes icon-fade {
 
@keyframes icon-fade {
 +
    0%  {opacity: 0;}
 +
    30%  {opacity: 0;}
 +
    100% {opacity: 1;}
 +
}
 +
 +
@keyframes icon-fade-out {
 +
    0%  {opacity: 1;}
 +
    30%  {opacity: 1;}
 +
    100% {opacity: 0;}
 +
}
 +
 +
@keyframes content-load {
 
     0%  {opacity: 0;}
 
     0%  {opacity: 0;}
 
     30%  {opacity: 0;}
 
     30%  {opacity: 0;}
Line 264: Line 29:
  
 
#content {
 
#content {
   padding-top: 350px;
+
   padding-top: 205px;
 +
}
 +
 
 +
.to-load {
 +
  animation-name: content-load;
 +
  animation-duration: 3s;
 
}
 
}
  
Line 277: Line 47:
  
 
.header {
 
.header {
  display: none;
+
    display: none;
 
}
 
}
  
.top-icon-div, .bottom-icon-div {
+
.header-img-txt {
 
   position: absolute;
 
   position: absolute;
   top: 80px;
+
  right: 10%;
  right: 150px;
+
   top: -20px;
 +
}
 +
 
 +
.top-icon-div, .bottom-icon-div {
 +
    position: absolute;
 +
    top: 80px;
 +
    right: 0px;
 +
    height: 160px;
 +
    width: 160px;
 
}
 
}
  
Line 296: Line 74:
 
   top: 10px;
 
   top: 10px;
 
   width: 600px;
 
   width: 600px;
   right: 380px;
+
   right: 180px;
 
   text-align: right;
 
   text-align: right;
 
   float: right;
 
   float: right;
 +
  padding-right: 5px;
 +
  word-spacing: 15px;
 
}
 
}
  
Line 306: Line 86:
 
   text-decoration: none;
 
   text-decoration: none;
 
   text-transform: uppercase;
 
   text-transform: uppercase;
   font-size: 80px;
+
   font-size: 60px;
  font-weight: 800;
+
 
   letter-spacing: -3px;
 
   letter-spacing: -3px;
 
   line-height: 1;
 
   line-height: 1;
Line 317: Line 96:
 
   border-top: #212121 5px solid;
 
   border-top: #212121 5px solid;
 
   position: absolute;
 
   position: absolute;
   width: 89%;
+
   width: 80%;
   margin: 0 0 0 160px;
+
   margin-left: 10%;
   top: 300px;
+
   top: 225px;
 
   animation-name: line-appear;
 
   animation-name: line-appear;
 
   animation-duration: 1s;
 
   animation-duration: 1s;
Line 343: Line 122:
  
 
#people-shadow-line {
 
#people-shadow-line {
   border-top: #e5b7b7 3px solid;
+
   border-top: #6ba2c1 3px solid;
 
}
 
}
  
Line 349: Line 128:
 
   border-top: #c95d5d 3px solid;
 
   border-top: #c95d5d 3px solid;
 
   opacity: 0.7;
 
   opacity: 0.7;
 +
}
 +
 +
#modelling-shadow-line {
 +
    border-top: #9b3131 3px solid;
 +
    opacity: 0.7;
 
}
 
}
  
 
</style>
 
</style>
 
</html>
 
</html>

Latest revision as of 09:49, 15 October 2018