Team:Penn/Team

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
-
<html>
+
<<html>
   <head>
   <head>
-
     <title>Homepage</title>
+
     <title>Home</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <!-- Bootstrap -->
     <!-- Bootstrap -->
     <link href="https://googledrive.com/host/0B4ZBZOYYKBzEeUFaR1lNWFZWMnc" rel="stylesheet" media="screen">
     <link href="https://googledrive.com/host/0B4ZBZOYYKBzEeUFaR1lNWFZWMnc" rel="stylesheet" media="screen">
         <link href="https://googledrive.com/host/0B4ZBZOYYKBzEYUtsRS1ZWHM2bTQ" type="text/css" rel="stylesheet"/>
         <link href="https://googledrive.com/host/0B4ZBZOYYKBzEYUtsRS1ZWHM2bTQ" type="text/css" rel="stylesheet"/>
 +
        <script src="https://googledrive.com/host/0B4ZBZOYYKBzETkFqdnhMeV9fMzA" ></script>
 +
    <script src="https://googledrive.com/host/0B4ZBZOYYKBzEZTdBSFdUV19LYjQ"></script>
 +
    <script src="https://googledrive.com/host/0B4ZBZOYYKBzEOFVQV0ZLWEZqN2M"></script>
      
      
Line 11: Line 14:
         /*fonts/headings*/
         /*fonts/headings*/
         h4 {
         h4 {
-
             text-align: center;
+
             text-align: left;
         }
         }
-
       
+
     
-
       
+
 
-
       
+
#myCarousel {
-
/*Brady Bunch Table*/
+
  width: 80%;
-
.team {
+
-
      float: center;
+
-
      margin: auto;
+
}
}
Line 46: Line 46:
     display: none;
     display: none;
     background-color: white;
     background-color: white;
 +
    margin-top: -50px;
         -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
         -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
   filter: alpha(opacity=70);
   filter: alpha(opacity=70);
Line 53: Line 54:
}
}
-
td:hover {
+
 
-
cursor:pointer;
+
-
}
+
   /* CUSTOMIZE THE CAROUSEL
   /* CUSTOMIZE THE CAROUSEL
     -------------------------------------------------- */
     -------------------------------------------------- */
-
    /* Carousel base class */
+
/*
-
    .carousel .container {
+
-
      position: relative;
+
-
      z-index: 9;
+
-
    }
+
     .carousel-control {
     .carousel-control {
Line 74: Line 69:
       border: 0;
       border: 0;
       z-index: 10;
       z-index: 10;
-
    }
 
-
 
-
  .carousel .item {
 
-
        height: 500px;
 
     }
     }
      
      
-
    .carousel img {
+
.carousel img {
-
      position: absolute;
+
  min-width: 100%;
-
      top: -100px;
+
}
-
      left: 0;
+
 
-
      min-width: 100%;
+
      
-
 
+
 
-
     }
+
     .carousel-caption {
     .carousel-caption {
-
       background-color: rgba(0,0,0,.4);
+
       background-color: rgba(0,0,0,.3);
-
    position: static;
+
-
      max-width: 500px;
+
-
      padding: 5 20px;
+
-
      margin-top: 300px;
+
     }
     }
      
      
Line 102: Line 88:
       color: #fff;
       color: #fff;
       text-shadow: 0 1px 1px rgba(0,0,0,.4);
       text-shadow: 0 1px 1px rgba(0,0,0,.4);
-
     }
+
     }*/
      
      
-
     .carousel-caption .btn {
+
     #main_area{
-
       margin-top: 10px;
+
       margin: 100px 100px 10px 100px;
 +
     
     }
     }
-
+
   
-
 
+
 
 +
 
 +
 
 +
/*Position/size hero unit*/
 +
.hero-unit {
 +
    width: 475px;
 +
    float: left;
 +
    margin-left: 50px;
 +
}
 +
 
 +
 
 +
#logo {
 +
  height: 45px;
 +
  float: right;
 +
  margin-right: -220px;
 +
}
     </style>
     </style>
   </head>
   </head>
