Difference between revisions of "Team:BGU Israel/Team"

Line 19: Line 19:
 
       color: #818181;
 
       color: #818181;
 
   }
 
   }
 +
  h1 {
 +
      font-size: 32px!important;
 +
      font-family: Segoe UI Light!important;
 +
      text-transform: capitalize;
 +
      color: #303030;
 +
      font-weight: 600;
 +
      margin-bottom: 20px !important;
 +
   
 +
  }
 +
  h4 {
 +
      font-size: 19px;
 +
      line-height: 1.375em;
 +
      color: #303030;
 +
      font-weight: 400;
 +
      margin-bottom: 30px;
 +
  } 
 +
      p, ol {
 +
          font-size: 16px !important;
 +
         
 +
          color:#010101 !important;
 +
      }
 +
  .jumbotron {
 +
      background-color: #f4511e;
 +
      color: #fff;
 +
      padding: 100px 25px;
 +
      font-family: Montserrat, sans-serif;
 +
  }
 +
  .container-fluid {
 +
      padding: 60px 50px;
 +
  }
 +
 +
    .bg-grey {
 +
        background-color:#ededed;
 +
        color:#000;
 +
        padding: 60px 50px;
 +
    }
 +
    .bg-white {
 +
        background-color:#fff;
 +
        color:#000;
 +
        padding: 60px 50px;
 +
    }
 +
    .bg-dark {
 +
        background-color:#262626;
 +
        color:#fff !important;
 +
        padding: 60px 50px;
 +
    }
 +
    .bg-dark p, .bg-dark h1 {
 +
        color:#fff !important;
 +
       
 +
    }
 +
  .logo-small {
 +
      color: #f4511e;
 +
      font-size: 50px;
 +
  }
 +
  .logo {
 +
      color: #f4511e;
 +
      font-size: 200px;
 +
  }
 +
  .thumbnail {
 +
      padding: 0 0 15px 0;
 +
      border: none;
 
       border-radius: 0;
 
       border-radius: 0;
 
   }
 
   }
Line 32: Line 93:
 
   .carousel-indicators li {
 
   .carousel-indicators li {
 
       border-color: #f4511e;
 
       border-color: #f4511e;
−
position:relative;
 
−
    left:-57%;
 
−
    text-align:left;
 
−
 
 
   }
 
   }
 
   .carousel-indicators li.active {
 
   .carousel-indicators li.active {
 
       background-color: #f4511e;
 
       background-color: #f4511e;
−
position:relative;
 
−
    left:-57%;
 
−
    text-align:left;
 
−
 
 
   }
 
   }
 
   .item h4 {
 
   .item h4 {
Line 165: Line 218:
 
   }
 
   }
  
−
    header.masthead {
+
  header.masthead {
 
   padding-top: 10rem;
 
   padding-top: 10rem;
 
   padding-bottom: calc(10rem - 56px);
 
   padding-bottom: calc(10rem - 56px);
 
   background-image:url('https://static.igem.org/mediawiki/2018/2/2e/T--BGU_Israel--home_banner.jpg');
 
   background-image:url('https://static.igem.org/mediawiki/2018/2/2e/T--BGU_Israel--home_banner.jpg');
−
min-height: 600px;
+
width:100%;
−
  background-position: center center;
+
        overflow: hidden;
−
  -webkit-background-size: cover;
+
    min-height: 700px;  
−
  -moz-background-size: cover;
+
    /* Create the parallax scrolling effect */
−
  -o-background-size: cover;
+
    background-attachment: fixed;
−
  background-size: cover;
+
    background-position: center;
 +
    background-repeat: no-repeat;
 +
    background-size: cover;
 +
   
 
}
 
}
−
@media only screen and (max-device-width: 1366px) {
+
      .parallax-window {
−
     .parallax {
+
     min-height: 700px;
−
        background-attachment: scroll;
+
     background: transparent;
−
     }
+
 
}
 
}
 
       #abstract p, #abstract ol {
 
       #abstract p, #abstract ol {
Line 204: Line 259:
 
   background-color: #555;
 
   background-color: #555;
 
}
 
}
−
      footer {
+
 
−
          background-color:#262626;
+
−
          color:#fff !important;
+
−
      }
+
 
     .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover {
 
     .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover {
 
         background: #fff !important;
 
         background: #fff !important;
Line 215: Line 267:
 
          
 
          
 
     }
 
     }
−
     #mainMenu .dropdown-menu {
+
@media screen and (min-width: 600px) {
 +
     .dropdown:hover .dropdown-menu {
 +
    display: block;
 +
    margin-top: 0;
 +
        color:#fff;
 +
}
 +
      #mainMenu .dropdown-menu {
 
         border:0 !important;
 
         border:0 !important;
 
         right:auto !important;
 
         right:auto !important;
Line 222: Line 280:
 
         font-size:18px;
 
         font-size:18px;
 
     }
 
     }
−
  @media screen and (min-width: 600px) {
+
      #mainMenu .dropdown-menu li:hover {
−
    .dropdown:hover .dropdown-menu {
+
        color:#0186ac !important;
−
    display: block;
+
          background: transparent;
−
    margin-top: 0;
+
    }
−
        color:#fff;
+
−
}
+
 
     }
 
     }
 
     .gray-section {
 
     .gray-section {
 
         background-color:#ededed;
 
         background-color:#ededed;
 
     }
 
     }
