Difference between revisions of "Team:Marburg/Notebook"

Line 1: Line 1:
 
{{Marburg}}
 
{{Marburg}}
 
<html>
 
<html>
 +
  <style>
 +
    .box-dark {
 +
      background-color: #3d404d;
 +
      min-height: 30vh;
 +
      box-shadow: 1px 1px 40px black;
 +
      margin-left: -10vw;
 +
      width: 120vw;
 +
      position: relative;
 +
      z-index: 2;
 +
      display: flex;
 +
      flex-direction: column;
 +
      align-items: center;
 +
      transform: rotate(355deg);
 +
      justify-content: center;
 +
      margin-top: -12vh;
 +
    }
  
 +
    .heading {
 +
      color: #f5f5f5;
 +
      text-align: center;
 +
      font-size: 1.75em;
 +
      width: fit-content;
 +
      margin-top: 25px;
 +
      margin-bottom: unset !important;
 +
      transform: rotate(-355deg);
 +
      margin-left: -20px;
 +
    }
  
−
<div class="column full_size">
+
    .line {
 +
      border-top: 2px solid #f5f5f5;
 +
      background-color: #f5f5f5;
 +
      border-width: 2px;
 +
      display: block;
 +
      width: 100px;
 +
      margin-top: 25px;
 +
      margin-bottom: unset;
 +
      transform: rotate(-355deg);
 +
      margin-left: -40px;
 +
    }
  
−
<h1>Notebook</h1>
+
    .logo {
−
<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>
+
      width: 100px;
 +
      height: 100px;
 +
      position: absolute;
 +
      bottom: -50px;
 +
      transform: rotate(-355deg);
 +
      margin-left: -35px;
 +
    }
  
−
</div>
+
    .main {
−
<div class="clear"></div>
+
      overflow-x: hidden;
 +
    }
  
 +
    .medal {
 +
      margin: 1em;
 +
      height: 100px;
 +
    }
  
 +
    .popup-header {
 +
      align-items: center;
 +
    }
  
−
<div class="column two_thirds_size">
+
    @media (max-width: 810px) {
−
<h3>What should this page have?</h3>
+
−
<ul>
+
−
<li>Chronological notes of what your team is doing.</li>
+
−
<li> Brief descriptions of daily important events.</li>
+
−
<li>Pictures of your progress. </li>
+
−
<li>Mention who participated in what task.</li>
+
−
</ul>
+
  
−
</div>
+
      .logo,
 +
      .line,
 +
      .heading {
 +
        margin-left: -30px;
 +
      }
  
−
<div class="column third_size">
+
      .line {
−
<div class="highlight decoration_A_full">
+
        margin: 1.5rem 0 !important;
−
<h3>Inspiration</h3>
+
        margin-left: -40px !important;
−
<p>You can see what others teams have done to organize their notes:</p>
+
      }
 +
    }
  
−
<ul>
+
    .timeline {
−
<li><a href="https://2018.igem.org/Team:Munich/Notebook">2018 Munich</a></li>
+
      position: relative;
−
<li><a href="https://2014.igem.org/Team:ATOMS-Turkiye/Notebook">2014 ATOMS-Turkiye</a></li>
+
    }
