Difference between revisions of "Team:SCSU-New Haven/Team"

(Prototype team page)
Line 1: Line 1:
−
{{SCSU-New_Haven}}
+
<!DOCTYPE html>
−
<html>
+
<html class=" js csstransforms csstransforms3d csstransitions" style="" lang="en">
 +
<head>
 +
<title>iGEM</title>
 +
<meta charset="UTF-8">
 +
<link rel="stylesheet" type="text/css" href="https://2016.igem.org/Template:SCSU-New_Haven/bootstrap">
 +
<link rel="stylesheet" type="text/css" href="https://2016.igem.org/Template:SCSU-New_Haven/dev">
 +
<script type="text/javascript" src="https://2016.igem.org/Template:SCSU-New_Haven/modernizr"></script>
 +
</head>
 +
<body>
 +
<input type="checkbox" id="drawer-toggle" name="drawer-toggle"/>
 +
<label for="drawer-toggle" id="drawer-toggle-label"></label>
 +
<header>&nbsp</header>
 +
<nav id="drawer">
 +
<ul>
 +
<li><a href="index.html">Home</a></li>
 +
<li><a href="team.html">Team</a></li>
 +
<li><a href="parts.html">Parts</a></li>
 +
<li><a href="attributions.html">Attributions</a></li>
 +
<li><a href="humanpractices.html">Human Practices</a></li>
 +
<li><a href="safety.html">Safety</a></li>
 +
</ul>
 +
</nav>
 +
<div id="page-content">
 +
<div class="container" id="team">
  
 +
<!-- Hero -->
 +
<div id="team_hero_bg" class="flex">
 +
<div class="flex">
 +
<h1>Team</h1>
 +
<p>
 +
Perhaps some introductory words? Our team is comprised of people from various fields of studies and interests. What made this special was that we were able to get together and simultousneously sing chocolate rain in harmony in a opera-esque fashion. All while doing work. Note: This became our anthem.
 +
</p>
 +
</div>
 +
</div>
  
 +
<!-- Team Cards -->
 +
<div class="baraja-demo" id="baraja">
 +
<ul id="baraja-el" class="baraja-container">
 +
<li style="z-index: 1015; transform-origin: 25% 100% 0px; transition: transform 500ms ease-out 0ms; transform: translate(0px) rotate(34.4118deg);">
 +
<img src="img/potraits/1.jpg" alt="image3">
 +
<h4>Karalyn Farr</h4>
 +
<p>
 +
Before they sold out PBR magna jean shorts non seitan ea. Dolor wolf pop-up.
 +
</p>
 +
</li>
 +
<li style="z-index: 1014; transform-origin: 25% 100% 0px; transition: transform 500ms ease-out 0ms; transform: translate(0px) rotate(29.1176deg);">
 +
<img src="img/potraits/2.jpg" alt="image4">
 +
<h4>Julio Badillo</h4>
 +
<p>
 +
Locavore vero ad, before they sold out food truck bushwick helvetica.
 +
</p>
 +
</li>
 +
<li style="z-index: 1013; transform-origin: 25% 100% 0px; transition: transform 500ms ease-out 0ms; transform: translate(0px) rotate(23.8235deg);">
 +
<img src="img/potraits/3.jpg" alt="image5">
 +
<h4>Hafssa Chbihi</h4>
 +
<p>
 +
Cillum laboris consequat, qui elit retro next level skateboard freegan hella.
 +
</p>
 +
</li>
 +
<li style="z-index: 1012; transform-origin: 25% 100% 0px; transition: transform 500ms ease-out 0ms; transform: translate(0px) rotate(18.5294deg);">
 +
<img src="img/potraits/6.jpg" alt="image6">
 +
<h4>Bryan Pasqualucci</h4>
 +
<p>
 +
Truffaut wes anderson hoodie 3 wolf moon labore, fugiat lomo iphone eiusmod vegan.
 +
</p>
 +
</li>
 +
<li style="z-index: 1011; transform-origin: 25% 100% 0px; transition: transform 500ms ease-out 0ms; transform: translate(0px) rotate(13.2353deg);">
 +
