Difference between revisions of "Team:Humboldt Berlin/Basic Part"

Line 1: Line 1:
−
{{Example2}}
+
{{Humboldt_Berlin}}
 
<html>
 
<html>
  
  
−
<div class="column full_size judges-will-not-evaluate">
+
<div class="has-animations description no-js" id="container">
−
<h3>★  ALERT! </h3>
+
    <div class="container">
−
<p>This page is used by the judges to evaluate your team for the <a href="https://2019.igem.org/Judging/Medals">medal criterion</a> or <a href="https://2019.igem.org/Judging/Awards"> award listed below</a>. </p>
+
−
<p> Delete this box in order to be evaluated for this medal criterion and/or award. See more information at <a href="https://2019.igem.org/Judging/Pages_for_Awards"> Instructions for Pages for awards</a>.</p>
+
−
</div>
+
  
 +
        <!------------------------------------------ NAVIGATION -------------------------------------------------->
 +
        <!-- INFO: move the class="active" to the correct <a> Tag -->
  
−
<div class="clear"></div>
+
        <nav>
 +
            <div class="width-limit nav-content">
 +
                <div>
 +
                    <a href="/Team:Humboldt_Berlin">
 +
                        <img class="nav-logo" src="https://static.igem.org/mediawiki/2019/4/41/T--Humboldt_Berlin--logo-only.png" alt="small header logo" />
 +
                    </a>
 +
                </div>
 +
                <div class="nav-right">
 +
                    <input type="checkbox" />
 +
                    <span></span>
 +
                    <span></span>
 +
                    <span></span>
  
 +
                    <div class="menu-items">
 +
                        <a href="/Team:Humboldt_Berlin">
 +
                            Home
 +
                        </a>
 +
                        <div class="devider"></div>
 +
                        <div class="item">
 +
                            <a href="/Team:Humboldt_Berlin/Team">Team</a>
 +
                            <div class="submenu">
 +
                                <a href="/Team:Humboldt_Berlin/Team">Team members</a>
 +
                                <a href="/Team:Humboldt_Berlin/Collaborations">Collaborations</a>
 +
                            </div>
 +
                        </div>
 +
                        <div class="devider"></div>
 +
                        <div class="item">
 +
                            <a href="/Team:Humboldt_Berlin/Description">Project</a>
 +
                            <div class="submenu">
 +
                                <a href="/Team:Humboldt_Berlin/Description">Description</a>
 +
                                <a href="/Team:Humboldt_Berlin/Design">Design</a>
 +
                                <a href="/Team:Humboldt_Berlin/Experiments">Experiments</a>
 +
                                <a href="/Team:Humboldt_Berlin/Notebook">Notebook</a>
 +
                                <a href="/Team:Humboldt_Berlin/Contribution">Contributions</a>
 +
                                <a href="/Team:Humboldt_Berlin/Results">Results</a>
 +
                                <a href="/Team:Humboldt_Berlin/Demonstrate">Demonstrate</a>
 +
                                <a href="/Team:Humboldt_Berlin/Improve">Improve</a>
 +
                                <a href="/Team:Humboldt_Berlin/Attributions">Attributions</a>
 +
                            </div>
 +
                        </div>
 +
                        <div class="devider"></div>
 +
                        <div class="item">
 +
                            <a class="active" href="/Team:Humboldt_Berlin/Parts">Parts</a>
 +
                            <div class="submenu">
 +
                                <a href="/Team:Humboldt_Berlin/Parts">Parts overview</a>
 +
                                <a class="active" href="/Team:Humboldt_Berlin/Basic_Part">Basic parts</a>
 +
                                <a href="/Team:Humboldt_Berlin/Composite_Part">Composite parts</a>
 +
                                <a href="/Team:Humboldt_Berlin/Part_Collection">Parts collection</a>
 +
                            </div>
 +
                        </div>
 +
                        <div class="devider"></div>
 +
                        <div class="item">
 +
                            <a href="/Team:Humboldt_Berlin/Safety">Safety</a>
 +
                        </div>
 +
                        <div class="devider"></div>
 +
                        <div class="item">
 +
                            <a href="/Team:Humboldt_Berlin/Human_Practices">Human Practices</a>
 +
                            <div class="submenu">
 +
                                <a href="/Team:Humboldt_Berlin/Human_Practices">Human Practices</a>
 +
                                <a href="/Team:Humboldt_Berlin/Public_Engagement">Education & Engagement</a>
 +
                            </div>
 +
                        </div>
 +
                        <div class="devider"></div>
 +
                        <div class="item">
 +
                            <a>Awards</a>
 +
                            <div class="submenu">
 +
                                <a href="/Team:Humboldt_Berlin/Hardware">Hardware</a>
 +
                                <a href="/Team:Humboldt_Berlin/Measurement">Measurement</a>
 +
                                <a href="/Team:Humboldt_Berlin/Model">Model</a>
 +
                                <a href="/Team:Humboldt_Berlin/Plant">Plant</a>
 +
                            </div>
 +
                        </div>
 +
                        <div class="devider"></div>
 +
                        <a href="https://2019.igem.org/Team:Humboldt_Berlin/Achievements">
 +
                            For Judges
 +
                        </a>
 +
                    </div>
 +
                </div>
 +
            </div>
 +
        </nav>
  
 +
        <!------------------------------------------ NAVIGATION END -------------------------------------------------->
  
