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

 
(220 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
{{BGU_Israel}}
 
{{BGU_Israel}}
−
<!DOCTYPE html>
+
{{Template:BGU_Israel/header}}
 
<html lang="en">
 
<html lang="en">
 
<head>
 
<head>
 
    
 
    
−
  <title>OriginALS</title>
+
</head>
−
  <meta charset="utf-8">
+
<body>
−
   <meta name="viewport" content="width=device-width, initial-scale=1">
+
−
    <link type="text/css" rel="stylesheet" href="style.css">
+
   <header style="background-image:url('https://static.igem.org/mediawiki/2018/1/13/T--BGU_Israel--orange_subhead.png')!important;" class="sub-page-header text-center">
−
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+
      <div class="container my-auto">
−
  <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
+
          <h1 class="animated fadeInUp">Meet our Team</h1>
−
  <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
+
      </div>
−
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+
    </header>
−
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+
−
<style>
+
−
    body {
+
−
      font: 400 15px Segoe UI !important;
+
−
      line-height: 1.8;
+
−
      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;
+
<style>
−
        color:#000;
+
.bg-grey, #team-photos {
−
        padding: 60px 50px;
+
    margin-top:0 !important;
−
    }
+
−
    .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;
+
−
  }
+
−
  .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;
+
−
  }
+
−
  .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 {
+
#team-photos .thumbnail {
−
  height: 100%;
+
    margin:0 15px;
−
  padding: 0 0 10px 20px;
+
    padding-bottom:0;
−
  width: auto;
+
    background-color:#ededed;
 +
}
 +
#team-photos .thumbnail img {
 +
    margin:0;
 +
    padding:0;
 
}
 
}
−
  .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;}
+
#team-photos .thumbnail .caption {
−
  .slide {
+
    background-color:#333;
−
      animation-name: slide;
+
    position:relative;
−
      -webkit-animation-name: slide;
+
    color:#fff !important;
−
      animation-duration: 1s;
+
    margin-top:0 !important;
−
      -webkit-animation-duration: 1s;
+
     padding:0;
−
      visibility: visible;
+
    height:70px;
−
  }
+
     overflow:hidden;
−
  @keyframes slide {
+
     -webkit-transition: height 0.5s ease-out, background-color 0.5s;  
−
     0% {
+
     transition: height 0.5s ease-out, background-color 0.5s;
−
      opacity: 0;
+
}  
−
      transform: translateY(70%);
+
#team-photos .thumbnail .caption:after {
−
     }
+
  background-color:#ededed;
−
    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 {
+
#team-photos .thumbnail .caption h3 {
−
  padding-top: 10rem;
+
    font-family:'Segoe UI Light';
−
  padding-bottom: calc(10rem - 56px);
+
     text-transform:uppercase;
−
  background-image:url('https://static.igem.org/mediawiki/2018/2/2e/T--BGU_Israel--home_banner.jpg');
+
     font-weight:600;
−
width:100%;
+
     font-size:18px;
−
        overflow: hidden;
+
     margin-top:0 !important;
−
     min-height: 700px;  
+
     padding:15px 0 0 0;
−
     /* Create the parallax scrolling effect */
+
−
    background-attachment: fixed;
+
−
     background-position: center;
+
−
     background-repeat: no-repeat;
+
−
     background-size: cover;
+
 
      
 
      
 
}
 
}
−
      .parallax-window {
+
#team-photos .thumbnail .caption h5 {
−
     min-height: 700px;
+
     font-family:'Segoe UI Light';
−
     background: transparent;
+
     font-size:16px;
 +
font-weight: bold;
 +
    margin-top:0 !important;
 +
    padding:5px 0 5px 0;
 +
   
 
}
 
}
−
      #abstract p, #abstract ol {
+
#team-photos .thumbnail .caption p {
−
          text-align: justify;
+
    font-family:'Segoe UI';
−
      }
+
    font-size:14px;
−
      #myBtn {
+
    font-weight:400 !important;
−
  display: none;
+
    margin-top:0 !important;
−
         
+
    color:#fff !important;
−
  position: fixed;
+
    padding:5px 12px 5px 12px;
−
  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;
+
 
}
 
}
 +
#team-photos .thumbnail .caption:hover  {
 +
    background-color:#0186ac !important;
 +
    height:200px !important;
 +
  -webkit-transition: height 0.5s ease-in, background-color 0.5s;
 +
    transition: height 0.5s ease-in, background-color 0.5s;
 +
}
 +
@media screen and (max-width: 600px){
 +
    #team-photos .thumbnail {
 +
        margin-top:20px;
 +
    }
 +
}
 +
