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

(Prototype team page)
 
Line 1: Line 1:
−
{{IIT-Madras}}
+
{{IIT-Madras/NewHeader}}
 +
 
 
<html>
 
<html>
 +
<title> Team: IIT-Madras/Results</title>
  
 +
<style>
  
−
<div class="column full_size">
+
@font-face {
 +
    src: url(https://static.igem.org/mediawiki/2018/f/fa/T--IIT-Madras--cantarell.ttf);
 +
    font-family: title;
 +
  }
 +
@font-face {
 +
src: url(https://static.igem.org/mediawiki/2018/1/13/T--IIT-Madras--montserrat.otf);
 +
    font-family: subtitle;
 +
}
 +
 +
body, h1, h2, h3, h4, p {
 +
font-family: 'title', sans-serif;
 +
}
  
−
<h1>Notebook</h1>
+
.box {
−
<p> Document the dates you worked on your project. This should be a detailed account of the work done each day for your project.</p>
+
  
−
</div>
+
  width: 80%;
−
<div class="clear"></div>
+
    border: 0.9mm solid black;
 +
  padding: 4mm;
 +
    margin: 0;
 +
border-bottom: none;
 +
  
 +
 +
}
  
 +
ol {
 +
margin: 0mm;
 +
padding: 0mm;
 +
display: inline-block;
 +
}
  
−
<div class="column two_thirds_size">
+
.header {
−
<h3>What should this page have?</h3>
+
 
−
<ul>
+
  padding: 30px;
−
<li>Chronological notes of what your team is doing.</li>
+
  text-align: center;
−
<li> Brief descriptions of daily important events.</li>
+
−
<li>Pictures of your progress. </li>
+
−
<li>Mention who participated in what task.</li>
+
−
</ul>
+
  
−
</div>
+
}
  
−
<div class="column third_size">
+
.p16{
−
<div class="highlight decoration_A_full">
+
padding-left: 16mm;
−
<h3>Inspiration</h3>
+
}
−
<p>You can see what others teams have done to organize their notes:</p>
+
  
−
<ul>
+
.p12 {
−
<li><a href="https://2014.igem.org/Team:ATOMS-Turkiye/Notebook">2014 ATOMS-Turkiye</a></li>
+
padding-right: 12mm;
−
<li><a href="https://2014.igem.org/Team:Tec-Monterrey/ITESM14_project.html#tab_notebook">2014 Tec Monterrey</a></li>
+
}
−
<li><a href="https://2014.igem.org/Team:Kyoto/Notebook/Magnetosome_Formation#title">2014 Kyoto</a></li>
+
 
−
<li><a href="https://2014.igem.org/Team:Cornell/notebook">2014 Cornell</a></li>
+
 
−
</ul>
+
@media only screen and (max-width: 600px) {
 +
.p16{
 +
 
 +
padding-left: 0mm;
 +
padding-right: 0mm;
 +
 
 +
}
 +
 
 +
.p12 {
 +
padding-left: 0mm;
 +
padding-right: 0mm;
 +
}
 +
 
 +
 
 +
}
 +
 
 +
<style>
 +
.collapsible {
 +
  background-color: white;
 +
  color: black;
 +
  cursor: pointer;
 +
  padding: 4mm;
 +
  width: 100%;
 +
  border: ridge black;
 +
  text-align: left;
 +
  outline: none;
 +
  font-size: 15px;
 +
}
 +
 
 +
.active, .collapsible:hover {
 +
  background-color: black;
 +
  color: green;
 +
}
 +
 
 +
.collapsible:after {
 +
  content: '\002B';
 +
  color: white;
 +
  font-weight: bold;
 +
  float: right;
 +
  margin-left: 5px;
 +
}
 +
 
 +
.active:after {
 +
  content: "\2212";
 +
}
 +
 
 +
.content {
 +
  padding: 0 4mm;
 +
  max-height: 0;
 +
  overflow: hidden;
 +
  transition: max-height 0.2s ease-out;
 +
  background-color: white;
 +
}
 +
 
 +
</style>
 +
 
 +
<body>
 +
<h1 style="font-family: 'title', sans-serif; font-size: 12mm; padding-left: 20%; color: #00b355;">Notebook</h1>
 +
<div class="box">
 +
<p>A Collapsible:</p>
 +
<button class="collapsible">Open Collapsible</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>
 
</div>
 +
 +
<p>Collapsible Set:</p>
 +
<button class="collapsible" style=>WEEK 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>
 
</div>
 +
<button class="collapsible">WEEK 2</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>
 +
<button class="collapsible">Open Section 3</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>
 +
 +
 +
 +
 +
</div>
 +
 +
</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>
 
</html>

Revision as of 21:05, 14 October 2018

iGEM Collaborations Page

☰

Team: IIT-Madras/Results

Notebook

A Collapsible:

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.

Collapsible Set:

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.