Team:Penn/HumanPractices

From 2013.igem.org

(Difference between revisions)
Line 55: Line 55:
}
}
-
.one {
+
/*navigation circles that scroll when clicked*/
-
height:800px;
+
/*links and navigation*/
-
position: relative;
+
#navigation {
-
padding-top: 30px;
+
position: fixed;
-
width: 100%;
+
right: 0px;
-
background-image: url("https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/Yn0SK0Y0-7/snap.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg");
+
top: 20px;
-
background-position: 300px
+
list-style-type: none;
-
background-repeat: no-repeat;
+
z-index: 9999999;
-
background-size: 100%;
+
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
-
background-attachment: fixed;
+
   filter: alpha(opacity=90);
-
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
+
  -moz-opacity: 0.9;
-
   filter: alpha(opacity=70);
+
  -khtml-opacity: 0.9;
-
  -moz-opacity: 0.7;
+
   opacity: 0.9;
-
  -khtml-opacity: 0.7;
+
 
-
   opacity: 0.7;
+
}
}
-
.two {
+
#navigation li:hover{
-
height:800px;
+
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
-
position: relative;
+
   filter: alpha(opacity=60);
-
padding-top: 30px;
+
  -moz-opacity: 0.6;
-
width: 100%;
+
  -khtml-opacity: 0.6;
-
background-color: #50393F;
+
   opacity: 0.6;
-
background-image: url("https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/-ZtRJ7Gu1U/photo-8.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg");
+
-
background-position: 300px -100px;
+
-
background-repeat: no-repeat;
+
-
background-size: 80%;
+
-
background-attachment: fixed;
+
-
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
+
-
   filter: alpha(opacity=70);
+
-
  -moz-opacity: 0.7;
+
-
  -khtml-opacity: 0.7;
+
-
   opacity: 0.7;
+
}
}
-
       
+
 
-
    .three {
+
#navigation li {
-
/*
+
z-index:9999;
-
no background image for now
+
height: 20px;
-
background-image: url("https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/8XND1QonMj/Profile%20Photos/coolbluestuff.jpg?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg");*/
+
margin: 30px;
-
position: relative;
+
width: 20px;
-
text-align: center;
+
background-color: white;
-
height:800px;
+
-moz-border-radius: 100%;
-
width: 100%;
+
-ms-border-radius: 100%;
-
padding-top: 50px;
+
-webkit-border-radius: 100%;
 +
-o-border-radius: 100%;
 +
border-radius: 100%;
 +
opacity: 1;
}
}
 +
 +
/*Make hero unit slightly transparent*/
/*Make hero unit slightly transparent*/
Line 211: Line 205:
       </div> <!-- /.container -->
       </div> <!-- /.container -->
     </div><!-- /.navbar-wrapper -->
     </div><!-- /.navbar-wrapper -->
 +
   
 +
   
 +
   
 +
    <!--Circles on the side that scroll you to sections of the page-->
 +
<ul id="navigation">
 +
<li id="one"></li>
 +
<li id="two"></li>
 +
<li id="three"></li>
 +
<li id="four"></li>
 +
</ul>
 +
   
      
      
<div class="one"><!--general human outreach overview-->
<div class="one"><!--general human outreach overview-->
Line 262: Line 267:
</div><!--/div class 4-->
</div><!--/div class 4-->
</div>
</div>
 +
 +
 +
   
 +
   
 +
   
 +
   
 +
   
 +
   
 +
   
 +
    <script src="https://googledrive.com/host/0B4ZBZOYYKBzETkFqdnhMeV9fMzA" ></script>
 +
    <script src="https://googledrive.com/host/0B4ZBZOYYKBzEZTdBSFdUV19LYjQ"></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()
 +
         
 +
         
 +
          $("#one").click(function() {
 +
        $('html, body').animate({
 +
        scrollTop: $(".one").offset().top,
 +
    }, '2400');
 +
});
 +
   
 +
      $("#two").click(function() {
 +
        $('html, body').animate({
 +
        scrollTop: $(".two").offset().top,
 +
    }, '2400');
 +
});
 +
     
 +
          $("#three").click(function() {
 +
        $('html, body').animate({
 +
        scrollTop: $(".three").offset().top,
 +
    }, '2400');
 +
       
 +
              $("#four").click(function() {
 +
        $('html, body').animate({
 +
        scrollTop: $(".four").offset().top,
 +
    }, '2400');
 +
});
 +
         
 +
       
 +
       
 +
      }(window.jQuery)
 +
    </script>
 +
    <script src="../assets/js/holder/holder.js"></script>
 +
  </body>
 +
</html>

Revision as of 13:02, 12 July 2013

Human Practices

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.

Outreach

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.

Section 3

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.

Section 4

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.