Difference between revisions of "Team:BGU Israel"

Line 1: Line 1:
 +
{{BGU_Israel}}
 
{{BGU_Israel}}
 
{{BGU_Israel}}
  
 
<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;
 
 
   }
 
   }
−
   #mainNav .navbar-brand {
+
   h2 {
−
    color: #434343;
+
      font-size: 24px;
 +
      text-transform: uppercase;
 +
      color: #303030;
 +
      font-weight: 600;
 +
      margin-bottom: 30px;
 
   }
 
   }
−
   #mainNav .navbar-brand:focus, #mainNav .navbar-brand:hover {
+
   h4 {
−
    color: #fff;
+
      font-size: 19px;
 +
      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;
 
   }
 
   }
−
   #mainNav .navbar-nav > li.nav-item > a.nav-link {
+
   .container-fluid {
−
    padding: 0.5rem 1rem;
+
      padding: 60px 50px;
 
   }
 
   }
−
   #mainNav .navbar-nav > li.nav-item > a.nav-link,
+
   .bg-grey {
−
  #mainNav .navbar-nav > li.nav-item > a.nav-link:focus {
+
      background-color: #f6f6f6;
−
    color: rgba(255, 255, 255, 0.7);
+
 
   }
 
   }
−
   #mainNav .navbar-nav > li.nav-item > a.nav-link:hover,
+
   .logo-small {
−
  #mainNav .navbar-nav > li.nav-item > a.nav-link:focus:hover {
+
      color: #f4511e;
−
    color: #fff;
+
      font-size: 50px;
 
   }
 
   }
−
   #mainNav.navbar-shrink {
+
   .logo {
−
    border-bottom: 1px solid rgba(33, 37, 41, 0.1);
+
      color: #f4511e;
−
    background-color: #fff;
+
      font-size: 200px;
 
   }
 
   }
−
   #mainNav.navbar-shrink .navbar-brand {
+
   .thumbnail {
−
    color: #0186ac;
+
      padding: 0 0 15px 0;
 +
      border: none;
 +
      border-radius: 0;
 
   }
 
   }
−
   #mainNav.navbar-shrink .navbar-brand:focus, #mainNav.navbar-shrink .navbar-brand:hover {
+
   .thumbnail img {
−
    color: #0186ac;
+
      width: 100%;
 +
      height: 100%;
 +
      margin-bottom: 10px;
 
   }
 
   }
−
   #mainNav.navbar-shrink .navbar-nav > li.nav-item > a.nav-link,
+
   .carousel-control.right, .carousel-control.left {
−
  #mainNav.navbar-shrink .navbar-nav > li.nav-item > a.nav-link:focus {
+
      background-image: none;
−
    color: #212529;
+
      color: #f4511e;
 
   }
 
   }
−
   #mainNav.navbar-shrink .navbar-nav > li.nav-item > a.nav-link:hover,
+
   .carousel-indicators li {
−
  #mainNav.navbar-shrink .navbar-nav > li.nav-item > a.nav-link:focus:hover {
+
      border-color: #f4511e;
−
    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;
−
@media (min-width: 992px) {
+
      line-height: 1.375em;
−
   header.masthead {
+
      font-weight: 400;
−
    height: 100vh;
+
      font-style: italic;
−
    min-height: 650px;
+
      margin: 70px 0;
−
    padding-top: 0;
+
−
    padding-bottom: 0;
+
 
   }
 
   }
−
   header.masthead h1 {
+
   .item span {
−
    font-size: 3rem;
+
      font-style: normal;
 
   }
 
   }
−
}
+
  .panel {
−
 
+
      border: 1px solid #f4511e;
−
@media (min-width: 1200px) {
+
      border-radius:0 !important;
−
   header.masthead h1 {
+
      transition: box-shadow 0.5s;
−
    font-size: 4rem;
+
  }
 +
   .panel:hover {
 +
      box-shadow: 5px 0px 40px rgba(0,0,0, .2);
 
   }
 
   }
−
}
+
  .panel-footer .btn:hover {
−
 
+
      border: 1px solid #f4511e;
−
.service-box {
+
      background-color: #fff !important;
−
  max-width: 400px;
+
      color: #f4511e;
−
}
+
  }
−
 
+
  .panel-heading {
−
.portfolio-box {
+
      color: #fff !important;
−
  position: relative;
+
      background-color: #f4511e !important;
−
  display: block;
+
      padding: 25px;
−
  max-width: 650px;
+
      border-bottom: 1px solid transparent;
−
  margin: 0 auto;
+
      border-top-left-radius: 0px;
−
}
+
      border-top-right-radius: 0px;
−
 
+
      border-bottom-left-radius: 0px;
−
.portfolio-box .portfolio-box-caption {
+
      border-bottom-right-radius: 0px;
−
  position: absolute;
+
   }
−
  bottom: 0;
+
   .panel-footer {
−
  display: block;
+
      background-color: white !important;
−
   width: 100%;
+
   }
−
   height: 100%;
+
  .panel-footer h3 {
−
   text-align: center;
+
      font-size: 32px;
−
   opacity: 0;
+
   }
−
   color: #fff;
+
   .panel-footer h4 {
−
  background: rgba(240, 95, 64, 0.9);
+
      color: #aaa;
−
   -webkit-transition: all 0.2s;
+
      font-size: 14px;
−
  -moz-transition: all 0.2s;
+
   }
−
  transition: all 0.2s;
+
  .panel-footer .btn {
−
}
+
      margin: 15px 0;
−
 
+
      background-color: #f4511e;
−
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content {
+
      color: #fff;
−
  position: absolute;
+
  }
−
  top: 50%;
+
  .navbar {
−
  width: 100%;
+
      margin-bottom: 0;
−
  transform: translateY(-50%);
+
      background-color: #f4511e;
−
  text-align: center;
+
      z-index: 9999;
−
}
+
      border: 0;
−
 
+
      font-size: 12px !important;
−
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category,
+
      line-height: 1.42857143 !important;
−
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
+
      letter-spacing: 4px;
−
  padding: 0 15px;
+
      border-radius: 0;
−
  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
+
padding-top:20px;
−
}
+
      font-family: Montserrat, sans-serif;
−
 
+
  }
−
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category {
+
  .navbar li a, .navbar .navbar-brand {
−
  font-size: 14px;
+
      color: #fff !important;
−
   font-weight: 600;
+
   }
−
  text-transform: uppercase;
+
   .navbar-nav li a:hover, .navbar-nav li.active a {
−
}
+
      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;
+
 
   }
 
   }
−
   .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
+
   .navbar-default .navbar-toggle {
−
    font-size: 22px;
+
      border-color: transparent;
 +
      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">
  
−
.text-primary {
+
<nav class="navbar navbar-default navbar-fixed-top">
−
   color: #0186ac !important;
+
   <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="#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>
  
−
.btn {
+
    <!-- Header - set the background image for the header in the line below -->
−
  font-weight: 700;
+
    <header class="py-5 bg-image-full" style="background-image: url('https://unsplash.it/1900/1080?image=1076');">
−
  text-transform: uppercase;
+
    hello world    </header>
−
  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;
 
−
}
 
  
−
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
+
<!-- Container (About Section) -->
−
  color: #fff;
+
<div id="about" class="container-fluid">
−
  background-color: #ee4b28 !important;
+
  <div class="row">
−
}
+
    <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>
  
−
.btn-primary:active, .btn-primary:focus {
+
<div class="container-fluid bg-grey">
−
   box-shadow: 0 0 0 0.2rem rgba(240, 95, 64, 0.5) !important;
+
   <div class="row">
−
}
+
    <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>
  
−
/*parallax*/
+
<!-- Container (Services Section) -->
−
.parallax-window {
+
<div id="services" class="container-fluid text-center">
−
     min-height: 400px;
+
  <h2>SERVICES</h2>
−
     background: transparent;
+
  <h4>What we offer</h4>
−
}
+
  <br>
−
@media (min-width: 768px) {
+
  <div class="row slideanim">
−
  #contact .container {
+
     <div class="col-sm-4">
−
     width:60%;
+
      <span class="glyphicon glyphicon-off logo-small"></span>
−
     }
+
      <h4>POWER</h4>
−
}
+
      <p>Lorem ipsum dolor sit amet..</p>
−
.footer-nav .navbar-brand  {
+
     </div>
−
     padding-left:30px;
+
    <div class="col-sm-4">
−
}
+
      <span class="glyphicon glyphicon-heart logo-small"></span>
−
</style>
+
      <h4>LOVE</h4>
−
     <link href="css/hover.css" rel="stylesheet">
+
      <p>Lorem ipsum dolor sit amet..</p>
−
      
+
     </div>
−
   </head>
+
     <div class="col-sm-4">
 +
      <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>
  
−
   <body id="page-top">
+
<!-- Container (Portfolio Section) -->
 +
<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>
  
−
     <!-- Navigation -->
+
     <!-- Wrapper for slides -->
−
     <nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
+
     <div class="carousel-inner" role="listbox">
−
       <div class="container">
+
       <div class="item active">
−
         <a class="navbar-brand js-scroll-trigger" href="#page-top">Start Bootstrap</a>
+
         <h4>"This company is the best. I am so happy with the result!"<br><span>Michael Roe, Vice President, Comment Box</span></h4>
−
        <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>
−
    </nav>
+
       <div class="item">
−
   
+
         <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>
−
     </header>
+
      <div class="item">
 +
        <h4>"Could I... BE any more happy with this company?"<br><span>Chandler Bing, Actor, FriendsAlot</span></h4>
 +
      </div>
 +
     </div>
  
−
     <section id="about">
+
     <!-- Left and right controls -->
−
      <div class="container">
+
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
−
        <div class="row">
+
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
−
          <div class="col-lg-8 mx-auto">
+
      <span class="sr-only">Previous</span>
−
            <h1 class="section-heading  text-center animated fadeInLeft">Abstarct</h1>
+
    </a>
−
            <hr class="dark my-4 animated fadeInLeft">
+
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
−
            <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="glyphicon glyphicon-chevron-right" aria-hidden="true"></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>
+
      <span class="sr-only">Next</span>
−
              <ol class="mb-4 justified animated fadeInRight">
+
    </a>
−
                <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>
+
</div>
−
              </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>
+
  <div class="text-center">
 +
    <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>    
−
     </section>
+
     </div>     
 +
    <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) -->
−
    <section id="contact" class="bg-dark">
+
<div id="contact" class="container-fluid bg-grey">
−
      <div class="container">
+
  <h2 class="text-center">CONTACT</h2>
−
        <div class="row">
+
  <div class="row">
−
          <div class="col-lg-8 mx-auto text-center text-white">
+
    <div class="col-sm-5">
−
            <h1 class="section-heading">Contact Us</h1>
+
      <p>Contact us and we'll get back to you within 24 hours.</p>
−
            <hr class="my-4 light">
+
      <p><span class="glyphicon glyphicon-map-marker"></span> Chicago, US</p>
−
            <p class="mb-5 text-faded">Feel free to follow and contact us for more information on:</p>
+
      <p><span class="glyphicon glyphicon-phone"></span> +00 1515151515</p>
−
          </div>
+
      <p><span class="glyphicon glyphicon-envelope"></span> myemail@something.com</p>
 +
    </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="row">
+
         <div class="col-sm-6 form-group">
−
          <div class="col-lg-3 col-md-6 ml-auto text-center text-faded ">
+
           <input class="form-control" id="email" name="email" placeholder="Email" type="email" required>
−
            <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>
+
      </div>
−
           </div>
+
      <textarea class="form-control" id="comments" name="comments" placeholder="Comment" rows="5"></textarea><br>
−
          <div class="col-lg-3 col-md-6 mr-auto text-center text-faded ">
+
      <div class="row">
−
            <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>
+
        <div class="col-sm-12 form-group">
−
            <p>
+
          <button class="btn btn-default pull-right" type="submit">Send</button>
−
              @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>
−
</nav>
+
  </div>
−
    <link href="css/animate.css" rel="stylesheet">
+
</div>
  
−
    <!-- Bootstrap core JavaScript -->
+
<!-- Add Google Maps -->
−
    <script src="vendor/jquery/jquery.min.js"></script>
+
<div id="googleMap" style="height:400px;width:100%;"></div>
−
    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
+
<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
 +
-->
  
−
    <!-- Plugin JavaScript -->
+
<footer class="container-fluid text-center">
−
    <script src="vendor/jquery-easing/jquery.easing.min.js"></script>
+
  <a href="#myPage" title="To Top">
−
    <script src="vendor/scrollreveal/scrollreveal.min.js"></script>
+
     <span class="glyphicon glyphicon-chevron-up"></span>
−
     <script src="vendor/magnific-popup/jquery.magnific-popup.min.js"></script>
+
  </a>
−
    <script>
+
  <p>Bootstrap Theme Made By <a href="https://www.w3schools.com" title="Visit w3schools">www.w3schools.com</a></p>
−
    /*!
+
</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)
+
−
*/
+
  
−
;(function ( $, window, document, undefined ) {
+
<script>
 +
$(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();
  
−
  // Polyfill for requestAnimationFrame
+
      // Store hash
−
  // via: https://gist.github.com/paulirish/1579671
+
      var hash = this.hash;
  
−
  (function() {
+
       // Using jQuery's animate() method to add smooth page scroll
−
    var lastTime = 0;
+
       // The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area
−
    var vendors = ['ms', 'moz', 'webkit', 'o'];
+
       $('html, body').animate({
−
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
+
         scrollTop: $(hash).offset().top
−
       window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
+
       }, 900, function(){
−
      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();
−
  // Parallax Static Methods
+
         if (pos < winTop + 600) {
−
 
+
           $(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>
  
−
}(jQuery, window, document));
+
</body>
−
 
+
−
    </script>
+
−
 
+
−
    <!-- Custom scripts for this template -->
+
−
    <script src="js/creative.min.js"></script>
+
−
 
+
−
  </body>
+
−
 
+
 
</html>
 
</html>

Revision as of 06:50, 29 July 2018

OriginALS

OriginALS

Bootstrap Theme Company Page

hello world

About Company Page


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


Our Values


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


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

SERVICES

What we offer


POWER

Lorem ipsum dolor sit amet..

LOVE

Lorem ipsum dolor sit amet..

JOB DONE

Lorem ipsum dolor sit amet..



GREEN

Lorem ipsum dolor sit amet..

CERTIFIED

Lorem ipsum dolor sit amet..

HARD WORK

Lorem ipsum dolor sit amet..

Portfolio


What we have created

Paris

Paris

Yes, we built Paris

New York

New York

We built New York

San Francisco

San Francisco

Yes, San Fran is ours


What our customers say

"This company is the best. I am so happy with the result!"
Michael Roe, Vice President, Comment Box

"One word... WOW!!"
John Doe, Salesman, Rep Inc

"Could I... BE any more happy with this company?"
Chandler Bing, Actor, FriendsAlot

Previous Next

Pricing

Choose a payment plan that works for you

Basic

20 Lorem

15 Ipsum

5 Dolor

2 Sit

Endless Amet

$19

per month

Pro

50 Lorem

25 Ipsum

10 Dolor

5 Sit

Endless Amet

$29

per month

Premium

100 Lorem

50 Ipsum

25 Dolor

10 Sit

Endless Amet

$49

per month

CONTACT

Contact us and we'll get back to you within 24 hours.

Chicago, US

+00 1515151515

myemail@something.com