Difference between revisions of "Team:BGU Israel"

Line 2: Line 2:
  
 
<html lang="en">
 
<html lang="en">
−
<head>
 
−
  <!-- Theme Made By www.w3schools.com - No Copyright -->
 
−
  <title>Bootstrap Theme Company Page</title>
 
−
  <meta charset="utf-8">
 
−
  <meta name="viewport" content="width=device-width, initial-scale=1">
 
−
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
−
  <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
 
−
  <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
 
−
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 
−
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 
−
  <style>
 
−
  body {
 
−
      font: 400 15px Lato, sans-serif;
 
−
      line-height: 1.8;
 
−
      color: #818181;
 
  
 +
  <head>
 +
 +
    <meta charset="utf-8">
 +
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 +
    <meta name="description" content="">
 +
    <meta name="author" content="">
 +
 +
    <title>OriginALS</title>
 +
 +
 
 +
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
 +
 +
 +
   
 +
 +
    <!-- Custom styles for this template -->
 +
    <style>
 +
      body,
 +
html {
 +
  width: 100%;
 +
  height: 100%;
 +
}
 +
 +
body {
 +
  font-family: 'Segoe UI Light';
 +
}
 +
 +
hr {
 +
  max-width: 60px;
 +
  border-width: 1px;
 +
  border-color: #0186ac;
 +
}
 +
 +
hr.light {
 +
  border-color: #fff;
 +
}
 +
hr.dark {
 +
    border-color:#262626
 +
}
 +
 +
a {
 +
  color: #0186ac;
 +
  -webkit-transition: all 0.2s;
 +
  -moz-transition: all 0.2s;
 +
  transition: all 0.2s;
 +
}
 +
 +
a:hover {
 +
  color: #0186ac;
 +
    text-decoration: none;
 +
}
 +
 +
p{
 +
    font-size:1.2rem;
 +
}
 +
ol {
 +
  font-size:1.2rem;
 +
}
 +
.justified {
 +
    text-align: justify;
 +
}
 +
h1,
 +
h2,
 +
h3,
 +
h4,
 +
h5,
 +
h6 {
 +
  font-family: 'Segoe UI Light';
 +
   
 +
}
 +
 +
.bg-primary {
 +
  background-color: #0186ac !important;
 +
}
 +
 +
.bg-dark {
 +
  background-color: #212529 !important;
 +
}
 +
 +
.text-faded {
 +
  color: rgba(255, 255, 255, 0.7);
 +
}
 +
.text-white {
 +
    color: rgba(255, 255, 255);
 +
}
 +
section {
 +
  padding: 8rem 0;
 +
}
 +
 +
.section-heading {
 +
  margin-top: 0;
 +
}
 +
 +
::-moz-selection {
 +
  color: #fff;
 +
  background: #212529;
 +
  text-shadow: none;
 +
}
 +
 +
::selection {
 +
  color: #fff;
 +
  background: #212529;
 +
  text-shadow: none;
 +
}
 +
 +
img::selection {
 +
  color: #fff;
 +
  background: transparent;
 +
}
 +
 +
img::-moz-selection {
 +
  color: #fff;
 +
  background: transparent;
 +
}
 +
 +
#mainNav {
 +
  border-bottom: 1px solid rgba(33, 37, 41, 0.1);
 +
  background-color: #fff;
 +
  font-family:  'Segoe UI', Calibri;
 +
    padding-left:0;
 +
 
 +
}
 +
 +
#mainNav .navbar-brand {
 +
 
 +
  text-transform: uppercase;
 +
  color: #0186ac;
 +
 
 +
}
 +
 +
#mainNav .navbar-brand:focus, #mainNav .navbar-brand:hover {
 +
  color: #0186ac;
 +
}
 +
 +
#mainNav .navbar-nav > li.nav-item > a.nav-link,
 +
#mainNav .navbar-nav > li.nav-item > a.nav-link:focus {
 +
  font-size: 1.rem;
 +
  text-transform: uppercase;
 +
  color: #212529 !important;
 +
font-weight:bold;
 +
}
 +
 +
#mainNav .navbar-nav > li.nav-item > a.nav-link:hover,
 +
#mainNav .navbar-nav > li.nav-item > a.nav-link:focus:hover {
 +
  color: #0186ac;
 +
}
 +
 +
#mainNav .navbar-nav > li.nav-item > a.nav-link.active,
 +
#mainNav .navbar-nav > li.nav-item > a.nav-link:focus.active {
 +
  color: #0186ac !important;
 +
  background-color: transparent;
 +
}
 +
 +