−
    .sub-page-header {
+
      .sub-page-header {
 
           padding-top: 10rem;
 
           padding-top: 10rem;
 
   padding-bottom: calc(10rem - 56px);
 
   padding-bottom: calc(10rem - 56px);
Line 248: Line 304:
 
<body id="myPage"  data-spy="scroll" data-target=".navbar" data-offset="60">
 
<body id="myPage"  data-spy="scroll" data-target=".navbar" data-offset="60">
 
     <div id="top"></div>
 
     <div id="top"></div>
−
     <a id="myBtn" class="button" href="#top" title="To Top">
+
     <a id="myBtn" href="#top" title="To Top">
 
     <span class="glyphicon glyphicon-chevron-up"></span>
 
     <span class="glyphicon glyphicon-chevron-up"></span>
 
   </a>
 
   </a>
−
 
 
<nav id="mainMenu" class="navbar navbar-default navbar-fixed-top">
 
<nav id="mainMenu" class="navbar navbar-default navbar-fixed-top">
 
   <div class="container">
 
   <div class="container">
Line 315: Line 370:
 
   <header  class="sub-page-header text-center">
 
   <header  class="sub-page-header text-center">
 
       <div class="container my-auto">
 
       <div class="container my-auto">
−
           <h1>Team</h1>
+
           <h1>Meet the Team</h1>
 
       </div>
 
       </div>
 
     </header>
 
     </header>
  
−
<script>
 
−
   
 
−
</script>
 
 
<!-- Container (About Section) -->
 
<!-- Container (About Section) -->
 
     <style>
 
     <style>
Line 559: Line 611:
 
   </div>
 
   </div>
 
</div>
 
</div>
 +
  .logo {
 +
      color: #f4511e;
 +
      font-size: 200px;
 +
  }
 +
  .thumbnail {
 +
      padding: 0 0 15px 0;
 +
      border: none;
 +
      border-radius: 0;
 +
  }
 +
  .thumbnail img {
 +
      width: 100%;
 +
      height: 100%;
 +
      margin-bottom: 10px;
 +
  }
 +
  .carousel-control.right, .carousel-control.left {
 +
      background-image: none;
 +
      color: #f4511e;
 +
  }
 +
  .carousel-indicators li {
 +
      border-color: #f4511e;
 +
  }
 +
  .carousel-indicators li.active {
 +
      background-color: #f4511e;
 +
  }
 +
  .item h4 {
 +
      font-size: 19px;
 +
      line-height: 1.375em;
 +
      font-weight: 400;
 +
      font-style: italic;
 +
      margin: 70px 0;
 +
  }
 +
  .item span {
 +
      font-style: normal;
 +
  }
 +
  .panel {
 +
      border: 1px solid #f4511e;
 +
      border-radius:0 !important;
 +
      transition: box-shadow 0.5s;
 +
  }
 +
  .panel:hover {
 +
      box-shadow: 5px 0px 40px rgba(0,0,0, .2);
 +
  }
 +
.panel-footer .btn:hover {
 +
      border: 1px solid #f4511e;
 +
      background-color: #fff !important;
 +
      color: #f4511e;
 +
  }
 +
  .panel-heading {
 +
      color: #fff !important;
 +
      background-color: #f4511e !important;
 +
      padding: 25px;
 +
      border-bottom: 1px solid transparent;
 +
      border-top-left-radius: 0px;
 +
      border-top-right-radius: 0px;
 +
      border-bottom-left-radius: 0px;
 +
      border-bottom-right-radius: 0px;
 +
  }
 +
.panel-footer {
 +
      background-color: white !important;
 +
  }
 +
  .panel-footer h3 {
 +
      font-size: 32px;
 +
  }
 +
  .panel-footer h4 {
 +
      color: #aaa;
 +
      font-size: 14px;
 +
  }
 +
  .panel-footer .btn {
 +
      margin: 15px 0;
 +
      background-color: #f4511e;
 +
      color: #fff;
 +
  }
 +
footer.bg-dark p {
 +
        color:#ededed !important;
 +
    }
 +
  .navbar {
 +
      margin-bottom: 10px; !important;
 +
      background-color: #fff !important;
 +
      z-index: 9999!important;
 +
      border: 0 !important;
 +
    text-transform:uppercase !important;
 +
      border-radius: 0 !important;
 +
      font-family: 'Segoe UI Light'!important;
 +
      font-weight: 600!important;
 +
      color:#000!important;
 +
padding-top:10px;
 +
  }
 +
  .navbar-brand {
 +
  padding: 0px;
 +
}
 +
.navbar-brand>img {
 +
  height: 100%;
 +
  padding: 0 0 10px 20px;
 +
  width: auto;
 +
}
 +
  .navbar-nav li a:hover, .navbar-nav li.active a {
 +
      color: #0186ac !important;
 +
      background-color: #fff !important;
 +
  }
 +
  .navbar-default .navbar-toggle {
 +
      border-color: transparent;
 +
      color: #fff !important;
 +
  }
 +
 +
  .slideanim {visibility:hidden;}
 +
  .slide {
 +
      animation-name: slide;
 +
      -webkit-animation-name: slide;
 +
      animation-duration: 1s;
 +
      -webkit-animation-duration: 1s;
 +
      visibility: visible;
 +
  }
 +
  @keyframes slide {
 +
    0% {
 +
      opacity: 0;
 +
      transform: translateY(70%);
 +
    }
 +
    100% {
 +
      opacity: 1;
 +
      transform: translateY(0%);
 +
    }
 +
  }
 +
  @-webkit-keyframes slide {
 +
    0% {
 +
      opacity: 0;
 +
      -webkit-transform: translateY(70%);
 +
    }
 +
    100% {
 +
      opacity: 1;
 +
      -webkit-transform: translateY(0%);
 +
    }
 +
  }
 +
  @media screen and (max-width: 768px) {
 +
    .col-sm-4 {
 +
      text-align: center;
 +
      margin: 25px 0;
 +
    }
 +
    .btn-lg {
 +
        width: 100%;
 +
        margin-bottom: 35px;
 +
    }
 +
  }
 +
  @media screen and (max-width: 480px) {
 +
    .logo {
 +
        font-size: 150px;
 +
    }
 +
  }
 +
 +
    header.masthead {
 +
  padding-top: 10rem;
 +
  padding-bottom: calc(10rem - 56px);
 +
  background-image:url('https://static.igem.org/mediawiki/2018/2/2e/T--BGU_Israel--home_banner.jpg');
 +
min-height: 600px;
 +
  background-position: center center;
 +
  -webkit-background-size: cover;
 +
  -moz-background-size: cover;
 +
  -o-background-size: cover;
 +
  background-size: cover;
 +
}
 +
      .parallax-window {
 +
    min-height: 700px;
 +
    background: transparent;
 +
}
 +
      #abstract p, #abstract ol {
 +
          text-align: justify;
 +
      }
 +
      #myBtn {
 +
  display: none;
 +
         
 +
  position: fixed;
 +
  bottom: 20px;
 +
  right: 20px;
 +
  z-index: 99;
 +
  font-size: 16px;
 +
  border: none;
 +
  outline: none;
 +
  background-color: #0186ac;
 +
  color: white;
 +
  cursor: pointer;
 +
  padding: 12px 15px 12px 15px;
 +
  border-radius: 100px;
 +
}
 +
 +
