Difference between revisions of "Team:Calgary/Team"

(Prototype team page)
 
Line 1: Line 1:
−
{{Calgary}}
+
<!DOCTYPE html>
 
<html>
 
<html>
 +
<head>
  
−
<div class="column two_thirds_size" >
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
  
−
<h1>Team</h1>
+
<title>Team</title>
−
<p>In this page you can introduce your team members, instructors, and advisors. </p>
+
  
 +
<!-- CSS Dependencies -->
 +
  <link rel="stylesheet" type="text/css" href="https://2019.igem.org/Template:Calgary/Bootstrap?action=raw&ctype=text/css">
 +
<link rel="stylesheet" type="text/css" href="https://2018.igem.org/Team:Calgary/WikiResetCSSImposter?action=raw&ctype=text/css">
  
−
<h3>What should this page contain?</h3>
+
<!-- In-House CSS -->
−
<ul>
+
<link rel="stylesheet" type="text/css" href="https://2019.igem.org/Template:Calgary/TeamBanner-Styling?action=raw&ctype=text/css">  
−
<li> Include pictures of your teammates, don’t forget instructors and advisors! </li>
+
<link rel="stylesheet" type="text/css" href="https://2019.igem.org/Template:Calgary/General-Styling?action=raw&ctype=text/css">
−
<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>
+
<link rel="stylesheet" type="text/css" href="https://2019.igem.org/Template:Calgary/ProgressBar-Styling?action=raw&ctype=text/css">  
−
<li>Take team pictures! Show us your school, your lab and little bit of your city.</li>
+
<link rel="stylesheet" type="text/css" href="https://2019.igem.org/Template:Calgary/Team-Styling?action=raw&ctype=text/css">  
−
<li>Remember that image galleries can help you showcase many pictures while saving space.</li>
+
−
</ul>
+
−
</div>
+
  
  
 +
<!-- Code Dependencies -->
 +
<script src="https://2019.igem.org/Template:Calgary/jQuery-Code?action=raw&ctype=text/javascript"></script>
 +
<script src="https://2019.igem.org/Template:Calgary/PopperJS-Code?action=raw&ctype=text/javascript"></script>
 +
<script src="https://2019.igem.org/Template:Calgary/Bootstrap-Code?action=raw&ctype=text/javascript"></script>
 +
<script src="https://2019.igem.org/Template:Calgary/SmoothScroll-Code?action=raw&ctype=text/javascript"></script>
  
−
<div class="column third_size" >
+
<!-- In-House Code -->
−
<div class="highlight decoration_A_full">
+
<script src="https://2019.igem.org/Template:Calgary/TeamBase-Code?action=raw&ctype=text/javascript"></script>
−
<h3>Inspiration</h3>
+
<script src="https://2019.igem.org/Template:Calgary/Definitions-Code?action=raw&ctype=text/javascript"></script>
−
<p>You can look at what other teams did to get some inspiration! <br />
+
<script src="https://2019.igem.org/Template:Calgary/ProgressBar-Code?action=raw&ctype=text/javascript"></script>
−
Here are a few examples:</p>
+
<script src="https://2019.igem.org/Template:Calgary/MemberGeneration-Code?action=raw&ctype=text/javascript"></script>
−
<ul>
+
<script src="https://2019.igem.org/Template:Calgary/InitiateTeam-Code?action=raw&ctype=text/javascript"></script>
−
<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>
+
</head>
−
<li><a href="https://2014.igem.org/Team:Stony_Brook/Team">2014 Stony Brook</a></li>
+
<body>
−
<li><a href="https://2014.igem.org/Team:OUC-China/Team">2014 OUC-China</a></li>
+
 
−
</ul>
+
<div class="container-fluid">
−
</div>
+
 
−
</div>
+
<div class = "fixed" id="fixed-content">
 +
