Difference between revisions of "Team:WashU StLouis/Notebook"

(Prototype team page)
 
Line 2: Line 2:
 
<html>
 
<html>
  
 +
<!-----------Thank you to the 2016 WashU iGEM team for the style and set-up of the lab notebook!------------------>
  
−
<div class="column full_size">
 
  
−
<h1>Notebook</h1>
+
<style>
−
<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>
+
/* Slideshow container */
−
<div class="clear"></div>
+
.slideshow-container {
 +
  //max-width: 1000px;
 +
  position: relative;
 +
  margin: 40px;
 +
  float:right;
 +
  width: 40vw;
 +
  outline: solid 2px grey;
 +
  overflow:scroll;
 +
}
  
 +
p {
 +
padding: 20px 0px 0px 20px;
 +
font-family: 'MartelReg';
 +
font-size: 16px;
 +
}
  
−
<div class="column half_size">
+
/* Next & previous buttons */
−
<h5>What should this page have?</h5>
+
.prev, .next {
−
<ul>
+
  cursor: pointer;
−
<li>Chronological notes of what your team is doing.</li>
+
  //position: relative;
−
<li> Brief descriptions of daily important events.</li>
+
  top: 0;
−
<li>Pictures of your progress. </li>
+
  top: 50%;
−
<li>Mention who participated in what task.</li>
+
  //width: auto;
−
</ul>
+
  margin-top: -22px;
 +
  padding: 16px;
 +
  color: white;
 +
  font-weight: bold;
 +
  font-size: 18px;
 +
  transition: 0.6s ease;
 +
  border-radius: 3px 3px 3px 3px;
 +
}
  
−
</div>
+
/* Position the "next button" to the right */
  
−
<div class="column half_size">
+
.prev {
−
<h5>Inspiration</h5>
+
float: left;
−
<p>You can see what others teams have done to organize their notes:</p>
+
}
 +
.next {
 +
  //right: 0;
 +
  border-radius: 3px 3px 3px 3px;
 +
float: right;
 +
}
  
