Difference between revisions of "Team:Tokyo-NoKoGen/Demo"

 
(47 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
{{TeamTokyoNokogen}}
 
{{TeamTokyoNokogen}}
  
<html>
+
<html>
 +
<style>
 +
html, body{
  
 +
height:auto;
 +
margin-top:-10px;
 +
padding:20px;
 +
background:#ffffff;
 +
        position:absolute;
 +
}
 +
div#wrap {
 +
width:80%;
 +
text-align:center;
 +
position:relative;
 +
min-height:100%;
 +
margin-left:auto;
 +
margin-right:auto;
  
  
<style>
+
}
.relative_1{
+
div#bannerContainer {
position: absolute;
+
width:75%;
width: 650px;
+
position:absolute;
height: 250px;
+
background: #ffffff;
+
opacity: 0.5;
+
      top: 320px;
+
      border:solid 1px #000022;
+
}
+
  
.relative_2{
+
         top:0px;
position: relative;
+
width: 220px;
+
height: 250px;
+
background: #ffffff;
+
opacity: 0.5;
+
         top: 130px;
+
      left: 65%;
+
      border:solid 1px #000022;
+
}
+
  
.relative_3{
+
}
position: absolute;
+
div#box1 /*1段目の箱*/ {
width: 220px;
+
width:900px;
height: 120px;
+
height:330px;
background: #ffffff;
+
margin-top:-10px;
opacity: 0.5;
+
        top: 600px;
+
      border:solid 1px #000022;
+
}
+
  
.relative_4{
+
        position:absolute;
position: absolute;
+
        top:260px
width: 220px;
+
}
height: 120px;
+
background: #ffffff;
+
opacity: 0.5;
+
        top: 730px;
+
  
      border:solid 1px #000022;
+
.overview {
}
+
width:600px;
 +
height:300px;
 +
margin-top:10px;
 +
margin-left:10px;
 +
background:#FFFFCC;
 +
     
 +
display: inline-block; _display: inline;
 +
float:left;
 +
cursor:pointer;
 +
}
  
.relative_5{
+
.team {
position: absolute;
+
width:260px;
width: 650px;
+
height:135px;
height: 250px;
+
      position:relative;
background: #ffffff;
+
left:15px;
opacity: 0.5;
+
margin-top:10px;
        top: 600px;
+
margin-left:20px;
        left: 30%;
+
background:#CCFF99;
      border:solid 1px #000022;
+
display: inline-block; _display: inline;
}
+
display: table-cell;   /* ④ */ 
.relative_6{
+
   vertical-align: middle;
position: absolute;
+
left:15px;
width: 220px;
+
cursor:pointer;
height: 250px;
+
}
background: #ffffff;
+
 
opacity: 0.5;
+
        .notebook  {
        top: 870px;
+
width:260px;
      border:solid 1px #000022;
+
height:140px;
}
+
position:relative;
.relative_7{
+
margin-top:5px;
position: absolute;
+
margin-left:15px;
width: 220px;
+
margin-right:10px;
height: 250px;
+
background:#91d176;
background: #ffffff;
+
      display: table-cell; 
opacity: 0.5;
+
              display: inline-block; _display: inline;
        top: 870px;
+
           vertical-align: middle;
        left: 27.5%;
+
      top:300px
      border:solid 1px #000022;
+
 
}
+
display: inline-block; _display: inline;
.relative_8{
+
cursor:pointer;
position: absolute;
+
       }
width: 220px;
+
 
height: 250px;
+
div#box2 /*2段目の箱*/ {
background: #ffffff;
+
width:900px;
opacity: 0.5;
+
height:330px;
        top: 870px;
+
margin-top:-10px;
        left: 47%;
+
 
      border:solid 1px #000022;
+
        position:absolute;
}
+
      top:330px;
.relative_9{
+
      left:0px;
position: absolute;
+
}
width: 220px;
+
 
height: 250px;
+
.facebook {
background: #ffffff;
+
width:200px;
opacity: 0.5;
+
height:135px;
        top: 870px;
+
      position:relative;
        left: 66%;
+
left:15px;
      border:solid 1px #000022;
+
margin-top:10px;
}
+
margin-left:20px;
 +
background:#6b8bcd;
 +
display: inline-block; _display: inline;
 +
display: table-cell;    /* ④ */ 
 +
   vertical-align: middle;
 +
   position:absolute;
 +
left:15px;
 +
cursor:pointer;
 +
}
 +
.twitter {
 +
width:200px;
 +
height:140px;
 +
position:relative;
 +
left:15px;
 +
margin-top:300px;
 +
margin-left:20px;
 +
background:#6b8bcd;
 +
display: inline-block; _display: inline;
 +
display: table-cell;   
 +
      vertical-align: middle;  
 +
cursor:pointer;
 +
       }
 +
 
 +
.project {
 +
width:650px;
 +
height:300px;
 +
margin-top:-300px;
 +
margin-right:10px;
 +
background: #79d480;
 +
float:right;
 +
cursor:pointer;
 +
}
 +
div#box3 /*3段目の箱*/ {
 +
width:900px;
 +