<img src="img/potraits/7.jpg" alt="image7">
 +
<h4>Rye Howard-Stone</h4>
 +
<p>
 +
Chillwave mustache pinterest, marfa seitan umami id farm-to-table iphone.
 +
</p>
 +
</li>
 +
<li style="z-index: 1010; transform-origin: 25% 100% 0px; transition: transform 500ms ease-out 0ms; transform: translate(0px) rotate(7.94118deg);">
 +
<img src="img/potraits/8.jpg" alt="image8">
 +
<h4>Zachary Matto</h4>
 +
<p>
 +
Minim post-ironic banksy american apparel iphone wayfarers.
 +
</p>
 +
</li>
 +
<li style="z-index: 1009; transform-origin: 25% 100% 0px; transition: transform 500ms ease-out 0ms; transform: translate(0px) rotate(2.64706deg);">
 +
<img src="img/potraits/9.jpg" alt="image9">
 +
<h4>Thomas Hoang</h4>
 +
<p>
 +
Sint vinyl Austin street art odd future id trust fund, terry richardson cray.
 +
</p>
 +
</li>
 +
<li style="z-index: 1008; transform-origin: 25% 100% 0px; transition: transform 500ms ease-out 0ms; transform: translate(0px) rotate(-2.64706deg);">
 +
<img src="img/potraits/9.jpg" alt="image10">
 +
<h4>Patrick Flynn</h4>
 +
<p>
 +
Sint vinyl Austin street art odd future id trust fund, terry richardson cray.
 +
</p>
 +
</li>
 +
<li style="z-index: 1007; transform-origin: 25% 100% 0px; transition: transform 500ms ease-out 0ms; transform: translate(0px) rotate(-7.94118deg);">
 +
<img src="img/potraits/1.jpg" alt="image11">
 +
<h4>Christopher Wojtas</h4>
 +
<p>
 +
Total bicycle rights in blog four loko raw denim ex, helvetica sapiente odio placeat.
 +
</p>
 +
</li>
 +
<li style="z-index: 1006; transform-origin: 25% 100% 0px; transition: transform 500ms ease-out 0ms; transform: translate(0px) rotate(-13.2353deg);">
 +
<img src="img/potraits/2.jpg" alt="image12">
 +
<h4>Dr. Edgington</h4>
 +
<p>
 +
Velit chambray fugiat, enim aesthetic esse ullamco typewriter.
 +
</p>
 +
</li>
 +
<li style="z-index: 1005; transform-origin: 25% 100% 0px; transition: transform 500ms ease-out 0ms; transform: translate(0px) rotate(-18.5294deg);">
 +
<img src="img/potraits/3.jpg" alt="image3">
 +
<h4>Advisor 2</h4>
 +
<p>
 +
Before they sold out PBR magna jean shorts non seitan ea. Dolor wolf pop-up.
 +
</p>
 +
</li>
 +
<li style="z-index: 1004; transform-origin: 25% 100% 0px; transition: transform 500ms ease-out 0ms; transform: translate(0px) rotate(-23.8235deg);">
 +
<img src="img/potraits/1.jpg" alt="image4">
 +
<h4>Advisor 3</h4>
 +
<p>
 +
Locavore vero ad, before they sold out food truck bushwick helvetica.
 +
</p>
 +
</li>
 +
</ul>
 +
</div>
  
−
<div class="column full_size" >
+
<!-- Additional Thanks -->
 +
<div class="container" id="thanks">
 +
<h2>Additional Thanks to </h2>
 +
<div>
 +
<p><b>Person A</b> for taking a walk to the park</p>
 +
<p><b>Person B</b> for feeding the dogs</p>
 +
<p><b>Person C</b> for not leaving Kevin McCallister home alone</p>
 +
</div>
 +
</div>
  
−
<p>In this page you can introduce your team members, instructors, and advisors. </p>
+
<!-- Sponsor Listing -->
 +
<div id="sponsor_list">
 +