.arrow-right {
 +
-ms-transform: rotate(90deg); /* IE 9 */
 +
    -webkit-transform: rotate(90deg); /* Safari 3-8 */
 +
    transform: rotate(90deg);
 +
    margin-top: 70%
  
−
#myBtn:hover {
+
}
−
  background-color: #555;
+
.arrow-right img, .arrow-left img {
 +
width:30px;
 +
}
 +
.arrow-left{
 +
-ms-transform: rotate(270deg); /* IE 9 */
 +
    -webkit-transform: rotate(270deg); /* Safari 3-8 */
 +
    transform: rotate(270deg);
 +
    margin-top: 70%
 
}
 
}
  
−
    .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover {
+
.arrowdown {
−
        background: #fff !important;
+
  margin-left:42%;
−
        color:#0186ac !important;
+
  width: 0;
−
    }
+
  height: 0;
−
    .navbar-right .dropdown-menu {
+
  border-left: 15px solid transparent;
−
       
+
  border-right: 15px solid transparent;
−
    }
+
  background-color:#ededed;
−
@media screen and (min-width: 600px) {
+
  border-top: 20px solid #333;
−
    .dropdown:hover .dropdown-menu {
+
 
−
    display: block;
+
}
−
    margin-top: 0;
+
 
−
        color:#fff;
+
 
 +
#thumb:hover #arrow-daniel {
 +
  background-color:#ededed !important;
 
  }
 
  }
−
      #mainMenu .dropdown-menu {
 
−
        border:0 !important;
 
−
        right:auto !important;
 
−
        border-radius: 0 !important;
 
−
        text-transform: capitalize;
 
−
        font-size:18px;
 
−
    }
 
−
      #mainMenu .dropdown-menu li:hover {
 
−
        color:#0186ac !important;
 
−
          background: transparent;
 
−
    }
 
−
    }
 
−
    .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;
 
−
 
 
−
    /* Create the parallax scrolling effect */
 
−
    background-attachment: fixed;
 
−
background-position: top center;
 
−
    background-repeat: no-repeat;
 
−
    background-size: cover;
 
−
    }
 
−
    </style>
 
−
</head>
 
−
<body id="myPage"  data-spy="scroll" data-target=".navbar" data-offset="60">
 
−
    <div id="top"></div>
 
−
    <a id="myBtn"  href="#top" title="To Top">
 
−
    <span class="glyphicon glyphicon-chevron-up"></span>
 
−
  </a>
 
−
<nav id="mainMenu" class="navbar navbar-default navbar-fixed-top">
 
−
  <div class="container">
 
−
    <div class="navbar-header">
 
−
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
 
−
        <span class="icon-bar"></span>
 
−
        <span class="icon-bar"></span>
 
−
        <span class="icon-bar"></span>                       
 
−
      </button>
 
−
      <a class="navbar-brand" href="index.html"><img src="https://static.igem.org/mediawiki/2018/3/32/T--BGU_Israel--logo_colored.png"></a>
 
−
    </div>
 
−
    <div class="collapse navbar-collapse" id="myNavbar">
 
−
      <ul class="nav navbar-nav navbar-right">
 
−
        <li><a href="index.html">Home</a></li>
 
−
        <li class="dropdown">
 
−
        <a class="dropdown-toggle" data-toggle="dropdown" href="https://2018.igem.org/Team:BGU_Israel/Description">Project
 
−
        </a>
 
−
        <ul class="dropdown-menu pull-right">
 
−
          <li><a href="https://2018.igem.org/Team:BGU_Israel/Description ">Description</a></li>
 
−
          <li><a href="https://2018.igem.org/Team:BGU_Israel/Design">Design</a></li>
 
−
            <li><a href="https://2018.igem.org/Team:BGU_Israel/Results">Results</a></li>
 
−
          <li><a href="https://2018.igem.org/Team:BGU_ISRAEL/Protocols">Protocols</a></li>
 
−
            <li><a href="https://2018.igem.org/Team:BGU_ISRAEL/Notebook">Notebook</a></li>
 
−
           
 
−
        </ul>
 
−
      </li>
 
−
          <li class="dropdown">
 
−
        <a class="dropdown-toggle" data-toggle="dropdown" href="https://2018.igem.org/Team:BGU_Israel/Description">Team
 
−
        </a>
 
−
        <ul class="dropdown-menu pull-right">
 
−
          <li><a href="https://2018.igem.org/Team:BGU_Israel/Team">Members</a></li>
 
−
          <li><a href="https://2018.igem.org/Team:BGU_Israel/Collaborations">Collaborations</a></li>
 
−
        </ul>
 
−
      </li>
 
−
          <li class="dropdown">
 
−
        <a class="dropdown-toggle" data-toggle="dropdown" href="https://2018.igem.org/Team:BGU_Israel/Description">Parts
 
−
        </a>
 
−
        <ul class="dropdown-menu pull-right">
 
