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

(Created page with " <html> <head> </head> <style></style> lkksnlnljn </html>")
 
Line 1: Line 1:
−
 
+
{{NUS_Singapore-A}}
−
 
+
 
<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>
  
−
<style></style>
 
  
−
lkksnlnljn
+
 
 +
<style>
 +
 
 +
body{
 +
  font-family: 'Montserrat', cursive;
 +
  background-color: #eaf2ef;
 +
}
 +
 
 +
.members-gallery{
 +
  max-width: 80%;
 +
  position: relative;
 +
  margin: auto;
 +
  padding: 10px;
 +
}
 +
.members-gallery img{
 +
  max-width: 100%;
 +
}
 +
.nanda{
 +
  position: absolute;
 +
  top: 4.5%;
 +
  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 */
 +
.modal-content {
 +
    background-color: #fefefe;
 +
    margin: 15% auto; /* 15% from the top and centered */
 +
    padding: 20px;
 +
    border: 1px solid #888;
 +
    width: 80%; /* Could be more or less, depending on screen size */
 +
}
 +
 
 +
/* 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">
 +
          <span class="portrait1"></span>
 +
        </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>
 +
<div id="liyana_profile" class="modal">
 +
    <div class="modal-content">
 +
      <div>
 +
        <span class="close">&times;</span>
 +
      </div>
 +
      <div class="profile">
 +
 
 +
        <div class="profile-picture">
 +
          <span class="portrait1"></span>
 +
        </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>
 +
 
 +
 
 +
 
 +
 
 +
<script>
 +
// Get the modal
 +
var JcProfile = document.getElementById('jiacheng_profile');
 +
var LyProfile = document.getElementById('liyana_profile');
 +
 
 +
// 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
 +
var span = document.getElementsByClassName("close")[0];
 +
 
 +
// 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
 +
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>
  
 
</html>
 
</html>

Revision as of 16:37, 20 July 2018

CONNECT WITH US

Team

In this page you can introduce your team members, instructors, and advisors.

What should this page contain?

  • Include pictures of your teammates, don’t forget instructors and advisors!
  • 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.
  • Take team pictures! Show us your school, your lab and little bit of your city.
  • Remember that image galleries can help you showcase many pictures while saving space.

Inspiration

You can look at what other teams did to get some inspiration!
Here are a few examples: