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

Line 294: Line 294:
 
height:200px !important;
 
height:200px !important;
 
    
 
    
−
     /* Create the parallax scrolling effect */
+
     <!-- /* Create the parallax scrolling effect */ -->
 
     background-attachment: fixed;
 
     background-attachment: fixed;
 
background-position: top center;
 
background-position: top center;
Line 300: Line 300:
 
     background-size: cover;
 
     background-size: cover;
 
     }
 
     }
 +
 +
<!-- Page specific - accordion -->
 +
.accordion {
 +
    background-color: #eee;
 +
    color: #444;
 +
    cursor: pointer;
 +
    padding: 18px;
 +
    width: 100%;
 +
    border: none;
 +
    text-align: left;
 +
    outline: none;
 +
    font-size: 15px;
 +
    transition: 0.4s;
 +
}
 +
 +
.active, .accordion:hover {
 +
    background-color: #ccc;
 +
}
 +
 +
.accordion:after {
 +
    content: '\002B';
 +
    color: #777;
 +
    font-weight: bold;
 +
    float: right;
 +
    margin-left: 5px;
 +
}
 +
 +
.active:after {
 +
    content: "\2212";
 +
}
 +
 +
.panel {
 +
    padding: 0 18px;
 +
    background-color: white;
 +
    max-height: 0;
 +
    overflow: hidden;
 +
    transition: max-height 0.2s ease-out;
 +
}
 +
<!-- end accordion -->
 +
 
     </style>
 
     </style>
 
</head>
 
</head>
Line 378: Line 418:
 
   <div class="row">
 
   <div class="row">
 
<div class="col-sm-8 col-sm-offset-2">
 
<div class="col-sm-8 col-sm-offset-2">
−
   
+
<p>In this example we have added a "plus" sign to each button. When the user clicks on the button, the "plus" sign is replaced with a "minus" sign.</p>
−
      <p style="margin:0px !important; padding:0!important;" class="mb-4 justified animated fadeInRight">It all began in the summer of 2017, the newly recruited iGEM-BGU team was tasked with choosing a topic for our iGEM project. Many ideas were proposed but one idea resonated with us. Liat Tsoran, one of our team members, told us her personal story. Liat’s father, Nir Tsoran, was diagnosed with ALS when Liat was only eleven years old. For seven years (longer than the average patient’s survival rate), Liat witnessed her father’s health, deteriorates from a fully functional adult to a man trapped inside his body. Throughout his ordeal, Nir did not let his disease prevent him from being an exemplary father and advocate. He served as the CEO of IsrALS, an Israeli non-profit organization committed to supporting ALS patients, their families, and promoting ALS research in Israel. Nir took this budding non-profit and the very small Israeli ALS scientific community and turned it into an influential strong local movement. Since her father’s diagnosis, Liat has been dedicating her life to understanding the disease and hopes, to one day contribute to finding a cure. Once we heard Liat’s story, the whole team enlisted to join her efforts. We suddenly understood that the “Ice Bucket Challenge” was not just a fun activity but a necessary step in bringing awareness to a devastating disease which has not received the exposure required to promote significant research for a cure.
+
<button class="accordion">Section 1</button>
−
</p>
+
<div class="panel">
 +
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
 +
</div>
  
 +
<button class="accordion">Section 2</button>
 +
<div class="panel">
 +
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
 
</div>
 
</div>
−
   
+
 
−
  </div>
+
<button class="accordion">Section 3</button>
 +
<div class="panel">
 +
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
 +
</div
 
</div>
 
</div>
−
    <div class="bg-grey">
 
−
<div class="container text-center">
 
−
  <div class="row">
 
−
      <h1>Image right</h1>
 
−
<div class="col-sm-6">
 
−
      <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>
 
−
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>
 
−
 
 
−
</div>
 
−
      <div class="col-sm-6">
 
−
          <img src="dark-lab.jpg" class="img-responsive" alt="Responsive image">
 
−
       
 
−
      </div>
 
−
   
 
 
   </div>
 
   </div>
 
</div>
 
</div>
−
</div>
 
−
        <div class="bg-white">
 
−
<div class="container text-center">
 
−
  <div class="row">
 
−
      <h1>Image Left</h1>
 
−
      <div class="col-sm-5">
 
−
          <img src="dark-lab.jpg" class="img-responsive">
 
−
       
 
−
      </div>
 
−
<div class="col-sm-7">
 
−
      <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>
 
−
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>
 
 
    
 
    
−
</div>
+
<!-- accordion script -->
−
     
+
<script>
−
   
+
var acc = document.getElementsByClassName("accordion");
−
  </div>
+
var i;
−
</div>
+
−
</div>
+
−
   
+
−
      <div class="bg-grey">
+
−
<div class="container text-center">
+
−
  <div class="row">
+
−
      <h1>Thumbnails</h1>
+
  
−
      <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><br></p>
+
for (i = 0; i < acc.length; i++) {
−
 
+
  acc[i].addEventListener("click", function() {
−
  </div>
+
    this.classList.toggle("active");
−
    <div class="row">
+
     var panel = this.nextElementSibling;
−
     <div class="col-sm-4">
+
    if (panel.style.maxHeight){
−
        <img src="dark-lab.jpg" class="img-responsive">
+
      panel.style.maxHeight = null;
−
        <h3>title</h3>
+
    } else {
−
        <p>lorem ipsum bf fd kdfdfkdflsdf</p>
+
      panel.style.maxHeight = panel.scrollHeight + "px";
−
        </div>
+
    }
−
        <div class="col-sm-4">
+
  });
−
        <img src="dark-lab.jpg" class="img-responsive">
+
}
−
            <h3>title</h3>
+
</script>
−
        <p>lorem ipsum bf fd kdfdfkdflsdf</p>
+
<!-- accordion script end -->
−
        </div>
+
−
        <div class="col-sm-4">
+
−
        <img src="dark-lab.jpg" class="img-responsive">
+
−
            <h3>title</h3>
+
−
        <p>lorem ipsum bf fd kdfdfkdflsdf</p>
+
−
        </div>
+
−
       
+
−
    </div>
+
−
</div>
+
−
</div>
+
  
 
<style>
 
<style>

Revision as of 11:20, 6 September 2018

OriginALS

<!DOCTYPE html> OriginALS

Notebook

In this example we have added a "plus" sign to each button. When the user clicks on the button, the "plus" sign is replaced with a "minus" sign.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

About OrignALS


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

    Keep in Touch

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

    Address

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