−
          <li><a href="https://2018.igem.org/Team:BGU_Israel/Parts">Team Parts</a></li>
 
−
          <li><a href="https://2018.igem.org/Team:BGU_Israel/BasicParts ">Basic Parts</a></li>
 
−
            <li><a href="https://2018.igem.org/Team:BGU_Israel/PartImprovement">Part Improvement</a></li>
 
−
          <li><a href="https://2018.igem.org/Team:BGU_Israel/PartCollection">Part Collection</a></li>
 
−
        </ul>
 
−
      </li>
 
  
−
  <li class="dropdown">
 
−
        <a class="dropdown-toggle" data-toggle="dropdown" href="https://2018.igem.org/Team:BGU_Israel/Description">Practices
 
  
−
        </a>
 
−
        <ul class="dropdown-menu pull-right">
 
−
          <li><a href="https://2018.igem.org/Team:BGU_ISRAEL/ALSConference">ALS Conference</a></li>
 
−
          <li><a href="https://2018.igem.org/Team:BGU_ISRAEL/ALSFunding">Funding Race</a></li>
 
−
            <li><a href="https://2018.igem.org/Team:BGU_Israel/InterLab">InterLab</a></li>
 
−
          <li><a href="https://2018.igem.org/Team:BGU_ISRAEL/EthicsAndSafety">Ethics and Safty</a></li>
 
−
        </ul>
 
−
      </li>
 
−
        <li><a href="https://2018.igem.org/Team:BGU_ISRAEL/Attributions">Attributions</a></li>
 
−
          <!--<li><a href="https://2018.igem.org/Team:BGU_ISRAEL/Achievments">Achievments</a></li>-->
 
−
      </ul>
 
−
    </div>
 
−
  </div>
 
−
</nav>
 
−
  <header  class="sub-page-header text-center">
 
−
      <div class="container my-auto">
 
−
          <h1>Meet the Team</h1>
 
−
      </div>
 
−
    </header>
 
−
    <script>
 
−
   
 
−
</script>
 
−
<!-- Container (About Section) -->
 
−
    <style>
 
−
  .img-container {
 
−
  position:relative;
 
−
  height:250px;
 
−
  width:250px;
 
−
  margin:0 auto;
 
−
}
 
  
−
.img-container img {
 
−
  position:absolute;
 
−
  display: block;
 
−
  left:0;
 
−
  -webkit-transition: opacity 1s ease-in-out;
 
−
  -moz-transition: opacity 1s ease-in-out;
 
−
  -o-transition: opacity 1s ease-in-out;
 
−
  transition: opacity 1s ease-in-out;
 
−
    height:250px;
 
−
  width:250px;
 
−
}
 
  
−
.img-container img.top:hover  {
+
 
−
  opacity:0;
+
 
 +
 
 +
 
 +
#sup-photos .thumbnail {
 +
    margin:0 15px;
 +
    padding-bottom:0;
 +
    background-color:#ededed;
 
}
 
}
−
.img-overlay:hover ~ #img-container img.top {
+
#tsup-photos .thumbnail img {
−
opacity:0;
+
    margin:0;
 +
    padding:0;
 
}
 
}
  
 +
#sup-photos .thumbnail .caption {
 +
    background-color:#333;
 +
    position:relative;
 +
    color:#fff !important;
 +
    margin-top:0 !important;
 +
    padding:0;
 +
    height:85px;
 +
    overflow:hidden;
 +
}
  
−
.img-overlay {
+
#sup-photos .thumbnail .caption h3 {
−
  position: absolute;
+
    font-family:'Segoe UI Light';
−
  bottom: 0;
+
    text-transform:uppercase;
−
  left: 0;
+
    font-weight:600;
−
  right: 0;
+
    font-size:18px;
−
  background-color: rgba(1,134,172, 0.5);
+
    margin-top:0 !important;
−
  overflow: hidden;
+
    padding:15px 0 0 0;
−
  width: 100%;
+
   
−
  height: 0%;
+
−
  transition: .5s ease;
+
 
}
 
}
 +
#sup-photos .thumbnail .caption h5 {
 +
    font-family:'Segoe UI light';
 +
    font-size:16px;
  
−
.img-container:hover .img-overlay {
+
    margin-top:0 !important;
−
  height: 30%;
+
    padding:5px 0 5px 0;
 +
   
 
}
 
}
−
 
+
#sup-photos .thumbnail .caption p {
−
.img-overlay-txt {
+
    font-family:'Segoe UI';
−
  color: white;
+
    font-size:14px;
−
  font-size: 20px;
+
    font-weight:400 !important;
−
  position: absolute;
+
    margin-top:0 !important;
−
  top: 50%;
+
    color:#fff !important;
−
  left: 50%;
+
    padding:5px 12px 5px 12px;
−
  -webkit-transform: translate(-50%, -50%);
+
   
−
  -ms-transform: translate(-50%, -50%);
+
−
  transform: translate(-50%, -50%);
+
−
  text-align: center;
+
 
}
 
}
−
        #team-photos {
