(Prototype team page) |
Bpasqualucci (Talk | contribs) |
||
Line 1: | Line 1: | ||
− | + | <!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> </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=" | + | <!-- 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> | ||
− | < | + | <!-- 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() { | ||
− | + | var $el = $( '#baraja-el' ), | |
+ | baraja = $el.baraja(); | ||
− | + | // navigation | |
− | + | $( '#nav-prev' ).on( 'click', function( event ) { | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | baraja.previous(); | |
+ | |||
+ | } ); | ||
− | + | $( '#nav-next' ).on( 'click', function( event ) { | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | 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>
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.
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