<div class="row ">
 +
<div class="col-md-4">
 +
<img class="sponsor_special" src="img/sponsors/bio_industry.png">
 +
</div>
 +
<div class="col-md-4">
 +
<img class="sponsor_default" src="img/sponsors/ctinnovations.png">
 +
</div>
 +
<div class="col-md-4">
 +
<img class="sponsor_default" src="img/sponsors/stemil.png">
 +
</div>
 +
</div>
 +
<div class="row">
 +
<div class="col-md-4">
 +
<img class="sponsor_special" src="img/sponsors/bio_industry.png">
 +
</div>
 +
<div class="col-md-4">
 +
<img class="sponsor_default" src="img/sponsors/ctinnovations.png">
 +
</div>
 +
<div class="col-md-4">
 +
<img class="sponsor_default" src="img/sponsors/stemil.png">
 +
</div>
 +
</div>
 +
</div>
  
 +
</div>
 +
<footer class="bump_up">
 +
<div class="col-xs-12">
 +
<div class="row">
 +
<div class="col-xs-3">
 +
<h3>Main Logo Div</h3>
 +
</div>
 +
<div class="col-xs-6">
 +
<div class="col-xs-4">
 +
<h4>Products</h4>
 +
<ul>
 +
<li>Domains</li>
 +
<li>Websites</li>
 +
<li>Something Else</li>
 +
</ul>
 +
</div>
 +
<div class="col-xs-4">
 +
<h4>Teams</h4>
 +
<ul>
 +
<li>Team Domains</li>
 +
<li>Conversions</li>
 +
<li>Collaborations</li>
 +
</ul>
 +
</div>
 +
<div class="col-xs-4">
 +
<h4>Examinations</h4>
 +
<ul>
 +
<li>Cross Examine</li>
 +
<li>Proctor</li>
 +
<li>Late Exam</li>
 +
</ul>
 +
</div>
 +
</div>
 +
<div class="col-xs-3">
 +
<h3>Sponsorship Div</h3>
 +
</div>
 +
</div>
 +
</div>
 +
</footer>
 +
</div>
 +
<script type="text/javascript" src="https://2016.igem.org/Template:SCSU-New_Haven/jquery002"></script>
 +
<script type="text/javascript" src="https://2016.igem.org/Template:SCSU-New_Haven/jquery"></script>
 +
    <script type="text/javascript">
 +