+
 
−
            margin-top:30px;
+
 
−
            margin-bottom:30px;
+
−
        }
+
−
        #team-photos .carousel-inner {
+
−
            width:80%;
+
−
            margin-top: 50px;
+
−
            margin-bottom:50px;
+
−
            margin-left:10%;
+
−
            margin-right:10%;
+
−
        }
+
−
        #team-photos .carousel-indicators {
+
−
            bottom:-50px;
+
−
        }
+
−
        #team-photos .carousel-indicators li {
+
−
            border-color:#0186ac;
+
−
        }
+
−
        #team-photos .carousel-indicators li.active {
+
−
            background-color:#0186ac;
+
−
        }
+
−
        #team-photos .carousel-control {
+
−
            color:#0186ac;
+
−
            text-shadow: none;
+
−
        }
+
 
</style>
 
</style>
−
     <div id="team-photos" class="container">
+
<!-- Container (About Section) -->
 +
   
 +
     <div id="team-photos" class="bg-grey">
 +
<div class="container">
 
     <div id="myCarousel" class="carousel slide text-center" data-ride="carousel">
 
     <div id="myCarousel" class="carousel slide text-center" data-ride="carousel">
−
     <!-- Indicators -->
+
      
−
    <ol class="carousel-indicators">
+
−
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
+
−
      <li data-target="#myCarousel" data-slide-to="1"></li>
+
−
      <li data-target="#myCarousel" data-slide-to="2"></li>
+
−
    </ol>
+
  
−
     <!-- Wrapper for slides -->
+
     <!-- MorP-->
 
     <div class="carousel-inner" role="listbox">
 
     <div class="carousel-inner" role="listbox">
−
       <div class="item active">
+
       <div class="item active" style="background:#ededed!important">
 
         <div class="row">
 
         <div class="row">
−
<div class="col-sm-4">
+
<div class="col-sm-6 col-md-4">
−
     <div class="img-container">
+
     <div id="thumb" class="thumbnail">
−
        <img class="bottom" src="https://static.igem.org/mediawiki/2018/a/a3/T--BGU_Israel--team_avi_color.jpg" />
+
      <img src="https://static.igem.org/mediawiki/2018/0/00/T--BGU_Israel--team_morp_color.jpg" alt="...">
−
        <div class="img-overlay">
+
      <div id="caption-daniel" class="caption">
−
    <div class="img-overlay-txt">Avital Bailen
+
        <h3>Mor Pasi</h3>
−
    <br> Position <br> </div>
+
        <h5>Team Leader<h5>
 +
        <p style="text-align:left!important;font-size:14px!important">
 +
<u>Degree</u>: Biotechnology engineering<br/>
 +
<u>Super name</u>: Plasmida<br/>
 +
<u>Power</u>: Uses the Plasmids of Justice to introduce a bit of logic into each cell that dares to confront her.<br/></p>
 +
      </div>
 +
     
 +
    </div>
 
   </div>
 
   </div>
−
  <img class="top" src="https://static.igem.org/mediawiki/2018/7/7a/T--BGU_Israel--team_avi_bw.jpg" />
+
<!-- Liat -->
−
 
+
<div class="col-sm-6 col-md-4">
−
</div>
+
     <div class="thumbnail">
−
</div>
+
      <img src="https://static.igem.org/mediawiki/2018/7/76/T--BGU_Israel--team_lia_color.jpg" alt="...">
−
<!-- Daniel -->
+
      <div class="caption">
−
<div class="col-sm-4">
+
        <h3>Liat Tsoran</h3>
−
     <div class="img-container">
+
        <h5>Project Idea<h5>
−
        <img class="bottom" src="https://static.igem.org/mediawiki/2018/b/b2/T--BGU_Israel--team_dan_color.jpg" />
+
                <p style="text-align:left!important;font-size:14px!important">
−
        <div class="img-overlay">
+
<u>Degree</u>: Biology<br/>
−
    <div class="img-overlay-txt">Daniel Deitch
+
<u>Super name</u>: Glia-girl<br/>
−
    <br> Designer <br> </div>
+
<u>Power</u>: Can telepathically control all the nervous system cells of her enemies – she will blow your mind.</p>
 +
      </div>
 +
     
 +
    </div>
 
   </div>
 
   </div>
−
  <img class="top" src="https://static.igem.org/mediawiki/2018/3/31/T--BGU_Israel--team_dan_bw.jpg" />
 
−
</div>
 