#mainNav .navbar-nav > li.nav-item > a.nav-link.active:hover,
 +
#mainNav .navbar-nav > li.nav-item > a.nav-link:focus.active:hover {
 +
  background-color: transparent;
 +
}
 +
 +
@media (min-width: 992px) {
 +
  #mainNav {
 +
    border-color: transparent;
 +
    background-color: transparent;
 
   }
 
   }
−
   h2 {
+
   #mainNav .navbar-brand {
−
      font-size: 24px;
+
    color: #434343;
−
      text-transform: uppercase;
+
−
      color: #303030;
+
−
      font-weight: 600;
+
−
      margin-bottom: 30px;
+
 
   }
 
   }
−
   h4 {
+
   #mainNav .navbar-brand:focus, #mainNav .navbar-brand:hover {
−
      font-size: 19px;
+
    color: #fff;
−
      line-height: 1.375em;
+
−
      color: #303030;
+
−
      font-weight: 400;
+
−
      margin-bottom: 30px;
+
−
  } 
+
−
  .jumbotron {
+
−
      background-color: #f4511e;
+
−
      color: #fff;
+
−
      padding: 100px 25px;
+
−
      font-family: Montserrat, sans-serif;
+
 
   }
 
   }
−
   .container-fluid {
+
   #mainNav .navbar-nav > li.nav-item > a.nav-link {
−
      padding: 60px 50px;
+
    padding: 0.5rem 1rem;
 
   }
 
   }
−
   .bg-grey {
+
   #mainNav .navbar-nav > li.nav-item > a.nav-link,
−
      background-color: #f6f6f6;
+
  #mainNav .navbar-nav > li.nav-item > a.nav-link:focus {
 +
    color: rgba(255, 255, 255, 0.7);
 
   }
 
   }
−
   .logo-small {
+
   #mainNav .navbar-nav > li.nav-item > a.nav-link:hover,
−
      color: #f4511e;
+
  #mainNav .navbar-nav > li.nav-item > a.nav-link:focus:hover {
−
      font-size: 50px;
+
    color: #fff;
 
   }
 
   }
−
   .logo {
+
   #mainNav.navbar-shrink {
−
      color: #f4511e;
+
    border-bottom: 1px solid rgba(33, 37, 41, 0.1);
−
      font-size: 200px;
+
    background-color: #fff;
 
   }
 
   }
−
   .thumbnail {
+
   #mainNav.navbar-shrink .navbar-brand {
−
      padding: 0 0 15px 0;
+
    color: #0186ac;
−
      border: none;
+
−
      border-radius: 0;
+
 
   }
 
   }
−
   .thumbnail img {
+
   #mainNav.navbar-shrink .navbar-brand:focus, #mainNav.navbar-shrink .navbar-brand:hover {
−
      width: 100%;
+
    color: #0186ac;
−
      height: 100%;
+
−
      margin-bottom: 10px;
+
 
   }
 
   }
−
   .carousel-control.right, .carousel-control.left {
+
   #mainNav.navbar-shrink .navbar-nav > li.nav-item > a.nav-link,
−
      background-image: none;
+
  #mainNav.navbar-shrink .navbar-nav > li.nav-item > a.nav-link:focus {
−
      color: #f4511e;
+
    color: #212529;
 
   }
 
   }
−
   .carousel-indicators li {
+
   #mainNav.navbar-shrink .navbar-nav > li.nav-item > a.nav-link:hover,
−
      border-color: #f4511e;
+
  #mainNav.navbar-shrink .navbar-nav > li.nav-item > a.nav-link:focus:hover {
 +
    color: #0186ac;
 
   }
 
   }
−
   .carousel-indicators li.active {
+
}
−
      background-color: #f4511e;
+
 
 +
header.masthead {
 +
   padding-top: 10rem;
 +
  padding-bottom: calc(10rem - 56px);
 +
 
 +
  background-position: center center;
 +
  -webkit-background-size: cover;
 +
  -moz-background-size: cover;
 +
  -o-background-size: cover;
 +
  background-size: cover;
 +
}
 +
 
 +
header.masthead hr {
 +
  margin-top: 30px;
 +
  margin-bottom: 30px;
 +
}
 +
 
 +
header.masthead h1 {
 +
  font-size: 2rem;
 +
}
 +
 
 +
header.masthead p {
 +
  font-weight: 300;
 +
}
 +
 
 +
@media (min-width: 768px) {
 +
  header.masthead p {
 +
    font-size: 1.15rem;
 
   }
 
   }
−
   .item h4 {
+
}
−
      font-size: 19px;
+
 
−
      line-height: 1.375em;
