Difference between revisions of "Team:Marburg/Model"

Line 1: Line 1:
 
{{Marburg}}
 
{{Marburg}}
 
<html>
 
<html>
<style>
+
  <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;
 +
    }
  
p {
+
    .heading {
 +
      color: #f5f5f5;
 +
      text-align: center;
 +
      font-size: 1.75em;
 +
      width: fit-content;
 +
      margin-top: 25px;
 +
      margin-bottom: unset !important;
 +
      transform: rotate(-355deg);
 +
    }
 +
 
 +
    .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);
 +
    }
 +
 
 +
    .logo {
 +
      width: 100px;
 +
      height: 100px;
 +
      position: absolute;
 +
      bottom: -50px;
 +
      transform: rotate(-355deg);
 +
      margin-left: -10px;
 +
    }
 +
 
 +
    .main {
 +
      overflow-x: hidden;
 +
    }
 +
 
 +
    @media (max-width: 810px) {
 +
 
 +
      .logo,
 +
      .line,
 +
      .heading {
 +
        margin-left: -30px;
 +
      }
 +
 
 +
      .line {
 +
        margin: 1.5rem 0 !important;
 +
        margin-left: -40px !important;
 +
      }
 +
    }
 +
    p {
 
  font-size: 100%;
 
  font-size: 100%;
 
  font-family: Arial;
 
  font-family: Arial;
Line 57: Line 119:
  
 
.figbor {
 
.figbor {
background-color: aliceblue;
+
  background-color: aliceblue;
border:thin silver solid;
+
  border:thin silver solid;
margin: 0.5em;
+
  margin: 0.5em;
padding: 0.5em;
+
  padding: 0.5em;
  
text-align: center;
+
  text-align: center;
font-style: italic;
+
  font-style: italic;
font-size: smaller;
+
  font-size: smaller;
 
}
 
}
  
Line 93: Line 155:
 
}
 
}
  
</style>
+
  </style>
 
+
  <div>
 +
    <div class="box-dark">
 +
      <h1 class="heading">
 +
        Modelling
 +
      </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;">
 +
      <!--Add abstract like text here-->
 +
    </section>
 +
    <hr>
 +
    <section class="section grid">
 +
      <div class="sub"
 +
        onclick="popup('model1')">
 +
        <div class="sub-header">
 +
          <h1>
 +
            Growth Curve Model
 +
          </h1>
 +
          <hr>
 +
        </div>
 +
        <div class="sub-content">
 +
          <img src="">
 +
        </div>
 +
      </div>
 +
      <div id="model1"
 +
        class="popup">
 +
        <div class="popup-container">
 +
          <div class="popup-header">
 +
            <h1 class="title">
 +
              <!--Title inside popup-->
 +
            </h1>
 +
            <button type="button"
 +
              onclick="hide('model1')">X</button>
 +
          </div>
 +
          <div class="popup-content"
 +
            style="text-align: justify;">
 +
            <section class="section">
 +
             
 
<h1 class="title"> Growth Curves </h1>
 
<h1 class="title"> Growth Curves </h1>
 
<p>  
 
<p>  
Line 129: Line 231:
 
     <div class="content-inner">
 
     <div class="content-inner">
  
<figure style="float:left; height: 400px; width: 400px;" class="left">
+
  <figure style="float:left; height: 400px; width: 400px;" class="left">
<img style="float:left" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/Luminosity.svg/1280px-Luminosity.svg.png" alt="HTML IST SCHEI?E" class="left">
+
      <img style="float:left" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/Luminosity.svg/1280px-Luminosity.svg.png" alt="HTML IST SCHEI?E" class="left">
<figcaption style="float: left;"><b>Figure 2:</b> Luminosity function.<a href="https://en.wikipedia.org/wiki/Luminosity_function" >(Luminosity function)</a></figcaption>
+
      <figcaption style="float: left;"><b>Figure 2:</b> Luminosity function.<a href="https://en.wikipedia.org/wiki/Luminosity_function" >(Luminosity function)</a></figcaption>
</figure>
+
    </figure>
 
<p>
 
<p>
  
Line 141: Line 243:
  
 
</p>
 
</p>
<figure style="float:center; height: 300px; width: 300px;" class="right">
+
  <figure style="float:center; height: 300px; width: 300px;" class="right">
<img style="float:center" src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/98/Steradian.svg/1024px-Steradian.svg.png" alt="HTML IST SCHEI?E" class="center">
+
      <img style="float:center" src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/98/Steradian.svg/1024px-Steradian.svg.png" alt="HTML IST SCHEI?E" class="center">
<figcaption style="float: right;"><b>Figure 1:</b> Visual representation of Steradian.<a href="https://en.wikipedia.org/wiki/Steradian" >(Steradian)</a></figcaption>
+
      <figcaption style="float: right;"><b>Figure 1:</b> Visual representation of Steradian.<a href="https://en.wikipedia.org/wiki/Steradian" >(Steradian)</a></figcaption>
</figure>
+
    </figure>
 
<p>
 
<p>
 
Candela and therefore also lumen are not only describing the intensities of different wavelenghts and adding those up, but they are weighing them using the so called lumiosity function [Figure 2].  
 
Candela and therefore also lumen are not only describing the intensities of different wavelenghts and adding those up, but they are weighing them using the so called lumiosity function [Figure 2].  
Line 762: Line 864:
 
<br>
 
<br>
 
R., J., & de Boor, C. (1980). A Practical Guide to Splines. Mathematics of Computation, 34(149), 325.  
 
R., J., & de Boor, C. (1980). A Practical Guide to Splines. Mathematics of Computation, 34(149), 325.  
 
+
</p> 
 
+
            </section>
</p>
+
          </div>
 +
        </div>
 +
      </div>
 +
      <div class="sub"
 +
        onclick="popup('model2')">
 +
        <div class="sub-header">
 +
          <h1>
 +
            <!--Title of second model-->
 +
          </h1>
 +
          <hr>
 +
        </div>
 +
        <div class="sub-content">
 +
          <img src="">
 +
        </div>
 +
      </div>
 +
      <div id="model2"
 +
        class="popup">
 +
        <div class="popup-container">
 +
          <div class="popup-header">
 +
            <h1 class="title">
 +
              <!--Title inside popup-->
 +
            </h1>
 +
            <button type="button"
 +
              onclick="hide('model2')">X</button>
 +
          </div>
 +
          <div class="popup-content"
 +
            style="text-align: justify;">
 +
            <section class="section">
 +
              <!--Content of popup-->
 +
            </section>
 +
          </div>
 +
        </div>
 +
      </div>
 +
      <div class="sub"
 +
        onclick="popup('model3')">
 +
        <div class="sub-header">
 +
          <h1>
 +
            <!--Title of third model-->
 +
          </h1>
 +
          <hr>
 +
        </div>
 +
        <div class="sub-content">
 +
          <img src="">
 +
        </div>
 +
      </div>
 +
      <div id="model3"
 +
        class="popup">
 +
        <div class="popup-container">
 +
          <div class="popup-header">
 +
            <h1 class="title">
 +
              <!--Title inside popup-->
 +
            </h1>
 +
            <button type="button"
 +
              onclick="hide('model3')">X</button>
 +
          </div>
 +
          <div class="popup-content"
 +
            style="text-align: justify;">
 +
            <section class="section">
 +
              <!--Content of popup-->
 +
            </section>
 +
          </div>
 +
        </div>
 +
      </div>
 +
    </section>
 +
  </div>
 
</html>
 
</html>
 
{{Marburg/footer}}
 
{{Marburg/footer}}

Revision as of 18:53, 21 October 2019

Modelling



Growth Curve Model