−
<div class="column full_size">
+
        <!------------------------------------------ HEADER-------------------------------------------------->
−
<h1>Basic Parts</h1>
+
        <div class="fixed-header-container">
−
<p>
+
            <section class="fixed-image-header">
−
A <b>basic part</b> is a functional unit of DNA that cannot be subdivided into smaller component parts. <a href="http://parts.igem.org/wiki/index.php/Part:BBa_R0051">BBa_R0051</a> is an example of a basic part, a promoter regulated by lambda cl.
+
                <!-- HEADER IMAGE -->
−
</p>
+
                <img src="https://static.igem.org/mediawiki/2019/b/ba/T--Humboldt_Berlin--parts_8.jpeg" alt="Building Blocks" />
 +
            </section>
  
−
<p>Most genetically-encoded functions have not yet been converted to BioBrick parts. Thus, there are <b>many</b> opportunities to find new, cool, and important genetically encoded functions, and refine and convert the DNA encoding these functions into BioBrick standard biological parts. </p>
+
            <!-- HEADLINE TEXT -->
−
</div>
+
            <h1 class="page-headline description" style="color:#ffffff">Basic Part</h1>
 +
        </div>
  
 +
        <!------------------------------------------ HEADER END -------------------------------------------------->
  
−
<div class="column full_size">
+
        <section class="page-content fixed-header-content expandable">
−
<div class="highlight decoration_background">
+
            <div class="width-limit">
−
<h3>Note</h3>
+
                <div class="protocolls-header">
−
<p>This page should list all the basic parts your team has made during your project and include direct links to your Parts main pages on the Registry. <b>You must add all characterization information for your parts on Parts Main Page on the Registry.</b> You should <b>not</b> put characterization information on this page. Remember judges will only look at the first part in the list for the Best Basic Part award, so put your best part first!</p>
+
                    <h2 class="page-subheadline"></h2>
−
</div>
+
                    <div class="protocolls-buttons">