−
<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>
+
−
</div>
+
−
</div>
+
  
 +
    .timeline::before {
 +
      content: '';
 +
      background: #626574;
 +
      width: 5px;
 +
      height: 95%;
 +
      position: absolute;
 +
      left: 50%;
 +
      transform: translateX(-50%);
 +
    }
 +
 +
    .timeline-item {
 +
      width: 100%;
 +
      margin-bottom: 70px;
 +
    }
 +
 +
    .timeline-item:nth-child(even) .timeline-content {
 +
      float: right;
 +
      padding: 40px 30px 10px 30px;
 +
    }
 +
 +
    .timeline-item:nth-child(even) .timeline-content .date {
 +
      right: auto;
 +
      left: 0;
 +
    }
 +
 +
    .timeline-item:nth-child(even) .timeline-content::after {
 +
      content: '';
 +
      position: absolute;
 +
      border-style: solid;
 +
      width: 0;
 +
      height: 0;
 +
      top: 30px;
 +
      left: -15px;
 +
      border-width: 10px 15px 10px 0;
 +
      border-color: transparent #f5f5f5 transparent transparent;
 +
    }
 +
 +
    .timeline-item::after {
 +
      content: '';
 +
      display: block;
 +
      clear: both;
 +
    }
 +
 +
    .timeline-content {
 +
      position: relative;
 +
      width: 45%;
 +
      padding: 10px 30px;
 +
      border-radius: 4px;
 +
      background: white;
 +
      box-shadow: 0 20px 25px -15px rgba(0, 0, 0, 0.3);
 +
    }
 +
 +
    .timeline-content::after {
 +
      content: '';
 +
      position: absolute;
 +
      border-style: solid;
 +
      width: 0;
 +
      height: 0;
 +
      top: 30px;
 +
      right: -15px;
 +
      border-width: 10px 0 10px 15px;
 +
      border-color: transparent transparent transparent #f5f5f5;
 +
    }
 +
 +
    .timeline-card {
 +
      padding: 0 !important;
 +
    }
 +
 +
    .timeline-card p {
 +
      padding: 0 20px;
 +
    }
 +
 +
    .timeline-content p {
 +
      margin-top: 25px;
 +
    }
 +
 +
    .timeline-card a {
 +
      margin-left: 20px;
 +
    }
 +
 +
    .timeline-img {
 +
      width: 30px;
 +
      height: 30px;
 +
      border-radius: 50%;
 +
      position: absolute;
 +
      left: 50%;
 +
      margin-top: 25px;
 +
      margin-left: -15px;
 +
      background: #3d404d;
 +
    }
 +
 +
    .date {
 +
      background: #3d404d;
 +
      display: inline-block;
 +
      color: #FFFFFF;
 +
      padding: 10px;
 +
      position: absolute;
 +
      top: 0;
 +
      right: 0;
 +
      font-weight: bold;
 +
    }
 +
 +
    @media screen and (max-width: 768px) {
 +
      .timeline::before {
 +
        left: 50px;
 +
      }
 +
 +
      .timeline .timeline-img {
 +
        left: 50px;
 +
      }
 +
 +
      .timeline .timeline-content {
 +
        max-width: 100%;
 +
        width: auto;
 +
        margin-left: 70px;
 +
      }
 +
 +
      .timeline .timeline-item:nth-child(even) .timeline-content {
 +
        float: none;
 +
      }
 +
 +
      .timeline .timeline-item:nth-child(odd) .timeline-content::after {
 +
        content: '';
 +
        position: absolute;
 +
        border-style: solid;
 +
        width: 0;
 +
        height: 0;
 +
        top: 30px;
 +
        left: -15px;
 +
        border-width: 10px 15px 10px 0;
 +
        border-color: transparent #f5f5f5 transparent transparent;
 +
      }
 +
    }
 +
  </style>
 +
  <div>
 +
    <div class="box-dark">
 +
      <h1 class="heading">
 +
        N O T E B O O K
 +
      </h1>
 +
      <hr class="line">
 +
      <img src="https://static.igem.org/mediawiki/2019/a/ac/T--Marburg--logo.svg" class="logo" alt="Syntex Logo">
 +
    </div>
 +
    <section style="margin-top: 11vh;">
 +
      <section class="timeline">
 +
        <div class="container">
 +
          <div class="timeline-item">
 +
            <div class="timeline-img"></div>
 +
            <div class="timeline-content">
 +
              <div class="date">M A R C H</div>
 +
              <div class="content" style="margin-top: 50px;">
 +
                <table>
 +
                  <tr>
 +
                    <td>07.</td>
 +
                    <td>First talk with Pascal Pfister about Cyano project</td>
 +
                  </tr>
 +
                  <tr>
 +
                    <td>22. - 23.</td>
 +
                    <td>First talk with Pascal Pfister about Cyano project</td>
 +
                  </tr>
 +
                  <tr>
 +
                    <td>26.</td>
 +
                    <td>First talk with Pascal Pfister about Cyano project</td>
 +
                  </tr>
 +
                  <tr>
 +
                    <td>31.</td>
 +
                    <td>First talk with Pascal Pfister about Cyano project</td>
 +
                  </tr>
 +
                </table>
 +
              </div>
 +
            </div>
 +
          </div>
 +
          <div class="timeline-item">
 +
            <div class="timeline-img"></div>
 +
            <div class="timeline-content">
 +
              <div class="date">A P R I L</div>
 +
              <table></table>
 +
            </div>
 +
          </div>
 +
 +
          <div class="timeline-item">
 +
            <div class="timeline-img"></div>
 +
            <div class="timeline-content">
 +
              <div class="date">M A Y</div>
 +
              <table></table>
 +
            </div>
 +
          </div>
 +
 +
          <div class="timeline-item">
 +
            <div class="timeline-img"></div>
 +
            <div class="timeline-content">
 +
              <div class="date">J U N E</div>
 +
              <table></table>
 +
            </div>
 +
          </div>
 +
          <div class="timeline-item">
 +
            <div class="timeline-img"></div>
 +
            <div class="timeline-content">
 +
              <div class="date">J U L Y</div>
 +
              <table></table>
 +
            </div>
 +
          </div>
 +
          <div class="timeline-item">
 +
            <div class="timeline-img"></div>
 +
            <div class="timeline-content">
 +
              <div class="date">A U G U S T</div>
 +
              <table></table>
 +
            </div>
 +
          </div><div class="timeline-item">
 +
            <div class="timeline-img"></div>
 +
            <div class="timeline-content">
 +
              <div class="date">S E P T E M B E R</div>
 +
              <table></table>
 +
            </div>
 +
          </div><div class="timeline-item">
 +
            <div class="timeline-img"></div>
 +
            <div class="timeline-content">
 +
              <div class="date">O C T O B E R</div>
 +
              <table></table>
 +
            </div>
 +
          </div>
 +
        </div>
 +
      </section>
 +
    </section>
 +
  </div>
 
</html>
 
</html>
 
{{Marburg/footer}}
 
{{Marburg/footer}}

Revision as of 11:52, 20 October 2019

N O T E B O O K

M A R C H
07. First talk with Pascal Pfister about Cyano project
22. - 23. First talk with Pascal Pfister about Cyano project
26. First talk with Pascal Pfister about Cyano project
31. First talk with Pascal Pfister about Cyano project
A P R I L
M A Y
J U N E
J U L Y
A U G U S T
S E P T E M B E R
O C T O B E R