+
@media (min-width: 992px) {
−
      font-weight: 400;
+
   header.masthead {
−
      font-style: italic;
+
    height: 100vh;
−
      margin: 70px 0;
+
    min-height: 650px;
 +
    padding-top: 0;
 +
    padding-bottom: 0;
 
   }
 
   }
−
   .item span {
+
   header.masthead h1 {
−
      font-style: normal;
+
    font-size: 3rem;
 
   }
 
   }
−
  .panel {
+
}
−
      border: 1px solid #f4511e;
+
 
−
      border-radius:0 !important;
+
@media (min-width: 1200px) {
−
      transition: box-shadow 0.5s;
+
   header.masthead h1 {
−
  }
+
    font-size: 4rem;
−
   .panel:hover {
+
−
      box-shadow: 5px 0px 40px rgba(0,0,0, .2);
+
 
   }
 
   }
−
  .panel-footer .btn:hover {
+
}
−
      border: 1px solid #f4511e;
+
 
−
      background-color: #fff !important;
+
.service-box {
−
      color: #f4511e;
+
  max-width: 400px;
−
  }
+
}
−
  .panel-heading {
+
 
−
      color: #fff !important;
+
.portfolio-box {
−
      background-color: #f4511e !important;
+
  position: relative;
−
      padding: 25px;
+
  display: block;
−
      border-bottom: 1px solid transparent;
+
  max-width: 650px;
−
      border-top-left-radius: 0px;
+
  margin: 0 auto;
−
      border-top-right-radius: 0px;
+
}
−
      border-bottom-left-radius: 0px;
+
 
−
      border-bottom-right-radius: 0px;
+
.portfolio-box .portfolio-box-caption {
−
   }
+
  position: absolute;
−
   .panel-footer {
+
  bottom: 0;
−
      background-color: white !important;
+
  display: block;
−
   }
+
   width: 100%;
−
  .panel-footer h3 {
+
   height: 100%;
−
      font-size: 32px;
+
   text-align: center;
−
   }
+
   opacity: 0;
−
   .panel-footer h4 {
+
   color: #fff;
−
      color: #aaa;
+
  background: rgba(240, 95, 64, 0.9);
−
      font-size: 14px;
+
   -webkit-transition: all 0.2s;
−
   }
+
  -moz-transition: all 0.2s;
−
  .panel-footer .btn {
+
  transition: all 0.2s;
−
      margin: 15px 0;
+
}
−
      background-color: #f4511e;
+
 
−
      color: #fff;
+
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content {
−
  }
+
  position: absolute;
−
  .navbar {
+
  top: 50%;
−
      margin-bottom: 0;
+
  width: 100%;
−
      background-color: #f4511e;
+
  transform: translateY(-50%);
−
      z-index: 9999;
+
  text-align: center;
−
      border: 0;
+
}
−
      font-size: 12px !important;
+
 
−
      line-height: 1.42857143 !important;
+
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category,
−
      letter-spacing: 4px;
+
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
−
      border-radius: 0;
+
  padding: 0 15px;
−
padding-top:20px;
+
  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
−
      font-family: Montserrat, sans-serif;
+
}
−
  }
+
 
−
  .navbar li a, .navbar .navbar-brand {
+
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category {
−
      color: #fff !important;
+
  font-size: 14px;
−
   }
+
   font-weight: 600;
−
   .navbar-nav li a:hover, .navbar-nav li.active a {
+
  text-transform: uppercase;
−
      color: #f4511e !important;
+
}
−
      background-color: #fff !important;
+
 
 +
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
 +
   font-size: 18px;
 +
}
 +
 
 +
.portfolio-box:hover .portfolio-box-caption {
 +
  opacity: 1;
 +
}
 +
 
 +
.portfolio-box:focus {
 +
  outline: none;
 +
}
 +
 
 +
@media (min-width: 768px) {
 +
  .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category {
 +
    font-size: 16px;
 
   }
 
   }
−
   .navbar-default .navbar-toggle {
+
   .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
−
      border-color: transparent;
+
    font-size: 22px;
−
      color: #fff !important;
+
 
   }
 
   }
−
  footer .glyphicon {
+
}
−
      font-size: 20px;
+
−
      margin-bottom: 20px;
+
−
      color: #f4511e;
+
−
  }
+
−
  .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;
+
−
    }
+
−
  }
+
−
  </style>
+
−
</head>
+
−
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">
+
  
