Difference between revisions of "Team:Kyoto/Team"

(Prototype team page)
 
Line 1: Line 1:
{{Kyoto}}
+
{{Common}}
 
<html>
 
<html>
  
 +
<style>
  
 +
  body{
 +
    margin: 0;
 +
  }
 +
  #background{
 +
    position:fixed;
 +
    min-width: 1024px;
 +
    width:100%;
 +
    z-index:-1;
 +
  }
 +
  #background-image{
 +
    width:100%;
 +
  }
 +
  #topbanner-wrapper{
 +
    min-width:1024px;
 +
    position:relative;
 +
  }
 +
  #topbanner{
 +
    position:absolute;
 +
    width: 565px;
 +
    height: 105px;
 +
    top:0;
 +
    bottom:0;
 +
    left:0;
 +
    right:0;
 +
    margin: auto;
 +
    background-image: url(T--Kyoto--titleteam.png);
 +
    background-position: center center;
 +
  }
 +
  #button_wrapper{
 +
    width: 1023px;
 +
    height: 186px;
 +
    margin: 0 auto;
 +
    padding: 0;
 +
    letter-spacing: -1em;
 +
  }
 +
  #button_left{
 +
    /*float: left;*/
 +
    display: inline-block;
 +
    width:341px;
 +
    height: 186px;
 +
    letter-spacing: normal;
 +
    border: 1px solid #000;
 +
  }
 +
  #button_center{
 +
    display: inline-block;
 +
    width:341px;
 +
    height: 186px;
 +
    letter-spacing: normal;
 +
    border: 1px solid #000;
 +
  }
 +
  #button_right{
 +
    display: inline-block;
 +
    width:341px;
 +
    height: 186px;
 +
    letter-spacing: normal;
 +
    border: 1px solid #000;
 +
  }
 +
  #contents{
 +
    background-color:#ffffff;
 +
  }
 +
</style>
  
<div class="column full_size" >
+
<head>
 
+
<link href="common.css" rel="stylesheet" type="text/css" media="all" />
<p>In this page you can introduce your team members, instructors, and advisors. </p>
+
<script type="text/javascript">
 
+
  window.onload = function bwWidth(){
 
+
    var bw = document.getElementById("topbanner-wrapper");
</div>
+
    var width = Math.max(parseInt(document.documentElement.clientWidth),1024);
 
+
    var newwidth = width * 397 / 1368 - 72
<div class="column half_size" >
+
    bw.style.height = newwidth + "px";
<h5>Inspiration</h5>
+
  }
<p>You can look at what other teams did to get some inspiration! <br />
+
  window.onresize = function bwWidth(){
Here are a few examples:</p>
+
    var bw = document.getElementById("topbanner-wrapper");
<ul>
+
    var width = Math.max(parseInt(document.documentElement.clientWidth),1024);
<li><a href="https://2014.igem.org/Team:METU_Turkey_team">METU Turkey </a></li>
+
    var newwidth = width * 397 / 1368 - 72
<li><a href="https://2014.igem.org/Team:Colombia/Members">Colombia</a></li>
+
    bw.style.height = newwidth + "px";
<li><a href="https://2014.igem.org/Team:Stony_Brook/Team">Stony Brook</a></li>
+
  }
<li><a href="https://2014.igem.org/Team:OUC-China/Team">OUC-China</a></li>
+
</script>
</ul>
+
</head>
 
+
<body>
</div>
+
  <div id="background">
 
+
    <img id="background-image" src="T--Kyoto--pagephoto-08.png">
<div class="column half_size" >
+
  </div>
<h5>What should this page contain?</h5>
+
    <div id="header">
<ul>
+
      <div id="nav-wrapper">
<li> Include pictures of your teammates, don’t forget instructors and advisors! </li>
+
        <div class="nav">
<li>You can add a small biography or a few words from each team member, to tell us what you like, and what motivated you to participate in iGEM.</li>
+
          <ul class="nv">
<li>Take team pictures! Show us your school, your lab and little bit of your city.</li>
+
            <li id ="nv0" style="width:56px"><a href="index.html"></a></li>
<li>Remember that image galleries can help you showcase many pictures while saving space.</li>
+
            <li id ="nv1">
</ul>
+
              <a href="Description.html"></a>
</div>
+
              <ul>
 
