Team:Penn/HumanPractices

From 2013.igem.org

(Difference between revisions)
Line 97: Line 97:
/*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 106: Line 108:
/*fix up featurette formatting*/
/*fix up featurette formatting*/
-
 
+
/*
.featurette {
.featurette {
     padding: 50px;
     padding: 50px;
Line 119: Line 121:
.pull-right {
.pull-right {
     float: right;
     float: right;
-
     height: 200px;
+
     height: 100px;
     width: auto;
     width: auto;
}
}
.span4 {
.span4 {
-
     margin: 40px;
+
     display: block;
-
}
+
    position: relative;
-
 
+
     height: 50px;
-
.row{
+
     margin:20px;
-
     float: center;
+
    border-radius: 0px;
-
     margin: auto;
+
-
}
+
-
 
+
-
.pull-left {
+
     float: left;
     float: left;
-
    height: 200px;
 
-
    width: auto;
 
}
}
-
/*Don't want circle images anymore*/
+
img-circle {
-
.img-circle {
+
    border-radius: 0px;
-
border-radius: 0px;
+
}
}
 +
/*fonts*/
/*fonts*/
Line 153: Line 149:
}
}
-
.span5 {
+
.text {
-
width: 80%;
+
    position: absolute;
-
margin:20px;
+
    display: inline-block;
 +
    height: 40px;
 +
    width: 200px;
 +
    background-color: gray;
 +
    border-radius: 6px;
 +
    z-index: -100;
 +
    text-align: right;
 +
    float: right;
 +
    padding: 3px;
 +
    right: 150px;
 +
    display: none;
 +
}
}
 +
 +
 +
 +
.img-side-wrapper {
 +
    height: 500px;
 +
    width: 400px;
 +
    overflow: hidden;
 +
    margin-top: 120px;
 +
    float: right;
 +
 +
 +
}
 +
 +
.img-wrapper {
 +
    height: 80px;
 +
    width: 80px;
 +
    border-radius: 100%;
 +
    float: left;
 +
    z-index: 99;
 +
    overflow:hidden;
 +
    display: inline-block;
 +
}
 +
 +
.img-text-wrapper {
 +
    height: 140px;
 +
    width: 300px;
 +
   
 +
}
 +
.img-wrapper img {
 +
    display: inline-block;
 +
    height: 90px;
 +
    width: auto;
 +
 +
   
 +
}
 +
 +
 +
 +
 +
          
          
          
          
Line 288: Line 335:
</div><!--end hero unit-->
</div><!--end hero unit-->
-
   <hr class="featurette-divider">
+
<div class="img-side-wrapper">
 +
   
 +
<div class="img-text-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>
 +
    </div><!--img wrapper-->
 +
    <div class="text" id="first-text">
 +
        <h4>First Section</h4>
 +
    </div>
 +
    </div>
-
<div class="row" id="rowfirst">
+
    <div class="img-text-wrapper">
-
         <div class="span4">
+
    <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>
 +
    </div><!--img wrapper-->
 +
    <div class="text" id="second-text">
 +
         <h4>Second Section</h4>
 +
    </div>
 +
    </div>
 +
 
 +
    <div class="img-text-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>
 +
    </div><!--img wrapper-->
 +
    <div class="text" id="third-text">
 +
        <h4>Third Section</h4>
 +
    </div>
 +
    </div>
 +
 
 +
   
 +
</div>
 +
 
 +
 
 +
 
 +
<!--
 +
  <hr class="featurette-divider">
 +
<div class="img-side-wrapper">
 +
   
 +
        <a href="#"><div class="span4">
           <img class="img-circle" data-src="holder.js/140x140" alt="140x140" src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/9E2cXZezHT/Discovery%20Day%20Clark%20Park/IMG_2055.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg" style=" height:140px;">
           <img class="img-circle" data-src="holder.js/140x140" alt="140x140" src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/9E2cXZezHT/Discovery%20Day%20Clark%20Park/IMG_2055.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg" style=" height:140px;">