−
<nav class="navbar navbar-default navbar-fixed-top">
+
.text-primary {
−
   <div class="container">
+
   color: #0186ac !important;
−
    <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="#myPage">Logo</a>
+
−
    </div>
+
−
    <div class="collapse navbar-collapse" id="myNavbar">
+
−
      <ul class="nav navbar-nav navbar-right">
+
−
        <li><a href="#about">ABOUT</a></li>
+
−
        <li><a href="#services">SERVICES</a></li>
+
−
        <li><a href="#portfolio">PORTFOLIO</a></li>
+
−
        <li><a href="#pricing">PRICING</a></li>
+
−
        <li><a href="#contact">CONTACT</a></li>
+
−
      </ul>
+
−
    </div>
+
−
  </div>
+
−
</nav>
+
  
−
    <!-- Header - set the background image for the header in the line below -->
+
.btn {
−
    <header class="py-5 bg-image-full" style="background-image: url('https://unsplash.it/1900/1080?image=1076');">
+
  font-weight: 700;
−
    hello world    </header>
+
  text-transform: uppercase;
 +
  border: none;
 +
  border-radius: 300px;
 +
  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
 +
}
  
 +
.btn-xl {
 +
  padding: 1rem 2rem;
 +
}
  
 +
.btn-primary {
 +
  background-color: #0186ac;
 +
  border-color: #0186ac;
 +
}
  
−
<!-- Container (About Section) -->
+
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
−
<div id="about" class="container-fluid">
+
  color: #fff;
−
  <div class="row">
+
  background-color: #ee4b28 !important;
−
    <div class="col-sm-8">
+
}
−
      <h2>About Company Page</h2><br>
+
−
      <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</h4><br>
+
−
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+
−
      <br><button class="btn btn-default btn-lg">Get in Touch</button>
+
−
    </div>
+
−
    <div class="col-sm-4">
+
−
      <span class="glyphicon glyphicon-signal logo"></span>
+
−
    </div>
+
−
  </div>
+
−
</div>
+
  
−
<div class="container-fluid bg-grey">
+
.btn-primary:active, .btn-primary:focus {
−
   <div class="row">
+
   box-shadow: 0 0 0 0.2rem rgba(240, 95, 64, 0.5) !important;
−
    <div class="col-sm-4">
+
}
−
      <span class="glyphicon glyphicon-globe logo slideanim"></span>
+
−
    </div>
+
−
    <div class="col-sm-8">
+
−
      <h2>Our Values</h2><br>
+
−
      <h4><strong>MISSION:</strong> Our mission lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</h4><br>
+
−
      <p><strong>VISION:</strong> Our vision Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
−
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+
−
    </div>
+
−
  </div>
+
−
</div>
+
  
−
<!-- Container (Services Section) -->
+
/*parallax*/
−
<div id="services" class="container-fluid text-center">
+
.parallax-window {
−
  <h2>SERVICES</h2>
+
     min-height: 400px;
−
  <h4>What we offer</h4>
+
     background: transparent;
−
  <br>
+
}
−
  <div class="row slideanim">
+
@media (min-width: 768px) {
−
     <div class="col-sm-4">
+
  #contact .container {
−
      <span class="glyphicon glyphicon-off logo-small"></span>
+
     width:60%;
−
      <h4>POWER</h4>
+
     }
−
      <p>Lorem ipsum dolor sit amet..</p>
+
}
−
     </div>
+
.footer-nav .navbar-brand  {
−
    <div class="col-sm-4">
+
     padding-left:30px;
−
      <span class="glyphicon glyphicon-heart logo-small"></span>
+
}
−
      <h4>LOVE</h4>
+
</style>
−
      <p>Lorem ipsum dolor sit amet..</p>
+
     <link href="css/hover.css" rel="stylesheet">
−
     </div>
+
      
−
     <div class="col-sm-4">
+
   </head>
−
      <span class="glyphicon glyphicon-lock logo-small"></span>
+
−
      <h4>JOB DONE</h4>
+
−
      <p>Lorem ipsum dolor sit amet..</p>
+
−
     </div>
+
−
  </div>
+
−
  <br><br>
+
−
  <div class="row slideanim">
+
−
    <div class="col-sm-4">
+
−
      <span class="glyphicon glyphicon-leaf logo-small"></span>
+
−
      <h4>GREEN</h4>
+
−
      <p>Lorem ipsum dolor sit amet..</p>
+
−
     </div>
+
−
    <div class="col-sm-4">
+
−
      <span class="glyphicon glyphicon-certificate logo-small"></span>
+
−
      <h4>CERTIFIED</h4>
+
−
      <p>Lorem ipsum dolor sit amet..</p>
+
−
    </div>
+
−
    <div class="col-sm-4">
