Team:Penn/HumanPractices

From 2013.igem.org

(Difference between revisions)
Line 6: Line 6:
     <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>
 +
 +
        <script>
 +
    jQuery(document).ready(function($) {
 +
       
 +
            $("#first").mouseenter(function(){
 +
            $("#first-text").css("display", "inline-block");
 +
          $("#first-text").animate({
 +
            width: "200px"
 +
            });
 +
            });
 +
           
 +
              $("#first").mouseleave(function(){
 +
            $("#first-text").hide();
 +
          $("#first-text").animate({
 +
            width: "10px"
 +
            });
 +
            });
 +
             
 +
                  $("#second").mouseenter(function(){
 +
            $("#second-text").css("display", "inline-block");
 +
          $("#second-text").animate({
 +
            width: "200px"
 +
            });
 +
            });
 +
           
 +
              $("#second").mouseleave(function(){
 +
            $("#second-text").hide();
 +
          $("#second-text").animate({
 +
            width: "10px"
 +
            });
 +
            });
 +
             
 +
                  $("#third").mouseenter(function(){
 +
            $("#third-text").css("display", "inline-block");
 +
          $("#third-text").animate({
 +
            width: "200px"
 +
            });
 +
            });
 +
           
 +
              $("#third").mouseleave(function(){
 +
            $("#third-text").hide();
 +
          $("#third-text").animate({
 +
            width: "10px"
 +
            });
 +
            });
 +
       
 +
              $(".img-wrapper #first").mouseclick(function(){
 +
                $('html, body').animate({
 +
        scrollTop: $("#first-section").offset().top,
 +
    }, '2400');
 +
                });
 +
           
 +
            /*put in same for other sections*/
 +
           
 +
           
 +
       
 +
           
 +
            $(".hero-unit").click(function(){
 +
                $(this).fadeOut();
 +
                });
 +
 +
 +
});
 +
    </script>
 +
      
      
Line 14: Line 82:
         }
         }
          
          
-
       
+
   
-
       
+
-
       
+
-
  /*Brady Bunch Table and background section*/
+
-
.team {
+
-
      float: center;
+
-
        margin-left: 200px;
+
-
}
+
-
 
+
-
.team td {
+
-
    overflow: hidden;
+
-
            height:175px;
+
-
            width:220px;
+
-
            display: inline-block;
+
-
            padding:5px;
+
-
   
+
-
        }
+
-
       
+
-
        .hidden { /*change this class when hovered*/
+
-
            display: none;
+
-
        }
+
-
        .team img {
+
-
          max-width:100%;
+
-
    max-height:100%; 
+
-
        }
+
-
       
+
-
.name {
+
-
    position: absolute;
+
-
    margin-bottom: 30px;
+
-
    width: 220px;
+
-
    height: 0px;
+
-
    display: none;
+
-
    background-color: white;
+
-
    margin-top: -50px;
+
-
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
+
-
  filter: alpha(opacity=70);
+
-
-moz-opacity: 0.7;
+
-
-khtml-opacity: 0.7;
+
-
  opacity: 0.7;
+
-
}
+
-
 
+
/*navigation circles that scroll when clicked*/
/*navigation circles that scroll when clicked*/
/*links and navigation*/
/*links and navigation*/
Line 96: Line 124:
/*Make hero unit slightly transparent*/
/*Make hero unit slightly transparent*/
-
.hero-unit {
+
#hero-unit {
-
    margin-left: 170px;
+
-
    position: relative;
+
             -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 105: Line 131:
   opacity: 0.7;
   opacity: 0.7;
width: 300px;
width: 300px;
 +
 +
position: relative;
 +
display: inline-block;
 +
margin-left: 600px;
 +
margin-top: -600px;
}
}
Line 124: Line 155:
     width: auto;
     width: auto;
}
}
-
 
+
*/
.span4 {
.span4 {
     display: block;
     display: block;
Line 134: Line 165:
}
}
-
img-circle {
 
-
    border-radius: 0px;
 
-
}
 
Line 150: Line 178:
.text {
.text {
-
    position: absolute;
 
-
    display: inline-block;
 
     height: 40px;
     height: 40px;
-
     width: 200px;
+
     width: 50px;
     background-color: gray;
     background-color: gray;
     border-radius: 6px;
     border-radius: 6px;
-
    z-index: -100;
 
     text-align: right;
     text-align: right;
-
     float: right;
+
     margin-left: -30px;
     padding: 3px;
     padding: 3px;
-
    right: 150px;
 
     display: none;
     display: none;
   
   
Line 170: Line 194:
     height: 500px;
     height: 500px;
     width: 400px;
     width: 400px;
-
    overflow: hidden;
+
     margin-top: 300px;
-
     margin-top: 120px;
+
     margin-left: 200px;
-
     float: right;
+
-
 
+
-
 
+
}
}
Line 181: Line 202:
     width: 80px;
     width: 80px;
     border-radius: 100%;
     border-radius: 100%;
-
    float: left;
 
     z-index: 99;
     z-index: 99;
     overflow:hidden;
     overflow:hidden;
