Difference between revisions of "Team:CU-Boulder/Demonstrate"

(Replaced content with "{{Team:CU-Boulder/Templates/Navigation}} <html> </html>")
Line 1: Line 1:
 
{{Team:CU-Boulder/Templates/Navigation}}
 
{{Team:CU-Boulder/Templates/Navigation}}
−
 
 
<html>
 
<html>
 +
 +
<style>
 +
 +
section {
 +
  height: 100vh;
 +
  align-items: center;
 +
  position:relative;
 +
  align-content: center;
 +
  justify-content: center;
 +
  display: flex;
 +
  background-color: black;
 +
}
 +
 +
 +
 +
.buttonContainer{
 +
    height: 500px;
 +
    width: 900px;
 +
    position: relative;
 +
      display: flex;
 +
    justify-content: center;
 +
    align-content: center;
 +
    background-color: black;
 +
    align-items: center;
 +
    border: solid 5px white;
 +
    border-radius: 20px;
 +
}
 +
 +
 +
.linkDuh{
 +
    color: white;
 +
    font-family: inconsolata, sans-serif;
 +
}
 +
 +
.Bluehvr-radial-out {
 +
 +
  margin: 30px;
 +
  font-size: 25px;
 +
  color: white;
 +
  width: 200px;
 +
  height: 200px;
 +
  border-radius: 100px;
 +
  display: flex;
 +
  align-items: center;
 +
  justify-content: center;
 +
  -webkit-transform: perspective(1px) translateZ(0);
 +
  transform: perspective(1px) translateZ(0);
 +
  box-shadow: 0 0 1px transparent;
 +
  position: relative;
 +
  overflow: hidden;
 +
  background: #e1e1e1;
 +
  -webkit-transition-property: color;
 +
  transition-property: color;
 +
  -webkit-transition-duration: 0.3s;
 +
  transition-duration: 0.3s;
 +
}
 +
.Bluehvr-radial-out:before {
 +
  content: "";
 +
  position: absolute;
 +
  z-index: -1;
 +
  top: 0;
 +
  left: 0;
 +
  right: 0;
 +
  bottom: 0;
 +
  background: #2098D1;
 +
  border-radius: 100%;
 +
  -webkit-transform: scale(0);
 +
  transform: scale(0);
 +
  -webkit-transition-property: transform;
 +
  transition-property: transform;
 +
  -webkit-transition-duration: 0.3s;
 +
  transition-duration: 0.3s;
 +
  -webkit-transition-timing-function: ease-out;
 +
  transition-timing-function: ease-out;
 +
}
 +
.Bluehvr-radial-out:hover, .Bluehvr-radial-out:focus, .Bluehvr-radial-out:active {
 +
  color: white;
 +
}
 +
.Bluehvr-radial-out:hover:before, .Bluehvr-radial-out:focus:before, .Bluehvr-radial-out:active:before {
 +
  -webkit-transform: scale(2);
 +
  transform: scale(2);
 +
}
 +
 +
 +
.Redhvr-radial-out {
 +
 +
  margin: 30px;
 +
  font-size: 25px;
 +
  color: white;
 +
  width: 200px;
 +
  height: 200px;
 +
  border-radius: 100px;
 +
  display: flex;
 +
  align-items: center;
 +
  justify-content: center;
 +
  -webkit-transform: perspective(1px) translateZ(0);
 +
  transform: perspective(1px) translateZ(0);
 +
  box-shadow: 0 0 1px transparent;
 +
  position: relative;
 +
  overflow: hidden;
 +
  background: #e1e1e1;
 +
  -webkit-transition-property: color;
 +
  transition-property: color;
 +
  -webkit-transition-duration: 0.3s;
 +
  transition-duration: 0.3s;
 +
}
 +
.Redhvr-radial-out:before {
 +
  content: "";
 +
  position: absolute;
 +
  z-index: -1;
 +
  top: 0;
 +
  left: 0;
 +
  right: 0;
 +
  bottom: 0;
 +
  background: red;
 +
  border-radius: 100%;
 +
  -webkit-transform: scale(0);
 +
  transform: scale(0);
 +
  -webkit-transition-property: transform;
 +
  transition-property: transform;
 +
  -webkit-transition-duration: 0.3s;
 +
  transition-duration: 0.3s;
 +
  -webkit-transition-timing-function: ease-out;
 +
  transition-timing-function: ease-out;
 +
}
 +
.Redhvr-radial-out:hover, .Redhvr-radial-out:focus, .Redhvr-radial-out:active {
 +
  color: white;
 +
}
 +
.Redhvr-radial-out:hover:before, .Redhvr-radial-out:focus:before, .Redhvr-radial-out:active:before {
 +
  -webkit-transform: scale(2);
 +
  transform: scale(2);
 +
}
 +
 +
.buttonContainerCeption{
 +
  display: flex;
 +
  flex-direction: column;
 +
  font-size: 50px;
 +
  font-family: inconsolata, sans-serif;
 +
  color: white;
 +
  margin: 50px;
 +
}
 +
 +
.linkDuh:visited{
 +
  color: white;
 +
}
 +
 +
.linkDuh:hover{
 +
  text-decoration: none;
 +
}
 +
 +
 +
.linkDuh:hover {
 +
    text-decoration: none;
 +
}
 +
 +
.linkDuh:active{
 +
  color: white;
 +
}
 +
 +
.linkDuh:visited{
 +
  color: white;
 +
}
 +
 +
 +
</style>
 +
 +
<body>
 +
<section>
 +
 +
<div class = "buttonContainerCeption">
 +
<p> Results </p>
 +
<div class = "buttonContainer">
 +
 +
<div class = "Bluehvr-radial-out">
 +
<a class = "linkDuh" href = "https://2017.igem.org/Team:CU-Boulder/Transform"> Refinement </a>
 +
</div>
 +
 +
<div class = "Redhvr-radial-out">
 +
<a class = "linkDuh" href = "https://2017.igem.org/Team:CU-Boulder/Isolation"> Isolation </a>
 +
</div>
 +
 +
<div class = "Bluehvr-radial-out">
 +
<a class = "linkDuh" href = "https://2017.igem.org/Team:CU-Boulder/AzoPhe"> Mutation </a>
 +
</div>
 +
 +
</div>
 +
</div>
 +
</section>
 +
</body>
 +
 
</html>
 
</html>

Revision as of 03:00, 2 November 2017

Results

Refinement
Isolation
Mutation