Difference between revisions of "Team:NCTU Formosa/Project"

 
(41 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
<!doctype html>
+
{{Team:NCTU_Formosa/navigation}}
 
<html>
 
<html>
 
<head>
 
<head>
−
<style tpe=text/css>
+
−
body{
+
<style>
−
background-color: #2D5187 ;
+
#taggd img {
−
}
+
display: inline;
−
.view {
+
width: 100%;
−
    width: 17vw;
+
}
−
    height: 22.9vh;
+
body{
−
    margin: 10px;
+
background-color:#FCFCDE;}
−
    float: left;
+
 
−
    overflow: hidden;
+
 
−
    position: relative;
+
 
−
    text-align: center;
+
.taggd-wrapper {
−
    cursor: default;
+
overflow: hidden;
−
    background-color: #2D5187 ;
+
position: relative;
−
background-repeat: no-repeat;
+
 
−
background-size:50%;
+
-webkit-font-smoothing: antialiased;
−
background-position: center;
+
-moz-osx-font-smoothing: antialiased;
−
}
+
−
.view .mask, .view .content {
+
−
    width: 17vw;
+
−
    height: 22.9vh;
+
−
    position: absolute;
+
−
    overflow: hidden;
+
−
    top: 0;
+
−
    left: 0;
+
−
}
+
−
.view img {
+
−
    display: block;
+
−
    position: relative;
+
 
}
 
}
  
−
.view a.info {
+
.taggd-wrapper .taggd-item {
−
     display: inline-block;
+
     background-color: #FF6668;
−
    text-decoration: none;
+
opacity:0.9;
−
    padding: 7px 14px;
+
cursor: pointer;
−
    background: #000;
+
display: block;
−
    color: #fff;
+
padding: 14px;
−
    text-transform: uppercase;
+
z-index: 10;
−
    box-shadow: 0 0 1px #000;
+
 
−
position:absolute;
+
  -webkit-border-radius: 50%;
−
top:8vh;
+
     -moz-border-radius: 50%;
−
left:5.37vw;
+
    border-radius: 50%;
−
}
+
 
−
.view a.info:hover {
+
     -webkit-transition: background-color 0.2s;
−
     box-shadow: 0 0 5px #000
+
    -moz-transition: background-color 0.2s;
−
} 
+
     transition: background-color 0.2s;
−
.view-first img {
+
 
−
     transition: all 0.2s linear;
+
−
}
+
−
.view-first .mask {
+
−
    opacity: 0;
+
−
    background-color: rgba(45,81,135, 0.7);  
+
−
     transition: all 0.4s ease-in-out;
+
 
}
 
}
  
−
.view-first a.info{
+
.taggd-wrapper .taggd-item.active,
−
     opacity: 0;
+
.taggd-wrapper .taggd-item:hover { background-color: rgba(219, 50, 92, 0.75); }
−
transition: all 0.2s ease-in-out;
+
 
 +
.taggd-wrapper .taggd-item-hover {
 +
     background-color: rgb(219, 50, 92);
 +
color: transparent;
 +
cursor: default;
 +
display: block;
 +
    font-weight: lighter;
 +
opacity: 0;
 +
overflow: hidden;
 +
padding: 0 10px;
 +
z-index: 8;
 +
 
 +
-webkit-border-radius: 4px;
 +
-moz-border-radius: 4px;
 +
border-radius: 4px;
 +
 
 +
-webkit-transition: all 0.2s;
 +
-moz-transition: all 0.2s;
 +
transition: all 0.2s;
 +
 +
-webkit-touch-callout: none;
 +
    -webkit-user-select: none;
 +
    -khtml-user-select: none;
 +
    -moz-user-select: none;
 +
    -ms-user-select: none;
 +
    user-select: none;
 +
    display:none;
 +
font-size:30pt;
 
}
 
}
−
.view-first:hover img {  
+
 
−
transform: scale(1.1);
+
.taggd-wrapper .taggd-item-hover.show {
−
}
+
color: #fff;
−
.view-first:hover .mask {
+
 
opacity: 1;
 
opacity: 1;
 +
padding: 10px;
 +
z-index: 9;
 +
display: block;
 
}
 
}
  
−
.view-first:hover a.info {
+
.taggd-wrapper .taggd-item-hover input {
−
    opacity: 1;
+
background-color: transparent;
−
    transform: translateY(0px);
+
border: 0;
 +
margin: 0;
 +
outline: 0;
 +
padding: 0;
 +
 +
-webkit-font-smoothing: antialiased;
 +
-moz-osx-font-smoothing: antialiased;
 
}
 
}
  
−
.view-first:hover a.info {
+
.taggd-wrapper .taggd-item-hover button {
−
    transition-delay: 0.2s;
+
background-color: #fff;
 +
border: 0;
 +
color: rgb(219, 50, 92);
 +
font-family: Arial;
 +
font-size: 0.666em;
 +
height: 1.5em;
 +
line-height: 1;
 +
margin: 0 0 0 0.25em;
 +
padding: 0;
 +
text-align: center;
 +
vertical-align: middle;
 +
width: 1.5em;
 +
 +
-moz-border-radius: 50%;
 +
-webkit-border-radius: 50%;
 +
border-radius: 50%;
 +
 +
-webkit-font-smoothing: antialiased;
 +
-moz-osx-font-smoothing: antialiased;
 
}
 
}
−
+
 
−
</style>
+
.taggd-wrapper .taggd-editor {
 +
position: absolute;
 +
}
 +
.goto1{
 +
position:relative;
 +
padding-left:76vw;
 +
padding-top:2vh;
 +
}
 +
.goto1 a{
 +
text-decoration:none;
 +
color:#000;
 +
}
 +
</style>
 +
 +
<script src="https://2015.igem.org/Team:NCTU_Formosa/source/taggd?action=raw&ctype=text/javascript"></script>
 
</head>
 
</head>
 
<body>
 
<body>
−
<div style="position:absolute;top:-3vh;padding-left:18vw;background-color:#2D5187;">
+
<div id="taggd" style="width:60vw;margin:0 auto;">
−
<img src="https://static.igem.org/mediawiki/2015/2/2c/NCTU_Formosa_Project.png" width=80%></div>
+
<img src="https://static.igem.org/mediawiki/2015/6/6d/Nctu_formosa_map3.png" class="taggd" alt=""/>
−
 
+
−
<div style="position:absolute;top:40vh;padding-left:23vw;">
+
−
                <div class="view view-first" style="background-image:url(https://static.igem.org/mediawiki/2015/9/90/2015NCTU_Formosa_Project_menu1.png);"> 
+
−
                    <div class="mask"> 
+
−
                        <a href="https://2015.igem.org/Team:NCTU_Formosa/Overview" class="info">Read More</a> 
+
−
                    </div>   
+
−
                </div> 
+
−
                <div class="view view-first" style="background-image:url(https://static.igem.org/mediawiki/2015/c/c4/NCTU_Formosa_Project_menu2.png);"> 
+
−
                    <div class="mask"> 
+
−
                        <a href="https://2015.igem.org/Team:NCTU_Formosa/Background" class="info">Read More</a> 
+
−
                    </div>   
+
−
                </div>
+
−
                <div class="view view-first" style="background-image:url(https://static.igem.org/mediawiki/2015/2/2f/NCTU_Formosa_Project_menu3.png);"> 
+
−
                    <div class="mask">   
+
−
                        <a href="https://2015.igem.org/Team:NCTU_Formosa/Design" class="info">Read More</a> 
+
−
                    </div>   
+
−
                </div> 
+
−
        </div>
+
−
<div style="position:absolute;top:70vh;padding-left:14vw;">
+
−
            <div class="view view-first" style="background-image:url(https://static.igem.org/mediawiki/2015/2/2f/NCTU_Formosa_Project_menu4.png);"> 
+
−
                    <div class="mask"> 
+
−
                        <a href="https://2015.igem.org/Team:NCTU_Formosa/Results" class="info">Read More</a> 
+
−
                    </div>   
+
−
            </div> 
+
−
                <div class="view view-first" style="background-image:url(https://static.igem.org/mediawiki/2015/9/95/NCTU_Formosa_Project_menu5.png);"> 
+
−
                    <div class="mask"> 
+
−
                        <a href="https://2015.igem.org/Team:NCTU_Formosa/Modeling" class="info">Read More</a> 
+
−
                    </div>   
+
−
                </div> 
+
−
            <div class="view view-first" style="background-image:url(https://static.igem.org/mediawiki/2015/2/24/NCTU_Formosa_Project_menu6.png);"> 
+
−
                <div class="mask"> 
+
−
                    <a href="https://2015.igem.org/Team:NCTU_Formosa/Parts" class="info">Read More</a> 
+
−
                </div>   
+
−
            </div> 
+
−
            <div class="view view-first" style="background-image:url(https://static.igem.org/mediawiki/2015/e/ea/NCTU_Formosa_Project_menu7.png);"> 
+
−
                <div class="mask"> 
+
−
                    <a href="https://2015.igem.org/Team:NCTU_Formosa/Safety" class="info">Read More</a> 
+
−
                </div>   
+
−
            </div> 
+
−
    </div>
+
 
</div>
 
</div>
 +
<div class="goto1">
 +
<a href="https://2015.igem.org/Team:NCTU_Formosa/Description"><img src="https://static.igem.org/mediawiki/2015/c/c2/%E7%AE%AD%E9%A0%AD2.png"; width=50vw;><br><br>Go to Description</a>
 
</div>
 
</div>
 +
<script>
 +
var options = {
 +
align: {
 +
y: 'top'
 +
},
 +
 +
offset: {
 +
top: 20
 +
},
 +
handlers: {
 +
click: function( e, data ) {
 +
      window.open(
 +
        'https://2015.igem.org/Team:NCTU_Formosa/' + data.uri,
 +
        '_blank'
 +
      );},
 +
  mouseenter: 'show',
 +
    mouseleave: 'hide'
 +
  }
 +
 +
};
 +
 +
var data = [
 +
{
 +
"x": 0.20207429501084598,
 +
"y": 0.864618860845839,
 +
"text": "Policy & Practices",
 +
uri: 'Practices'
 +
},
 +
{
 +
"x": 0.4233324295010846,
 +
"y": 0.9014537858117326,
 +
"text": "Team",
 +
uri: 'Attributions'
 +
},
 +
{
 +
"x": 0.4200786334056399,
 +
"y": 0.2970881650750341,
 +
"text": "Project",
 +
uri: 'Description'
 +
},
 +
{
 +
"x": 0.5816838394793926,
 +
"y": 0.3925861186903138,
 +
"text": "Parts",
 +
uri: 'Parts'
 +
},
 +
{
 +
"x": 0.6402521691973969,
 +
"y": 0.6367880286493861,
 +
"text": "Achievement",
 +
uri: 'Achievement'
 +
},
 +
{
 +
"x": 0.7248508676789588,
 +
"y": 0.4717129945429741,
 +
"text": "Notebook",
 +
uri: 'LabSafety'
 +
}
 +
]
 +
 +
var taggd = $('.taggd').taggd( options, data );
 +
</script>
 +
 
</body>
 
</body>
 
</html>
 
</html>
 +
{{Team:NCTU_Formosa/footer}}

Latest revision as of 01:34, 19 September 2015



Go to Description