|
|
(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">×</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">×</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}} |