Difference between revisions of "Template:Heidelberg/Integrated Cycle"

 
(37 intermediate revisions by the same user not shown)
Line 3: Line 3:
 
<html>
 
<html>
 
<style>
 
<style>
#box1 {
+
 
    bottom: 0.3em;
+
.link_box {
    left: 0.8em;
+
  background: transparent; /* For browsers that do not support gradients */
    width: 13em;
+
  background-image: -webkit-radial-gradient(circle, rgba(80, 80, 80, 0.9), rgba(80, 80, 80, 0.1)); /* Safari */
    height: 6.6em;
+
  background-image: -o-radial-gradient(center, circle, rgba(80, 80, 80, 0.9), rgba(80, 80, 80, 0.1)); /* Opera 11.6 to 12.0 */
 +
  background-image: -moz-radial-gradient(center, circle, rgba(80, 80, 80, 0.9), rgba(80, 80, 80, 0.1)); /* Firefox 3.6 to 15 */
 +
  background-image: radial-gradient(center, circle, rgba(80, 80, 80, 0.9), rgba(80, 80, 80, 0.1)); /* Standard syntax */
 
}
 
}
  
 +
.link_box {
 +
    position: absolute;
 +
    opacity: 0.0;
 +
    filter: alpha(opacity=0);
 +
    -moz-opacity:0.0;
 +
    z-index: 2;
 +
 +
    -moz-transform: scale(1.0);
 +
    -webkit-transform: scale(1.0);
 +
    transform: scale(1.0);
 +
    transition: all 0.7s ease-in;
 +
}
 +
.link_box:hover {
 +
    -moz-transform: scale(1.05);
 +
    -webkit-transform: scale(1.05);
 +
    transform: scale(1.05);
 +
    transition: all 0.7s ease-out;
 +
    background-color: #444444 !important;
 +
    opacity: 0.025;
 +
    filter: alpha(opacity=2.5);
 +
    -moz-opacity:0.025;
 +
}
 +
.link_box:before {
 +
    content: "";
 +
}
 +
.round_box {
 +
    -webkit-border-radius: 90px;
 +
    -moz-border-radius: 90px;
 +
    border-radius: 90px;
 +
    width: 180px;
 +
    height: 180px;
 +
}
 +
#box1 {
 +
    top: 5px;
 +
    left: 320px;
 +
}
 
#box2 {
 
#box2 {
     top: 10.25em;
+
     top: 30px;
     left: 2.3em;
+
     left: 505px;
    width: 6.4em;
+
    height: 7em;
+
 
}
 
}
 
 
#box3 {
 
#box3 {
     bottom: 2.5em;
+
     top: 210px;
     left: 16.5em;
+
     right: 20px;
    width: 3.6em;
+
    height: 6.6em;
+
 
}
 
}
 
 
#box4 {
 
#box4 {
     bottom: 2.5em;
+
     top: 370px;
     left: 40.2em;
+
     right: 30px;
    width: 3.6em;
+
    height: 6.6em;
+
 
}
 
}
 
 
#box5 {
 
#box5 {
     top: 14.2em;
+
     bottom: 15px;
     left: 24.2em;
+
     right: 140px;
    width: 6.4em;
+
    height: 7em;
+
 
}
 
}
 
 
#box6 {
 
#box6 {
     top: 14.2em;
+
     bottom: 5px;
     left: 24.2em;
+
     left: 235px;
    width: 6.4em;
+
    height: 7em;
+
 
}
 
}
 
 
#box7 {
 
#box7 {
     top: 14.2em;
+
     bottom: 100px;
     left: 24.2em;
+
     left: 70px;
    width: 6.4em;
+
    height: 7em;
+
 
}
 
}
 
 
#box8 {
 
#box8 {
     top: 14.2em;
+
     top: 225px;
     left: 24.2em;
+
     left: 30px;
    width: 6.4em;
+
    height: 7em;
+
 
}
 
}
 
 
#box9 {
 
#box9 {
     top: 14.2em;
+
     top: 15px;
     left: 24.2em;
+
     left: 145px;
    width: 6.4em;
+
    height: 7em;
+
 
}
 
}
  
 
</style>
 
</style>
  