−
</div>
 
  
−
<!-- Einan -->
+
<!-- Nitzan -->
−
<div class="col-sm-4">
+
<div class="col-sm-6 col-md-4">
−
     <div class="img-container">
+
     <div class="thumbnail">
−
        <img class="bottom" src="https://static.igem.org/mediawiki/2018/2/2e/T--BGU_Israel--team_ein_color.jpg" />
+
      <img src="https://static.igem.org/mediawiki/2018/e/e6/T--BGU_Israel--team_nit_color.jpg" alt="...">
−
        <div class="img-overlay">
+
      <div class="caption">
−
    <div class="img-overlay-txt">einan farhi
+
        <h3>Nitzan Keidar</h3>
−
    <br> Position <br> </div>
+
        <h5>Promotor assays<h5>
−
  </div>
+
                <p style="text-align:left!important;font-size:14px!important">
−
  <img class="top" src="https://static.igem.org/mediawiki/2018/2/2c/T--BGU_Israel--team_ein_bw.jpg" />
+
<u>Degree</u>: Biology<br/>
−
 
+
<u>Super name</u>: UV woman<br/>
 +
<u>Power</u>: Her eyes radiate UV rays that can sterilize any surface in a blink of an eye and give a great suntan.</p>
 +
      </div>
 
        
 
        
−
</div>
+
    </div>
−
</div>
+
  </div>
 
     </div>
 
     </div>
 
       </div>
 
       </div>
  
−
<!-- Liat -->
+
<!-- MorS -->
−
       <div class="item">
+
       <div class="item" style="background:#ededed!important">
 
         <div class="row">
 
         <div class="row">
−
<div class="col-sm-4">
+
<div class="col-sm-6 col-md-4">
−
<div class="img-container">
+
    <div class="thumbnail">
−
        <img class="bottom" src="https://static.igem.org/mediawiki/2018/7/76/T--BGU_Israel--team_lia_color.jpg" />
+
      <img src="https://static.igem.org/mediawiki/2018/e/e7/T--BGU_Israel--team_mors_color.jpg" alt="...">
−
        <div class="img-overlay">
+
      <div class="caption">
−
    <div class="img-overlay-txt">Liat Tsoran
+
        <h3>Mor Sela</h3>
−
    <br> Position <br> </div>
+
        <h5>Astrocyte Activation<h5>
 +
<p style="text-align:left!important;font-size:14px!important">
 +
<u>Degree</u>: Chemistry <br/>
 +
<u>Super name</u>: Reagenta<br/>
 +
<u>Power</u>: Chemistry superhero! She can make reagents and solution from thin air and uses them for her advantage.</p>
 +
      </div>
 +
     
 +
    </div>
 
   </div>
 
   </div>
−
  <img class="top" src="https://static.igem.org/mediawiki/2018/4/4f/T--BGU_Israel--team_lia_bw.jpg"/>
 
−
</div>
 
−
</div>
 
  
−
<!-- MorP -->   
+
<!-- Ori -->   
−
  <div class="col-sm-4">
+
  <div class="col-sm-6 col-md-4">
−
  <div class="img-container">
+
    <div class="thumbnail">
−
        <img class="bottom" src="https://static.igem.org/mediawiki/2018/0/00/T--BGU_Israel--team_morp_color.jpg" />
+
      <img src="https://static.igem.org/mediawiki/2018/a/af/T--BGU_Israel--team_ori_color.jpg" alt="...">
−
        <div class="img-overlay">
+
      <div class="caption">
−
    <div class="img-overlay-txt">Mor Pasi
+
        <h3>Ori tulchinsky</h3>
−
    <br> Position <br> </div>
+
        <h5>Virus Infections<h5>
 +
        <p style="text-align:left!important;font-size:14px!important">
 +
<u>Degree</u>: Medicine<br/>
 +
<u>Super name</u>: Virio<br/>
 +
<u>Power</u>: Evil genius who uses engineered viruses that allow him to infect innocent people and control their thoughts</p>
 +
      </div>
 +
     
 +
    </div>
 
   </div>
 
   </div>
−
  <img class="top" src="https://static.igem.org/mediawiki/2018/7/7c/T--BGU_Israel--team_morp_bw.jpg" />
 
−
   
 
−
</div>
 
−
</div>
 
  
−
<!-- MorS -->  
+
<!-- Daniel -->  
−
<div class="col-sm-4">
+
<div class="col-sm-6 col-md-4">
−
<div class="img-container">
+
    <div class="thumbnail">
−
        <img class="bottom" src="https://static.igem.org/mediawiki/2018/e/e7/T--BGU_Israel--team_mors_color.jpg" />
+
      <img src="https://static.igem.org/mediawiki/2018/b/b2/T--BGU_Israel--team_dan_color.jpg" alt="...">
−
        <div class="img-overlay">
+
      <div class="caption">
