Difference between revisions of "Team:UC San Diego"

Line 1: Line 1:
 
{{UC_San_Diego}}
 
{{UC_San_Diego}}
 
<html>
 
<html>
 +
<head>
 
<style>
 
<style>
 
  #landing {
 
  #landing {
 +
  position:relative;
 
   height:80vh;
 
   height:80vh;
−
   margin-top:10vh;
+
   margin-top:8vh;
 
   transition: all 1s ease
 
   transition: all 1s ease
 +
  z-index:1;
 
  }
 
  }
−
#landing:hover {
+
#myProgress {
−
   height: 90vh;
+
  position:relative;
−
   margin-top: 5vh;
+
  margin-top:-128px;
−
}
+
  width: 90%;
 +
  background-color: #fff;
 +
  z-index:2;
 +
}
 +
 
 +
#myBar {
 +
  position:relative;
 +
  width: .1%;
 +
   height: 30px;
 +
   border-radius:15px;
 +
  background: linear-gradient(to right, #a52929, #c16868);
 +
  z-index:3;
 +
}
 +
 
 +
#iconc {
 +
position:absolute;
 +
top:50%;
 +
left:50%;
 +
transform:translate(-50%, -50%);
 +
height:96px;
 +
width:96px;
 +
border-radius:50%;
 +
z-index:4;
 +
background:#fff;
 +
background-image:url(https://static.igem.org/mediawiki/2018/9/96/T--UC_San_Diego--bloodicon.png);
 +
background-size:cover;
 +
}
 +
 
 +
#iconl {
 +
 
 +
}
 +
 
 +
#icon1r {
 +
 
 +
}
 
</style>
 
</style>
 +
<script>
 +
window.onload = move;
 +
 +
function move() {
 +
  var elem = document.getElementById("myBar"); 
 +
  var width = 1;
 +
  var id = setInterval(frame, 10);
 +
  function frame() {
 +
    if (width >= 100) {
 +
      clearInterval(id);
 +
    } else {
 +
      width++;
 +
      elem.style.width = width + '%';
 +
    }
 +
  }
 +
}
 +
</script>
 +
</head>
 +
<body>
 
<div style="background:white; position:fixed; top:0; left:0; z-index:999; width:100%; height:100%;">
 
<div style="background:white; position:fixed; top:0; left:0; z-index:999; width:100%; height:100%;">
 
<center>
 
<center>
 
<img id="landing" style="" src="https://static.igem.org/mediawiki/2018/9/97/T--UC_San_Diego--landinglogo.png"/>
 
<img id="landing" style="" src="https://static.igem.org/mediawiki/2018/9/97/T--UC_San_Diego--landinglogo.png"/>
 +
<div id="myProgress">
 +
  <div id="myBar"></div>
 +
<div id="iconc"></div>
 +
</div>
 
</center>
 
</center>
 
</div>
 
</div>
 +
</body>
 
</html>
 
</html>

Revision as of 07:25, 1 August 2018