+
−
      <span class="glyphicon glyphicon-wrench logo-small"></span>
+
−
      <h4 style="color:#303030;">HARD WORK</h4>
+
−
      <p>Lorem ipsum dolor sit amet..</p>
+
−
     </div>
+
−
   </div>
+
−
</div>
+
  
−
<!-- Container (Portfolio Section) -->
+
   <body id="page-top">
−
<div id="portfolio" class="container-fluid text-center bg-grey">
+
−
   <h2>Portfolio</h2><br>
+
−
  <h4>What we have created</h4>
+
−
  <div class="row text-center slideanim">
+
−
    <div class="col-sm-4">
+
−
      <div class="thumbnail">
+
−
        <img src="paris.jpg" alt="Paris" width="400" height="300">
+
−
        <p><strong>Paris</strong></p>
+
−
        <p>Yes, we built Paris</p>
+
−
      </div>
+
−
    </div>
+
−
    <div class="col-sm-4">
+
−
      <div class="thumbnail">
+
−
        <img src="newyork.jpg" alt="New York" width="400" height="300">
+
−
        <p><strong>New York</strong></p>
+
−
        <p>We built New York</p>
+
−
      </div>
+
−
    </div>
+
−
    <div class="col-sm-4">
+
−
      <div class="thumbnail">
+
−
        <img src="sanfran.jpg" alt="San Francisco" width="400" height="300">
+
−
        <p><strong>San Francisco</strong></p>
+
−
        <p>Yes, San Fran is ours</p>
+
−
      </div>
+
−
    </div>
+
−
  </div><br>
+
−
 
+
−
  <h2>What our customers say</h2>
+
−
  <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 -->
+
     <!-- Navigation -->
−
     <div class="carousel-inner" role="listbox">
+
     <nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
−
       <div class="item active">
+
       <div class="container">
−
         <h4>"This company is the best. I am so happy with the result!"<br><span>Michael Roe, Vice President, Comment Box</span></h4>
+
         <a class="navbar-brand js-scroll-trigger" href="#page-top">Start Bootstrap</a>
 +
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
 +
          <span class="navbar-toggler-icon"></span>
 +
        </button>
 +
        <div class="collapse navbar-collapse" id="navbarResponsive">
 +
          <ul class="navbar-nav ml-auto">
 +
            <li class="nav-item">
 +
              <a class="nav-link js-scroll-trigger" href="#about">Home</a>
 +
            </li>
 +
            <li class="nav-item">
 +
              <a class="nav-link js-scroll-trigger" href="#services">Project</a>
 +
            </li>
 +
            <li class="nav-item">
 +
              <a class="nav-link js-scroll-trigger" href="#portfolio">Team</a>
 +
            </li>
 +
            <li class="nav-item">
 +
              <a class="nav-link js-scroll-trigger" href="#contact">Parts</a>
 +
            </li>
 +
              <li class="nav-item">
 +
              <a class="nav-link js-scroll-trigger" href="#about">Practices</a>
 +
            </li>
 +
            <li class="nav-item">
 +
              <a class="nav-link js-scroll-trigger" href="#services">Attributions</a>
 +
            </li>
 +
           
 +
          </ul>
 +
        </div>
 
       </div>
 
       </div>
−
       <div class="item">
+
    </nav>
−
         <h4>"One word... WOW!!"<br><span>John Doe, Salesman, Rep Inc</span></h4>
+
   
 +
    <header class="masthead text-center parallax-window text-white d-flex" data-parallax="scroll" data-image-src="img/banner.png">
 +
       <div class="container my-auto">
 +
         <!--<div class="row">
 +
          <div class="col-lg-10 mx-auto">
 +
            <h1 class="text-uppercase">
 +
              <strong>Your Favorite Source of Free Bootstrap Themes</strong>
 +
            </h1>
 +
            <hr>
 +
          </div>
 +
          <div class="col-lg-8 mx-auto">
 +
            <p class="text-faded mb-5">Start Bootstrap can help you build better websites using the Bootstrap CSS framework! Just download your template and start going, no strings attached!</p>
 +
            <a class="btn btn-primary btn-xl js-scroll-trigger" href="#about">Find Out More</a>
 +
          </div>
 +
        </div>-->
 
       </div>
 
       </div>
−
      <div class="item">
+
     </header>
−
        <h4>"Could I... BE any more happy with this company?"<br><span>Chandler Bing, Actor, FriendsAlot</span></h4>
+
−
      </div>
+
−
     </div>
+
  
−
     <!-- Left and right controls -->
+
     <section id="about">
−
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
+
      <div class="container">