height:180px;
 +
margin-top:-25px;
 +
 
 +
        position:absolute;
 +
        top:330px
 +
}
 +
 
 +
.Ache {
 +
width:210px;
 +
height:150px;
 +
margin-top:10px;
 +
margin-left:12px;
 +
background:#71b4d0;
 +
display: inline-block; _display: inline;
 +
float:left;
 +
cursor:pointer;
 +
}
 +
.Human {
 +
width:210px;
 +
height:150px;
 +
margin-top:10px;
 +
margin-left:10px;
 +
background:#6ecec7;
 +
display: inline-block; _display: inline;
 +
float:left;
 +
cursor:pointer;
 +
}
 +
.parts {
 +
width:210px;
 +
height:150px;
 +
margin-top:10px;
 +
margin-left:10px;
 +
background:#7bd593;
 +
display: inline-block; _display: inline;
 +
float:left;
 +
cursor:pointer;
 +
 
 +
}
 +
      .safety {
 +
width:210px;
 +
height:150px;
 +
margin-top:-5px;
 +
margin-left:10px;
 +
background:#7593d3;
 +
        display: inline-block; _display: inline;
 +
float:left;
 +
cursor:pointer;
 +
}
  
  
Line 106: Line 188:
 
h2 {
 
h2 {
 
     font-size:20px;
 
     font-size:20px;
     font-family:Georgia;
+
     font-family:fantasy;
 
     text-decoration:none;
 
     text-decoration:none;
 
   }
 
   }
Line 157: Line 239:
  
 
.link_box{
 
.link_box{
     position:relative;
+
     position:;
 
     width:30%;
 
     width:30%;
 
     padding:5%;
 
     padding:5%;
Line 174: Line 256:
 
</style>
 
</style>
  
 +
<div id="wrap">
  
  <div id="main">
+
<div id="bannerContainer"/*バナー*/>
<div id="bannerContainer">
+
<img src="https://static.igem.org/mediawiki/2015/8/82/Tokyo-NoKogen_banner.png" width="900" height="250">  
<img src="https://static.igem.org/mediawiki/2015/8/82/Tokyo-NoKogen_banner.png" width="900" height="250" />  
+
</div>
       </div>
+
  <div id="box1"/*見えない1段目のボックス*/> 
 
+
 <div class="relative_1">
+
           <img src="http://junk-blog.com/wp-content/uploads/2014/09/sample_image.jpg" alt="サンプル画像" width="650" height="250"; position: absolute;/>
+
            <a href="https://2015.igem.org/Team:Tokyo-NoKoGen"></a>
+
        </div> 
+
          </div>
+
  
 +
  <div class="overview">
 +
    <h2>Introduction</h2>
 +
       <!--    <img src="http://junk-blog.com/wp-content/uploads/2014/09/sample_image.jpg" alt="サンプル画像" width="550" height="250"alt="Overview"/>  -->
 +
         
 +
           <a href="https://2015.igem.org/Team:Tokyo-NoKoGen" target="_blank"></a></td>
 +
                         
 +
         
 +
    </div>
 +
    
 +
  <div class="team">
 +
   <h2>Team</h2>
 +
 <a href="https://2015.igem.org/Team:Tokyo-NoKoGen/Team" target="_blank" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7 ></a>
 +
         </div>
 +
        
 +
              <div class="notebook">
 +
 <h2>Notebook</h2>
 +
 <a href="https://2015.igem.org/Team:Tokyo-NoKoGen/Notebook" target="_blank" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7 ></a>
 +
          </div>
  
  
          <div class="relative_2"></div>
+
       
          <div class="relative_3"></div>
+
<div id="box2"/*見えない2段目のボックス*/> 
          <div class="relative_4"></div>
+
<div class="facebook">
          <div class="relative_5"></div>       
+
          <h2>facebook</h2>
      <div class="relative_6"></div>
+
         <a href="https://www.facebook.com/tokyo.nokogen" target="_blank"></a>
   <div class="relative_7"></div>
+
         
   <div class="relative_8"></div>
+
    </div>
   <div class="relative_9"></div>
+
    <div class="twitter">
     
+
          <h2>twitter</h>
 +
          <a href="https://twitter.com/iGEM_Nokogen" target="_blank"></a>
 +
         
 +
    </div>
 +
    
 +
    <div class="project">
 +
        <h2>project</h2> 
 +
        <a href="https://2015.igem.org/Team:Tokyo-NoKoGen/Description" target="_blank"></a>       
 +
     </div>
 +
   
 +
      <div id="box3"/*見えない3段目のボックス*/>  
 +
    <div class="Ache">
 +
          <h2>Achievement</h2>
 +
          <a href="https://2015.igem.org/Team:Tokyo-NoKoGen/achievement" target="_blank"></a>
 +
    </div>
 +
     <div class="Human">
 +
          <h2>Human practice</h2>
 +
           <a href="https://2015.igem.org/Team:Tokyo-NoKoGen/Practices" target="_blank"></a>
 +
    </div>
 +
     <div class="parts">
 +
          <h2>Parts</h2>
 +
           <a href="https://2015.igem.org/Team:Tokyo-NoKoGen/Parts" target="_blank"></a>
 +
    </div>
 +
      <div class="safety">
 +
          <h2>Safety</h2>
 +
           <a href="https://2015.igem.org/Team:Tokyo-NoKoGen/Safety" target="_blank"></a>
 +
    </div>
 +
    
 +
     
 +
      </div>
 +
     
 +
     
 +
     
 +
</div>        
 +
</div>
 +
<script type="text/javascript">
 +
$(function(){
 +
    $(".overview").click(function(){
 +
        window.location=$(this).find("a").attr("href");
 +
        return false;
 +
    });
 +
});
  
 +
$(function(){
 +
    $(".team").click(function(){
 +
        window.location=$(this).find("a").attr("href");
 +
        return false;
 +
    });
 +
});
 +
$(function(){
 +
    $(".facebook").click(function(){
 +
        window.location=$(this).find("a").attr("href");
 +
        return false;
 +
    });
 +
});
 +
$(function(){
 +
    $(".twitter").click(function(){
 +
        window.location=$(this).find("a").attr("href");
 +
        return false;
 +
    });
 +
});
 +
$(function(){
 +
    $(".notebook").click(function(){
 +
        window.location=$(this).find("a").attr("href");
 +
        return false;
 +
    });
 +
});
 +
$(function(){
 +
    $(".project").click(function(){
 +
        window.location=$(this).find("a").attr("href");
 +
        return false;
 +
    });
 +
});
 +
$(function(){
 +
    $(".Ache").click(function(){
 +
        window.location=$(this).find("a").attr("href");
 +
        return false;
 +
    });
 +
});
 +
$(function(){
 +
    $(".Human").click(function(){
 +
        window.location=$(this).find("a").attr("href");
 +
        return false;
 +
    });
 +
});
 +
$(function(){
 +
    $(".parts").click(function(){
 +
        window.location=$(this).find("a").attr("href");
 +
        return false;
 +
    });
 +
});
 +
$(function(){
 +
    $(".safety").click(function(){
 +
        window.location=$(this).find("a").attr("href");
 +
        return false;
 +
    });
 +
});
 +
</script>
  
</div></div> <!--These are the closing tags for div id="mainContainer" and div id="contentContainer". The corresponding opening tags appear in the template that is {{included}} at the top of this page.-->
 
  
 +
/*footer*/
 +
<style>
 +
div#wrapper2 {
 +
width:80%;
 +
text-align:center;
 +
position:relative;
 +
min-height:100%;
 +
margin-left:auto;
 +
margin-right:auto;
 +
}
 +
 +
 +
div#footer {
 +
    margin:0 auto;
 +
    position:absolute;
 +
    width:900px;
 +
 +
  left : -200px ;
 +
    bottom:-1300px;
 +
        }
 +
 +
 +
