Difference between revisions of "Team:IIT-Madras/Notebook"

Line 70: Line 70:
  
 
<style>
 
<style>
−
.collapsible {
+
 
 +
 
 +
</style>
 +
 
 +
<body>
 +
 
 +
<h1 style="font-family: 'title', sans-serif; font-size: 12mm; padding-left: 20%; color: #00b355;">Notebook</h1>
 +
<center>
 +
<div class="box">
 +
 
 +
 
 +
 
 +
 
 +
<body>
 +
<button class="collapsible">Open Section 1</button>
 +
<div class="content">
 +
  <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>
 +
 +
 +
</body>
 +
 +
 +
<style>
 +
.collapsible {
 
   background-color: white;
 
   background-color: white;
 
   color: black;
 
   color: black;
Line 76: Line 100:
 
   padding: 4mm;
 
   padding: 4mm;
 
   width: 100%;
 
   width: 100%;
−
+
  border: ridge black;
 
   text-align: left;
 
   text-align: left;
 
   outline: none;
 
   outline: none;
Line 82: Line 106:
 
}
 
}
  
−
.active2, .collapsible:hover {
+
.active, .collapsible:hover {
−
   background-color: black;
+
 
−
  color: green;
+
   color: black;
 
}
 
}
  
 
.collapsible:after {
 
.collapsible:after {
−
   content: '&#8711;';
+
   content: '\002B';
−
   color: white;
+
   color: black;
 
   font-weight: bold;
 
   font-weight: bold;
 
   float: right;
 
   float: right;
 
   margin-left: 5px;
 
   margin-left: 5px;
 
}
 
}
 +
 +
 +
 +
  
 
.active:after {
 
.active:after {
−
   content: "&#916";
+
   content: "\2716";
 +
  color: black;
 
}
 
}
  
Line 105: Line 134:
 
   transition: max-height 0.2s ease-out;
 
   transition: max-height 0.2s ease-out;
 
   background-color: white;
 
   background-color: white;
−
}
+
}</style>
−
 
+
</html>
−
</style>
+
−
 
+
−
<body>
+
−
 
+
−
<h1 style="font-family: 'title', sans-serif; font-size: 12mm; padding-left: 20%; color: #00b355;">Notebook</h1>
+
−
<center>
+
−
<div class="box">
+
−
 
+
−
 
+
−
 
+
−
 
+
−
<button class="collapsible" style="font-size:7mm; font-family: 'title', sans-serif;">WEEK 1</button>
+
−
<div class="content">
+
−
  <p style="font-size:5.5mm; font-family: 'title', sans-serif;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Montes nascetur ridiculus mus mauris vitae ultricies leo integer malesuada. Orci sagittis eu volutpat odio facilisis mauris sit amet massa. Fames ac turpis egestas sed tempus urna et pharetra pharetra. Ut tellus elementum sagittis vitae et. Et ultrices neque ornare aenean euismod elementum nisi quis eleifend. Pulvinar sapien et ligula ullamcorper malesuada proin libero nunc consequat. Semper auctor neque vitae tempus quam pellentesque nec nam. Amet purus gravida quis blandit. Risus nullam eget felis eget nunc lobortis mattis. Sed sed risus pretium quam vulputate dignissim suspendisse. Convallis convallis tellus id interdum velit laoreet id donec ultrices. Nulla pharetra diam sit amet nisl. Faucibus ornare suspendisse sed nisi lacus sed viverra tellus. Ac placerat vestibulum lectus mauris ultrices eros.</p>
+
−
</div>
+
−
 
+
−
<button class="collapsible" style="font-size:7mm; font-family: 'title', sans-serif;">WEEK 2</button>
+
−
<div class="content">
+
−
  <p style="font-size:5.5mm; font-family: 'title', sans-serif;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Montes nascetur ridiculus mus mauris vitae ultricies leo integer malesuada. Orci sagittis eu volutpat odio facilisis mauris sit amet massa. Fames ac turpis egestas sed tempus urna et pharetra pharetra. Ut tellus elementum sagittis vitae et. Et ultrices neque ornare aenean euismod elementum nisi quis eleifend. Pulvinar sapien et ligula ullamcorper malesuada proin libero nunc consequat. Semper auctor neque vitae tempus quam pellentesque nec nam. Amet purus gravida quis blandit. Risus nullam eget felis eget nunc lobortis mattis. Sed sed risus pretium quam vulputate dignissim suspendisse. Convallis convallis tellus id interdum velit laoreet id donec ultrices. Nulla pharetra diam sit amet nisl. Faucibus ornare suspendisse sed nisi lacus sed viverra tellus. Ac placerat vestibulum lectus mauris ultrices eros.</p>
+
−
</div>
+
−
 