−
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
+
        <div class="row">
−
      <span class="sr-only">Previous</span>
+
          <div class="col-lg-8 mx-auto">
−
    </a>
+
            <h1 class="section-heading  text-center animated fadeInLeft">Abstarct</h1>
−
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
+
            <hr class="dark my-4 animated fadeInLeft">
−
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
+
            <p style="margin:0px !important; padding:0!important;" class="mb-4 justified animated fadeInRight">Recent research studies of Amyotrophic Lateral Sclerosis (ALS) suggest that brain cells that have become toxic, directly contribute to the progression of the disease. These cells change their gene expression pattern and possess distinguishing genetic markers. In addition, they drive the death of other cells in the brain among them the motor neurons. <br><br>
−
      <span class="sr-only">Next</span>
+
Our objective, as the BGU-IGEM team OriginALS, is to prolong survival of ALS patients via a novel genetic engineering approach. In order to reach this objective, we combine two separate strategies as our therapeutic approach: </p>
−
    </a>
+
              <ol class="mb-4 justified animated fadeInRight">
−
  </div>
+
                <li> We identify and selectively eliminate only the toxic cells. In order to identify and target the toxic-cells only, we use distinguishing markers that are unique only to them.</li>
−
</div>
+
                <li>We prevent the generation of new toxic cells by genetically targeting specific molecules that generate the toxic cells.</li>
 +
              </ol>
 +
              <p  class="mb-4 justified animated fadeInRight">
 +
In conclusion, our approach combines an apoptotic destruction of toxic cells with the prevention of the formation of new toxic cells, thus aiming to significantly reduce the occurrence of toxic cells in the central neuronal system (CNS), which is aimed at a significant deceleration of the progression rate of ALS.</p>
  
−
<!-- Container (Pricing Section) -->
+
 
−
<div id="pricing" class="container-fluid">
+
           
−
  <div class="text-center">
+
           </div>
−
    <h2>Pricing</h2>
+
−
    <h4>Choose a payment plan that works for you</h4>
+
−
  </div>
+
−
  <div class="row slideanim">
+
−
    <div class="col-sm-4 col-xs-12">
+
−
      <div class="panel panel-default text-center">
+
−
        <div class="panel-heading">
+
−
           <h1>Basic</h1>
+
−
        </div>
+
−
        <div class="panel-body">
+
−
          <p><strong>20</strong> Lorem</p>
+
−
          <p><strong>15</strong> Ipsum</p>
+
−
          <p><strong>5</strong> Dolor</p>
+
−
          <p><strong>2</strong> Sit</p>
+
−
          <p><strong>Endless</strong> Amet</p>
+
−
        </div>
+
−
        <div class="panel-footer">
+
−
          <h3>$19</h3>
+
−
          <h4>per month</h4>
+
−
          <button class="btn btn-lg">Sign Up</button>
+
−
        </div>
+
−
      </div>     
+
−
    </div>   
+
−
    <div class="col-sm-4 col-xs-12">
+
−
      <div class="panel panel-default text-center">
+
−
        <div class="panel-heading">
+
−
          <h1>Pro</h1>
+
−
        </div>
+
−
        <div class="panel-body">
+
−
          <p><strong>50</strong> Lorem</p>
+
−
          <p><strong>25</strong> Ipsum</p>
+
−
          <p><strong>10</strong> Dolor</p>
+
−
          <p><strong>5</strong> Sit</p>
+
−
          <p><strong>Endless</strong> Amet</p>
+
−
        </div>
+
−
        <div class="panel-footer">
+
−
          <h3>$29</h3>
+
−
          <h4>per month</h4>
+
−
          <button class="btn btn-lg">Sign Up</button>
+
 
         </div>
 
         </div>
−
       </div>    
+
       </div>
−
     </div>     
+
     </section>
−
    <div class="col-sm-4 col-xs-12">
+
−
      <div class="panel panel-default text-center">
+
−
        <div class="panel-heading">
+
−
          <h1>Premium</h1>
+
−
        </div>
+
−
        <div class="panel-body">
+
−
          <p><strong>100</strong> Lorem</p>
+
−
          <p><strong>50</strong> Ipsum</p>
+
−
          <p><strong>25</strong> Dolor</p>
+
−
          <p><strong>10</strong> Sit</p>
+
−
          <p><strong>Endless</strong> Amet</p>
+
−
        </div>
+
−
        <div class="panel-footer">
+
−
          <h3>$49</h3>
+
−
          <h4>per month</h4>
+
−
          <button class="btn btn-lg">Sign Up</button>
+
−
        </div>
+
−
      </div>     