#myBtn:hover {
 +
  background-color: #555;
 +
}
 +
      footer {
 +
          background-color:#262626;
 +
          color:#fff !important;
 +
      }
 +
    .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover {
 +
        background: #fff !important;
 +
        color:#0186ac !important;
 +
    }
 +
    .navbar-right .dropdown-menu {
 +
       
 +
    }
 +
    #mainMenu .dropdown-menu {
 +
        border:0 !important;
 +
        right:auto !important;
 +
        border-radius: 0 !important;
 +
        text-transform: capitalize;
 +
        font-size:18px;
 +
    }
 +
  @media screen and (min-width: 600px) {
 +
    .dropdown:hover .dropdown-menu {
 +
    display: block;
 +
    margin-top: 0;
 +
        color:#fff;
 +
}
 +
    }
 +
    .gray-section {
 +
        background-color:#ededed;
 +
    }
 +
    .sub-page-header {
 +
          padding-top: 10rem;
 +
  padding-bottom: calc(10rem - 56px);
 +
  background-image:url('https://static.igem.org/mediawiki/2018/2/2e/T--BGU_Israel--home_banner.jpg');
 +
height:200px !important;
 +
  background-position: top center;
 +
  -webkit-background-size: cover;
 +
  -moz-background-size: cover;
 +
  -o-background-size: cover;
 +
  background-size: cover;
 +
    }
 +
    </style>
 +
</head>
 +
 +
      <div class="bg-white">
 +
<div class="container text-center">
 +
  <div class="row">
 +
      <h1>host a group of high-school </h1>
 +
 +
      <p style="margin:0px !important; padding:0!important;"  class="mb-4 justified animated fadeInRight">Our project would not have succeeded without our Human Practices. Our goals and implementation were all a result of involvement in the communities around us and sharing our ideas through discussions with experts. Science cannot proceed unaided and cannot succeed without public support. As a final gesture, we were delighted to host a group of high-school students in our lab. We had a great time explaining to them about iGEM, our project, and our lab. Although we ourselves as undergraduate students are only at the beginning of our scientific careers, it was wonderful to transfer the knowledge we have gathered to a new generation.
 +
<br><br><br></p>
 +
 +
  </div>
 +
    <div class="row">
 +
    <div class="col-sm-4">
 +
        <img src="dark-lab.jpg" class="img-responsive">
 +
        <h3>title</h3>
 +
        <p>lorem ipsum bf fd kdfdfkdflsdf</p>
 +
        </div>
 +
        <div class="col-sm-4">
 +
        <img src="dark-lab.jpg" class="img-responsive">
 +
            <h3>title</h3>
 +
        <p>lorem ipsum bf fd kdfdfkdflsdf</p>
 +
        </div>
 +
        <div class="col-sm-4">
 +
        <img src="dark-lab.jpg" class="img-responsive">
 +
            <h3>title</h3>
 +
        <p>lorem ipsum bf fd kdfdfkdflsdf</p>
 +
        </div>
 +
       
 +
    </div>
 +
</div>
 +
</div>
 +
 +
 
<style>
 