<div class="container" style="margin-top: 1em; max-width: 1200px; overflow-x: auto;"> <!-- padding: 10em 10em 10em 10em; -->
+
<div class="container" style="display: flex; display: -webkit-flex; align-content: center; justify-content: center; margin-top: 0em; min-width: 820px; max-width: 1200px; overflow-x: auto;">
     <div id="hoverimg" class="col-lg-12 col-md-12 col-sm-12 col-sm-12">
+
     <div id="hoverimg" class="col-lg-12 col-md-12 col-sm-12 col-sm-12" style="width: 800px;">
 
             <img src="https://static.igem.org/mediawiki/2017/7/7f/T--Heidelberg--2017_HP_Integrated_Cycle_medium.png
 
             <img src="https://static.igem.org/mediawiki/2017/7/7f/T--Heidelberg--2017_HP_Integrated_Cycle_medium.png
 
" id="bgimage"></img>
 
" id="bgimage"></img>
 
             <div id="link_layer">
 
             <div id="link_layer">
<a title="Engineering Cycle - Human Practice" href="https://2017.igem.org/Team:Heidelberg/Gold_Integrated#Integrated1"class="transparent_link_box" id="box1"></a>
+
<a title="Engineering Cycle - Human Practice" href="https://2017.igem.org/Team:Heidelberg/Human_Practices"class="link_box round_box" id="box1"></a>
<a title="Engineering Cycle - Safety" href="https://2017.igem.org/Team:Heidelberg/Gold_Integrated#Integrated2" class="transparent_link_box" id="box2"></a>
+
<a title="Engineering Cycle - Safety" href="https://2017.igem.org/Team:Heidelberg/Software/SafetyNet" class="link_box round_box" id="box2"></a>
<a title="Engineering Cycle - Specifications" href="https://2017.igem.org/Team:Heidelberg/Gold_Integrated#Integrated3" class="transparent_link_box" id="box3"></a>
+
<a title="Engineering Cycle - Specifications" href="https://2017.igem.org/Team:Heidelberg/Description" class="link_box round_box" id="box3"></a>
<a title="Engineering Cycle - Design" href="https://2017.igem.org/Team:Heidelberg/Gold_Integrated#Integrated4" class="transparent_link_box" id="box4"></a>
+
<a title="Engineering Cycle - Design" href="https://2017.igem.org/Team:Heidelberg/Design" class="link_box round_box" id="box4"></a>
<a title="Engineering Cycle - Modeling" href="https://2017.igem.org/Team:Heidelberg/Gold_Integrated#Integrated5" class="transparent_link_box" id="box5"></a>
+
<a title="Engineering Cycle - Modeling" href="https://2017.igem.org/Team:Heidelberg/Model" class="link_box round_box" id="box5"></a>
<a title="Engineering Cycle - Assembly" href="https://2017.igem.org/Team:Heidelberg/Gold_Integrated#Integrated6" class="transparent_link_box" id="box6"></a>
+
<a title="Engineering Cycle - Assembly" href="https://2017.igem.org/Team:Heidelberg/Toolbox" class="link_box round_box" id="box6"></a>
<a title="Engineering Cycle - Testing" href="https://2017.igem.org/Team:Heidelberg/Gold_Integrated#Integrated7" class="transparent_link_box" id="box7"></a>
+
<a title="Engineering Cycle - Testing" href="https://2017.igem.org/Team:Heidelberg/Results" class="link_box round_box" id="box7"></a>
<a title="Engineering Cycle - Responsible Use" href="https://2017.igem.org/Team:Heidelberg/Gold_Integrated#Integrated8" class="transparent_link_box" id="box8"></a>
+
<a title="Engineering Cycle - Responsible Use" href="https://2017.igem.org/Team:Heidelberg/HP/Gold_Integrated#PREDCEL_PP" class="link_box round_box" id="box8"></a>
<a title="Engineering Cycle - Implementation" href="https://2017.igem.org/Team:Heidelberg/Gold_Integrated#Integrated9" class="transparent_link_box" id="box9"></a>
+
<a title="Engineering Cycle - Implementation" href="https://2017.igem.org/Team:Heidelberg/Organosilicons" class="link_box round_box" id="box9"></a>
 
             </div>
 
             </div>
 
     </div>
 
     </div>

Latest revision as of 22:20, 1 November 2017