+
−
<button class="collapsible2" style="font-size:7mm; font-family: 'title', sans-serif;">WEEK 3</button>
+
−
<div class="content2">
+
−
  <p style="font-size:5.5mm; font-family: 'title', sans-serif;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Montes nascetur ridiculus mus mauris vitae ultricies leo integer malesuada. Orci sagittis eu volutpat odio facilisis mauris sit amet massa. Fames ac turpis egestas sed tempus urna et pharetra pharetra. Ut tellus elementum sagittis vitae et. Et ultrices neque ornare aenean euismod elementum nisi quis eleifend. Pulvinar sapien et ligula ullamcorper malesuada proin libero nunc consequat. Semper auctor neque vitae tempus quam pellentesque nec nam. Amet purus gravida quis blandit. Risus nullam eget felis eget nunc lobortis mattis. Sed sed risus pretium quam vulputate dignissim suspendisse. Convallis convallis tellus id interdum velit laoreet id donec ultrices. Nulla pharetra diam sit amet nisl. Faucibus ornare suspendisse sed nisi lacus sed viverra tellus. Ac placerat vestibulum lectus mauris ultrices eros.</p>
+
−
</div>
+
−
 
+
−
<button class="collapsible2" style="font-size:7mm; font-family: 'title', sans-serif;">WEEK 4</button>
+
−
<div class="content2">
+
−
  <p style="font-size:5.5mm; font-family: 'title', sans-serif;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Montes nascetur ridiculus mus mauris vitae ultricies leo integer malesuada. Orci sagittis eu volutpat odio facilisis mauris sit amet massa. Fames ac turpis egestas sed tempus urna et pharetra pharetra. Ut tellus elementum sagittis vitae et. Et ultrices neque ornare aenean euismod elementum nisi quis eleifend. Pulvinar sapien et ligula ullamcorper malesuada proin libero nunc consequat. Semper auctor neque vitae tempus quam pellentesque nec nam. Amet purus gravida quis blandit. Risus nullam eget felis eget nunc lobortis mattis. Sed sed risus pretium quam vulputate dignissim suspendisse. Convallis convallis tellus id interdum velit laoreet id donec ultrices. Nulla pharetra diam sit amet nisl. Faucibus ornare suspendisse sed nisi lacus sed viverra tellus. Ac placerat vestibulum lectus mauris ultrices eros.</p>
+
−
</div>
+
−
 
+
−
<button class="collapsible2" style="font-size:7mm; font-family: 'title', sans-serif;">WEEK 5</button>
+
−
<div class="content2">
+
−
  <p style="font-size:5.5mm; font-family: 'title', sans-serif;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Montes nascetur ridiculus mus mauris vitae ultricies leo integer malesuada. Orci sagittis eu volutpat odio facilisis mauris sit amet massa. Fames ac turpis egestas sed tempus urna et pharetra pharetra. Ut tellus elementum sagittis vitae et. Et ultrices neque ornare aenean euismod elementum nisi quis eleifend. Pulvinar sapien et ligula ullamcorper malesuada proin libero nunc consequat. Semper auctor neque vitae tempus quam pellentesque nec nam. Amet purus gravida quis blandit. Risus nullam eget felis eget nunc lobortis mattis. Sed sed risus pretium quam vulputate dignissim suspendisse. Convallis convallis tellus id interdum velit laoreet id donec ultrices. Nulla pharetra diam sit amet nisl. Faucibus ornare suspendisse sed nisi lacus sed viverra tellus. Ac placerat vestibulum lectus mauris ultrices eros.</p>
+
−
</div>
+
−
 
+
−
<button class="collapsible2" style="font-size:7mm; font-family: 'title', sans-serif;">WEEK 6</button>
+
−
<div class="content2">
+
−
  <p style="font-size:5.5mm; font-family: 'title', sans-serif;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Montes nascetur ridiculus mus mauris vitae ultricies leo integer malesuada. Orci sagittis eu volutpat odio facilisis mauris sit amet massa. Fames ac turpis egestas sed tempus urna et pharetra pharetra. Ut tellus elementum sagittis vitae et. Et ultrices neque ornare aenean euismod elementum nisi quis eleifend. Pulvinar sapien et ligula ullamcorper malesuada proin libero nunc consequat. Semper auctor neque vitae tempus quam pellentesque nec nam. Amet purus gravida quis blandit. Risus nullam eget felis eget nunc lobortis mattis. Sed sed risus pretium quam vulputate dignissim suspendisse. Convallis convallis tellus id interdum velit laoreet id donec ultrices. Nulla pharetra diam sit amet nisl. Faucibus ornare suspendisse sed nisi lacus sed viverra tellus. Ac placerat vestibulum lectus mauris ultrices eros.</p>
+
−
</div>
+
−
 