<style>
 
     .footer-list {
 
     .footer-list {
 
         list-style: none;
 
         list-style: none;
−
         color:#a5a5a5;
+
         color:#fff;
 
     }
 
     }
 
     .footer-list-item {
 
     .footer-list-item {
 
         padding:20px 0 20px 0 !important;
 
         padding:20px 0 20px 0 !important;
−
         border-bottom: 1px solid #a5a5a5;
+
         border-bottom: 1px solid #fff;
 
     }
 
     }
 
     .footer-list .footer-list-item:last-child {
 
     .footer-list .footer-list-item:last-child {
 
         border:0;
 
         border:0;
 
     }
 
     }
 +
    .container-fluid {
 +
      padding: 60px 50px;
 +
  }
 +
 +
    .bg-grey {
 +
        background-color:#ededed;
 +
        color:#000;
 +
        padding: 60px 50px;
 +
    }
 +
    .bg-white {
 +
        background-color:#fff;
 +
        color:#000;
 +
        padding: 60px 50px;
 +
    }
 +
    .bg-dark {
 +
        background-color:#262626;
 +
       
 +
        padding: 60px 50px;
 +
    }
 +
      .bg-dark h1 {
 +
        color:#fff !important;
 +
       
 +
    }
 +
    footer.bg-dark p {
 +
        color:#ededed !important;
 +
    }
 +
    .social-icons {
 +
        display: inline;
 +
        height:20px;
 +
        width:20px;
 +
        margin-right:10px;
 +
    }
 +
 
</style>
 
</style>
  
−
<footer class="container-fluid">
+
<footer class="bg-dark">
 +
    <div  class="container my-auto">
 
  <div class="row">
 
  <div class="row">
 
     <div class="col-md-4">
 
     <div class="col-md-4">
−
<ul class="footer-list">
+
        <h3>About OrignALS</h3>
−
  <li class="footer-list-item">Ben-Gurion University of the Negev
+
        <p><br>Established in 2006, EchoSense Ltd. develops innovative ultrasound Doppler systems for the diagnosis and monitoring of cardiac and pulmonary diseases. EchoSense delivers a fast,reliable and non-invasive method of diagnosis and our technology has undergone successful clinical trials in the United States, Europe and Israel. The Echosense research and development center is based in Haifa, Israel.</p>
−
Ben Gurion 1, Beer Sheva 8410501, Israel</li>
+
        <img class="responsive-img" src="https://static.igem.org/mediawiki/2018/f/f0/T--BGU_Israel--originals_white.png" width="50%">
−
  <li class="footer-list-item">Second item</li>
+
       
−
  <li class="footer-list-item">Third item</li>
+
        <img class="img-responsive" src="">
−
</ul>
+
 
     </div>
 
     </div>
 
     <div class="col-md-4">
 
     <div class="col-md-4">
 
     <ul class="footer-list">
 
     <ul class="footer-list">
−
   <li class="footer-list-item">First item</li>
+
        <h3>Keep in Touch</h3>
−
   <li class="footer-list-item">Second item</li>
+
       
−
   <li class="footer-list-item">Third item</li>
+
   <li class="footer-list-item"><img class="img-responsive social-icons" src="https://static.igem.org/mediawiki/2018/3/3c/T--BGU_Israel--facebook.png" > @iGEMBGU</li>
 +
   <li class="footer-list-item"><img class="img-responsive social-icons" src="https://static.igem.org/mediawiki/2018/e/e9/T--BGU_Israel--instagram.png" >@igem_2018_bgu</li>
 +
   <li class="footer-list-item"><img class="img-responsive social-icons" src="https://static.igem.org/mediawiki/2018/2/26/T--BGU_Israel--twitter.jpg" > @originalsbgu</li>
 +
        <li class="footer-list-item"><img class="img-responsive social-icons" src="https://static.igem.org/mediawiki/2018/8/83/T--BGU_Israel--email.png" > bgu_israel@gmail.com</li>
 
</ul>
 
</ul>
 
     </div>
 
     </div>
 
     <div class="col-md-4">
 
     <div class="col-md-4">
 
     <ul class="footer-list">
 
     <ul class="footer-list">
−
  <li class="footer-list-item">First item</li>
+
        <h3>Address</h3>
−
   <li class="footer-list-item">Second item</li>
+
   <li class="footer-list-item">Ben-Gurion University of the Negev<br>
−
   <li class="footer-list-item">Third item</li>
+
Ben Gurion 1, Beer Sheva 8410501, Israel</li>
−
<li class="footer-list-item">Third item</li>
+
    
 +
          <li class="footer-list-item"><img class="responsive-img" src="https://static.igem.org/mediawiki/2018/a/a5/T--BGU_Israel--bgu_white.png"></li>
 
</ul>
 
</ul>
 
     </div>
 
     </div>
 
      
 
      
 
</div>
 
</div>
 +
        </div>
 
</footer>
 
</footer>
  
Line 638: Line 987:
 
})
 
})
 
</script>
 
</script>
 +
<script type="text/javascript">
 +
    /*!
 +
* parallax.js v1.5.0 (http://pixelcog.github.io/parallax.js/)
 +
* @copyright 2016 PixelCog, Inc.
 +
* @license MIT (https://github.com/pixelcog/parallax.js/blob/master/LICENSE)
 +
*/
  
 +