$(function() {
  
−
</div>
+
var $el = $( '#baraja-el' ),
 +
baraja = $el.baraja();
  
−
<div class="column half_size" >
+
// navigation
−
<h5>Inspiration</h5>
+
$( '#nav-prev' ).on( 'click', function( event ) {
−
<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">METU Turkey </a></li>
+
−
<li><a href="https://2014.igem.org/Team:Colombia/Members">Colombia</a></li>
+
−
<li><a href="https://2014.igem.org/Team:Stony_Brook/Team">Stony Brook</a></li>
+
−
<li><a href="https://2014.igem.org/Team:OUC-China/Team">OUC-China</a></li>
+
−
</ul>
+
  
−
</div>
+
baraja.previous();
 +
 +
} );
  
−
<div class="column half_size" >
+
$( '#nav-next' ).on( 'click', function( event ) {
−
<h5>What should this page contain?</h5>
+
−
<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>
+
  
 +
baraja.next();
 +
 +
} );
  
 +
// simple fan
 +
$( '#nav-fan' ).on( 'click', function( event ) {
  
 +
baraja.fan( {
 +
speed : 500,
 +
easing : 'ease-out',
 +
range : 90,
 +
direction : 'right',
 +
origin : { x : 25, y : 100 },
 +
center : true
 +
} );
 +
 +
} );
  
 +
$( '#nav-fan2' ).on( 'click', function( event ) {
 +
 +
baraja.fan( {
 +
speed : 500,
 +
easing : 'ease-out',
 +
range : 90,
 +
direction : 'left',
 +
// note that the x origin changes (symmetric)
 +
origin : { x : 75, y : 100 },
 +
center : true
 +
} );
 +
 +
} );
 +
 +
// more realistic fan: without common origin (means the origin changes / increments by card )
 +
$( '#nav-fan3' ).on( 'click', function( event ) {
 +
 +
baraja.fan( {
 +
speed : 500,
 +
easing : 'ease-out',
 +
range : 90,
 +
direction : 'right',
 +
origin : { minX : 20, maxX : 80, y : 100 },
 +
center : true,
 +
translation : 60
 +
} );
 +
 +
} );
 +
 +
$( '#nav-fan4' ).on( 'click', function( event ) {
 +
 +
baraja.fan( {
 +
speed : 500,
 +
easing : 'ease-out',
 +
range : 90,
 +
direction : 'left',
 +
origin : { minX : 20, maxX : 80, y : 100 },
 +
center : true,
 +
translation : 60
 +
} );
 +
 +
} );
 +
 +
// playing with different origins and ranges
 +
$( '#nav-fan5' ).on( 'click', function( event ) {
 +
 +
baraja.fan( {
 +
speed : 500,
 +
easing : 'ease-out',
 +
range : 100,
 +
direction : 'right',
 +
origin : { x : 50, y : 200 },
 +
center : true
 +
} );
 +
 +
} );
 +
 +
$( '#nav-fan6' ).on( 'click', function( event ) {
 +
 +
baraja.fan( {
 +
speed : 500,
 +
easing : 'ease-out',
 +
range : 80,
 +
direction : 'left',
 +
origin : { x : 200, y : 50 },
 +
center : true
 +
} );
 +
 +
} );
 +
 +
// center false, playing with translation
 +
$( '#nav-fan7' ).on( 'click', function( event ) {
 +
 +
baraja.fan( {
 +
speed : 500,
 +
easing : 'ease-out',
 +
range : 20,
 +
direction : 'right',
 +
origin : { x : 50, y : 200 },
 +
center : false,
 +
translation : 300
 +
} );
 +
 +
} );
 +
 +
$( '#nav-fan8' ).on( 'click', function( event ) {
 +
 +
baraja.fan( {
 +
speed : 500,
 +
easing : 'ease-out',
 +
range : 20,
 +
direction : 'left',
 +
origin : { x : 50, y : 200 },
 +
center : false,
 +
translation : 300
 +
} );
 +
 +
} );
 +
 +
// using scatter : true
 +
$( '#nav-fan9' ).on( 'click', function( event ) {
 +
 +
baraja.fan( {
 +
speed : 500,
 +
easing : 'ease-out',
 +
range : 20,
 +
direction : 'right',
 +
origin : { x : 50, y : 200 },
 +
center : false,
 +
translation : 300,
 +
scatter : true
 +
} );
 +
 +
} );
 +
 +
$( '#nav-fan10' ).on( 'click', function( event ) {
 +
 +
baraja.fan( {
 +
speed : 500,
 +
easing : 'ease-out',
 +
range : 20,
 +
direction : 'left',
 +
origin : { x : 50, y : 200 },
 +
center : false,
 +
translation : 300,
 +
scatter : true
 +
} );
 +
 +
} );
 +
 +
$( '#nav-fanOther1' ).on( 'click', function( event ) {
 +
 +
baraja.fan( {
 +
speed : 500,
 +
easing : 'ease-out',
 +
range : 130,
 +
direction : 'left',
 +
origin : { x : 25, y : 100 },
 +
center : false
 +
} );
 +
 +
} );
 +
 +
$( '#nav-fanOther2' ).on( 'click', function( event ) {
 +
 +
baraja.fan( {
 +
speed : 500,
 +
easing : 'ease-out',
 +
range : 360,
 +
direction : 'left',
 +
origin : { x : 50, y : 90 },
 +
center : false
 +
} );
 +
 +
} );
 +
 +
$( '#nav-fanOther3' ).on( 'click', function( event ) {
 +
 +
baraja.fan( {
 +
speed : 500,
 +
easing : 'ease-out',
 +
range : 330,
 +
direction : 'left',
 +
origin : { x : 50, y : 100 },
 +
center : true
 +
} );
 +
 +
} );
 +
 +
$( '#nav-fanOther4' ).on( 'click', function( event ) {
 +
 +
baraja.fan( {
 +
speed : 500,
 +
easing : 'ease-out',
 +
range : 90,
 +
direction : 'right',
 +
origin : { minX : 20, maxX : 80, y : 100 },
 +
center : true,
 +
translation : 60,
 +
scatter : true
 +
} );
 +
 +
} );
 +
 +
// close the baraja
 +
$( '#close' ).on( 'click', function( event ) {
 +
 +
baraja.close();
 +
 +
} );
 +
 +
// example of how to add more items
 +
$( '#add' ).on( 'click', function( event ) {
 +
 +
if( $( this ).hasClass( 'disabled' ) ) {
 +
return false;
 +
}
 +
 +
$( this ).addClass( 'disabled' );
 +
 +
baraja.add( $('<li><img src="images/6.jpg" alt="image6"/><h4>Serenity</h4><p>Truffaut wes anderson hoodie 3 wolf moon labore, fugiat lomo iphone eiusmod vegan.</p></li><li><img src="images/7.jpg" alt="image7"/><h4>Dark Honor</h4><p>Chillwave mustache pinterest, marfa seitan umami id farm-to-table iphone.</p></li><li><img src="images/8.jpg" alt="image8"/><h4>Nested Happiness</h4><p>Minim post-ironic banksy american apparel iphone wayfarers.</p></li><li><img src="images/9.jpg" alt="image9"/><h4>Cherry Country</h4><p>Sint vinyl Austin street art odd future id trust fund, terry richardson cray.</p></li>') );
 +
 +
} );
 +
 +
});
 +