+
−
<button class="collapsible2" style="font-size:7mm; font-family: 'title', sans-serif;">WEEK 7</button>
+
−
<div class="content2">
+
−
  <p style="font-size:5.5mm; font-family: 'title', sans-serif;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Montes nascetur ridiculus mus mauris vitae ultricies leo integer malesuada. Orci sagittis eu volutpat odio facilisis mauris sit amet massa. Fames ac turpis egestas sed tempus urna et pharetra pharetra. Ut tellus elementum sagittis vitae et. Et ultrices neque ornare aenean euismod elementum nisi quis eleifend. Pulvinar sapien et ligula ullamcorper malesuada proin libero nunc consequat. Semper auctor neque vitae tempus quam pellentesque nec nam. Amet purus gravida quis blandit. Risus nullam eget felis eget nunc lobortis mattis. Sed sed risus pretium quam vulputate dignissim suspendisse. Convallis convallis tellus id interdum velit laoreet id donec ultrices. Nulla pharetra diam sit amet nisl. Faucibus ornare suspendisse sed nisi lacus sed viverra tellus. Ac placerat vestibulum lectus mauris ultrices eros.</p>
+
−
</div>
+
−
 
+
−
<button class="collapsible2" style="font-size:7mm; font-family: 'title', sans-serif;">WEEK 8</button>
+
−
<div class="content2">
+
−
  <p style="font-size:5.5mm; font-family: 'title', sans-serif;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Montes nascetur ridiculus mus mauris vitae ultricies leo integer malesuada. Orci sagittis eu volutpat odio facilisis mauris sit amet massa. Fames ac turpis egestas sed tempus urna et pharetra pharetra. Ut tellus elementum sagittis vitae et. Et ultrices neque ornare aenean euismod elementum nisi quis eleifend. Pulvinar sapien et ligula ullamcorper malesuada proin libero nunc consequat. Semper auctor neque vitae tempus quam pellentesque nec nam. Amet purus gravida quis blandit. Risus nullam eget felis eget nunc lobortis mattis. Sed sed risus pretium quam vulputate dignissim suspendisse. Convallis convallis tellus id interdum velit laoreet id donec ultrices. Nulla pharetra diam sit amet nisl. Faucibus ornare suspendisse sed nisi lacus sed viverra tellus. Ac placerat vestibulum lectus mauris ultrices eros.</p>
+
−
</div>
+
−
 
+
−
<button class="collapsible2" style="font-size:7mm; font-family: 'title', sans-serif;">WEEK 9</button>
+
−
<div class="content2">
+
−
  <p style="font-size:5.5mm; font-family: 'title', sans-serif;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Montes nascetur ridiculus mus mauris vitae ultricies leo integer malesuada. Orci sagittis eu volutpat odio facilisis mauris sit amet massa. Fames ac turpis egestas sed tempus urna et pharetra pharetra. Ut tellus elementum sagittis vitae et. Et ultrices neque ornare aenean euismod elementum nisi quis eleifend. Pulvinar sapien et ligula ullamcorper malesuada proin libero nunc consequat. Semper auctor neque vitae tempus quam pellentesque nec nam. Amet purus gravida quis blandit. Risus nullam eget felis eget nunc lobortis mattis. Sed sed risus pretium quam vulputate dignissim suspendisse. Convallis convallis tellus id interdum velit laoreet id donec ultrices. Nulla pharetra diam sit amet nisl. Faucibus ornare suspendisse sed nisi lacus sed viverra tellus. Ac placerat vestibulum lectus mauris ultrices eros.</p>
+
−
</div>
+
−
 
+
−
 
+
−
<button class="collapsible2" style="font-size:7mm; font-family: 'title', sans-serif;">WEEK 10</button>
+
−
<div class="content2">
+
−
  <p style="font-size:5.5mm; font-family: 'title', sans-serif;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Montes nascetur ridiculus mus mauris vitae ultricies leo integer malesuada. Orci sagittis eu volutpat odio facilisis mauris sit amet massa. Fames ac turpis egestas sed tempus urna et pharetra pharetra. Ut tellus elementum sagittis vitae et. Et ultrices neque ornare aenean euismod elementum nisi quis eleifend. Pulvinar sapien et ligula ullamcorper malesuada proin libero nunc consequat. Semper auctor neque vitae tempus quam pellentesque nec nam. Amet purus gravida quis blandit. Risus nullam eget felis eget nunc lobortis mattis. Sed sed risus pretium quam vulputate dignissim suspendisse. Convallis convallis tellus id interdum velit laoreet id donec ultrices. Nulla pharetra diam sit amet nisl. Faucibus ornare suspendisse sed nisi lacus sed viverra tellus. Ac placerat vestibulum lectus mauris ultrices eros.</p>
+
−
</div>
+
  
  

Revision as of 21:31, 14 October 2018

iGEM Collaborations Page

☰

Team: IIT-Madras/Results

Notebook

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.


</div> </center> </body>


<script> var coll = document.getElementsByClassName("collapsible"); var i;

for (i = 0; i < coll.length; i++) { 

 coll[i].addEventListener("click", function() {
   this.classList.toggle("active");
   var content = this.nextElementSibling;
   if (content.style.maxHeight){
     content.style.maxHeight = null;
   } else {
     content.style.maxHeight = content.scrollHeight + "px";
   } 
 });

} </script>

</html>