+
                <li id="nv11"><a href="Description.html"></a></li>
 +
                <li id="nv12"><a href="Proof.html"></a></li>
 +
              </ul>
 +
            </li>
 +
            <li id ="nv2">
 +
              <a href="software.html"></a>
 +
              <ul>
 +
                <li id="nv21"><a href="Software.html"></a></li>
 +
                <li id="nv22"><a href="Collaborations.html"></a></li>
 +
              </ul>
 +
            </li>
 +
            <li id ="nv3"><a href="Achievements.html"></a></li>
 +
            <li id ="nv4"><a href="Experiments.html"></a></li>
 +
            <li id ="nv5">
 +
              <a href="Human_Practices.html"></a>
 +
              <ul>
 +
                <li id="nv51"><a href="Human_Practices.html"></a></li>
 +
                <li id="nv52"><a href="HP-Silver.html"></a></li>
 +
                <li id="nv53"><a href="HP-Gold.html"></a></li>
 +
              </ul>
 +
            </li>
 +
            <li id ="nv6"><a href="Notebook.html"></a></li>
 +
            <li id ="nv7">
 +
              <a href="Team.html"></a>
 +
              <ul>
 +
                <li id="nv71"><a href="Team.html"></a></li>
 +
                <li id="nv72"><a href="Attributions.html"></a></li>
 +
              </ul>
 +
            </li>
 +
            <li id ="nv8"><a href="Safety.html"></a></li>
 +
          </ul>
 +
        </div>
 +
      </div>
 +
    </div>
 +
    <div id="topbanner-wrapper">
 +
      <div id="topbanner">
 +
      </div>
 +
    </div>
 +
    <div id="contents-wrapper">
 +
  <div id="contents">
 +
    <div>
 +
      <h1>header 1</h1>
 +
      <h2>header 2</h2>
 +
      <h3>header 3</h3>
 +
      <p>texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</p>
 +
      <p>texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</p>
 +
      <p>texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</p>
 +
      <ul>
 +
        <li>listlistlistlistlist</li>
 +
        <li>listlistlistlistlist</li>
 +
        <li>listlistlistlistlist</li>
 +
        <li>listlistlistlistlist</li>
 +
        <li>listlistlistlistlist</li>
 +
      </ul>
 +
    </div>
 +
    <div>
 +
      <h1>header 1</h1>
 +
      <h2>header 2</h2>
 +
      <h3>header 3</h3>
 +
      <p>texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</p>
 +
      <p>texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</p>
 +
      <p>texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</p>
 +
      <ul>
 +
        <li>listlistlistlistlist</li>
 +
        <li>listlistlistlistlist</li>
 +
        <li>listlistlistlistlist</li>
 +
        <li>listlistlistlistlist</li>
 +
        <li>listlistlistlistlist</li>
 +
      </ul>
 +
    </div>
 +
    <div>
 +
      <h1>header 1</h1>
 +
      <h2>header 2</h2>
 +
      <h3>header 3</h3>
 +
      <p>texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</p>
 +
      <p>texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</p>
 +
      <p>texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</p>
 +
      <ul>
 +
        <li>listlistlistlistlist</li>
 +
        <li>listlistlistlistlist</li>
 +
        <li>listlistlistlistlist</li>
 +
        <li>listlistlistlistlist</li>
 +
        <li>listlistlistlistlist</li>
 +
      </ul>
 +
    </div>
 +
      </div>
 +
  </div>
 +
  <div id="footer">
 +
    <div id="footer_logos">
 +
      <img src="T--Kyoto--Footer-24.png" width="874" height="95">
 +
    </div>
 +
    <div id="footer_contact">
 +
      <img src="T--Kyoto--Footer-25.png">
 +
    </div>
 +
    <div id="footer_social">
 +
      <a href="mailto:igemkyoto@gmail.com"><img src="T--Kyoto--Footer-28.png"></a>
 +
      <a href="https://twitter.com/igemkyoto"><img src="T--Kyoto--Footer-26.png"></a>
 +
      <a href="https://www.facebook.com/IgemKyoto/"><img src="T--Kyoto--Footer-27.png"></a>
 +
    </div>
 +
  </div>
  
  
  
 
</html>
 
</html>

Revision as of 14:01, 11 October 2016

header 1

header 2

header 3

texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext

texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext

texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext

  • listlistlistlistlist
  • listlistlistlistlist
  • listlistlistlistlist
  • listlistlistlistlist
  • listlistlistlistlist

header 1

header 2

header 3

texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext

texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext

texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext

  • listlistlistlistlist
  • listlistlistlistlist
  • listlistlistlistlist
  • listlistlistlistlist
  • listlistlistlistlist

header 1

header 2

header 3

texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext

texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext

texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext

  • listlistlistlistlist
  • listlistlistlistlist
  • listlistlistlistlist
  • listlistlistlistlist
  • listlistlistlistlist