-
          <h2>First Section</h2>
+
        </div></a>
-
          <p>This is a brief overview of the a section of the page.  Clicking the image or "more" will scroll down to that section</p>
+
       
-
           <p><a class="btn" href="">More &raquo;</a></p>
+
        <div class="text"><h2>First Section</h2>
-
        </div><!-- /.span4 -->
+
           <p> </p>
 +
        </div>
 +
 
      
      
-
                <div class="span4">
+
              <a href="#"> <div class="span4">
         <img class="img-circle" data-src="holder.js/140x140" alt="140x140" src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/2DoiODoUy6/Discovery%20Day%20Clark%20Park/IMG_2048.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg" style=" height:140px;">
         <img class="img-circle" data-src="holder.js/140x140" alt="140x140" src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/2DoiODoUy6/Discovery%20Day%20Clark%20Park/IMG_2048.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg" style=" height:140px;">
-
          <h2>Second Section</h2>
+
                </div></a>
-
          <p>This is a brief overview of the a section of the page.  Clicking the image or "more" will scroll down to that section</p>
+
                <div class="text"><h2>Second Section</h2>
-
           <p><a class="btn" href="">More &raquo;</a></p>
+
           <p> </p>
-
        </div><!-- /.span4 -->
+
        </div>
 +
              
              
        
        
          
          
-
            <div class="span4">
+
          <a href="#"> <div class="span4">
           <img class="img-circle" data-src="holder.js/140x140" alt="140x140" src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/MeiwwAmxBW/Discovery%20Day%20Clark%20Park/IMG_2057.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg" style=" height:140px;">
           <img class="img-circle" data-src="holder.js/140x140" alt="140x140" src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/MeiwwAmxBW/Discovery%20Day%20Clark%20Park/IMG_2057.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg" style=" height:140px;">
-
          <h2>Third Section</h2>
+
            </div></a>
-
           <p>This is a brief overview of the a section of the page. Clicking the image or "more" will scroll down to that section</p>
+
            <div class="text"><h2>Third Section</h2>
-
          <p><a class="btn" href="">More &raquo;</a></p>
+
           <p>  </p>
-
        </div><!-- /.span4 -->
+
        </div>
-
 
+
      </div>
 +
-->
        
        
-
        </div>
+
   
-
</div>
+
-
<div class="four">
+
<div class="four" id="first-sect">
     <div class="hero-unit">
     <div class="hero-unit">
   <h1>Outreach</h1>
   <h1>Outreach</h1>
Line 345: Line 430:
        
        
       <hr class="featurette-divider">
       <hr class="featurette-divider">
-
 
-
      <div class="featurette">
 
-
      <div class="span5"> <img class="featurette-image pull-right" src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/9E2cXZezHT/Discovery%20Day%20Clark%20Park/IMG_2055.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg"/>
 
-
        <h2 class="featurette-heading"> Outreach 2<span class="muted"><!--tagline-->.</span></h2>
 
-
        <p class="lead">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.</p>
 
-
      </div></div>
 
-
     
 
-
      <hr class="featurette-divider">
 
-
 
-
      <div class="featurette">
 
-
        <img class="featurette-image pull-right" src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/MeiwwAmxBW/Discovery%20Day%20Clark%20Park/IMG_2057.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg"/>
 
-
        <h2 class="featurette-heading">Outreach 3<span class="muted"><!--tagline-->.</span></h2>
 
-
        <p class="lead">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.</p>
 
-
      </div>
 
        
        
        
        
-
</div><!--/div class 2-->
 
</div>
</div>
-
<div class="three"><!--another section-->
+
<div class="three" id="second-sect"><!--another section-->
     <div class="hero-unit">
     <div class="hero-unit">
   <h1>Section 3</h1>
   <h1>Section 3</h1>
Line 394: Line 464:
       <hr class="featurette-divider">
       <hr class="featurette-divider">
-
      <div class="featurette">