Line 126: Line 128:
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
             </button>
             </button>
-
             <a class="brand" href="https://2013.igem.org/Team:Penn">Penn's iGEM Team</a>
+
             <a class="brand" class="active" href="https://2013.igem.org/Team:Penn">Penn's iGEM Team</a>
             <!-- Responsive Navbar Part 2: Place all navbar contents you want collapsed withing .navbar-collapse.collapse. -->
             <!-- Responsive Navbar Part 2: Place all navbar contents you want collapsed withing .navbar-collapse.collapse. -->
             <div class="nav-collapse collapse">
             <div class="nav-collapse collapse">
Line 135: Line 137:
                   <a href="#" class="dropdown-toggle" data-toggle="dropdown">About <b class="caret"></b></a>
                   <a href="#" class="dropdown-toggle" data-toggle="dropdown">About <b class="caret"></b></a>
                   <ul class="dropdown-menu">
                   <ul class="dropdown-menu">
-
                     <li><a id="team">Team</a></li>
+
                     <li><a href="https://2013.igem.org/Team:Penn/Team">Team</a></li>
                     <li><a href="https://2013.igem.org/Team:Penn/Sponsors">Sponsors</a></li>
                     <li><a href="https://2013.igem.org/Team:Penn/Sponsors">Sponsors</a></li>
                     <li><a href="https://igem.org/Team.cgi?id=1128">Official Team Profile</a></li>
                     <li><a href="https://igem.org/Team.cgi?id=1128">Official Team Profile</a></li>
Line 156: Line 158:
                   </ul>
                   </ul>
                 </li>
                 </li>
 +
                <li><a href="http://2013.igem.or"><img id = "logo" src="https://static.igem.org/mediawiki/igem.org/1/17/IGEM_basic_Logo_white_stylized.png"></li></a>
               </ul>
               </ul>
             </div><!--/.nav-collapse -->
             </div><!--/.nav-collapse -->