+
−
    </div>   
+
−
  </div>
+
−
</div>
+
  
−
<!-- Container (Contact Section) -->
+
 
−
<div id="contact" class="container-fluid bg-grey">
+
    <section id="contact" class="bg-dark">
−
  <h2 class="text-center">CONTACT</h2>
+
      <div class="container">
−
  <div class="row">
+
        <div class="row">
−
    <div class="col-sm-5">
+
          <div class="col-lg-8 mx-auto text-center text-white">
−
      <p>Contact us and we'll get back to you within 24 hours.</p>
+
            <h1 class="section-heading">Contact Us</h1>
−
      <p><span class="glyphicon glyphicon-map-marker"></span> Chicago, US</p>
+
            <hr class="my-4 light">
−
      <p><span class="glyphicon glyphicon-phone"></span> +00 1515151515</p>
+
            <p class="mb-5 text-faded">Feel free to follow and contact us for more information on:</p>
−
      <p><span class="glyphicon glyphicon-envelope"></span> myemail@something.com</p>
+
          </div>
−
    </div>
+
−
    <div class="col-sm-7 slideanim">
+
−
      <div class="row">
+
−
        <div class="col-sm-6 form-group">
+
−
          <input class="form-control" id="name" name="name" placeholder="Name" type="text" required>
+
 
         </div>
 
         </div>
−
         <div class="col-sm-6 form-group">
+
         <div class="row">
−
           <input class="form-control" id="email" name="email" placeholder="Email" type="email" required>
+
          <div class="col-lg-3 col-md-6 ml-auto text-center text-faded ">
−
        </div>
+
            <a href="https://www.facebook.com/iGEMBGU/" target="_blank"  class="text-faded"><i class="fa fa-facebook fa-3x mb-3 sr-contac hvr-bob"></i>
−
      </div>
+
            <p>iGEM BGU</p></a>
−
      <textarea class="form-control" id="comments" name="comments" placeholder="Comment" rows="5"></textarea><br>
+
           </div>
−
      <div class="row">
+
          <div class="col-lg-3 col-md-6 mr-auto text-center text-faded ">
−
        <div class="col-sm-12 form-group">
+
            <a href="https://twitter.com/originalsbgu" target="_blank" class="text-faded"><i class="fa fa-twitter fa-3x mb-3 sr-contact hvr-bob"></i>
−
          <button class="btn btn-default pull-right" type="submit">Send</button>
+
            <p>
 +
              @OrignialsBGU
 +
            </p></a>
 +
          </div>
 +
            <div class="col-lg-3 col-md-6 ml-auto text-center text-faded">
 +
            <a href="https://www.instagram.com/igem_2018_bgu/" target="_blank" class="text-faded"><i class="fa fa-instagram fa-3x mb-3 sr-contact  hvr-bob"></i>
 +
                <p>@iGEM_2018_BGU</p></a>
 +
          </div>
 +
          <div class="col-lg-3 col-md-6 mr-auto text-center text-faded">
 +
            <a href="mailto:originalbgu@gmail.com" target="_blank" class="text-faded"><i class="fa fa-envelope-o fa-3x mb-3 sr-contact  hvr-bob"></i>
 +
            <p>
 +
              originalbgu@gmail.com
 +
            </p></a>
 +
          </div>
 +
         
 
         </div>
 
         </div>
 +
         
 
       </div>
 
       </div>
 +
 
 +
    </section>
 +
  <nav class="navbar navbar-expand-md navbar-dark bg-dark">
 +
    <div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
 +
        <ul class="navbar-nav mr-auto">
 +
            <li class="nav-item">
 +
                <a class="nav-link" href="#">Ben-Gurion University of the Negev<br>
 +
Ben Gurion 1, Beer Sheva 8410501, Israel</a>
 +
            </li>
 +
           
 +
        </ul>
 +
    </div>
 +
   
 +
    <div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
 +
        <ul class="navbar-nav ml-auto">
 +
            <li class="nav-item">
 +
                <a class="nav-link" href="#">Copyright &copy; 2018 OriginALS. All Rights Reserved.</a>
 +
            </li>
 +
         
 +
        </ul>
 
     </div>
 
     </div>
−
  </div>
+
</nav>
−
</div>
+
    <link href="css/animate.css" rel="stylesheet">
  
−
<!-- Add Google Maps -->
+
    <!-- Bootstrap core JavaScript -->
−
<div id="googleMap" style="height:400px;width:100%;"></div>
+
    <script src="vendor/jquery/jquery.min.js"></script>
−
<script>
+
    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
