Difference between revisions of "Team:Calgary/Team"

Line 59: Line 59:
 
<body>
 
<body>
  
<div class="container-fluid">
+
    <div class="section-menu section-menu-up" id="section-menu">
 +
      <div class="sections" id="sections">
 +
      </div>
 +
    </div>
  
<div class = "fixed" id="fixed-content">
+
    <div class="desktop-banner-back">
<nav class="navbar navbar-expand-lg navbar-dark nav-down" id="navbar">
+
      <div class="text-area">
  <a class="navbar-brand" href="#">yOIL</a>
+
        <div class="page-banner">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+
          <h2 class="page-subtitle">Collaborations</h2>
    <span class="navbar-toggler-icon"></span>
+
          <h1 class="page-title">Building Relationships</h1>
  </button>
+
        </div>
 
+
      </div>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
+
      <div class="overlap-area" id="overlap"></div>
    <ul class="navbar-nav mr-auto">
+
    </div>
      <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 closed" 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>
+
  
 +
    <div class="interface-group" id="interface">
 +
      <!--<div class="menu-container" id="menu-container">
 +
        <div class="desktop-section-menu" id="desktop-section-menu">
 +
          <div class="sections" id="desktop-sections">
 +
          </div>
 +
          <div class="back-to-top" id="go-top">
 +
          </div>
 +
        </div>
 +
      </div>-->
 +
     
 +
      <div class="content-area" id="textual-content">
 +
       
 +
      </div>
 +
    </div>
 
</body>
 
</body>
 
</html>
 
</html>
 
{{Calgary/Footer}}
 
{{Calgary/Footer}}

Revision as of 19:38, 21 October 2019

Team

Collaborations

Building Relationships