Difference between revisions of "Team:NUS Singapore-A/shadow/Supervisors"

 
(23 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 
{{NUS_Singapore-A}}
 
{{NUS_Singapore-A}}
 +
{{:Team:NUS_Singapore-A/Templates/Style}}
 
<html>
 
<html>
 +
 
<head>
 
<head>
<link href="https://fonts.googleapis.com/css?family=Patua+One" rel="stylesheet">
 
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
 
 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
 
<script type="text/javascript" src="//use.typekit.net/kei2cfp.js"></script>
 
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
 
 
 
  
 
</head>
 
</head>
  
 +
<body>
  
 +
<div class="inner-border" style="border-top: none;">
  
<style>
 
  
body{
+
<!--**************************************** Instructor ****************************************-->
  font-family: 'Montserrat', cursive;
+
<div style="text-align:center;">
   background-color: #eaf2ef;
+
   <img src="https://static.igem.org/mediawiki/2018/b/b9/T--NUS_Singapore-A--Advisors_header_C.png" alt="Advisors header" style="width:50%;">
}
+
</div>
  
.members-gallery{
+
<div class="namecard_column">
  max-width: 80%;
+
    <div class="card" style="text-align:center;">
  position: relative;
+
      <img src="https://static.igem.org/mediawiki/2018/8/8f/T--NUS_Singapore-A--Profs.png" alt="Img of Professors" style="width: 95%;">
  margin: auto;
+
      <div class="intro_container">
  padding: 10px;
+
        <div class="intro-item">
}
+
          <h2 id="teamh2" style="font-size:20px;">Chueh Loo Poh</h2>
.members-gallery img{
+
          <p class="title">Associate Professor</p>
  max-width: 100%;
+
          <p>Biomedical Engineering</p>
}
+
          <p>BioMakerSpace</p>
.nanda{
+
          <p>SynCTI</p>
  position: absolute;
+
          <p>poh.chuehloo@nus.edu.sg</p>
  top: 4.5%;
+
        </div>
  left: 42.5%;
+
  width: 12%;
+
  height: 21.5%;
+
  cursor: pointer;
+
}
+
.ting2{
+
  position: absolute;
+
  top: 21%;
+
  left: 29%;
+
  width: 12%;
+
  height: 21.5%;
+
  cursor: pointer;
+
}
+
.marcus{
+
  position: absolute;
+
  top: 21%;
+
  left: 56.5%;
+
  width: 12%;
+
  height: 21.5%;
+
  cursor: pointer;
+
}
+
.rita{
+
  position: absolute;
+
  top: 28.5%;
+
  left: 14%;
+
  width: 12%;
+
  height: 21.5%;
+
  cursor: pointer;
+
}
+
.walter{
+
  position: absolute;
+
  top: 28.5%;
+
  left: 72%;
+
  width: 12%;
+
  height: 21.5%;
+
  cursor: pointer;
+
}
+
.liyana{
+
  position: absolute;
+
  top: 37%;
+
  left: 42.5%;
+
  width: 12%;
+
  height: 21.5%;
+
  cursor: pointer;
+
}
+
.aaronl{
+
  position: absolute;
+
  top: 49%;
+
  left: 26.5%;
+
  width: 12%;
+
  height: 21.5%;
+
  cursor: pointer;
+
}
+
.russell{
+
  position: absolute;
+
  top: 49%;
+
  left: 58.5%;
+
  width: 12%;
+
  height: 21.5%;
+
  cursor: pointer;
+
}
+
.hyhy{
+
  position: absolute;
+
  top: 54.5%;
+
  left: 9.5%;
+
  width: 12%;
+
  height: 21.5%;
+
  cursor: pointer;
+
}
+
.ryan{
+
  position: absolute;
+
  top: 54.5%;
+
  left: 76%;
+
  width: 12%;
+
  height: 21.5%;
+
  cursor: pointer;
+
}
+
.beatrix{
+
  position: absolute;
+
  top: 65%;
+
  left: 42.5%;
+
  width: 12%;
+
  height: 21.5%;
+
  cursor: pointer;
+
}
+
.jiacheng{
+
  position: absolute;
+
  top: 75%;
+
  left: 27%;
+
  width: 12%;
+
  height: 21.5%;
+
  cursor: pointer;
+
}
+
.me{
+
  position: absolute;
+
  top: 75%;
+
  left: 59%;
+
  width: 12%;
+
  height: 21.5%;
+
  cursor: pointer;
+
}
+
  
/* The Modal (background) */
 
.modal {
 
    display: none; /* Hidden by default */
 
    position: fixed; /* Stay in place */
 
    z-index: 1; /* Sit on top */
 
    left: 0;
 
    top: 0;
 
    width: 100%; /* Full width */
 
    height: 100%; /* Full height */
 
    overflow: auto; /* Enable scroll if needed */
 
    background-color: rgb(0,0,0); /* Fallback color */
 
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
 
}
 
  
/* Modal Content/Box */
+
        <div class="intro-item">
.modal-content {
+
          <h2 id="teamh2" style="font-size:20px;">Jimmy Chih-Hsien Peng</h2>
    background-color: #fefefe;
+
          <p class="title">Assistant Professor</p>
    margin: 15% auto; /* 15% from the top and centered */
+
          <p>Electrical Engineering</p>
    padding: 20px;
+
          <p>NUS Faculty of Engineering</p>
    border: 1px solid #888;
+
          <p>jpeng@nus.edu.sg</p>
    width: 80%; /* Could be more or less, depending on screen size */
+
        </div>
}
+
  
/* The Close Button */
 
.close {
 
    color: #aaa;
 
    float: right;
 
    font-size: 28px;
 
    font-weight: bold;
 
}
 
 
.close:hover,
 
.close:focus {
 
    color: black;
 
    text-decoration: none;
 
    cursor: pointer;
 
}
 
.profile{
 
  display: flex;
 
  flex-direction: row;
 
  justify-content: center;
 
  align-items: flex-start;
 
 
 
}
 
.profile-description{
 
  display: flex;
 
  flex-grow: 3;
 
  flex-direction: column;
 
  padding 20px;
 
  text-align: left;
 
 
 
}
 
.profile-picture{
 
  display: flex;
 
  flex-grow: 1;
 
  flex-basis: 0;
 
}
 
.portrait1{
 
  height: 250px;
 
  width: 250px;
 
  border: px solid #aaa;
 
  background-size:cover;
 
  background-position: center;
 
  background-image: url("https://static.igem.org/mediawiki/2018/1/18/T--NUS_Singapore-A--Jiacheng_formal.jpg");
 
}
 
.portrait1:hover{
 
  background-image: url("https://static.igem.org/mediawiki/2018/1/12/T--NUS_Singapore-A--Jiacheng_informal.jpg");
 
}
 
</style>
 
 
<div class="inner-border" style="border-top:none;">
 
  <div class="members-gallery">
 
    <img src="https://static.igem.org/mediawiki/2018/0/03/T--NUS_Singapore-A--NUSGEM_Team_Final.png">
 
    <a class="nanda" id = "nanda_a"></a>
 
    <a class="ting2" id = "ting2_a"></a>
 
    <a class="marcus" id = "marcus_a"></a>
 
    <a class="rita" id = "rita_a"></a>
 
    <a class="walter" id = "walter_a"></a>
 
    <a class="liyana" id = "liyana_a"></a>
 
    <a class="aaronl" id = "aaronl_a"></a>
 
    <a class="russell" id = "russell_a"></a>
 
    <a class="hyhy" id = "hyhy_a"></a>
 
    <a class="ryan" id = "ryan_a"></a>
 
    <a class="beatrix" id = "beatrix_a"></a>
 
    <a class="jiacheng" id = "jiacheng_a"></a>
 
    <a class="me" id = "me_a"></a>
 
  </div>
 
 
<div class="profile-wrapper">
 
  <div id="jiacheng_profile" class="modal">
 
    <div class="modal-content">
 
      <div>
 
        <span class="close">&times;</span>
 
      </div>
 
      <div class="profile">
 
  
         <div class="profile-picture">
+
         <div class="intro-item">
           <span class="portrait1"></span>
+
           <h2 id="teamh2" style="font-size:20px;">Matthew Chang</h2>
 +
          <p class="title">Associate Professor</p>
 +
          <p>Biochemistry</p>
 +
          <p>SynCTI</p>
 +
          <p>bchcmw@nus.edu.sg</p>
 
         </div>
 
         </div>
  
        <div class="profile-description">
 
          <h2>Role</h2>
 
            <p>Head of Wiki, Head of Hardware, Member of Modelling Team, Science Team, and Wet Lab Team</p>
 
            <h2>Ambition</h2>
 
            <p>Jiacheng’s dream is uncomplicated. He just wants to travel around the world.</p>
 
            <h2>Interesting fact about him</h2>
 
            <p>He loves philosophy. Thankfully, the kind of philosophy he’s inclined towards is not Sartre’s “Hell is other people” or Schopenhauer’s relentless pessimism, but more Lao Tzu’s “Simplicity, patience, compassion.” (Editor’s note: It is with deepest regret that I announce the premature demise of the editorial gerbils, Pinky and The Brian. Hegel’s Phenomenology of Spirit was too much to handle. This intellectual deficiency will be rectified in the next generation of editorial gerbils.)</p>
 
        </div>
 
      </div>
 
  
    </div>
+
        <div class="intro-item">
  </div>
+
          <h2 id="teamh2" style="font-size:20px;">Yew Wen Shan</h2>
<div id="liyana_profile" class="modal">
+
          <p class="title">Associate Professor</p>
    <div class="modal-content">
+
          <p>Biochemistry</p>
      <div>
+
          <p>SynCTI</p>
        <span class="close">&times;</span>
+
           <p>bchyws@nus.edu.sg</p>
      </div>
+
      <div class="profile">
+
 
+
        <div class="profile-picture">
+
           <span class="portrait1"></span>
+
 
         </div>
 
         </div>
  
        <div class="profile-description">
 
          <h2>Role</h2>
 
            <p>Team Leader, Head of Creative, Member of Science Team and Wet Lab Team</p>
 
            <h2>Ambition</h2>
 
            <p>Liyana’s ultimate goal is to dedicate her life to humanitarian work, and be a powerful voice for women and children who have none. She also strives to help others recognize their own worth. As a side project, she’s working on inventing teleportation.</p>
 
            <h2>Interesting fact about her</h2>
 
            <p>She loves it when people teach her things they’re passionate about. Languages, carpentry, sewing, bring it on! (Especially quantum mechanics someone please teach her please please please she really needs it for her teleportation thing...)</p>
 
        </div>
 
 
       </div>
 
       </div>
 
 
     </div>
 
     </div>
 
   </div>
 
   </div>
  
 +
<div class="clear"></div>
  
</div>
+
<div class="namecard_column">
 +
    <div class="card">
 +
      <img src="https://static.igem.org/mediawiki/2018/3/32/T--NUS_Singapore-A--Rfs.png" alt="Image of Rfs" style="width:100%">
 +
      <div class="intro_container">
  
</div>
+
        <div class="intro-item">
 +
          <h2 id="teamh2" style="font-size:22px;">David Wai Kit Chee</h2>
 +
          <p class="title">PhD Candidate</p>
 +
          <p>Biomedical Engineering</p>
 +
          <p>BioMakerSpace</p>
 +
        </div>
  
 +
        <div class="intro-item">
 +
          <h2 id="teamh2" style="font-size:22px;">Jing Wui Yeoh</h2>
 +
          <p class="title">Research Fellow</p>
 +
          <p>Biomedical Engineering</p>
 +
          <p>BioMakerSpace</p>
 +
        </div>
  
 +
        <div class="intro-item">
 +
          <h2 id="teamh2" style="font-size:22px;">Jingyun Zhang</h2>
 +
          <p class="title">PhD Candidate</p>
 +
          <p>Biomedical Engineering</p>
 +
          <p>BioMakerSpace</p>
 +
        </div>
  
 +
        <div class="intro-item">
 +
          <h2 id="teamh2" style="font-size:22px;">Yan Ping Lim</h2>
 +
          <p class="title">Research Fellow</p>
 +
          <p>Biochemistry</p>
 +
          <p>Yew Lab, SynCTI</p>
 +
        </div>
  
<script>
+
        <div class="intro-item">
// Get the modal
+
          <h2 id="teamh2" style="font-size:22px;">Saravanan Prabhu Nadarajan</h2>
var JcProfile = document.getElementById('jiacheng_profile');
+
          <p class="title">Research Fellow</p>
var LyProfile = document.getElementById('liyana_profile');
+
          <p>Biochemistry</p>
 +
          <p>The Chang Lab, SynCTI</p>
 +
        </div>
  
// Get the hyperlink that opens the modal
 
var JcLink = document.getElementById("jiacheng_a");
 
var LyLink = document.getElementById("liyana_a");
 
  
// Get the <span> element that closes the modal
+
      </div>
var span = document.getElementsByClassName("close")[0];
+
    </div>
 +
  </div>
  
// When the user clicks on the button, open the modal
 
JcLink.onclick = function() {
 
    JcProfile.style.display = "block";
 
}
 
LyLink.onclick = function() {
 
    LyProfile.style.display = "block";
 
}
 
// When the user clicks on <span> (x), close the modal
 
span.onclick = function() {
 
    JcProfile.style.display = "none";
 
    LyProfile.style.display = "none";
 
}
 
  
// When the user clicks anywhere outside of the modal, close it
+
<div class="clear"></div>
window.onclick = function(event) {
+
    if (event.target == modal) {
+
        JcProfile.style.display = "none";
+
        LyProfile.style.display = "none";
+
    }
+
}
+
</script>
+
  
  
  
 
 
<div class="column two_thirds_size" >
 
 
<h1>Team</h1>
 
<p>In this page you can introduce your team members, instructors, and advisors. </p>
 
 
 
<h3>What should this page contain?</h3>
 
<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 class="column third_size" >
 
<div class="highlight decoration_A_full">
 
<h3>Inspiration</h3>
 
<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">2014 METU Turkey </a></li>
 
<li><a href="https://2014.igem.org/Team:Colombia/Members">2014 Colombia</a></li>
 
<li><a href="https://2014.igem.org/Team:Stony_Brook/Team">2014 Stony Brook</a></li>
 
<li><a href="https://2014.igem.org/Team:OUC-China/Team">2014 OUC-China</a></li>
 
</ul>
 
</div>
 
 
</div>
 
</div>
  
 +
</body>
 
</html>
 
</html>
 +
{{:Team:NUS_Singapore-A/Templates/Footer}}

Latest revision as of 09:16, 9 October 2018

CONNECT WITH US
Advisors header
Img of Professors

Chueh Loo Poh

Associate Professor

Biomedical Engineering

BioMakerSpace

SynCTI

poh.chuehloo@nus.edu.sg

Jimmy Chih-Hsien Peng

Assistant Professor

Electrical Engineering

NUS Faculty of Engineering

jpeng@nus.edu.sg

Matthew Chang

Associate Professor

Biochemistry

SynCTI

bchcmw@nus.edu.sg

Yew Wen Shan

Associate Professor

Biochemistry

SynCTI

bchyws@nus.edu.sg

Image of Rfs

David Wai Kit Chee

PhD Candidate

Biomedical Engineering

BioMakerSpace

Jing Wui Yeoh

Research Fellow

Biomedical Engineering

BioMakerSpace

Jingyun Zhang

PhD Candidate

Biomedical Engineering

BioMakerSpace

Yan Ping Lim

Research Fellow

Biochemistry

Yew Lab, SynCTI

Saravanan Prabhu Nadarajan

Research Fellow

Biochemistry

The Chang Lab, SynCTI