−
</div>
+
                        <div class="collapse-all">
 +
                            <img src="https://static.igem.org/mediawiki/2019/3/3e/T--Humboldt_Berlin--ArrowDown.jpg"> Collapse all
 +
                        </div>
 +
                        <div class="expand-all">
 +
                            <img src="https://static.igem.org/mediawiki/2019/3/3e/T--Humboldt_Berlin--ArrowDown.jpg"> Expand all
 +
                        </div>
 +
                    </div>
 +
                </div>
 +
                <div class="expandable-container">
 +
                    <div class="expandable-preview">
 +
                        <p class="medium-sized">
 +
                            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit ame
 +
                        </p>
 +
                        <img src="https://static.igem.org/mediawiki/2019/5/5d/T--Humboldt_Berlin--chlamy_wusel.jpeg" alt="preview" />
 +
                    </div>
 +
                    <div class="expandable-more">
 +
                        <div class="two-columns">
 +
                            <div>
 +
                                <p class="medium-sized">
 +
                                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
 +
                                </p>
 +
                                <p class="medium-sized">
 +
                                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit ame. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit ame
 +
                                </p>
 +
                            </div>
 +
                            <div>
 +
                                <p class="medium-sized">
 +
                                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit ame
 +
                                </p>
 +
                                <p class="medium-sized">
 +
                                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit ame
 +
                                </p>
 +
                            </div>
 +
                        </div>
 +
                    </div>
 +
                    <div class="expandable-readall">
 +
                        <span class="readmore">Read more</span>
 +
                        <span class="readless">Read less</span>
 +
                        <img src="https://static.igem.org/mediawiki/2019/3/3e/T--Humboldt_Berlin--ArrowDown.jpg">
 +
                    </div>
 +
                </div>
 +
                <div class="expandable-container">
 +
                    <div class="expandable-preview">
 +
                        <p class="medium-sized">
 +
                            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit ame
 +
                        </p>
 +
                        <img src="https://static.igem.org/mediawiki/2019/0/0e/T--Humboldt_Berlin--chlamydomonas_schaubild_eng.png" alt="preview" />
 +
                    </div>
 +
                    <div class="expandable-more">
 +
                        <div class="two-columns">
 +
                            <div>
 +
                                <p class="medium-sized">
 +
                                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
 +
                                </p>
 +
                                <p class="medium-sized">
 +
                                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit ame. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit ame
 +
                                </p>
 +
                            </div>
 +
                            <div>
 +
                                <p class="medium-sized">
 +
                                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit ame
 +
                                </p>
 +
                                <p class="medium-sized">
 +
                                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit ame
 +
                                </p>
 +
                            </div>
 +
                        </div>
 +
                    </div>
 +
                    <div class="expandable-readall">
 +
                        <span class="readmore">Read more</span>
 +
                        <span class="readless">Read less</span>
 +
                        <img src="https://static.igem.org/mediawiki/2019/3/3e/T--Humboldt_Berlin--ArrowDown.jpg">
 +
                    </div>
 +
                </div>
 +
            </div>
 +
        </section>
  
  
−
<div class="column full_size">
+
        <section class="page-content fixed-header-content expandable">
−
<h3>Best Basic Part Special Prize</h3>
+
            <div class="width-limit">
  
−
<p> To be eligible for this award, this part <b>must be well documented on the part's Main Page on the Registry</b>. If you have a part you wish to nominate your team for this <a href="https://2019.igem.org/Judging/Awards">special prize</a>, make sure you add your part number to your <a href="https://2019.igem.org/Judging/Judging_Form">judging form</a> and delete the alert box at the top of this page.
 
  
−
<br><br>
+
                <div class="expandable-container">
−
<b>Please note:</b> Judges will only look at the first part number you list, so please only enter ONE (1) part number in the judging form for this prize. </p>
+
                    <div class="expandable-preview">