</script>
 +
 +
 +
</body>
 
</html>
 
</html>

Revision as of 22:43, 17 October 2016

<!DOCTYPE html> iGEM

&nbsp

Team

Perhaps some introductory words? Our team is comprised of people from various fields of studies and interests. What made this special was that we were able to get together and simultousneously sing chocolate rain in harmony in a opera-esque fashion. All while doing work. Note: This became our anthem.

  • image3

    Karalyn Farr

    Before they sold out PBR magna jean shorts non seitan ea. Dolor wolf pop-up.

  • image4

    Julio Badillo

    Locavore vero ad, before they sold out food truck bushwick helvetica.

  • image5

    Hafssa Chbihi

    Cillum laboris consequat, qui elit retro next level skateboard freegan hella.

  • image6

    Bryan Pasqualucci

    Truffaut wes anderson hoodie 3 wolf moon labore, fugiat lomo iphone eiusmod vegan.

  • image7

    Rye Howard-Stone

    Chillwave mustache pinterest, marfa seitan umami id farm-to-table iphone.

  • image8

    Zachary Matto

    Minim post-ironic banksy american apparel iphone wayfarers.

  • image9

    Thomas Hoang

    Sint vinyl Austin street art odd future id trust fund, terry richardson cray.

  • image10

    Patrick Flynn

    Sint vinyl Austin street art odd future id trust fund, terry richardson cray.

  • image11

    Christopher Wojtas

    Total bicycle rights in blog four loko raw denim ex, helvetica sapiente odio placeat.

  • image12

    Dr. Edgington

    Velit chambray fugiat, enim aesthetic esse ullamco typewriter.

  • image3

    Advisor 2

    Before they sold out PBR magna jean shorts non seitan ea. Dolor wolf pop-up.

  • image4

    Advisor 3

    Locavore vero ad, before they sold out food truck bushwick helvetica.

Additional Thanks to

Person A for taking a walk to the park

Person B for feeding the dogs

Person C for not leaving Kevin McCallister home alone

Main Logo Div

Products

  • Domains
  • Websites
  • Something Else

Teams

  • Team Domains
  • Conversions
  • Collaborations

Examinations

  • Cross Examine
  • Proctor
  • Late Exam

Sponsorship Div