−
    <div class="img-overlay-txt">Mor Sela
+
        <h3>Daniel Deitch</h3>
−
    <br> Position <br> </div>
+
        <h5>Designer<h5>
 +
      <p style="text-align:left!important;font-size:14px!important">
 +
<u>Degree</u>: Biology-Psychology<br/>
 +
<u>Super name</u>: Agar Boi<br/>
 +
<u>Power</u>: A powerful superhero that can shoot hot agarose from its hands, when its cools, the criminals get stuck in the gel!</p>
 +
      </div>
 +
     
 +
    </div>
 
   </div>
 
   </div>
−
  <img class="top" src="https://static.igem.org/mediawiki/2018/a/a2/T--BGU_Israel--team_mors_bw.jpg" />   
 
−
</div>
 
−
</div>
 
 
     </div>
 
     </div>
 
       </div>
 
       </div>
  
−
<!-- Nitzan -->  
+
<!-- Avital -->  
−
       <div class="item">
+
       <div class="item" style="background:#ededed!important">
 
           <div class="row">
 
           <div class="row">
−
<div class="col-sm-4">
+
<div class="col-sm-6 col-md-4">
−
  <div class="img-container">
+
    <div class="thumbnail">
−
        <img class="bottom" src="https://static.igem.org/mediawiki/2018/e/e6/T--BGU_Israel--team_nit_color.jpg" />
+
      <img src="https://static.igem.org/mediawiki/2018/a/a3/T--BGU_Israel--team_avi_color.jpg" alt="...">
−
        <div class="img-overlay">
+
      <div class="caption">
−
    <div class="img-overlay-txt">Nitzan Keidar
+
        <h3>Avital Bailen</h3>
−
    <br> Position <br> </div>
+
        <h5>Human Practices<h5>
 +
      <p style="text-align:left!important;font-size:14px!important">
 +
<u>Degree</u>: Biology<br/>
 +
<u>Super name</u>: Falcon girl<br/>
 +
<u>Power</u>: A talented sniper who uses her Falcon rifle to hit a target from miles. Specializes in 50 ml rounds.</p>
 +
      </div>
 +
     
 +
    </div>
 
   </div>
 
   </div>
−
  <img class="top" src="https://static.igem.org/mediawiki/2018/8/8c/T--BGU_Israel--team_nit_bw.jpg" />   
 
−
</div>
 
−
</div>
 
−
 
−
<!-- Ori -->
 
−
<div class=
 
−
"col-sm-4">
 
−
  <div class="img-container">
 
−
        <img class="bottom" src="https://static.igem.org/mediawiki/2018/a/af/T--BGU_Israel--team_ori_color.jpg" />
 
−
        <div class="img-overlay">
 
−
    <div class="img-overlay-txt">Ori Tulchinsky
 
−
    <br> Position <br> </div>
 
−
  </div>
 
−
  <img class="top" src="https://static.igem.org/mediawiki/2018/7/76/T--BGU_Israel--team_ori_bw.jpg" />
 
−
</div>
 
−
</div>
 
  
 
<!-- Sagi -->  
 
<!-- Sagi -->  
−
<div class="col-sm-4">
+
<div class="col-sm-6 col-md-4">
−
  <div class="img-container">
+
    <div class="thumbnail">
−
        <img class="bottom" src="https://static.igem.org/mediawiki/2018/8/81/T--BGU_Israel--team_sag_color.jpg" />
+
      <img src="https://static.igem.org/mediawiki/2018/8/81/T--BGU_Israel--team_sag_color.jpg" alt="...">
−
         <div class="img-overlay">
+
      <div class="caption">
−
     <div class="img-overlay-txt">sagi angel
+
        <h3>Sagi Angel</h3>
−
    <br> Position <br> </div>
+
         <h5>Social Media<h5>
 +
      <p style="text-align:left!important;font-size:14px!important">
 +
<u>Degree</u>: Biotechnology engineering<br/>
 +
<u>Super name</u>: Incubato<br/>
 +
<u>Power</u>: With the amazing power of heating things to exactly 37C and to vibrate his hands at 240 rpm.</p>
 +
      </div>
 +
     
 +
    </div>
 +
  </div>
 +
<!-- Einan -->
 +
<div class="col-sm-6 col-md-4">
 +
     <div class="thumbnail">
 +
      <img src="https://static.igem.org/mediawiki/2018/2/2e/T--BGU_Israel--team_ein_color.jpg" alt="...">
 +
      <div class="caption">
 +
        <h3>Einan Farhi</h3>
 +
        <h5>Transfections<h5>
 +
      <p style="text-align:left!important;font-size:14px!important">
 +
<u>Degree</u>: Biology<br/>
 +
<u>Super name</u>: Articleman<br/>
 +