−
<ul>
+
/* On hover, add a black background color with a little bit see-through */
−
<li><a href="https://2014.igem.org/Team:ATOMS-Turkiye/Notebook">2014 ATOMS-Turkiye</a></li>
+
.prev:hover, .next:hover {
−
<li><a href="https://2014.igem.org/Team:Tec-Monterrey/ITESM14_project.html#tab_notebook">2014 Tec Monterrey</a></li>
+
  background-color: rgba(0,0,0,0.8);
−
<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>
+
  
−
</div>
+
/* Caption text */
−
</html>
+
.text {
 +
  //color: #f2f2f2;
 +
  font-size: 15px;
 +
  padding: 8px 12px;
 +
  position: absolute;
 +
  bottom: 8px;
 +
  width: 100%;
 +
  text-align: center;
 +
 
 +
transform: translateY(100%);
 +
-ms-transform: translateY(100%);
 +
-moz-transform: translateY(100%x);
 +
-webkit-transform: translateY(100%);
 +
-o-transform: translateY(100%);
 +
 
 +
}
 +
 
 +
/* Number text (1/3 etc) */
 +
.numbertext {
 +
  //color: #f2f2f2;
 +
  font-size: 12px;
 +
  padding: 8px 12px;
 +
  position: absolute;
 +
  top: 0;
 +
}
 +
 
 +
/* The dots/bullets/indicators */
 +
.dot {
 +
  cursor:pointer;
 +
  height: 13px;
 +
  width: 13px;
 +
  margin: 0 2px;
 +
  background-color: #bbb;
 +
  border-radius: 50%;
 +
  display: inline-block;
 +
  transition: background-color 0.6s ease;
 +
}
 +
 
 +
.active, .dot:hover {
 +
  background-color: #717171;
 +
}
 +
 
 +
/* Fading animation */
 +
.fade {
 +
  -webkit-animation-name: fade;
 +
  -webkit-animation-duration: 1.5s;
 +
  animation-name: fade;
 +
  animation-duration: 1.5s;
 +
}
 +
 
 +
@-webkit-keyframes fade {
 +
  from {opacity: .4}
 +
  to {opacity: 1}
 +
}
 +
 
 +
@keyframes fade {
 +
  from {opacity: .4}
 +
  to {opacity: 1}
 +
}
 +
 
 +
 
 +
.month-calendar {
 +
 
 +
  width: 400px;
 +
  //float:left;
 +
  padding: 5px 5px 5px 5px;
 +
  //display: none;
 +
  margin-left: auto;
 +
    margin-right: auto;
 +
}
 +
 
 +
.button-wrapper {
 +
 
 +
  width: 200px;
 +
  padding: 5px 5px 5px 5px;
 +
  //display: none;
 +
  margin-left: auto;
 +
    margin-right: auto;
 +
  display:block;
 +
background:grey;
 +
padding: 30px 50px 30px 50px;
 +
 
 +
 
 +
}
 +
 
 +
tr {
 +
  line-height: 0px;
 +
  text-align:center;
 +
}
 +
 
 +
.selected-date {
 +
background-color: #72c9b6;
 +
}
 +
 
 +
.date {
 +
 
 +
}
 +
 
 +
td {
 +
background-color: white;
 +
}
 +
 
 +
.mySlides {
 +
display:none;
 +
}
 +
 
 +
.calendar-wrapper {
 +
display:table;
 +
float:left;
 +
width: 45vw;
 +
position: relative;
 +
 
 +
 
 +
}
 +
 
 +
</style>
 +
 
 +
 
 +
 
 +
<div class = "column full_size">
 +
 
 +
 
 +
<h1>Notebook</h1>
 +
 
 +
 
 +
<div class = "calendar-wrapper">
 +
<div class="month-calendar june" style = "display:block;">
 +
  <table>
 +
      <tr>
 +
        <th colspan=7>June</th>
 +
      </tr>
 +
      <tr>
 +
        <td></td>
 +
        <td></td>
 +
        <td></td>
 +
        <td></td>
 +
        <td class = "date selected-date">1</td>
 +
        <td class = "date">2</td>
 +
        <td class = "date">3</td>
 +
      </tr>
 +
      <tr>
 +
        <td class = "date">4</td>
 +
        <td class = "date">5</td>
 +
        <td class = "date">6</td>
 +
        <td class = "date">7</td>
 +
        <td class = "date">8</td>
 +
        <td class = "date">9</td>
 +
        <td class = "date">10</td>
 +
      </tr>
 +
      <tr>
 +
        <td class = "date">11</td>
 +
        <td class = "date">12</td>
 +
        <td class = "date">13</td>
 +
        <td class = "date">14</td>
 +
        <td class = "date">15</td>
 +
        <td class = "date">16</td>
 +
        <td class = "date">17</td>
 +
      </tr>
 +
      <tr>
 +
        <td class = "date">18</td>
 +
        <td class = "date">19</td>
 +
        <td class = "date">20</td>
 +
        <td class = "date">21</td>
 +
        <td class = "date">22</td>
 +
        <td class = "date">23</td>
 +
        <td class = "date">24</td>
 +
      </tr>
 +
      <tr>
 +
        <td class = "date">25</td>
 +
        <td class = "date">26</td>
 +
        <td class = "date">27</td>
 +
        <td class = "date">28</td>
 +
        <td class = "date">29</td>
 +
        <td class = "date">30</td>
 +
        <td></td>
 +
      </tr>
 +
      <tr>
 +
        <td></td>
 +
        <td></td>
 +
        <td></td>
 +
        <td></td>
 +
        <td></td>
 +
        <td></td>
 +
        <td></td>
 +
      </tr>
 +
  </table>
 +
  </div>
 +
 
 +
  <div  class="month-calendar july" style = "display:none;">
 +
  <table>
 +
      <tr>
 +
        <th colspan=7>July</th>
 +
      </tr>
 +
      <tr>
 +
        <td></td>
 +
        <td></td>
 +
        <td></td>
 +
        <td></td>
 +
        <td></td>
 +
        <td></td>
 +
        <td class = "date">1</td>
 +
      </tr>
 +
      <tr>
 +
        <td class = "date">2</td>
 +
        <td class = "date">3</td>
 +
        <td class = "date">4</td>
 +
        <td class = "date">5</td>
 +
        <td class = "date">6</td>
 +
        <td class = "date">7</td>
 +
        <td class = "date">8</td>
 +
      </tr>
 +
      <tr>
 +
        <td class = "date">9</td>
 +
        <td class = "date">10</td>
 +
        <td class = "date">11</td>
 +
        <td class = "date">12</td>
 +
        <td class = "date">13</td>
 +
        <td class = "date">14</td>
 +
        <td class = "date">15</td>
 +
      </tr>
 +
      <tr>
 +
        <td class = "date">16</td>
 +
        <td class = "date">17</td>
 +
        <td class = "date">18</td>
 +
        <td class = "date">19</td>
 +
        <td class = "date">20</td>
 +
        <td class = "date">21</td>
 +
        <td class = "date">22</td>
 +
      </tr>
 +
      <tr>
 +
        <td class = "date">23</td>
 +
        <td class = "date">24</td>
 +
        <td class = "date">25</td>
 +
        <td class = "date">26</td>
 +
        <td class = "date">27</td>
 +
        <td class = "date">28</td>
 +
        <td class = "date">29</td>
 +
      </tr>
 +
      <tr>
 +
        <td class = "date">30</td>
 +
        <td class = "date">31</td>
 +
        <td></td>
 +
        <td></td>
 +
        <td></td>
 +
        <td></td>
 +
        <td></td>
 +
      </tr>
 +
  </table>
 +
  </div>
 +
 
 +
  <div  class="month-calendar august" style = "display:none;">
 +
  <table>
 +
      <tr>
 +
        <th colspan=7>August</th>
 +
      </tr>
 +
      <tr>
 +
        <td></td>
 +
        <td></td>
 +
        <td class = "date">1</td>
 +
        <td class = "date">2</td>
 +
        <td class = "date">3</td>
 +
        <td class = "date">4</td>
 +
        <td class = "date">5</td>
 +
      </tr>
 +
      <tr>
 +
        <td class = "date">6</td>
 +
        <td class = "date">7</td>
 +
        <td class = "date">8</td>
 +
        <td class = "date">9</td>
 +
        <td class = "date">10</td>
 +
        <td class = "date">11</td>
 +
        <td class = "date">12</td>
 +
      </tr>
 +
      <tr>
 +
        <td class = "date">13</td>
 +
        <td class = "date">14</td>
 +
        <td class = "date">15</td>
 +
        <td class = "date">16</td>
 +
        <td class = "date">17</td>
 +
        <td class = "date">18</td>
 +
        <td class = "date">19</td>
 +
      </tr>
 +
      <tr>
 +
        <td class = "date">20</td>
 +
        <td class = "date">21</td>
 +
        <td class = "date">22</td>
 +
        <td class = "date">23</td>
 +
        <td class = "date">24</td>
 +
        <td class = "date">25</td>
 +
        <td class = "date">26</td>
 +
      </tr>
 +
      <tr>
 +
        <td class = "date">27</td>
 +
        <td class = "date">28</td>
 +
        <td class = "date">29</td>
 +
        <td class = "date">30</td>
 +
        <td class = "date">31</td>
 +
        <td></td>
 +
        <td></td>
 +
      </tr>
 +
      <tr>
 +
        <td></td>
 +
        <td></td>
 +
        <td></td>
 +
        <td></td>
 +
        <td></td>
 +
        <td></td>
 +
        <td></td>
 +
      </tr>
 +
  </table>
 +
  </div>
 +
 
 +
  <div  class="month-calendar september" style = "display:none;">
 +
  <table>
 +
      <tr>
 +
        <th colspan=7>September</th>
 +
      </tr>
 +
      <tr>
 +
        <td></td>
 +
        <td></td>
 +
        <td></td>
 +
        <td></td>
 +
        <td></td>
 +
        <td class = "date">1</td>
 +
        <td class = "date">2</td>
 +
      </tr>
 +
      <tr>
 +
        <td class = "date">3</td>
 +
        <td class = "date">4</td>
 +
        <td class = "date">5</td>
 +
        <td class = "date">6</td>
 +
        <td class = "date">7</td>
 +
        <td class = "date">8</td>
 +
        <td class = "date">9</td>
 +
      </tr>
 +
      <tr>
 +
        <td class = "date">10</td>
 +
        <td class = "date">11</td>
 +
        <td class = "date">12</td>
 +
        <td class = "date">13</td>
 +
        <td class = "date">14</td>
 +
        <td class = "date">15</td>
 +
        <td class = "date">16</td>
 +
      </tr>
 +
      <tr>
 +
        <td class = "date">17</td>
 +
        <td class = "date">18</td>
 +
        <td class = "date">19</td>
 +
        <td class = "date">20</td>
 +
        <td class = "date">21</td>
 +
        <td class = "date">22</td>
 +
        <td class = "date">23</td>
 +
      </tr>
 +
      <tr>
 +
        <td class = "date">24</td>
 +
        <td class = "date">25</td>
 +
        <td class = "date">26</td>
 +
        <td class = "date">27</td>
 +
        <td class = "date">28</td>
 +
        <td class = "date">29</td>
 +
        <td class = "date">30</td>
 +
      </tr>
 +
      <tr>
 +
        <td></td>
 +
        <td></td>
 +
        <td></td>
 +
        <td></td>
 +
        <td></td>
 +
        <td></td>
 +
        <td></td>
 +
      </tr>
 +
  </table>
 +
  </div>
 +
 
 +
  <div  class="month-calendar october" style = "display:none;">
 +
  <table>
 +
      <tr>
 +
        <th colspan=7>October</th>
 +
      </tr>
 +
      <tr>
 +
        <td class = "date">1</td>
 +
        <td class = "date">2</td>
 +
        <td class = "date">3</td>
 +
        <td class = "date">4</td>
 +
        <td class = "date">5</td>
 +
        <td class = "date">6</td>
 +
        <td class = "date">7</td>
 +
      </tr>
 +
      <tr>
 +
        <td class = "date">8</td>
 +
        <td class = "date">9</td>
 +
        <td class = "date">10</td>
 +
        <td class = "date">11</td>
 +
        <td class = "date">12</td>
 +
        <td class = "date">13</td>
 +
        <td class = "date">14</td>
 +
      </tr>
 +
      <tr>
 +
        <td class = "date">15</td>
 +
        <td class = "date">16</td>
 +
        <td class = "date">17</td>
 +
        <td class = "date">18</td>
 +
        <td class = "date">19</td>
 +
        <td class = "date">20</td>
 +
        <td class = "date">21</td>
 +
      </tr>
 +
      <tr>
 +
        <td class = "date">22</td>
 +
        <td class = "date">23</td>
 +
        <td class = "date">24</td>
 +
        <td class = "date">25</td>
 +
        <td class = "date">26</td>
 +
        <td class = "date">27</td>
 +
        <td class = "date">28</td>
 +
      </tr>
 +
      <tr>
 +
        <td class = "date">29</td>
 +
        <td class = "date">30</td>
 +
        <td class = "date">31</td>
 +
        <td></td>
 +
        <td></td>
 +
        <td></td>
 +
        <td></td>
 +
      </tr>
 +
      <tr>
 +
        <td></td>
 +
        <td></td>
 +
        <td></td>
 +
        <td></td>
 +
        <td></td>
 +
        <td></td>
 +
        <td></td>
 +
      </tr>
 +
  </table>
 +
 
 +
 
 +
 
 +
  </div>

Revision as of 18:04, 5 June 2017

HOME
Team
Project
Background
Description
Design
Model
Results
Demonstrate
Improve
Attributions
Citations
Wet Lab
Notebook
Experiments/Protocols
InterLab
Safety
Parts
Parts
Basic Parts
Composite Parts
Human Practices
Silver HP
Public Engagement
Awards
Hardware
Model
Judging Form

Notebook

June
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30