Difference between revisions of "Team:Glasgow/Notebook"

(Prototype team page)
 
Line 1: Line 1:
−
{{Glasgow}}
 
 
<html>
 
<html>
 +
<body>
 +
<style>
 +
body {
 +
  background: #e6e6e6;
 +
  font-family: "Roboto", sans-serif;
 +
  font-weight: 400;
 +
}
 +
/*===== Vertical Timeline =====*/
  
−
<h2>Notebook</h2>
+
#conference-timeline {
 +
  position: relative;
 +
  max-width: 920px;
 +
  width: 100%;
 +
  margin: 0 auto;
 +
}
  
−
<p> Document the dates you worked on your project.</p>
+
#conference-timeline .timeline-start,
 +
#conference-timeline .timeline-end {
 +
  display: table;
 +
  font-family: "Roboto", sans-serif;
 +
  font-size: 18px;
 +
  font-weight: 900;
 +
  text-transform: uppercase;
 +
  background: #00b0bd;
 +
  padding: 15px 23px;
 +
  color: #fff;
 +
  max-width: 5%;
 +
  width: 100%;
 +
  text-align: center;
 +
  margin: 0 auto;
 +
}
  
−
<h5>What should this page have?</h5>
+
#conference-timeline .conference-center-line {
−
<ul>
+
  position: absolute;
−
<li>Chronological notes of what your team is doing.</li>
+
  width: 3px;
−
<li> Brief descriptions of daily important events.</li>
+
  height: 100%;
−
<li>Pictures of your progress. </li>
+
  top: 0;
−
<li>Mention who participated in what task.</li>
+
  left: 50%;
−
</ul>
+
  margin-left: -2px;
 +
  background: #00b0bd;
 +
  z-index: -1;
 +
}
  
 +
#conference-timeline .conference-timeline-content {
 +
  padding-top: 67px;
 +
  padding-bottom: 67px;
 +
}
  
−
<h4>Inspiration</h4>
+
.timeline-article {
−
<p>You can see what others teams have done to organize their notes:</p>
+
  width: 100%;
 +
  height: 100%;
 +
  position: relative;
 +
  overflow: hidden;
 +
  margin: 20px 0;
 +
}
  
−
<ul>
+
.timeline-article .content-left-container,
−
<li><a href="https://2014.igem.org/Team:ATOMS-Turkiye/Notebook">2014 ATOMS-Turkiye</a></li>
+
.timeline-article .content-right-container {
−
<li><a href="https://2014.igem.org/Team:Tec-Monterrey/ITESM14_project.html#tab_notebook">2014 Tec Monterrey</a></li>
+
  max-width: 44%;
−
<li><a href="https://2014.igem.org/Team:Kyoto/Notebook/Magnetosome_Formation#title">2014 Kyoto</a></li>
+
  width: 100%;
−
<li><a href="https://2014.igem.org/Team:Cornell/notebook">2014 Cornell</a></li>
+
}
−
</ul>
+
  
−
</div>
+
.timeline-article .timeline-author {
 +
  display: block;
 +
  font-weight: 400;
 +
  font-size: 14px;
 +
  line-height: 24px;
 +
  color: #242424;
 +
  text-align: right;
 +
}
 +
 
 +
.timeline-article .content-left,
 +
.timeline-article .content-right {
 +
  position: relative;
 +
  width: auto;
 +
  border: 1px solid #ddd;
 +
  background-color: #fff;
 +
  box-shadow: 0 1px 3px rgba(0, 0, 0, .03);
 +
  padding: 27px 25px;
 +
}
 +
 
 +
.timeline-article p {
 +
  margin: 0 0 0 60px;
 +
  padding: 0;
 +
  font-weight: 400;
 +
  color: #242424;
 +
  font-size: 14px;
 +
  line-height: 24px;
 +
  position: relative;
 +
}
 +
 
 +
.timeline-article p span.article-number {
 +
  position: absolute;
 +
  font-weight: 300;
 +
  font-size: 44px;
 +
  top: 10px;
 +
  left: -60px;
 +
  color: #00b0bd;
 +
}
 +
 
 +
.timeline-article .content-left-container {
 +
  float: left;
 +
}
 +
 
 +
.timeline-article .content-right-container {
 +
  float: right;
 +
}
 +
 
 +
.timeline-article .content-left:before,
 +
.timeline-article .content-right:before {
 +
  position: absolute;
 +
  top: 20px;
 +
  font-size: 23px;
 +
  font-family: "FontAwesome";
 +
  color: #fff;
 +
}
 +
 
 +
.timeline-article .content-left:before {
 +
  content: "\f0da";
 +
  right: -8px;
 +
}
 +
 
 +