Line 190: Line 210:
     height: 140px;
     height: 140px;
     width: 300px;
     width: 300px;
 +
    margin-top: -50px;
      
      
}
}
Line 200: Line 221:
}
}
-
 
+
#min-width {
-
 
+
    min-width: 1000px;
-
 
+
    height: 500px;
-
 
+
}
-
       
+
   
-
       
+
          
          
             /* CUSTOMIZE THE NAVBAR
             /* CUSTOMIZE THE NAVBAR
Line 324: Line 344:
      
      
<!--general human practices overview-->
<!--general human practices overview-->
-
   
+
<div id="min-width">
 +
        <!--
 +
 
<div class="hero-unit">
<div class="hero-unit">
   <h1>Human Practices</h1>
   <h1>Human Practices</h1>
   <p><!--Tagline goes here--></p>
   <p><!--Tagline goes here--></p>
-
  <p>Welcome to our page on human practices!  We're under construction right now, but check back to this page soon so you can see what awesome stuff we've been doing!  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>Welcome to our page on human practices!  We're under construction right now, but check back to this page soon so you can see what awesome stuff we've been doing!  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.
     <!--<a class="btn btn-primary btn-large">
     <!--<a class="btn btn-primary btn-large">
       Learn more-->
       Learn more-->
-
    </a>
+
  <!--  </a>
   </p>
   </p>
</div><!--end hero unit-->
</div><!--end hero unit-->
Line 339: Line 361:
<div class="img-text-wrapper">
<div class="img-text-wrapper">
<div class="img-wrapper">
<div class="img-wrapper">
-
   <a href="#"><img id="first" src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/9E2cXZezHT/Discovery%20Day%20Clark%20Park/IMG_2055.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg"/></a>
+
   <a href="#first-sect"><img id="first" src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/9E2cXZezHT/Discovery%20Day%20Clark%20Park/IMG_2055.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg"/></a>
     </div><!--img wrapper-->
     </div><!--img wrapper-->
     <div class="text" id="first-text">
     <div class="text" id="first-text">
Line 348: Line 370:
     <div class="img-text-wrapper">
     <div class="img-text-wrapper">
     <div class="img-wrapper">
     <div class="img-wrapper">
-
   <a href="#"><img id="second" src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/9E2cXZezHT/Discovery%20Day%20Clark%20Park/IMG_2055.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg"/></a>
+
   <a href="#second-sect"><img id="second" src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/9E2cXZezHT/Discovery%20Day%20Clark%20Park/IMG_2055.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg"/></a>
     </div><!--img wrapper-->
     </div><!--img wrapper-->
     <div class="text" id="second-text">
     <div class="text" id="second-text">
Line 357: Line 379:
     <div class="img-text-wrapper">
     <div class="img-text-wrapper">
     <div class="img-wrapper">
     <div class="img-wrapper">
-
   <a href="#"><img id="third" src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/9E2cXZezHT/Discovery%20Day%20Clark%20Park/IMG_2055.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg"/></a>
+
   <a href="#third-sect"><img id="third" src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/9E2cXZezHT/Discovery%20Day%20Clark%20Park/IMG_2055.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg"/></a>
     </div><!--img wrapper-->
     </div><!--img wrapper-->
     <div class="text" id="third-text">
     <div class="text" id="third-text">
Line 367: Line 389:
</div>
</div>
 +
    <div class="hero-unit" id="hero-unit">
 +
  <h1>Human Practices</h1>
 +
  <p><!--Tagline goes here--></p>
 +
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
 +
  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
 +
  exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
 +
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
 +
  sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
 +
    <!--<a class="btn btn-primary btn-large">
 +
      Learn more-->
 +
    </a>
 +
  </p>
 +
</div><!--end hero unit-->
 +
  </div>
<!--
<!--
Line 439: Line 475:
<div class="three" id="second-sect"><!--another section-->
<div class="three" id="second-sect"><!--another section-->
     <div class="hero-unit">
     <div class="hero-unit">
-
   <h1>Section 3</h1>
+
   <h1>Section 2</h1>
   <p><!--Tagline goes here--></p>
   <p><!--Tagline goes here--></p>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
Line 498: Line 534:
</div>
</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 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(){
+
-
 
+
-
        $('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');
+
-
});                 
+
-
         
+
-
            $("#first").mouseclick(function(){
+
-
                $('html, body').animate({
+
-
        scrollTop: $("#first-section").offset().top,
+
-
    }, '2400');
+
-
                });
+
-
           
+
-
            /*put in same for other sections*/
+
-
           
+
-
           
+
-
            $("#first").mouseenter(function(){
+
-
            $("#first-text").animate({
+
-
                width: "200px",
+
-
                display: "inline-block"
+
-
                });
+
-
                });
+
-
           
+
-
            /*put in same for other sections*/
+
-
});
+
-
      }(window.jQuery)
+
-
 
+
-
    </script>
+
-
    <script src="../assets/js/holder/holder.js"></script>
+
   </body>
   </body>
</html>
</html>

Revision as of 15:10, 18 July 2013

Penn's iGEM Team

First Section

Second Section

Third Section

Human Practices

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

Outreach

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

Outreach 1 .

Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.

Section 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

Heading 1 .

Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.

Section 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

Heading 1 .

Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.

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