−
</div>
+
                        <p class="medium-sized">
 +
                            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit ame
 +
                        </p>
 +
                        <img src="https://static.igem.org/mediawiki/2019/0/0e/T--Humboldt_Berlin--chlamydomonas_schaubild_eng.png" alt="preview" />
 +
                    </div>
 +
                    <div class="expandable-more">
 +
                        <div class="two-columns">
 +
                            <div>
 +
                                <p class="medium-sized">
 +
                                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
 +
                                </p>
 +
                                <p class="medium-sized">
 +
                                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit ame. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit ame
 +
                                </p>
 +
                            </div>
 +
                            <div>
 +
                                <p class="medium-sized">
 +
                                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit ame
 +
                                </p>
 +
                                <p class="medium-sized">
 +
                                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit ame
 +
                                </p>
 +
                            </div>
 +
                        </div>
 +
                    </div>
 +
                    <div class="expandable-readall">
 +
                        <span class="readmore">Read more</span>
 +
                        <span class="readless">Read less</span>
 +
                        <img src="https://static.igem.org/mediawiki/2019/3/3e/T--Humboldt_Berlin--ArrowDown.jpg">
 +
                    </div>
 +
                </div>
 +
            </div>
 +
        </section>
  
  
  
 +
    <!------------------------------------------ FOOTER ---------------------------------------->
 +
    <div class="footer-container">
 +
        <footer class="width-limit">
 +
            <img src="https://static.igem.org/mediawiki/2019/e/ee/T--Humboldt_Berlin--logo_black.png" class="footer-logo" alt="Chlamylicious Logo Black" />
 +
            <div class="footer-right">
 +
                <ul>
 +
                    <li>
 +
                        <a href="/Team:Humboldt_Berlin">
 +
                            Home
 +
                        </a>
 +
                    </li>
 +
                    <li>
 +
                        <a href="/Team:Humboldt_Berlin/Team">
 +
                            Team
 +
                        </a>
 +
                    </li>
 +
                    <li>
 +
                        <a href="/Team:Humboldt_Berlin/Description">
 +
                            Project
 +
                        </a>
 +
                    </li>
 +
                </ul>
 +
                <ul>
 +
                    <li>
 +
                        <a href="/Team:Humboldt_Berlin/Parts">
 +
                            Parts
 +
                        </a>
 +
                    </li>
 +
                    <li>
 +
                        <a href="/Team:Humboldt_Berlin/Safety">
 +
                            Safety
 +
                        </a>
 +
                    </li>
 +
                    <li>
 +
                        <a href="/Team:Humboldt_Berlin/Human_Practices">
 +
                            Human Practices
 +
                        </a>
 +
                    </li>
 +
                    <li>
 +
                        <a href="https://igem.org/2019_Judging_Form?team=Humboldt_Berlin">
 +
                            For Judges
 +
                        </a>
 +
                    </li>
 +
                </ul>
 +
            </div>
 +
        </footer>
 +
    </div>
  
 +
    <!------------------------------------------ FOOTER END ---------------------------------------->
 +
 +
    <script>
 +
        (function () {
 +
              document.querySelector('.no-js').classList.add('js')
 +
              document.querySelector('.no-js').classList.remove('no-js')
 +
            }())
 +
           
 +
            window.addEventListener("scroll", function () {
 +
              const elements = document.querySelectorAll('.is-revealing');
 +
           
 +
              [].forEach.call(elements, function(el) {
 +
                if (isElementVisible(el)) {
 +
                  el.classList.add('is-revealing-visible')
 +
                }
 +
              });
 +
            });
 +
           
 +
            function isElementVisible(el) {
 +
              var top = el.offsetTop;
 +
              var height = el.offsetHeight;
 +
           
 +
              while(el.offsetParent) {
 +
                el = el.offsetParent;
 +
                top += el.offsetTop;
 +
              }
 +
           
 +
              return (
 +
                (top + height) <= (window.pageYOffset + window.innerHeight) + 100
 +
              );
 +
            }
 +
           
 +
                    var readMores = document.querySelectorAll('.expandable-readall');
 +
                    var allContainers = document.querySelectorAll('.expandable-container');
 +
           
 +
                    for (var i = 0; i < readMores.length; i++) {
 +
                        readMores[i].addEventListener('click', function(event) {
 +
                            var container = this.closest('.expandable-container');
 +
                            if (container.classList.contains('open')) {
 +
                                container.classList.remove('open');
 +
                            } else {
 +
                                container.classList.add('open');
 +
                            }
 +
                        });
 +
                    }
 +
           
 +
                    document.querySelector('.collapse-all').addEventListener('click', function() {
 +
                        for (var i = 0; i < allContainers.length; i++) {
 +
                            allContainers[i].classList.remove('open');
 +
                        };
 +
                    });
 +
           
 +
                    document.querySelector('.expand-all').addEventListener('click', function() {
 +
                        for (var i = 0; i < allContainers.length; i++) {
 +
                            allContainers[i].classList.add('open');
 +
                        };
 +
                    });
 +
    </script>
  
 
</html>
 
</html>

Revision as of 21:48, 16 October 2019

Building Blocks

Basic Part