.timeline-article .content-right:before {
 +
  content: "\f0d9";
 +
  left: -8px;
 +
}
 +
 
 +
.timeline-article .meta-date {
 +
  position: absolute;
 +
  top: 0;
 +
  left: 50%;
 +
  width: 62px;
 +
  height: 62px;
 +
  margin-left: -31px;
 +
  color: #fff;
 +
  border-radius: 100%;
 +
  background: #00b0bd;
 +
}
 +
 
 +
.timeline-article .meta-date .date,
 +
.timeline-article .meta-date .month {
 +
  display: block;
 +
  text-align: center;
 +
  font-weight: 900;
 +
}
 +
 
 +
.timeline-article .meta-date .date {
 +
  font-size: 30px;
 +
  line-height: 40px;
 +
}
 +
 
 +
.timeline-article .meta-date .month {
 +
  font-size: 18px;
 +
  line-height: 10px;
 +
}
 +
/*===== // Vertical Timeline =====*/
 +
/*===== Resonsive Vertical Timeline =====*/
 +
 
 +
@media only screen and (max-width: 830px) {
 +
  #conference-timeline .timeline-start, #conference-timeline .timeline-end {
 +
    margin: 0;
 +
  }
 +
  #conference-timeline .conference-center-line {
 +
    margin-left: 0;
 +
    left: 50px;
 +
  }
 +
  .timeline-article .meta-date {
 +
    margin-left: 0;
 +
    left: 20px;
 +
  }
 +
  .timeline-article .content-left-container,
 +
  .timeline-article .content-right-container {
 +
    max-width: 100%;
 +
    width: auto;
 +
    float: none;
 +
    margin-left: 110px;
 +
    min-height: 53px;
 +
  }
 +
  .timeline-article .content-left-container {
 +
    margin-bottom: 20px;
 +
  }
 +
  .timeline-article .content-left,
 +
  .timeline-article .content-right {
 +
    padding: 10px 25px;
 +
    min-height: 65px;
 +
  }
 +
  .timeline-article .content-left:before {
 +
    content: "\f0d9";
 +
    right: auto;
 +
    left: -8px;
 +
  }
 +
  .timeline-article .content-right:before {
 +
    display: none;
 +
  }
 +
}
 +
 
 +
@media only screen and (max-width: 400px) {
 +
  .timeline-article p {
 +
    margin: 0;
 +
  }
 +
  .timeline-article p span.article-number {
 +
    display: none;
 +
  }
 +
}
 +
/*===== // Resonsive Vertical Timeline =====*/
 +
</style>
 +
 
 +
<!-------HTML----------->
 +
  <meta charset="UTF-8" />
 +
  <title>Responsive Vertical Timeline</title>
 +
 
 +
  <!-- Fonts -->
 +
  <link href='http://fonts.googleapis.com/css?family=Roboto:400,300,400italic,700,900' rel='stylesheet' type='text/css'>
 +
  <link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
 +
  <!-- // Fonts -->
 +
</head>
 +
<body>
 +
  <!-- Vertical Timeline -->
 +
  <section id="conference-timeline">
 +
    <div class="conference-center-line"></div>
 +
    <div class="conference-timeline-content">
 +
      <!-- Article -->
 +
      <div class="timeline-article">
 +
        <div class="content-left-container">
 +
          <div class="content-left">
 +
            <p>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.</p>
 +
          </div>
 +
        </div>
 +
        <div class="content-right-container">
 +
          <div class="content-right">
 +
            <img src="{% static 'img/2015-Glasgow-timeline1.jpg' %}" style="max-width:350px;">
 +
            <p></p>
 +
          </div>
 +
        </div>
 +
        <div class="meta-date">
 +
          <span class="date">9th</span>
 +
          <span class="month">Jun</span>
 +
        </div>
 +
      </div>
 +
      <!-- // Article -->
 +
     
 +
      <!-- Article -->
 +
      <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>
 +
      <!-- // Article -->
 +
     
 +
      <!-- Article -->
 +
      <div class="timeline-article">
 +
        <div class="content-left-container">
 +
          <div class="content-left">
 +
            <p></p>
 +
          </div>
 +
        </div>
 +
        <div class="content-right-container">
 +
          <div class="content-right">
 +
            <p></p>
 +
          </div>
 +
        </div>
 +
        <div class="meta-date">
 +
          <span class="date">18</span>
 +
          <span class="month">APR</span>
 +
        </div>
 +
      </div>
 +
    </div>
 +
  </section>
 +
</body>
 
</html>
 
</html>

Revision as of 11:06, 27 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

18 APR