Team:Heidelberg/Notebook

From 2014.igem.org

(Difference between revisions)
Line 26: Line 26:
.container {
.container {
   width: 1170px;
   width: 1170px;
 +
}
 +
 +
body {
 +
    background-color: black;
}
}
Line 37: Line 41:
.line {
.line {
-
    border:solid 1px #f3ca11;
+
  border:solid 1px #f3ca11;
-
    height:100%;
+
  height:100%;
-
    width:0;
+
  width:0;
-
    margin-left:9px;
+
  margin-left:9px;
-
    margin-right:9px;
+
  margin-right:9px;   
 +
}
 +
 
 +
.month-text {
 +
  display: inline-block;
 +
  vertical-align: middle;
 +
  color: white;
 +
}
 +
 
 +
.hor-line {
 +
  width: 20px;
 +
  border: solid 1px #f3ca11;
 +
  display:inline-block;
 +
  vertical-align:middle;
 +
  margin-right:5px;
 +
}
 +
 
 +
.month.activ .month-text {
 +
  color: #f3ca11;
 +
}
 +
 
 +
.month {
 +
  position:absolute;
 +
  right:0;
 +
}
 +
 
 +
.month.active .hor-line {
 +
  width:40px;
}
}
Line 81: Line 112:
     <div class="row" style="height:800px;">
     <div class="row" style="height:800px;">
       <div class="col-lg-6">Graph</div>
       <div class="col-lg-6">Graph</div>
-
       <div class="col-lg-3">Wochen</div>
+
       <div class="col-lg-4">Wochen</div>
-
       <div class="col-lg-3" style="height:100%">
+
       <div class="col-lg-2" style="height:100%; position:relative;">
         <div style="height:100%; position:absolute; right:0; top:0;">
         <div style="height:100%; position:absolute; right:0; top:0;">
           <div class="line"></div>
           <div class="line"></div>
           <div class="arrow"></div>
           <div class="arrow"></div>
         </div>
         </div>
 +
        <a class="month" style="top:5%;">
 +
          <span class="month-text">june&nbsp;</span><span class="hor-line"></span>
 +
        </a>
 +
        <a class="month" style="top:25%;">
 +
          <span class="month-text">july&nbsp;</span><span class="hor-line"></span>
 +
        </a>
 +
        <a class="month" style="top:45%;">
 +
          <span class="month-text">august&nbsp;</span><span class="hor-line"></span>
 +
        </a>
 +
        <a class="month" style="top:65%;">
 +
          <span class="month-text">september&nbsp;</span><span class="hor-line"></span>
 +
        </a>
 +
        <a class="month" style="top:85%;">
 +
          <span class="month-text">october&nbsp;</span><span class="hor-line"></span>
 +
        </a>
       </div>
       </div>
     </div>
     </div>

Revision as of 14:18, 13 October 2014