<u>Power</u>: Remember every article he touches and uses the knowledge he earn to outwit his opponents.</p>
 +
      </div>
 +
     
 +
    </div>
 
   </div>
 
   </div>
−
  <img class="top" src="https://static.igem.org/mediawiki/2018/d/d3/T--BGU_Israel--team_sag_bw.jpg" />
 
−
 
 
−
</div>
 
−
</div>
 
 
     </div>
 
     </div>
 
       </div>
 
       </div>
Line 595: Line 334:
 
     <!-- Left and right controls -->
 
     <!-- Left and right controls -->
 
     <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
 
     <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
−
       <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
+
       <div class="arrow-left">
−
      <span class="sr-only">Previous</span>
+
<img src="https://static.igem.org/mediawiki/2018/0/0d/T--BGU_Israel--team_arrow_dark.png">
 +
</img></div>
 +
     
 
     </a>
 
     </a>
 
     <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
 
     <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
−
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
+
          <div class="arrow-right">
−
      <span class="sr-only">Next</span>
+
<img src="https://static.igem.org/mediawiki/2018/0/0d/T--BGU_Israel--team_arrow_dark.png">
 +
</img></div>
 +
 
 
     </a>
 
     </a>
 
   </div>
 
   </div>
 
</div>
 
</div>
−
<div id="abstract" class="container text-center">
 
−
 
 
</div>
 
</div>
 +
</div>
 +
</div>
 +
  
−
       <div class="bg-grey">
+
       <div class="bg-white">
 
<div class="container text-center">
 
<div class="container text-center">
 
   <div class="row">
 
   <div class="row">
 
       <h1>Supervisors</h1>
 
       <h1>Supervisors</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>
−
     <div class="row">
+
     <div id="sup-photos"  class="row">
−
     <div class="col-sm-4">
+
     <div class="col-sm-3">
−
        <img src="dark-lab.jpg" class="img-responsive">  
+
<div class="thumbnail">
−
         <h3>title</h3>
+
      <img src="https://static.igem.org/mediawiki/2018/f/f1/T--BGU_Israel--team_lital.png" alt="...">
−
         <p>lorem ipsum bf fd kdfdfkdflsdf</p>
+
      <div class="caption">
 +
         <h3>PROF. LITAL ALFONTA</h3>
 +
         <h5><b>Principal Investigator</b><h5><br/><br/>
 
         </div>
 
         </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 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>
 
−
</div>
 
  
  
−
<style>
 
−
    .footer-list {
 
−
        list-style: none;
 
−
        color:#fff;
 
−
    }
 
−
    .footer-list-item {
 
−
        padding:20px 0 20px 0 !important;
 
−
        border-bottom: 1px solid #fff;
 
−
    }
 
−
    .footer-list .footer-list-item:last-child {
 
−
        border:0;
 
−
    }
 
−
    .container-fluid {
 
−
      padding: 60px 50px;
 
−
  }
 
  
−
     .bg-grey {
+
     <div class="col-sm-3">
−
        background-color:#ededed;
+
<div class="thumbnail">
−
        color:#000;
+
      <img src="https://static.igem.org/mediawiki/2018/a/af/T--BGU_Israel--team_ramon.png" alt="...">
−
        padding: 60px 50px;
+
       <div class="caption">
−
    }
+
         <h3>Dr. Ramon Birnbaum</h3>
−
    .bg-white {
+
         <h5><b>Principal Investigator</b><h5><br/><br/>
−
        background-color:#fff;
+
         </div>
−
        color:#000;
+
         </div>
−
        padding: 60px 50px;
+
         </div>
−
    }
+
−
    .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>
+
    <div class="col-sm-3">
 +
<div class="thumbnail">
 +
      <img src="https://static.igem.org/mediawiki/2018/7/74/T--BGU_Israel--team_dror.png" alt="...">
 +
      <div class="caption">
 +
        <h3>Dror Aizik</h3>
 +
        <h5><b>Instructor</b><h5><br/><br/>
 +
        </div>
 +
        </div>
 +
        </div>
  
−
<footer class="bg-dark">
+
     <div class="col-sm-3">
−
    <div  class="container my-auto">
+
<div class="thumbnail">
−
<div class="row">
+
      <img src="https://static.igem.org/mediawiki/2018/3/34/T--BGU_Israel--team_eden.png" alt="...">
−
     <div class="col-md-4">
+
      <div class="caption">
−
        <h3>About OrignALS</h3>
+
        <h3>Eden Ozer</h3>
−
        <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>
+
        <h5><b>Instructor</b><h5><br/><br/>
−
        <img class="responsive-img" src="https://static.igem.org/mediawiki/2018/f/f0/T--BGU_Israel--originals_white.png" width="50%">
+
        </div>
−
       
+
        </div>
−
        <img class="img-responsive" src="">