div#footer img {
 +
    width:200px;
 +
        }
 +
p {
 +
    font-size:16px;
 +
    font-family:Georgia;
 +
    line-height:2;
 +
  }
 +
h2 {
 +
    font-size:20px;
 +
    font-family:fantasy;
 +
    text-decoration:none;
 +
  }
 +
</style>
 +
 +
 +
<body>
 +
 +
<div id="wrapper">
 +
<div id="footer">
 +
<a href="http://www.idtdna.com/site"><img src="https://static.igem.org/mediawiki/2014/5/5e/Noko14_IDT.png"></a>
 +
<a href="http://www.ultizyme.jp/"><img src="https://static.igem.org/mediawiki/2014/c/ce/Noko14_Image91.jpg"></a>
 +
<a href="http://www.cosmobio.co.jp/index_e.asp"><img src="https://static.igem.org/mediawiki/2014/e/e5/Noko14_Logo_e.jpg"></a>
 +
<a href="http://www.mbl.co.jp/e/index.html"><img src="https://static.igem.org/mediawiki/2014/4/4f/Noko14_MBL.gif"></a>
 +
<a href="http://www.idtdna.com/site"><img src="https://static.igem.org/mediawiki/2014/a/ad/Noko14_li.png"></a>
 +
<a href="http://www.tuat.ac.jp/en/index.html"><img src="https://static.igem.org/mediawiki/2014/3/39/Noko14_tuat.png"></a>
 +
<a href="http://www.tuat.ac.jp/~tanpaku/"><img src="https://static.igem.org/mediawiki/2014/3/3c/Noko14_ike.jpg"></a>
 +
<a href="http://www.tuat.ac.jp/~kakusan/index.html"><img src="https://static.igem.org/mediawiki/2014/7/77/Noko14_ikeken.jpg"></a>
 +
</div>
 
</div>
 
</div>
 +
</body>
 +
 +
/*footer*/
 
</html>
 
</html>

Latest revision as of 16:31, 8 September 2015

  
    
  

Introduction

                                  
       
 

Team

    
  
 

Notebook

    
            
      

project

                   
     
       

Achievement

          
  
       

Human practice

          
  
       

Parts

          
  
       

Safety

          
  
       
        
/*footer*/
/*footer*/