Difference between revisions of "Team:Hong Kong HKUST/Team"

(Prototype team page)
 
Line 1: Line 1:
−
{{Hong_Kong_HKUST}}
+
{{Hong_Kong_HKUST/Navbar}}
  
 
<html>
 
<html>
 +
    <body>
 +
        <div id="openModal" class="talk-bubble tri-right border round btm-left-in">
 +
      <div class="talktext">
 +
                  <p>Name: <span id="box"> </span></p>
 +
      </div>
 +
          </div>
 +
        <div align="center" class="image">
 +
          <!--<p>CoorX:<span id="x"></span> CoorY:<span id="y"></span></p>--> 
 +
          <img src="https://static.igem.org/mediawiki/2017/c/cf/HKUST_TEAM_member.jpeg" alt="Team"style" width="1080" height="1920"
 +
          usemap="teammap">
 +
          <map name="teammap">
 +
              <area shape="rect" onmouseenter="PopUp('William')" onmouseout="Hide('William')" coords="50,132,241,428"
 +
                  alt="william">
 +
              <area shape="rect" onmouseover="PopUp('Devi')" onmouseout="Hide('Devi')"coords="302,133,524,428" alt="Devi">
 +
              <area shape="rect" onmouseover="PopUp('Alvin')" onmouseout="Hide('Alvin')" coords="569,136,777,424" alt="Alvin">
 +
              <area shape="rect" onmouseover="PopUp('Harold')" onmouseout="Hide('Harold')" coords="835,138,1037,425" alt="Harold">
 +
              <area shape="rect" onmouseover="PopUp('Handi')" onmouseout="Hide('Handi')" coords="18,436,276,744" alt="Harold">
 +
          </map>
 +
 +
        </div>
 +
      <style>
 +
          .image {
 +
              position: relative;
 +
              /*width: 100%;  for IE 6 */
 +
          }
 +
          #openModal {
 +
              display: none;
 +
              position: absolute;
 +
              z-index: 3
 +
          }
 +
          .talk-bubble {
 +
      //margin: 40px;
 +
              display: inline-block;
 +
              position: relative;
 +
      width: 200px;
 +
      height: auto;
 +
      background-color: lightyellow;
 +
            }
 +
            .border{
 +
                border: 8px solid #666;
 +
            }
 +
            .round{
 +
                border-radius: 30px;
 +
        -webkit-border-radius: 30px;
 +
        -moz-border-radius: 30px;
 +
            }
 +
            .tri-right.border.btm-left-in:before {
 +
      content: ' ';
 +
      position: absolute;
 +
      width: 0;
 +
      height: 0;
 +
      left: 30px;
 +
              right: auto;
 +
              top: auto;
 +
      bottom: -40px;
 +
      border: 20px solid;
 +
      border-color: #666 transparent transparent #666;
 +
            }
 +
            .tri-right.btm-left-in:after{
 +
      content: ' ';
 +
      position: absolute;
 +
      width: 0;
 +
      height: 0;
 +
      left: 38px;
 +
              right: auto;
 +
              top: auto;
 +
      bottom: -20px;
 +
      border: 12px solid;
 +
      border-color: lightyellow transparent transparent lightyellow;
 +
            }
 +
            .talktext{
 +
                padding: 1em;
 +
        text-align: left;
 +
                line-height: 1.5em;
 +
            }
 +
            .talktext p{
 +
                /* remove webkit p margins */
 +
                -webkit-margin-before: 0em;
 +
                -webkit-margin-after: 0em;
 +
            }
 +
      </style>
 +
      <script>
 +
          var coorX = 0;
 +
          var coorY = 0;
 +
          function readMouseMove(e){
 +
      coorX = e.clientX-38;
 +
      coorY = e.clientY-114;
 +
              /*
 +
              var result_x = document.getElementById('x');
 +
      var result_y = document.getElementById('y');
 +
      result_x.innerHTML = coorX;
 +
      result_y.innerHTML = coorY;
 +
              */
 +
              var modal = document.getElementById('openModal');
 +
              modal.style.left = coorX+'px';
 +
              modal.style.top = coorY+'px';
 +
          }
 +
          document.onmousemove = readMouseMove;
 +
          function PopUp(name) {
 +
              //alert("popup");
 +
              var x = document.getElementById('openModal');
 +
              x.style.display='block';
 +
              document.getElementById('box').innerHTML = name;
 +
          }
 +
          function Hide(name) {
 +
              var x = document.getElementById('openModal');
 +
              x.style.display='none';
 +
          }
 +
      </script>
  
 +
      <p>our advisors</p>
 +
</body>
 +
</html>
  
−
 
+
{{Hong_Kong_HKUST/Footer}}
−
<div class="column full_size" >
+
−
 
+
−
<h1>Team</h1>
+
−
<p>In this page you can introduce your team members, instructors, and advisors. </p>
+
−
</div>
+
−
 
+
−
<div class="clear"></div>
+
−
 
+
−
<div class="column half_size" >
+
−
<h5>Inspiration</h5>
+
−
<p>You can look at what other teams did to get some inspiration! <br />
+
−
Here are a few examples:</p>
+
−
<ul>
+
−
<li><a href="https://2014.igem.org/Team:METU_Turkey_team">METU Turkey </a></li>
+
−
<li><a href="https://2014.igem.org/Team:Colombia/Members">Colombia</a></li>
+
−
<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>
+
−
</ul>
+
−
 
+
−
</div>
+
−
 
+
−
<div class="column half_size" >
+
−
<h5>What should this page contain?</h5>
+
−
<ul>
+
−
<li> Include pictures of your teammates, don’t forget instructors and advisors! </li>
+
−
<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>
+
−
<li>Take team pictures! Show us your school, your lab and little bit of your city.</li>
+
−
<li>Remember that image galleries can help you showcase many pictures while saving space.</li>
+
−
</ul>
+
−
</div>
+
−
 
+
−
 
+
−
 
+
−
</div>
+
−
</html>
+

Revision as of 07:38, 23 August 2017

HKUST iGEM Team 2017

Name:

Team william Devi Alvin Harold Harold

our advisors


Footer