+
   
-
        <img class="featurette-image pull-right" src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/9E2cXZezHT/Discovery%20Day%20Clark%20Park/IMG_2055.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg">
+
-
        <h2 class="featurette-heading"> Heading 2<span class="muted"><!--tagline-->.</span></h2>
+
-
        <p class="lead">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.</p>
+
-
      </div>
+
-
     
+
-
      <hr class="featurette-divider">
+
-
 
+
-
      <div class="featurette">
+
-
        <img class="featurette-image pull-right" src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/MeiwwAmxBW/Discovery%20Day%20Clark%20Park/IMG_2057.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg">
+
-
        <h2 class="featurette-heading">Heading 3<span class="muted"><!--tagline-->.</span></h2>
+
-
        <p class="lead">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.</p>
+
-
      </div>
+
-
     
+
        
        
Line 413: Line 470:
</div><!--/div class 3-->
</div><!--/div class 3-->
-
<div class="four"><!--another section-->
+
<div class="four" id="third-sect"><!--another section-->
     <div class="hero-unit">
     <div class="hero-unit">
-
   <h1>Section 4</h1>
+
   <h1>Section 3</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 438: Line 495:
        
        
       <hr class="featurette-divider">
       <hr class="featurette-divider">
-
 
-
      <div class="featurette">
 
-
        <img class="featurette-image pull-right" src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/9E2cXZezHT/Discovery%20Day%20Clark%20Park/IMG_2055.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg">
 
-
        <h2 class="featurette-heading"> Heading 2<span class="muted"><!--tagline-->.</span></h2>
 
-
        <p class="lead">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.</p>
 
-
      </div>
 
-
     
 
-
      <hr class="featurette-divider">
 
-
 
-
      <div class="featurette">
 
-
        <img class="featurette-image pull-right" src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/MeiwwAmxBW/Discovery%20Day%20Clark%20Park/IMG_2057.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg">
 
-
        <h2 class="featurette-heading">Heading 3<span class="muted"><!--tagline-->.</span></h2>
 
-
        <p class="lead">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.</p>
 
-
      </div>
 
</div><!--/div class 4-->
</div><!--/div class 4-->
Line 464: Line 507:
      
      
      
      
-
    <script src="https://googledrive.com/host/0B4ZBZOYYKBzETkFqdnhMeV9fMzA" ></script>
+
<script src="https://googledrive.com/host/0B4ZBZOYYKBzETkFqdnhMeV9fMzA" ></script>
     <script src="https://googledrive.com/host/0B4ZBZOYYKBzEZTdBSFdUV19LYjQ"></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/jquery.js"></script>
Line 483: Line 527:
       !function ($) {
       !function ($) {
         $(function(){
         $(function(){
-
                 
+
 
-
          $("#one").click(function() {
+
         $('html, body').animate({
         $('html, body').animate({
         scrollTop: $(".one").offset().top,
         scrollTop: $(".one").offset().top,
     }, '2400');
     }, '2400');
-
});
+
 
      
      
       $("#two").click(function() {
       $("#two").click(function() {
Line 496: Line 539:
  });
  });
        
        
-
           $("#three").click(function() {
+
           $("#three, #team").click(function() {
         $('html, body').animate({
         $('html, body').animate({
-
         scrollTop: $(".three").offset().top,
+
         scrollTop: $(".team").offset().top,
-
    }, '2400');
+
-
       
+
-
              $("#four").click(function() {
+
-
        $('html, body').animate({
+
-
        scrollTop: $(".four").offset().top,
+
     }, '2400');
     }, '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)
       }(window.jQuery)
 +
     </script>
     </script>
     <script src="../assets/js/holder/holder.js"></script>
     <script src="../assets/js/holder/holder.js"></script>
   </body>
   </body>
</html>
</html>

Revision as of 12:45, 18 July 2013

Penn's iGEM Team

Human Practices

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.

First Section

Second Section

Third Section

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 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.

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"