Line 165: Line 168:
      
      
 +
    <!-- Main Area -->
 +
                <div id="main_area">
 +
                        <!-- Slider -->
 +
                        <div class="row">
 +
                                <div class="span12" id="slider">
 +
                                        <!-- Top part of the slider -->
 +
                                        <div class="row">
 +
                                                <div class="span8" id="carousel-bounding-box">
 +
                                                        <div id="myCarousel" class="carousel slide">
 +
                                                                <!-- Carousel items -->
 +
                                                                <div class="carousel-inner">
 +
                                                                        <div class="active item" data-slide-number="0"><img src="https://googledrive.com/host/0B4ZBZOYYKBzES3Jrc042WTlMR3c/" /></div>
 +
                                                                        <div class="item" data-slide-number="1"><img src="https://googledrive.com/host/0B4ZBZOYYKBzEWHBpYXpOcFRBcGc/" /></div>
 +
                                                                        <div class="item" data-slide-number="2"><img src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/_mMloYB8xM/Discovery%20Day%20Clark%20Park/IMG_2061.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg" /></div>
 +
                                                                        <div class="item" data-slide-number="3"><img src="http://placehold.it/770x300&text=four" /></div>
 +
                                                                        <div class="item" data-slide-number="4"><img src="http://placehold.it/770x300&text=five" /></div>
 +
                                                                        <div class="item" data-slide-number="5"><img src="http://placehold.it/770x300&text=six" /></div>
 +
                                                                </div>
 +
                                                                <!-- Carousel nav -->
 +
                                                                <a class="carousel-control left" href="#myCarousel" data-slide="prev"><</a>
 +
                                                                <a class="carousel-control right" href="#myCarousel" data-slide="next">></a>
 +
                                                        </div>
 +
                                                </div>
 +
                                                <div class="span4" id="carousel-text"></div>
 +
 +
                                                <div style="display: none;" id="slide-content">
 +
                                                        <div id="slide-content-0">
 +
                                                                <h1>Hello and Welcome!</h1>
 +
                                                      <p>Welcome to Penn's iGEM team wiki!  This wiki is currently under construction, but check
 +
                                                    back with us soon to learn more about what we're up to!</p> <a id="team" class="btn btn-large btn-primary" href="https://2013.igem.org/Team:Penn/Team">Meet the Team</a>
 +
                                                        </div>
 +
                                                        <div id="slide-content-1">
 +
                                                                <h1>Project</h1>
 +
              <p>This wiki is currently under construction, but check
 +
              back with us soon to learn more about what we're up to!  Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
 +
              <a class="btn btn-large btn-primary" href="https://2013.igem.org/Team:Penn/Project">Our Project</a>
 +
                                                        </div>
 +
                                                        <div id="slide-content-2">
 +
                                                                <h1>Outreach</h1>
 +
              <p>Learn more about what Penn's iGEM team is doing in the community.  This wiki is currently under construction, but check
 +
              back with us soon to learn more about what we're up to! Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
 +
              <a class="btn btn-large btn-primary" href="https://2013.igem.org/Team:Outreach">More Outreach</a>
 +
                                                        </div>
 +
                                                        <div id="slide-content-3">
 +
                                                                <h2>Slider Four</h2>
 +
                                                                <p>Lorem Ipsum Dolor</p>
 +
                                                                <p class="sub-text">October 24 2012 - <a href="#">Read more</a></p>
 +
                                                        </div>
 +
                                                        <div id="slide-content-4">
 +
                                                                <h2>Slider Five</h2>
 +
                                                                <p>Lorem Ipsum Dolor</p>
 +
                                                                <p class="sub-text">October 24 2012 - <a href="#">Read more</a></p>
 +
                                                        </div>
 +
                                                        <div id="slide-content-5">
 +
                                                                <h2>Slider Six</h2>
 +
                                                                <p>Lorem Ipsum Dolor</p>
 +
                                                                <p class="sub-text">October 24 2012 - <a href="#">Read more</a></p>
 +
                                                        </div>
 +
                                                </div>
 +
                                        </div>
 +
 +
                                </div>
 +
                        </div> <!--/Slider-->
 +
 +
                        <div class="row hidden-phone" id="slider-thumbs">
 +
                                <div class="span12">
 +
                                        <!-- Bottom switcher of slider -->
 +
                                        <ul class="thumbnails">
 +
                                                <li class="span2">
 +
                                                        <a class="thumbnail" id="carousel-selector-0">
 +
                                                                <img src="https://googledrive.com/host/0B4ZBZOYYKBzES3Jrc042WTlMR3c/" />
 +
                                                        </a>
 +
                                                </li>
 +
                                                <li class="span2">
 +
                                                        <a class="thumbnail" id="carousel-selector-1">
 +
                                                                <img src="https://googledrive.com/host/0B4ZBZOYYKBzEWHBpYXpOcFRBcGc/" />
 +
                                                        </a>
 +
                                                </li>
 +
                                                <li class="span2">
 +
                                                        <a class="thumbnail" id="carousel-selector-2">
 +
                                                                <img src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/_mMloYB8xM/Discovery%20Day%20Clark%20Park/IMG_2061.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg" />
 +
                                                        </a>
 +
                                                </li>
 +
                                                <li class="span2">
 +
                                                        <a class="thumbnail" id="carousel-selector-3">
 +
                                                                <img src="http://placehold.it/170x100&text=four" />
 +
                                                        </a>
 +
                                                </li>
 +
                                                <li class="span2">
 +
                                                        <a class="thumbnail" id="carousel-selector-4">
 +
                                                                <img src="http://placehold.it/170x100&text=five" />
 +
                                                        </a>
 +
                                                </li>
 +
                                                <li class="span2">
 +
                                                        <a class="thumbnail" id="carousel-selector-5">
 +
                                                                <img src="http://placehold.it/170x100&text=six" />
 +
                                                        </a>
 +
                                                </li>
 +
                                        </ul>
 +
                                </div>
 +
                        </div>
 +
</div>
 +
