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

(Blanked the page)
Line 1: Line 1:
 +
<!doctype html>
 +
<html>
 +
<head>
 +
<style tpe=text/css>
 +
body{
 +
background-color: #2D5187 ;
 +
}
 +
.view {
 +
    width: 17vw;
 +
    height: 22.9vh;
 +
    margin: 10px;
 +
    float: left;
 +
    overflow: hidden;
 +
    position: relative;
 +
    text-align: center;
 +
    cursor: default;
 +
    background-color: #2D5187 ;
 +
background-repeat: no-repeat;
 +
background-size:50%;
 +
background-position: center;
 +
}
 +
.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 {
 +
    display: inline-block;
 +
    text-decoration: none;
 +
    padding: 7px 14px;
 +
    background: #000;
 +
    color: #fff;
 +
    text-transform: uppercase;
 +
    box-shadow: 0 0 1px #000;
 +
position:absolute;
 +
top:8vh;
 +
left:5.37vw;
 +
}
 +
.view a.info:hover {
 +
    box-shadow: 0 0 5px #000
 +
 +
.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{
 +
    opacity: 0;
 +
transition: all 0.2s ease-in-out;
 +
}
 +
.view-first:hover img {
 +
transform: scale(1.1);
 +
}
 +
.view-first:hover .mask {
 +
opacity: 1;
 +
}
 +
 +
.view-first:hover a.info {
 +
    opacity: 1;
 +
    transform: translateY(0px);
 +
}
 +
 +
.view-first:hover a.info {
 +
    transition-delay: 0.2s;
 +
}
 +
 +
</style>
 +
</head>
 +
<body>
 +
<div style="position:absolute;top:-3vh;padding-left:18vw;background-color:#2D5187;">
 +
<img src="https://static.igem.org/mediawiki/2015/2/2c/NCTU_Formosa_Project.png" width=80%></div>
 +
 +
<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>
 +
</body>
 +
</html>

Revision as of 14:48, 23 August 2015

<!doctype html>