(10 intermediate revisions by the same user not shown) | |||
Line 122: | Line 122: | ||
} | } | ||
− | + | /**********************************Timeline********************************/ | |
+ | } | ||
+ | .timeline { | ||
+ | list-style: none; | ||
+ | padding: 0; | ||
+ | position: relative; | ||
+ | } | ||
+ | .timeline:before { | ||
+ | top: 0; | ||
+ | bottom: 0; | ||
+ | position: absolute; | ||
+ | content: ""; | ||
+ | width: 2px; | ||
+ | background-color: #f1f1f1; | ||
+ | left: 40px; | ||
+ | margin-left: -1.5px; | ||
+ | } | ||
+ | .timeline > li { | ||
+ | margin-bottom: 50px; | ||
+ | position: relative; | ||
+ | min-height: 50px; | ||
+ | } | ||
+ | .timeline > li:before, | ||
+ | .timeline > li:after { | ||
+ | content: " "; | ||
+ | display: table; | ||
+ | } | ||
+ | .timeline > li:after { | ||
+ | clear: both; | ||
+ | } | ||
+ | .timeline > li .timeline-panel { | ||
+ | width: 100%; | ||
+ | float: right; | ||
+ | padding: 0 20px 0 100px; | ||
+ | position: relative; | ||
+ | text-align: left; | ||
+ | } | ||
+ | .timeline > li .timeline-panel:before { | ||
+ | border-left-width: 0; | ||
+ | border-right-width: 15px; | ||
+ | left: -15px; | ||
+ | right: auto; | ||
+ | } | ||
+ | .timeline > li .timeline-panel:after { | ||
+ | border-left-width: 0; | ||
+ | border-right-width: 14px; | ||
+ | left: -14px; | ||
+ | right: auto; | ||
+ | } | ||
+ | .timeline > li .timeline-image { | ||
+ | left: 0; | ||
+ | margin-left: 0; | ||
+ | width: 80px; | ||
+ | height: 80px; | ||
+ | position: absolute; | ||
+ | z-index: 100; | ||
+ | background-color: #fed136; | ||
+ | color: white; | ||
+ | border-radius: 100%; | ||
+ | border: 7px solid #f1f1f1; | ||
+ | text-align: center; | ||
+ | } | ||
+ | .timeline > li .timeline-image h4 { | ||
+ | font-size: 10px; | ||
+ | margin-top: 12px; | ||
+ | line-height: 14px; | ||
+ | } | ||
+ | .timeline > li.timeline-inverted > .timeline-panel { | ||
+ | float: right; | ||
+ | text-align: left; | ||
+ | padding: 0 20px 0 100px; | ||
+ | } | ||
+ | .timeline > li.timeline-inverted > .timeline-panel:before { | ||
+ | border-left-width: 0; | ||
+ | border-right-width: 15px; | ||
+ | left: -15px; | ||
+ | right: auto; | ||
+ | } | ||
+ | .timeline > li.timeline-inverted > .timeline-panel:after { | ||
+ | border-left-width: 0; | ||
+ | border-right-width: 14px; | ||
+ | left: -14px; | ||
+ | right: auto; | ||
+ | } | ||
+ | .timeline > li:last-child { | ||
+ | margin-bottom: 0; | ||
+ | } | ||
+ | .timeline .timeline-heading h4 { | ||
+ | margin-top: 0; | ||
+ | color: inherit; | ||
+ | } | ||
+ | .timeline .timeline-heading h4.subheading { | ||
+ | text-transform: none; | ||
+ | } | ||
+ | .timeline .timeline-body > p, | ||
+ | .timeline .timeline-body > ul { | ||
+ | margin-bottom: 0; | ||
+ | } | ||
+ | @media (min-width: 768px) { | ||
+ | .timeline:before { | ||
+ | left: 50%; | ||
+ | } | ||
+ | .timeline > li { | ||
+ | margin-bottom: 100px; | ||
+ | min-height: 100px; | ||
+ | } | ||
+ | .timeline > li .timeline-panel { | ||
+ | width: 41%; | ||
+ | float: left; | ||
+ | padding: 0 20px 20px 30px; | ||
+ | text-align: right; | ||
+ | } | ||
+ | .timeline > li .timeline-image { | ||
+ | width: 100px; | ||
+ | height: 100px; | ||
+ | left: 50%; | ||
+ | margin-left: -50px; | ||
+ | } | ||
+ | .timeline > li .timeline-image h4 { | ||
+ | font-size: 13px; | ||
+ | margin-top: 16px; | ||
+ | line-height: 18px; | ||
+ | } | ||
+ | .timeline > li.timeline-inverted > .timeline-panel { | ||
+ | float: right; | ||
+ | text-align: left; | ||
+ | padding: 0 30px 20px 20px; | ||
+ | } | ||
+ | } | ||
+ | @media (min-width: 992px) { | ||
+ | .timeline > li { | ||
+ | min-height: 150px; | ||
+ | } | ||
+ | .timeline > li .timeline-panel { | ||
+ | padding: 0 20px 20px; | ||
+ | } | ||
+ | .timeline > li .timeline-image { | ||
+ | width: 150px; | ||
+ | height: 150px; | ||
+ | margin-left: -75px; | ||
+ | } | ||
+ | .timeline > li .timeline-image h4 { | ||
+ | font-size: 18px; | ||
+ | margin-top: 30px; | ||
+ | line-height: 26px; | ||
+ | } | ||
+ | .timeline > li.timeline-inverted > .timeline-panel { | ||
+ | padding: 0 20px 20px; | ||
+ | } | ||
+ | } | ||
+ | @media (min-width: 1200px) { | ||
+ | .timeline > li { | ||
+ | min-height: 170px; | ||
+ | } | ||
+ | .timeline > li .timeline-panel { | ||
+ | padding: 0 20px 20px 100px; | ||
+ | } | ||
+ | .timeline > li .timeline-image { | ||
+ | width: 170px; | ||
+ | height: 170px; | ||
+ | margin-left: -85px; | ||
+ | } | ||
+ | .timeline > li .timeline-image h4 { | ||
+ | margin-top: 40px; | ||
+ | } | ||
+ | .timeline > li.timeline-inverted > .timeline-panel { | ||
+ | padding: 0 100px 20px 20px; | ||
+ | } | ||
+ | } | ||
/********************************* Header ********************************/ | /********************************* Header ********************************/ | ||
.jumbotron { | .jumbotron { | ||
Line 558: | Line 726: | ||
<a href="https://2016.igem.org/Team:Edinburgh_OG/Team">About Us</a> | <a href="https://2016.igem.org/Team:Edinburgh_OG/Team">About Us</a> | ||
<a href="https://2016.igem.org/Team:Edinburgh_OG/Team#attributions">Attributions</a> | <a href="https://2016.igem.org/Team:Edinburgh_OG/Team#attributions">Attributions</a> | ||
− | <a href="https://2016.igem.org/Team:Edinburgh_OG/Collaborations"> | + | <a href="https://2016.igem.org/Team:Edinburgh_OG/Collaborations">Collaborations</a> |
</div> | </div> | ||
</li> | </li> | ||
Line 564: | Line 732: | ||
<a href="#" class="dropbtn">PROJECT</a> | <a href="#" class="dropbtn">PROJECT</a> | ||
<div class="dropdown-content"> | <div class="dropdown-content"> | ||
− | <a href="https://2016.igem.org/Team:Edinburgh_OG/Description"> | + | <a href="https://2016.igem.org/Team:Edinburgh_OG/Description">Description</a> |
− | <a href="https://2016.igem.org/Team:Edinburgh_OG/ | + | <a href="https://2016.igem.org/Team:Edinburgh_OG/Description#design">Design</a> |
<a href="https://2016.igem.org/Team:Edinburgh_OG/Experiments">Method</a> | <a href="https://2016.igem.org/Team:Edinburgh_OG/Experiments">Method</a> | ||
− | <a href="https://2016.igem.org/Team:Edinburgh_OG/Proof"> | + | <a href="https://2016.igem.org/Team:Edinburgh_OG/Proof">Proof of Concept</a> |
− | <a href="https://2016.igem.org/Team:Edinburgh_OG/Demonstrate">★ Demonstrate</a> | + | <!--<a href="https://2016.igem.org/Team:Edinburgh_OG/Demonstrate">★ Demonstrate</a>--> |
<a href="https://2016.igem.org/Team:Edinburgh_OG/Results">Results</a> | <a href="https://2016.igem.org/Team:Edinburgh_OG/Results">Results</a> | ||
</div> | </div> | ||
Line 582: | Line 750: | ||
</li> | </li> | ||
<li class="sliding-middle-out dropdown"> | <li class="sliding-middle-out dropdown"> | ||
− | <a href=" | + | <a href="https://2016.igem.org/Team:Edinburgh_OG/Parts" class="dropbtn">PARTS</a> |
− | <div class="dropdown-content"> | + | <!--<div class="dropdown-content"> |
<a href="https://2016.igem.org/Team:Edinburgh_OG/Parts">★Parts</a> | <a href="https://2016.igem.org/Team:Edinburgh_OG/Parts">★Parts</a> | ||
<a href="https://2016.igem.org/Team:Edinburgh_OG/Basic_Part">★ Basic Part</a> | <a href="https://2016.igem.org/Team:Edinburgh_OG/Basic_Part">★ Basic Part</a> | ||
<a href="https://2016.igem.org/Team:Edinburgh_OG/Composite_Part">★ Composite Part</a> | <a href="https://2016.igem.org/Team:Edinburgh_OG/Composite_Part">★ Composite Part</a> | ||
<a href="https://2016.igem.org/Team:Edinburgh_OG/Part_Collection">★ Part Collection</a> | <a href="https://2016.igem.org/Team:Edinburgh_OG/Part_Collection">★ Part Collection</a> | ||
− | </div> | + | </div>--> |
</li> | </li> | ||
<li class="sliding-middle-out dropdown"> | <li class="sliding-middle-out dropdown"> | ||
Line 599: | Line 767: | ||
<a href="https://2016.igem.org/Team:Edinburgh_OG/Human_Practices" class="dropbtn">HUMAN PRACTICES</a> | <a href="https://2016.igem.org/Team:Edinburgh_OG/Human_Practices" class="dropbtn">HUMAN PRACTICES</a> | ||
<div class="dropdown-content"> | <div class="dropdown-content"> | ||
− | <a href="https://2016.igem.org/Team:Edinburgh_OG/ | + | <a href="https://2016.igem.org/Team:Edinburgh_OG/HP/Silver">Silver</a> |
− | <a href="https://2016.igem.org/Team:Edinburgh_OG/ | + | <a href="https://2016.igem.org/Team:Edinburgh_OG/HP/Gold">Gold</a> |
<a href="https://2016.igem.org/Team:Edinburgh_OG/Integrated_Practices">Integrated Practices</a> | <a href="https://2016.igem.org/Team:Edinburgh_OG/Integrated_Practices">Integrated Practices</a> | ||
− | <a href="https://2016.igem.org/Team:Edinburgh_OG/Engagement">Engagement</a> | + | <!--<a href="https://2016.igem.org/Team:Edinburgh_OG/Engagement">Engagement</a>--> |
</div> | </div> | ||
</li> | </li> | ||
<li class="sliding-middle-out dropdown"> | <li class="sliding-middle-out dropdown"> | ||
− | <a href=" | + | <a href="https://2016.igem.org/Team:Edinburgh_OG/Awards" class="dropbtn">AWARDS</a> |
<!--<div class="dropdown-content"> | <!--<div class="dropdown-content"> | ||
<!--<a href="https://2016.igem.org/Team:Edinburgh_OG/Entrepreneurship"> ★ Entrepreneurship </a> | <!--<a href="https://2016.igem.org/Team:Edinburgh_OG/Entrepreneurship"> ★ Entrepreneurship </a> |
Latest revision as of 22:53, 19 October 2016
-->