<script>
 +
  jQuery(document).ready(function($) {
 +
 +
        $('#myCarousel').carousel({
 +
                interval: 5000
 +
        });
 +
 +
        $('#carousel-text').html($('#slide-content-0').html());
 +
 +
        //Handles the carousel thumbnails
 +
        $('[id^=carousel-selector-]').click( function(){
 +
                var id_selector = $(this).attr("id");
 +
                var id = id_selector.substr(id_selector.length -1);
 +
                var id = parseInt(id);
 +
                $('#myCarousel').carousel(id);
 +
        });
 +
 +
 +
        // When the carousel slides, auto update the text
 +
        $('#myCarousel').on('slid', function (e) {
 +
                var id = $('.item.active').data('slide-number');
 +
                $('#carousel-text').html($('#slide-content-'+id).html());
 +
        });
 +
 +
 +
});
 +
</script>
 +
      
      
     <!--Overview-->
     <!--Overview-->
     <div class="four">
     <div class="four">
-
         <div class="hero-unit" style="text-align:left;">
+
         <div class="hero-unit">
-
   <h1>Team</h1>
+
   <h1>Accomplishments</h1>
-
   <p>About us</p>
+
  <br/>
-
  <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
+
   <p><a href="">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</a></p>
-
  </p>
+
  <p><a href="">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</a></p>
 +
  <p><a href="">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</a></p>
 +
  <p><a href="">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</a></p>
 +
</div>
</div>
</div>
-
 
      
      
-
    <!--Team stuff-->
 
-
<h2 style="text-align: center;">Meet the Bunch</h2>
 
-
<table class="team" cellpadding="5">
 
-
    <tr>
 
-
        <td>
 
-
            <img id="flipbox" src="https://googledrive.com/host/0B4ZBZOYYKBzETDEzdFdSOC1ZVW8"/>
 
-
            <div class="name"><h4>Name/major</h4></div></td>
 
-
       
 
-
        <td>
 
-
            <img src="https://googledrive.com/host/0B4ZBZOYYKBzETldtZHBxMTM3Ujg"/>
 
-
            <div class="name"><h4>Josh</h4></div></td>
 
-
       
 
-
     
 
-
       
 
-
        <td>
 
-
            <img src="https://googledrive.com/host/0B4ZBZOYYKBzEU3VZUnNOdWFqYVE"/>
 
-
            <div class="name"><h4>Danielle</h4></div></td>
 
-
    </tr>
 
-
    <tr>
 
-
       
 
-
        <td>
 
-
            <img src="https://googledrive.com/host/0B4ZBZOYYKBzEZXRRMlRtODR2OVk/">
 
-
                <div class="name"><h4>Daniel</h4></div></td>
 
-
     
 
-
        <td id="center"><h4><!--Center--></h4></td>
 
-
        <td>
 
-
            <img src="https://googledrive.com/host/0B4ZBZOYYKBzELXJ5NlFKUkJXRnc"/>
 
-
            <div class="name"><h4>Mahamad</h4></div></td>
 
-
    </tr>
 
-
    <tr>
 
-
        <td>
 
-
            <img src="https://googledrive.com/host/0B4ZBZOYYKBzERmpYczlyYU5TTUE"/>
 
-
            <div class="name"><h4>Name/major</h4></div>
 
-
       
 
-
          <td>
 
-
            <img src="https://googledrive.com/host/0B4ZBZOYYKBzEZ0tlUUViY2Z6Ymc"/>
 
-
            <div class="name"><h4>Name/major</h4></div></td>
 
-
       
 
-
        <td>
 
-
            <img src="https://googledrive.com/host/0B4ZBZOYYKBzET2NBWmlOLVMtaVE">
 
-
                <div class="name"><h4>Spencer</h4></div></td>
 
-
    </tr>
 
-
  </table>
 
-
<h4>Photos by Erica Sachse</h4>
 
-
 
      
      
-
    </div>
 