<nav class="navbar navbar-expand-lg navbar-dark nav-down" id="navbar">
 +
  <a class="navbar-brand" href="#">yOIL</a>
 +
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
 +
    <span class="navbar-toggler-icon"></span>
 +
  </button>
 +
 
 +
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
 +
    <ul class="navbar-nav mr-auto">
 +
      <li class="nav-item">
 +
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
 +
      </li>
 +
      <li class="nav-item">
 +
        <a class="nav-link" href="template.html">Journal</span></a>
 +
      </li>
 +
      <li class="nav-item">
 +
        <a class="nav-link" href="#">Link</a>
 +
      </li>
 +
      <li class="nav-item dropdown">
 +
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 +
          Dropdown
 +
        </a>
 +
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
 +
          <a class="dropdown-item" href="#">Action</a>
 +
          <a class="dropdown-item" href="#">Another action</a>
 +
          <div class="dropdown-divider"></div>
 +
          <a class="dropdown-item" href="#">Something else here</a>
 +
        </div>
 +
      </li>
 +
    </ul>
 +
  </div>
 +
</nav>
 +
 
 +
<div class="mobile-banner-back" id="banner">
 +
<div class="page-banner">
 +
<h2 class="page-subtitle">Team &nbsp&nbsp/&nbsp&nbsp <span class="emphasis">Members</span></h2>
 +
</div>
 +
</div>
 +
 
 +
<div class="mobile-banner-back-special hidden" id="banner-special">
 +
<div class="page-banner">
 +
<h2 class="person-name" id="banner-name"></h2>
 +
<div class="options">
 +
<a class="direction-button" id="left-button">
 +
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
 +
<circle cx="18" cy="18" r="18" fill="white"/>
 +
<path d="M21.1429 14L16 17.8571L21.1429 21.7143" stroke="#2ADD3C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 +
</svg>
 +
 
 +
</a>
 +
<a class="direction-button" id="right-button">
 +
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
 +
<circle cx="18" cy="18" r="18" transform="rotate(-180 18 18)" fill="white"/>
 +
<path d="M14.8571 22L20 18.1429L14.8571 14.2857" stroke="#2ADD3C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 +
</svg>
 +
</a>
 +
<a id="back-button">Back</a>
 +
</div>
 +
</div>
 +
</div>
 +
 
 +
<div class="progress-container">
 +
<progress value="0" max="100" id="bar"></progress>
 +
</div>
 +
</div>
 +
 
 +
<div class="desktop-banner-back">
 +
<div class="text-area">
 +
<div class="page-banner">
 +
<h2 class="page-subtitle">Team</h2>
 +
<h1 class="page-title">Members</h1>
 +
</div>
 +
</div>
 +
</div>
 +
 
 +
<div class="interface-group">
 +
<div class="person-picker" id="picker">
 +
<!-- <div class="person-card">
 +
<img class="square-profile" src="Sarah_Square.jpg"></img>
 +
<div class="name-affiliation">
 +
<p class="name">Sarah Walker</p>
 +
<p class="type">Member</p>
 +
<p class="affiliation">DRY LAB</p>
 +
</div>
 +
</div> -->
 +
</div>
 +
<div class="content-area hidden" id="profile-content">
 +
<!-- <div class="member">
 +
<div class="profile">
 +
<img class="profile-pic" src="Sarah.jpg"></img>
 +
<div class="name-affiliation">
 +
<p class="name">Sarah Walker</p>
 +
<p class="type">Member</p>
 +
<p class="affiliation">DRY LAB</p>
 +
</div>
 +
<hr>
 +
<div class="labelled-info">
 +
<p class="label">Major</p>
 +
<p>Computer Science</p>
 +
</div>
 +
<div class="labelled-info">
 +
<p class="label">Year</p>
 +
<p>Fourth</p>
 +
</div>
 +
<hr>
 +
<p>As described by her peers</p>
 +
<div class="adjectives">
 +
<p class="adjective">Leader-y</p>
 +
<p class="adjective">Caring</p>
 +
<p class="adjective">Demanding</p>
 +
<p class="adjective">Fake</p>
 +
<p class="adjective">Awesome</p>
 +
</div>
 +
</div>
 +
<div class="member-information">
 +
<h1>Biography</h1>
 +
<div class="biography">
 +
<div class="quote">
 +
<p class="text"><span class="quotation-mark-left">&ldquo;</span>I have all these great genes, but they're recessive. That's the problem here.<span class="quotation-mark-right">&rdquo;</span></p>
 +
<p class="attribution"><span class="em-dash">—</span>Bill Watterson, <span class="media-source">The Complete Calvin and Hobbes</span></p>
 +