+
−
    </div>
+
−
    <div class="col-md-4">
+
−
    <ul class="footer-list">
+
−
        <h3>Keep in Touch</h3>
+
−
       
+
−
  <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>
+
−
    </div>
+
−
    <div class="col-md-4">
+
−
    <ul class="footer-list">
+
−
        <h3>Address</h3>
+
−
  <li class="footer-list-item">Ben-Gurion University of the Negev<br>
+
−
Ben Gurion 1, Beer Sheva 8410501, Israel</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>
+
−
    </div>
+
−
   
+
−
</div>
+
 
         </div>
 
         </div>
−
</footer>
 
  
−
<script>
+
     </div>
−
$(document).ready(function(){
+
</div>
−
  // Add smooth scrolling to all links in navbar + footer link
+
</div>
−
  $(".navbar a, #myBtn[href='#top']").on('click', function(event) {
+
−
     // Make sure this.hash has a value before overriding default behavior
+
−
    if (this.hash !== "") {
+
−
      // Prevent default anchor click behavior
+
−
      event.preventDefault();
+
−
 
+
−
      // Store hash
+
−
      var hash = this.hash;
+
−
 
+
−
      // Using jQuery's animate() method to add smooth page scroll
+
−
      // The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area
+
−
      $('html, body').animate({
+
−
        scrollTop: $(hash).offset().top
+
−
      }, 500, function(){
+
−
 
+
−
        // Add hash (#) to URL when done scrolling (default click behavior)
+
−
        window.location.hash = hash;
+
−
      });
+
−
    } // End if
+
−
  });
+
−
 
+
−
  $(window).scroll(function() {
+
−
    $(".slideanim").each(function(){
+
−
      var pos = $(this).offset().top;
+
−
 
+
−
      var winTop = $(window).scrollTop();
+
−
        if (pos < winTop + 600) {
+
−
          $(this).addClass("slide");
+
−
        }
+
−
    });
+
−
  });
+
−
})
+
−
</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>
+
−
// When the user scrolls down 20px from the top of the document, show the button
+
−
$(window).scroll(function() {
+
−
    if ($(this).scrollTop() > 20) {
+
−
        $('#myBtn').fadeIn(400);
+
−
    } else {
+
−
        $('#myBtn').fadeOut(400);
+
−
    }
+
−
});
+
  
−
</script>
 
 
</body>
 
</body>
 
</html>
 
</html>
 +
{{Template:BGU_Israel/footer}}

Latest revision as of 18:19, 17 October 2018

OriginALS

OriginALS

Meet our Team

...

Mor Pasi

Team Leader

Degree: Biotechnology engineering
Super name: Plasmida
Power: Uses the Plasmids of Justice to introduce a bit of logic into each cell that dares to confront her.

...

Liat Tsoran

Project Idea

Degree: Biology
Super name: Glia-girl
Power: Can telepathically control all the nervous system cells of her enemies – she will blow your mind.

...

Nitzan Keidar

Promotor assays

Degree: Biology
Super name: UV woman
Power: Her eyes radiate UV rays that can sterilize any surface in a blink of an eye and give a great suntan.

...

Mor Sela

Astrocyte Activation

Degree: Chemistry
Super name: Reagenta
Power: Chemistry superhero! She can make reagents and solution from thin air and uses them for her advantage.

...

Ori tulchinsky

Virus Infections

Degree: Medicine
Super name: Virio
Power: Evil genius who uses engineered viruses that allow him to infect innocent people and control their thoughts

...

Daniel Deitch

Designer

Degree: Biology-Psychology
Super name: Agar Boi
Power: A powerful superhero that can shoot hot agarose from its hands, when its cools, the criminals get stuck in the gel!

...

Avital Bailen

Human Practices

Degree: Biology
Super name: Falcon girl
Power: A talented sniper who uses her Falcon rifle to hit a target from miles. Specializes in 50 ml rounds.

...

Sagi Angel

Social Media

Degree: Biotechnology engineering
Super name: Incubato
Power: With the amazing power of heating things to exactly 37C and to vibrate his hands at 240 rpm.

...

Einan Farhi

Transfections

Degree: Biology
Super name: Articleman
Power: Remember every article he touches and uses the knowledge he earn to outwit his opponents.

Supervisors

...

PROF. LITAL ALFONTA

Principal Investigator


...

Dr. Ramon Birnbaum

Principal Investigator


...

Dror Aizik

Instructor


...

Eden Ozer

Instructor


OriginALS

About Us


The BGU-iGEM team “OriginALS” hopes to develop an innovative therapeutic approach to prolong the life expectancy of ALS patients, using Synthetic Biology. We are dedicated to promoting ALS awareness and research in Israel through public engagement and educational activities.

    Keep in Touch

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

    Address

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