−
function myMap() {
+
−
var myCenter = new google.maps.LatLng(41.878114, -87.629798);
+
−
var mapProp = {center:myCenter, zoom:12, scrollwheel:false, draggable:false, mapTypeId:google.maps.MapTypeId.ROADMAP};
+
−
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
+
−
var marker = new google.maps.Marker({position:myCenter});
+
−
marker.setMap(map);
+
−
}
+
−
</script>
+
−
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=myMap"></script>
+
−
<!--
+
−
To use this code on your website, get a free API key from Google.
+
−
Read more at: https://www.w3schools.com/graphics/google_maps_basic.asp
+
−
-->
+
  
−
<footer class="container-fluid text-center">
+
    <!-- Plugin JavaScript -->
−
  <a href="#myPage" title="To Top">
+
    <script src="vendor/jquery-easing/jquery.easing.min.js"></script>
−
     <span class="glyphicon glyphicon-chevron-up"></span>
+
    <script src="vendor/scrollreveal/scrollreveal.min.js"></script>
−
  </a>
+
     <script src="vendor/magnific-popup/jquery.magnific-popup.min.js"></script>
−
  <p>Bootstrap Theme Made By <a href="https://www.w3schools.com" title="Visit w3schools">www.w3schools.com</a></p>
+
    <script>
−
</footer>
+
    /*!
 +
* 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)
 +
*/
  
−
<script>
+
;(function ( $, window, document, undefined ) {
−
$(document).ready(function(){
+
−
  // Add smooth scrolling to all links in navbar + footer link
+
−
  $(".navbar a, footer a[href='#myPage']").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
+
  // Polyfill for requestAnimationFrame
−
      var hash = this.hash;
+
  // via: https://gist.github.com/paulirish/1579671
  
−
       // Using jQuery's animate() method to add smooth page scroll
+
  (function() {
−
       // The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area
+
    var lastTime = 0;
−
       $('html, body').animate({
+
    var vendors = ['ms', 'moz', 'webkit', 'o'];
−
         scrollTop: $(hash).offset().top
+
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
−
       }, 900, function(){
+
       window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
−
    
+
      window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
−
         // Add hash (#) to URL when done scrolling (default click behavior)
+
    }
−
         window.location.hash = hash;
+
 
 +
    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
 
       });
 
       });
−
     } // End if
+
 
 +
      this.$slider.css({
 +
        transform: 'translate3d('+this.offsetLeft+'px, '+this.offsetTop+'px, 0px)',
 +
        position: 'absolute',
 +
        height: this.imageHeight,
 +
        width: this.imageWidth,
 +
        maxWidth: 'none'
 +
      });
 +
     }
 
   });
 
   });
−
 
 
−
  $(window).scroll(function() {
 
−
    $(".slideanim").each(function(){
 
−
      var pos = $(this).offset().top;
 
  
−
       var winTop = $(window).scrollTop();
+
 
−
         if (pos < winTop + 600) {
+
  // Parallax Static Methods
−
           $(this).addClass("slide");
+
 
 +
  $.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();
 
   });
 
   });
−
})
 
−
</script>
 
  
−
</body>
+
}(jQuery, window, document));
 +
 
 +
    </script>
 +
 
 +
    <!-- Custom scripts for this template -->
 +
    <script src="js/creative.min.js"></script>
 +
 
 +
  </body>
 +
 
 
</html>
 
</html>

Revision as of 06:49, 29 July 2018

OriginALS

OriginALS

Abstarct

Recent research studies of Amyotrophic Lateral Sclerosis (ALS) suggest that brain cells that have become toxic, directly contribute to the progression of the disease. These cells change their gene expression pattern and possess distinguishing genetic markers. In addition, they drive the death of other cells in the brain among them the motor neurons.

Our objective, as the BGU-IGEM team OriginALS, is to prolong survival of ALS patients via a novel genetic engineering approach. In order to reach this objective, we combine two separate strategies as our therapeutic approach:

  1. We identify and selectively eliminate only the toxic cells. In order to identify and target the toxic-cells only, we use distinguishing markers that are unique only to them.
  2. We prevent the generation of new toxic cells by genetically targeting specific molecules that generate the toxic cells.

In conclusion, our approach combines an apoptotic destruction of toxic cells with the prevention of the formation of new toxic cells, thus aiming to significantly reduce the occurrence of toxic cells in the central neuronal system (CNS), which is aimed at a significant deceleration of the progression rate of ALS.

Contact Us

Feel free to follow and contact us for more information on:

iGEM BGU

@OrignialsBGU

@iGEM_2018_BGU

originalbgu@gmail.com