;(function ( $, window, document, undefined ) {
 +
 +
  // Polyfill for requestAnimationFrame
 +
  // via: https://gist.github.com/paulirish/1579671
 +
 +
  (function() {
 +
    var lastTime = 0;
 +
    var vendors = ['ms', 'moz', 'webkit', 'o'];
 +
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
 +
      window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
 +
      window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
 +
    }
 +
 +
    if (!window.requestAnimationFrame)
 +
      window.requestAnimationFrame = function(callback) {
 +
        var currTime = new Date().getTime();
 +
        var timeToCall = Math.max(0, 16 - (currTime - lastTime));
 +
        var id = window.setTimeout(function() { callback(currTime + timeToCall); },
 +
          timeToCall);
 +
        lastTime = currTime + timeToCall;
 +
        return id;
 +
      };
 +
 +
    if (!window.cancelAnimationFrame)
 +
      window.cancelAnimationFrame = function(id) {
 +
        clearTimeout(id);
 +
      };
 +
  }());
 +
 +
 +
  // Parallax Constructor
 +
 +
  function Parallax(element, options) {
 +
    var self = this;
 +
 +
    if (typeof options == 'object') {
 +
      delete options.refresh;
 +
      delete options.render;
 +
      $.extend(this, options);
 +
    }
 +
 +
    this.$element = $(element);
 +
 +
    if (!this.imageSrc && this.$element.is('img')) {
 +
      this.imageSrc = this.$element.attr('src');
 +
    }
 +
 +
    var positions = (this.position + '').toLowerCase().match(/\S+/g) || [];
 +
 +
    if (positions.length < 1) {
 +
      positions.push('center');
 +
    }
 +
    if (positions.length == 1) {
 +
      positions.push(positions[0]);
 +
    }
 +
 +
    if (positions[0] == 'top' || positions[0] == 'bottom' || positions[1] == 'left' || positions[1] == 'right') {
 +
      positions = [positions[1], positions[0]];
 +
    }
 +
 +
    if (this.positionX !== undefined) positions[0] = this.positionX.toLowerCase();
 +
    if (this.positionY !== undefined) positions[1] = this.positionY.toLowerCase();
 +
 +
    self.positionX = positions[0];
 +
    self.positionY = positions[1];
 +
 +
    if (this.positionX != 'left' && this.positionX != 'right') {
 +
      if (isNaN(parseInt(this.positionX))) {
 +
        this.positionX = 'center';
 +
      } else {
 +
        this.positionX = parseInt(this.positionX);
 +
      }
 +
    }
 +
 +
    if (this.positionY != 'top' && this.positionY != 'bottom') {
 +
      if (isNaN(parseInt(this.positionY))) {
 +
        this.positionY = 'center';
 +
      } else {
 +
        this.positionY = parseInt(this.positionY);
 +
      }
 +
    }
 +
 +
    this.position =
 +
      this.positionX + (isNaN(this.positionX)? '' : 'px') + ' ' +
 +
      this.positionY + (isNaN(this.positionY)? '' : 'px');
 +
 +
    if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
 +
      if (this.imageSrc && this.iosFix && !this.$element.is('img')) {
 +
        this.$element.css({
 +
          backgroundImage: 'url(' + this.imageSrc + ')',
 +
          backgroundSize: 'cover',
 +
          backgroundPosition: this.position
 +
        });
 +
      }
 +
      return this;
 +
    }
 +
 +
    if (navigator.userAgent.match(/(Android)/)) {
 +
      if (this.imageSrc && this.androidFix && !this.$element.is('img')) {
 +
        this.$element.css({
 +
          backgroundImage: 'url(' + this.imageSrc + ')',
 +
          backgroundSize: 'cover',
 +
          backgroundPosition: this.position
 +
        });
 +
      }
 +
      return this;
 +
    }
 +
 +
    this.$mirror = $('<div />').prependTo(this.mirrorContainer);
 +
 +
    var slider = this.$element.find('>.parallax-slider');
 +
    var sliderExisted = false;
 +
 +
    if (slider.length == 0)
 +
      this.$slider = $('<img />').prependTo(this.$mirror);
 +
    else {
 +
      this.$slider = slider.prependTo(this.$mirror)
 +
      sliderExisted = true;
 +
    }
 +
 +
    this.$mirror.addClass('parallax-mirror').css({
 +
      visibility: 'hidden',
 +
      zIndex: this.zIndex,
 +
      position: 'fixed',
 +
      top: 0,
 +
      left: 0,
 +
      overflow: 'hidden'
 +
    });
 +
 +
    this.$slider.addClass('parallax-slider').one('load', function() {
 +
      if (!self.naturalHeight || !self.naturalWidth) {
 +
        self.naturalHeight = this.naturalHeight || this.height || 1;
 +
        self.naturalWidth  = this.naturalWidth  || this.width  || 1;
 +
      }
 +
      self.aspectRatio = self.naturalWidth / self.naturalHeight;
 +
 +
      Parallax.isSetup || Parallax.setup();
 +
      Parallax.sliders.push(self);
 +
      Parallax.isFresh = false;
 +
      Parallax.requestRender();
 +
    });
 +
 +
    if (!sliderExisted)
 +
      this.$slider[0].src = this.imageSrc;
 +
 +
    if (this.naturalHeight && this.naturalWidth || this.$slider[0].complete || slider.length > 0) {
 +
      this.$slider.trigger('load');
 +
    }
 +
 +
  }
 +
 +
 +
  // Parallax Instance Methods
 +
 +
  $.extend(Parallax.prototype, {
 +
    speed:    0.2,
 +
    bleed:    0,
 +
    zIndex:  -100,
 +
    iosFix:  true,
 +
    androidFix: true,
 +
    position: 'center',
 +
    overScrollFix: false,
 +
    mirrorContainer: 'body',
 +
 +
    refresh: function() {
 +
      this.boxWidth        = this.$element.outerWidth();
 +
      this.boxHeight      = this.$element.outerHeight() + this.bleed * 2;
 +
      this.boxOffsetTop    = this.$element.offset().top - this.bleed;
 +
      this.boxOffsetLeft  = this.$element.offset().left;
 +
      this.boxOffsetBottom = this.boxOffsetTop + this.boxHeight;
 +
 +
      var winHeight = Parallax.winHeight;
 +
      var docHeight = Parallax.docHeight;
 +
      var maxOffset = Math.min(this.boxOffsetTop, docHeight - winHeight);
 +
      var minOffset = Math.max(this.boxOffsetTop + this.boxHeight - winHeight, 0);
 +
      var imageHeightMin = this.boxHeight + (maxOffset - minOffset) * (1 - this.speed) | 0;
 +
      var imageOffsetMin = (this.boxOffsetTop - maxOffset) * (1 - this.speed) | 0;
 +
      var margin;
 +
 +
      if (imageHeightMin * this.aspectRatio >= this.boxWidth) {
 +
        this.imageWidth    = imageHeightMin * this.aspectRatio | 0;
 +
        this.imageHeight  = imageHeightMin;
 +
        this.offsetBaseTop = imageOffsetMin;
 +
 +
        margin = this.imageWidth - this.boxWidth;
 +
 +
        if (this.positionX == 'left') {
 +
          this.offsetLeft = 0;
 +
        } else if (this.positionX == 'right') {
 +
          this.offsetLeft = - margin;
 +
        } else if (!isNaN(this.positionX)) {
 +
          this.offsetLeft = Math.max(this.positionX, - margin);
 +
        } else {
 +
          this.offsetLeft = - margin / 2 | 0;
 +
        }
 +
      } else {
 +
        this.imageWidth    = this.boxWidth;
 +
        this.imageHeight  = this.boxWidth / this.aspectRatio | 0;
 +
        this.offsetLeft    = 0;
 +
 +
        margin = this.imageHeight - imageHeightMin;
 +
 +
        if (this.positionY == 'top') {
 +
          this.offsetBaseTop = imageOffsetMin;
 +
        } else if (this.positionY == 'bottom') {
 +
          this.offsetBaseTop = imageOffsetMin - margin;
 +
        } else if (!isNaN(this.positionY)) {
 +
          this.offsetBaseTop = imageOffsetMin + Math.max(this.positionY, - margin);
 +
        } else {
 +
          this.offsetBaseTop = imageOffsetMin - margin / 2 | 0;
 +
        }
 +
      }
 +
    },
 +
 +
    render: function() {
 +
      var scrollTop    = Parallax.scrollTop;
 +
      var scrollLeft  = Parallax.scrollLeft;
 +
      var overScroll  = this.overScrollFix ? Parallax.overScroll : 0;
 +
      var scrollBottom = scrollTop + Parallax.winHeight;
 +
 +
      if (this.boxOffsetBottom > scrollTop && this.boxOffsetTop <= scrollBottom) {
 +
        this.visibility = 'visible';
 +
        this.mirrorTop = this.boxOffsetTop  - scrollTop;
 +
        this.mirrorLeft = this.boxOffsetLeft - scrollLeft;
 +
        this.offsetTop = this.offsetBaseTop - this.mirrorTop * (1 - this.speed);
 +
      } else {
 +
        this.visibility = 'hidden';
 +
      }
 +
 +
      this.$mirror.css({
 +
        transform: 'translate3d('+this.mirrorLeft+'px, '+(this.mirrorTop - overScroll)+'px, 0px)',
 +
        visibility: this.visibility,
 +
        height: this.boxHeight,
 +
        width: this.boxWidth
 +
      });
 +
 +
      this.$slider.css({
 +
        transform: 'translate3d('+this.offsetLeft+'px, '+this.offsetTop+'px, 0px)',
 +
        position: 'absolute',
 +
        height: this.imageHeight,
 +
        width: this.imageWidth,
 +
        maxWidth: 'none'
 +
      });
 +
    }
 +
  });
 +
 +
 +
  // Parallax Static Methods
 +
 +
  $.extend(Parallax, {
 +
    scrollTop:    0,
 +
    scrollLeft:  0,
 +
    winHeight:    0,
 +
    winWidth:    0,
 +
    docHeight:    1 << 30,
 +
    docWidth:    1 << 30,
 +
    sliders:      [],
 +
    isReady:      false,
 +
    isFresh:      false,
 +
    isBusy:      false,
 +
 +
    setup: function() {
 +
      if (this.isReady) return;
 +
 +
      var self = this;
 +
 +
      var $doc = $(document), $win = $(window);
 +
 +
      var loadDimensions = function() {
 +
        Parallax.winHeight = $win.height();
 +
        Parallax.winWidth  = $win.width();
 +
        Parallax.docHeight = $doc.height();
 +
        Parallax.docWidth  = $doc.width();
 +
      };
 +
 +
      var loadScrollPosition = function() {
 +
        var winScrollTop  = $win.scrollTop();
 +
        var scrollTopMax  = Parallax.docHeight - Parallax.winHeight;
 +
        var scrollLeftMax = Parallax.docWidth  - Parallax.winWidth;
 +
        Parallax.scrollTop  = Math.max(0, Math.min(scrollTopMax,  winScrollTop));
 +
        Parallax.scrollLeft = Math.max(0, Math.min(scrollLeftMax, $win.scrollLeft()));
 +
        Parallax.overScroll = Math.max(winScrollTop - scrollTopMax, Math.min(winScrollTop, 0));
 +
      };
 +
 +
      $win.on('resize.px.parallax load.px.parallax', function() {
 +
          loadDimensions();
 +
          self.refresh();
 +
          Parallax.isFresh = false;
 +
          Parallax.requestRender();
 +
        })
 +
        .on('scroll.px.parallax load.px.parallax', function() {
 +
          loadScrollPosition();
 +
          Parallax.requestRender();
 +
        });
 +
 +
      loadDimensions();
 +
      loadScrollPosition();
 +
 +
      this.isReady = true;
 +
 +
      var lastPosition = -1;
 +
 +
      function frameLoop() {
 +
        if (lastPosition == window.pageYOffset) {  // Avoid overcalculations
 +
          window.requestAnimationFrame(frameLoop);
 +
          return false;
 +
        } else lastPosition = window.pageYOffset;
 +
 +
        self.render();
 +
        window.requestAnimationFrame(frameLoop);
 +
      }
 +
 +
      frameLoop();
 +
    },
 +
 +
    configure: function(options) {
 +
      if (typeof options == 'object') {
 +
        delete options.refresh;
 +
        delete options.render;
 +
        $.extend(this.prototype, options);
 +
      }
 +
    },
 +
 +
    refresh: function() {
 +
      $.each(this.sliders, function(){ this.refresh(); });
 +
      this.isFresh = true;
 +
    },
 +
 +
    render: function() {
 +
      this.isFresh || this.refresh();
 +
      $.each(this.sliders, function(){ this.render(); });
 +
    },
 +
 +
    requestRender: function() {
 +
      var self = this;
 +
      self.render();
 +
      self.isBusy = false;
 +
    },
 +
    destroy: function(el){
 +
      var i,
 +
          parallaxElement = $(el).data('px.parallax');
 +
      parallaxElement.$mirror.remove();
 +
      for(i=0; i < this.sliders.length; i+=1){
 +
        if(this.sliders[i] == parallaxElement){
 +
          this.sliders.splice(i, 1);
 +
        }
 +
      }
 +
      $(el).data('px.parallax', false);
 +
      if(this.sliders.length === 0){
 +
        $(window).off('scroll.px.parallax resize.px.parallax load.px.parallax');
 +
        this.isReady = false;
 +
        Parallax.isSetup = false;
 +
      }
 +
    }
 +
  });
 +
 +
 +
  // Parallax Plugin Definition
 +
 +
  function Plugin(option) {
 +
    return this.each(function () {
 +
      var $this = $(this);
 +
      var options = typeof option == 'object' && option;
 +
 +
      if (this == window || this == document || $this.is('body')) {
 +
        Parallax.configure(options);
 +
      }
 +
      else if (!$this.data('px.parallax')) {
 +
        options = $.extend({}, $this.data(), options);
 +
        $this.data('px.parallax', new Parallax(this, options));
 +
      }
 +
      else if (typeof option == 'object')
 +
      {
 +
        $.extend($this.data('px.parallax'), options);
 +
      }
 +
      if (typeof option == 'string') {
 +
        if(option == 'destroy'){
 +
            Parallax.destroy(this);
 +
        }else{
 +
          Parallax[option]();
 +
        }
 +
      }
 +
    });
 +
  }
 +
 +
  var old = $.fn.parallax;
 +
 +
  $.fn.parallax            = Plugin;
 +
  $.fn.parallax.Constructor = Parallax;
 +
 +
 +
  // Parallax No Conflict
 +
 +
  $.fn.parallax.noConflict = function () {
 +
    $.fn.parallax = old;
 +
    return this;
 +
  };
 +
 +
 +
  // Parallax Data-API
 +
 +
  $( function () {
 +
    $('[data-parallax="scroll"]').parallax();
 +
  });
 +
 +
}(jQuery, window, document));
 +
 
 +
    </script>
 
     <script>
 
     <script>
 