</div>
 +
<p class="main-text">Sarah is a returning member on this year’s iGEM team. She is a huge fan of organization and often takes the lead on scheduling events, planning projects, and booking external meetings. In her free time, Sarah enjoys hanging out with her dog, Cocoa. Her friends would describe her as a level-headed, natural leader. In the future, Sarah hopes to secure a job at ATB financial and she plans to engage in some less-than-savoury networking over the next couple of months to achieve her goal.</p>
 +
<p class="motivation"><span class="emphasis">Motivation:</span> Sarah joined UCalgary’s iGEM team in 2018 after viewing the team’s poster from the 2017 project, <a class="hyperlink" href="https://2017.igem.org/Team:Calgary" target="_blank">Astroplastic</a>. Ambitious, competitive, and always looking for a new challenge, Sarah was quick to apply. After travelling to Boston for the Giant Jamboree, she was inspired by the diversity of innovative and revolutionary projects she saw and decided to return for the 2019 season. In addition to contributing to synthetic biology research through technological tools, Sarah wanted to use iGEM as a way to develop and supplement her leadership skills.</p>
 +
</div>
 +
<h1>Projects</h1>
 +
<div class="involvements">
 +
<div class="involvement">
 +
<img class="icon" src="Icon-WikiDesign.svg"></img>
 +
<div class="brief-info">
 +
<h2 class="title">Wiki Design</h2>
 +
<p class="desc">A sleek and sexy design that highlights the project’s emphasis on integrated human practices.</p>
 +
</div>
 +
<div class="people-involved">
 +
<a class="person"><img class="person-pic" src="Prabhu_Square.jpg"></img></a>
 +
<a class="person"><img class="person-pic" src="Sarah_Square.jpg"></img></a>
 +
<a class="person"><img class="person-pic" src="Rylan_Square.jpg"></img></a>
 +
</div>
 +
</div>
 +
<div class="involvement">
 +
<img class="icon" src="Icon-WikiDesign.svg"></img>
 +
<div class="brief-info">
 +
<h2 class="title">Wiki Design</h2>
 +
<p class="desc">A sleek and sexy design that highlights the project’s emphasis on integrated human practices.</p>
 +
</div>
 +
<div class="people-involved">
 +
<a class="person"><img class="person-pic" src="Prabhu_Square.jpg"></img></a>
 +
<a class="person"><img class="person-pic" src="Sarah_Square.jpg"></img></a>
 +
<a class="person"><img class="person-pic" src="Rylan_Square.jpg"></img></a>
 +
</div>
 +
</div>
 +
</div>
 +
<h1>Sub-Team Affiliations</h1>
 +
<div class="involvements">
 +
<div class="involvement">
 +
<img class="icon" src="Icon-HumanPractices.svg"></img>
 +
<div class="brief-info">
 +
<h2 class="title">Human Practices</h2>
 +
<p class="desc">Utilizing feedback from stakeholders in science and agriculture to inform the design of our project.</p>
 +
</div>
 +
<div class="people-involved">
 +
<a class="person"><img class="person-pic" src="Prabhu_Square.jpg"></img></a>
 +
<a class="person"><img class="person-pic" src="Sarah_Square.jpg"></img></a>
 +
<a class="person"><img class="person-pic" src="Rylan_Square.jpg"></img></a>
 +
</div>
 +
</div>
 +
<div class="involvement">
 +
<img class="icon" src="Icon-HumanPractices.svg"></img>
 +
<div class="brief-info">
 +
<h2 class="title">Human Practices</h2>
 +
<p class="desc">Utilizing feedback from stakeholders in science and agriculture to inform the design of our project.</p>
 +
</div>
 +
<div class="people-involved">
 +
<a class="person"><img class="person-pic" src="Prabhu_Square.jpg"></img></a>
 +
<a class="person"><img class="person-pic" src="Sarah_Square.jpg"></img></a>
 +
<a class="person"><img class="person-pic" src="Rylan_Square.jpg"></img></a>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div> -->
 +
</div>
 +
</div>
 +
</div>
 +
 
 +
</body>
 
</html>
 
</html>

Revision as of 04:10, 10 October 2019

<!DOCTYPE html> Team

Team

Members