Difference between revisions of "Team:Glasgow/Notebook"

Line 7: Line 7:
 
   font-weight: 400;
 
   font-weight: 400;
 
}
 
}
 +
/*===== Vertical Timeline =====*/
 
  #content{
 
  #content{
 
  height:90px;
 
  height:90px;
Line 16: Line 17:
 
   height: auto;
 
   height: auto;
 
  }
 
  }
−
/*===== Vertical Timeline =====*/
 
−
 
 
#conference-timeline {
 
#conference-timeline {
 
   position: relative;
 
   position: relative;
Line 140: Line 139:
 
   top: 0;
 
   top: 0;
 
   left: 50%;
 
   left: 50%;
−
   width: 75px;
+
   width: 70px;
−
   height: 75px;
+
   height: 70px;
 
   margin-left: -31px;
 
   margin-left: -31px;
 
   color: #fff;
 
   color: #fff;
Line 157: Line 156:
 
.timeline-article .meta-date .date {
 
.timeline-article .meta-date .date {
 
   font-size: 30px;
 
   font-size: 30px;
−
   line-height: 50px;
+
   line-height: 40px;
 
}
 
}
  
 
.timeline-article .meta-date .month {
 
.timeline-article .meta-date .month {
−
   font-size: 25px;
+
   font-size: 18px;
−
   line-height: 15px;
+
   line-height: 10px;
 
}
 
}
 
/*===== // Vertical Timeline =====*/
 
/*===== // Vertical Timeline =====*/
Line 230: Line 229:
 
     <div class="conference-center-line"></div>
 
     <div class="conference-center-line"></div>
 
     <div class="conference-timeline-content">
 
     <div class="conference-timeline-content">
−
      <!-- Article -->
+
            <!--------JUNE------->
−
       <div class="timeline-article">
+
       <div class="timeline-article" id="June">
 
         <div class="content-left-container">
 
         <div class="content-left-container">
 
           <div class="content-left">
 
           <div class="content-left">
Line 239: Line 238:
 
         <div class="content-right-container">
 
         <div class="content-right-container">
 
           <div class="content-right">
 
           <div class="content-right">
−
             <img src="https://static.igem.org/mediawiki/2015/e/eb/2015-Glasgow-timeline1.jpg" style="max-width:350px;">
+
             <img src="{% static 'img/2015-Glasgow-timeline1.jpg' %}" style="max-width:350px;">
 
             <p></p>
 
             <p></p>
 
           </div>
 
           </div>
Line 248: Line 247:
 
         </div>
 
         </div>
 
       </div>
 
       </div>
−
      <!-- // Article -->
 
−
     
 
−
      <!-- Article -->
 
 
       <div class="timeline-article">
 
       <div class="timeline-article">
 
         <div class="content-left-container">
 
         <div class="content-left-container">
Line 265: Line 261:
 
         </div>
 
         </div>
 
       </div>
 
       </div>
−
      <!-- // Article -->
 
−
     
 
−
      <!-- Article -->
 
 
       <div class="timeline-article">
 
       <div class="timeline-article">
 
         <div class="content-left-container">
 
         <div class="content-left-container">
Line 280: Line 273:
 
         </div>
 
         </div>
 
         <div class="meta-date">
 
         <div class="meta-date">
−
           <span class="date">10th</span>
