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

 
(57 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
−
<div class="header" id="project-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">Project</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="people-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="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="journal-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">Journal</h1>
 
−
<div class="header-line">
 
−
<div id="docs-shadow-line" class="header-line-shadow"></div>
 
−
</div>
 
−
</div>
 
  
 
<style>
 
<style>
Line 83: 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 94: Line 29:
  
 
#content {
 
#content {
−
   padding-top: 350px;
+
   padding-top: 205px;
 +
}
 +
 
 +
.to-load {
 +
  animation-name: content-load;
 +
  animation-duration: 3s;
 
}
 
}
  
Line 100: Line 40:
 
   position: absolute;
 
   position: absolute;
 
   top: 100px;
 
   top: 100px;
 +
}
 +
 +
#hp-header h1 {
 +
  top: 60px;
 
}
 
}
  
 
.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 122: 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 132: 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 143: Line 96:
 
   border-top: #212121 5px solid;
 
   border-top: #212121 5px solid;
 
   position: absolute;
 
   position: absolute;
−
   width: 100%;
+
   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 161: Line 114:
 
#project-shadow-line {
 
#project-shadow-line {
 
   border-top: #e2de69 3px solid;
 
   border-top: #e2de69 3px solid;
 +
  opacity: 0.8;
 
}
 
}
  
Line 168: Line 122:
  
 
#people-shadow-line {
 
#people-shadow-line {
−
   border-top: #e5b7b7 3px solid;
+
   border-top: #6ba2c1 3px solid;
 
}
 
}
  
Line 174: 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