// When the user scrolls down 20px from the top of the document, show the button
 
// When the user scrolls down 20px from the top of the document, show the button

Revision as of 13:30, 22 August 2018

OriginALS

<!DOCTYPE html> OriginALS

Meet the Team

Daniel Deitch
Designer
Daniel Deitch
Designer
Daniel Deitch
Designer
Daniel Deitch
Designer
Daniel Deitch
Designer
Daniel Deitch
Designer
Daniel Deitch
Designer
Daniel Deitch
Designer
Daniel Deitch
Designer
Previous Next

Long Story Short

.logo { color: #f4511e; font-size: 200px; } .thumbnail { padding: 0 0 15px 0; border: none; border-radius: 0; } .thumbnail img { width: 100%; height: 100%; margin-bottom: 10px; } .carousel-control.right, .carousel-control.left { background-image: none; color: #f4511e; } .carousel-indicators li { border-color: #f4511e; } .carousel-indicators li.active { background-color: #f4511e; } .item h4 { font-size: 19px; line-height: 1.375em; font-weight: 400; font-style: italic; margin: 70px 0; } .item span { font-style: normal; } .panel { border: 1px solid #f4511e; border-radius:0 !important; transition: box-shadow 0.5s; } .panel:hover { box-shadow: 5px 0px 40px rgba(0,0,0, .2); } .panel-footer .btn:hover { border: 1px solid #f4511e; background-color: #fff !important; color: #f4511e; } .panel-heading { color: #fff !important; background-color: #f4511e !important; padding: 25px; border-bottom: 1px solid transparent; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; } .panel-footer { background-color: white !important; } .panel-footer h3 { font-size: 32px; } .panel-footer h4 { color: #aaa; font-size: 14px; } .panel-footer .btn { margin: 15px 0; background-color: #f4511e; color: #fff; } footer.bg-dark p { color:#ededed !important; } .navbar { margin-bottom: 10px; !important; background-color: #fff !important; z-index: 9999!important; border: 0 !important; text-transform:uppercase !important; border-radius: 0 !important; font-family: 'Segoe UI Light'!important; font-weight: 600!important; color:#000!important; padding-top:10px; } .navbar-brand { padding: 0px; } .navbar-brand>img { height: 100%; padding: 0 0 10px 20px; width: auto; } .navbar-nav li a:hover, .navbar-nav li.active a { color: #0186ac !important; background-color: #fff !important; } .navbar-default .navbar-toggle { border-color: transparent; color: #fff !important; } .slideanim {visibility:hidden;} .slide { animation-name: slide; -webkit-animation-name: slide; animation-duration: 1s; -webkit-animation-duration: 1s; visibility: visible; } @keyframes slide { 0% { opacity: 0; transform: translateY(70%); } 100% { opacity: 1; transform: translateY(0%); } } @-webkit-keyframes slide { 0% { opacity: 0; -webkit-transform: translateY(70%); } 100% { opacity: 1; -webkit-transform: translateY(0%); } } @media screen and (max-width: 768px) { .col-sm-4 { text-align: center; margin: 25px 0; } .btn-lg { width: 100%; margin-bottom: 35px; } } @media screen and (max-width: 480px) { .logo { font-size: 150px; } } header.masthead { padding-top: 10rem; padding-bottom: calc(10rem - 56px); background-image:url('https://static.igem.org/mediawiki/2018/2/2e/T--BGU_Israel--home_banner.jpg'); min-height: 600px; background-position: center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .parallax-window { min-height: 700px; background: transparent; } #abstract p, #abstract ol { text-align: justify; } #myBtn { display: none; position: fixed; bottom: 20px; right: 20px; z-index: 99; font-size: 16px; border: none; outline: none; background-color: #0186ac; color: white; cursor: pointer; padding: 12px 15px 12px 15px; border-radius: 100px; } #myBtn:hover { background-color: #555; } footer { background-color:#262626; color:#fff !important; } .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover { background: #fff !important; color:#0186ac !important; } .navbar-right .dropdown-menu { } #mainMenu .dropdown-menu { border:0 !important; right:auto !important; border-radius: 0 !important; text-transform: capitalize; font-size:18px; } @media screen and (min-width: 600px) { .dropdown:hover .dropdown-menu { display: block; margin-top: 0; color:#fff; } } .gray-section { background-color:#ededed; } .sub-page-header { padding-top: 10rem; padding-bottom: calc(10rem - 56px); background-image:url('https://static.igem.org/mediawiki/2018/2/2e/T--BGU_Israel--home_banner.jpg'); height:200px !important; background-position: top center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

host a group of high-school

Our project would not have succeeded without our Human Practices. Our goals and implementation were all a result of involvement in the communities around us and sharing our ideas through discussions with experts. Science cannot proceed unaided and cannot succeed without public support. As a final gesture, we were delighted to host a group of high-school students in our lab. We had a great time explaining to them about iGEM, our project, and our lab. Although we ourselves as undergraduate students are only at the beginning of our scientific careers, it was wonderful to transfer the knowledge we have gathered to a new generation.


title

lorem ipsum bf fd kdfdfkdflsdf

title

lorem ipsum bf fd kdfdfkdflsdf

title

lorem ipsum bf fd kdfdfkdflsdf

About OrignALS


Established in 2006, EchoSense Ltd. develops innovative ultrasound Doppler systems for the diagnosis and monitoring of cardiac and pulmonary diseases. EchoSense delivers a fast,reliable and non-invasive method of diagnosis and our technology has undergone successful clinical trials in the United States, Europe and Israel. The Echosense research and development center is based in Haifa, Israel.

    Keep in Touch

  • @iGEMBGU
  • @igem_2018_bgu
  • @originalsbgu
  • bgu_israel@gmail.com

    Address

  • Ben-Gurion University of the Negev
    Ben Gurion 1, Beer Sheva 8410501, Israel