-
   
 
-
   
 
-
   
 
-
   
 
-
   
 
-
    <script src="https://googledrive.com/host/0B4ZBZOYYKBzETkFqdnhMeV9fMzA" ></script>
 
-
    <script src="https://googledrive.com/host/0B4ZBZOYYKBzEZTdBSFdUV19LYjQ"></script>
 
-
    <script src="https://googledrive.com/host/0B4ZBZOYYKBzEOFVQV0ZLWEZqN2M"></script></script>
 
-
   
 
-
    <script src="../assets/js/jquery.js"></script>
 
-
    <script src="../assets/js/bootstrap-transition.js"></script>
 
-
    <script src="../assets/js/bootstrap-alert.js"></script>
 
-
    <script src="../assets/js/bootstrap-modal.js"></script>
 
-
    <script src="../assets/js/bootstrap-dropdown.js"></script>
 
-
    <script src="../assets/js/bootstrap-scrollspy.js"></script>
 
-
    <script src="../assets/js/bootstrap-tab.js"></script>
 
-
    <script src="../assets/js/bootstrap-tooltip.js"></script>
 
-
    <script src="../assets/js/bootstrap-popover.js"></script>
 
-
    <script src="../assets/js/bootstrap-button.js"></script>
 
-
    <script src="../assets/js/bootstrap-collapse.js"></script>
 
-
    <script src="../assets/js/bootstrap-carousel.js"></script>
 
-
    <script src="../assets/js/bootstrap-typeahead.js"></script>
 
-
    <script>
 
-
      !function ($) {
 
-
        $(function(){
 
-
          // carousel demo
 
-
          $('#myCarousel').carousel()
 
-
         
 
-
        $('html, body').animate({
 
-
        scrollTop: $(".one").offset().top,
 
-
    }, '2400');
 
-
});
 
-
   
 
-
      $("#two").click(function() {
 
-
        $('html, body').animate({
 
-
        scrollTop: $(".two").offset().top,
 
-
    }, '2400');
 
-
});
 
-
     
 
-
          $("#three, #team").click(function() {
 
-
        $('html, body').animate({
 
-
        scrollTop: $(".team").offset().top,
 
-
    }, '2400');
 
-
});
 
-
         
 
-
        /*  $(".team tr td").mouseenter(function(){
 
-
          $(this).children(":first").toggleClass("hidden");
 
-
          $(this).children(":nth-child(2)").toggleClass("hidden");
 
-
         
 
-
         
 
-
          });
 
-
         
 
-
          $(".team tr td").mouseenter(function(){
 
-
            $(this).children(":nth-child(3)").show();
 
-
            $(this).children(":nth-child(3)").animate({
 
-
                height: '50px',
 
-
                display: 'inline-block'
 
-
                });
 
-
           
 
-
            });
 
-
         
 
-
         
 
-
          $(".team tr td").mouseleave(function(){
 
-
            $(this).children(":nth-child(2)").toggleClass("hidden");
 
-
          $(this).children(":first").toggleClass("hidden");
 
-
          $(this).children(":nth-child(3)").css("height","0px");
 
-
          $(this).children(":nth-child(3)").hide();
 
-
         
 
-
            });*/
 
-
   
 
-
          $("td").click(function(){
 
-
   
 
-
    if ($(this).children("img").is(":visible")) {
 
-
   
 
-
            $(this).flip({direction: 'tb', content: $(this)});
 
-
                $(this).children("img").hide();
 
-
                $(this).children(".name").show();
 
-
    }
 
-
       
 
-
          else {
 
-
            $(this).revertFlip();
 
-
           
 
-
          }
 
-
            });
 
-
         
 
-
           
 
-
       
 
-
         
 
-
         
 
-
         
 
-
      }(window.jQuery)
 
-
    </script>
 
-
    <script src="../assets/js/holder/holder.js"></script>
 
   </body>
   </body>
</html>
</html>

Revision as of 15:08, 18 July 2013

< Home

Penn's iGEM Team

Accomplishments


Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.

Retrieved from "http://2013.igem.org/Team:Penn/Team"