+
           <span class="date">9th</span>
 
           <span class="month">Jun</span>
 
           <span class="month">Jun</span>
 
         </div>
 
         </div>
 
       </div>
 
       </div>
 +
      <div class="timeline-article">
 +
        <div class="content-left-container">
 +
          <div class="content-left">
 +
          </div>
 +
        </div>
 +
        <div class="content-right-container">
 +
          <div class="content-right">
 +
          </div>
 +
        </div>
 +
        <div class="meta-date">
 +
          <span class="date">9th</span>
 +
          <span class="month">Jun</span>
 +
        </div>
 +
      </div>
 +
      <div class="timeline-article">
 +
        <div class="content-left-container">
 +
          <div class="content-left">
 +
          </div>
 +
        </div>
 +
        <div class="content-right-container">
 +
          <div class="content-right">
 +
          </div>
 +
        </div>
 +
        <div class="meta-date">
 +
          <span class="date">9th</span>
 +
          <span class="month">Jun</span>
 +
        </div>
 +
      </div>
 +
      <div class="timeline-article">
 +
        <div class="content-left-container">
 +
          <div class="content-left">
 +
          </div>
 +
        </div>
 +
        <div class="content-right-container">
 +
          <div class="content-right">
 +
          </div>
 +
        </div>
 +
        <div class="meta-date">
 +
          <span class="date">9th</span>
 +
          <span class="month">Jun</span>
 +
        </div>
 +
      </div>
 +
      <div class="timeline-article">
 +
        <div class="content-left-container">
 +
          <div class="content-left">
 +
          </div>
 +
        </div>
 +
        <div class="content-right-container">
 +
          <div class="content-right">
 +
          </div>
 +
        </div>
 +
        <!---------JULY------->
 +
        <div class="meta-date" id="July">
 +
          <span class="date">9th</span>
 +
          <span class="month">Jun</span>
 +
        </div>
 +
      </div>
 +
      <div class="timeline-article">
 +
        <div class="content-left-container">
 +
          <div class="content-left">
 +
          </div>
 +
        </div>
 +
        <div class="content-right-container">
 +
          <div class="content-right">
 +
          </div>
 +
        </div>
 +
        <div class="meta-date">
 +
          <span class="date">9th</span>
 +
          <span class="month">Jun</span>
 +
        </div>
 +
      </div>
 +
      <div class="timeline-article">
 +
        <div class="content-left-container">
 +
          <div class="content-left">
 +
          </div>
 +
        </div>
 +
        <div class="content-right-container">
 +
          <div class="content-right">
 +
          </div>
 +
        </div>
 +
        <div class="meta-date">
 +
          <span class="date">9th</span>
 +
          <span class="month">Jun</span>
 +
        </div>
 +
      </div>
 +
      <div class="timeline-article">
 +
        <div class="content-left-container">
 +
          <div class="content-left">
 +
          </div>
 +
        </div>
 +
        <div class="content-right-container">
 +
          <div class="content-right">
 +
          </div>
 +
        </div>
 +
        <div class="meta-date">
 +
          <span class="date">9th</span>
 +
          <span class="month">Jun</span>
 +
        </div>
 +
      </div>
 +
      <div class="timeline-article">
 +
        <div class="content-left-container">
 +
          <div class="content-left">
 +
          </div>
 +
        </div>
 +
        <div class="content-right-container">
 +
          <div class="content-right">
 +
          </div>
 +
        </div>
 +
        <!---------AUGUST------>
 +
        <div class="meta-date" id="August">
 +
          <span class="date">9th</span>
 +
          <span class="month">Jun</span>
 +
        </div>
 +
      </div>
 +
      <div class="timeline-article">
 +
        <div class="content-left-container">
 +
          <div class="content-left">
 +
          </div>
 +
        </div>
 +
        <div class="content-right-container">
 +
          <div class="content-right">
 +
          </div>
 +
        </div>
 +
        <div class="meta-date">
 +
          <span class="date">9th</span>
 +
          <span class="month">Jun</span>
 +
        </div>
 +
      </div>
 +
      <div class="timeline-article">
 +
        <div class="content-left-container">
 +
          <div class="content-left">
 +
          </div>
 +
        </div>
 +
        <div class="content-right-container">
 +
          <div class="content-right">
 +
          </div>
 +
        </div>
 +
        <div class="meta-date">
 +
          <span class="date">9th</span>
 +
          <span class="month">Jun</span>
 +
        </div>
 +
      </div>
 +
     
 
     </div>
 
     </div>
 
   </section>
 
   </section>
 +
 +
 +
 +
<!--------Scrollroll-------->
 +
<head>
 +
  <meta charset="utf-8">
 +
  <meta name="viewport" content="width=device-width, initial-scale=1">
 +
  <link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
 +
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 +
  <script src="http://getbootstrap.com/dist/css/bootstrap.min.css"></script>
 +
  <style>
 +
  body {
 +
      position: relative;
 +
  }
 +
  ul.nav-pills {
 +
    top:200px;
 +
      position: fixed;
 +
      left:10px;
 +
  }
 +
  div.col-sm-9 div {
 +
      height: 400px;
 +
      font-size: 20px;
 +
  }
 +
  @media screen and (max-width: 810px) {
 +
    #June #July #August #September{
 +
        margin-left: 5px;
 +
    }
 +
  }
 +
</style>
 +
</head>
 +
<body data-spy="scroll" data-target="#myScrollspy" data-offset="20">
 +
   
 +
    <div class="row" style="margin-top: 80px;">
 +
        <div class="container">
 +
    <nav class="col-sm-3" id="myScrollspy">
 +
      <ul class="nav nav-pills nav-stacked">
 +
        <li class="active"><a href="#June">June</a></li>
 +
        <li><a href="#July">July</a></li>
 +
        <li><a href="#August">August</a></li>
 +
        <li><a href="#September">September</a></li>
 +
      </ul>
 +
    </nav>
 +
  </div>
 +
</div>
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 14:27, 28 July 2015

Responsive Vertical Timeline

We went to Dundee University to attend the Scotland IGEM team's meeting. We had so much fun in the meeting, sharing different ideas with each team.

9th Jun
9th Jun

9th Jun
9th Jun
9th Jun
9th Jun
9th Jun
9th Jun
9th Jun
9th Jun
9th Jun
9th Jun
9th Jun