Difference between revisions of "Team:Humboldt Berlin/Software"

(Prototype team page)
 
Line 3: Line 3:
  
  
−
<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">Collaboration</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">Experimentals</a>
 +
                                <a href="/Team:Humboldt_Berlin/Notebook">Notebook</a>
 +
                                <a href="/Team:Humboldt_Berlin/Contribution">Contribution</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 href="/Team:Humboldt_Berlin/Parts">Parts</a>
 +
                            <div class="submenu">
 +
                                <a href="/Team:Humboldt_Berlin/Parts">Parts overview</a>
 +
                                <a 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 class="active">Awards</a>
 +
                            <div class="submenu">
 +
                                <a href="/Team:Humboldt_Berlin/Entrepreneurship">Entrepreneurship</a>
 +
                                <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>
 +
                                <a class="active" href="/Team:Humboldt_Berlin/Software">Software</a>
 +
                            </div>
 +
                        </div>
 +
                        <div class="devider"></div>
 +
                        <a href="https://igem.org/2019_Judging_Form?team=Humboldt_Berlin">
 +
                            For Judges
 +
                        </a>
 +
                    </div>
 +
                </div>
 +
            </div>
 +
        </nav>
  
−
<div class="column full_size">
+
<!------------------------------------------ NAVIGATION END -------------------------------------------------->
−
<h1>Software</h1>
+
−
</div>
+
−
<div class="column two_thirds_size">
+
−
<h3>Best Software Tool Special Prize</h3>
+
−
<p>Regardless of the topic, iGEM projects often create or adapt computational tools to move the project forward. Because they are born out of a direct practical need, these software tools (or new computational methods) can be surprisingly useful for other teams. Without necessarily being big or complex, they can make the crucial difference to a project's success. This award tries to find and honor such "nuggets" of computational work.
+
  
 +
<!------------------------------------------ HEADER-------------------------------------------------->
 +
        <div class="fixed-header-container">
 +
            <section class="fixed-image-header">
 +
                <!-- HEADER IMAGE -->
 +
                <img src="https://static.igem.org/mediawiki/2019/e/e9/T--Humboldt_Berlin--description-header.jpg" alt="notebook" />
 +
            </section>
 +
           
 +
            <!-- HEADLINE TEXT -->
 +
            <h1 class="page-headline description">Headline</h1>
 +
        </div>
  
−
<br><br>
+
<!------------------------------------------ HEADER END -------------------------------------------------->
−
To compete for the <a href="https://2019.igem.org/Judging/Awards">Best Software Tool prize</a>, please describe your work on this page and also fill out the description on the <a href="https://2019.igem.org/Judging/Judging_Form">judging form</a>.
+
−
<br><br>
+
−
To be eligible, your software has to be documented and made available under an OSI approved open source license. You must also delete the alert box on the top of this page to be eligible for this prize.
+
−
</p>
+
  
 +
        <section class="page-content fixed-header-content">
 +
            <!---------- SUB HEADLINE ------------->
 +
            <h2 class="page-subheadline">Subheadline</h2>
  
−
</div>
 
  
−
<div class="column third_size">
+
<!------------------------------------------ TWO COLUMN IMG LEFT -------------------------------------------------->
−
<div class="highlight decoration_A_full">
+
 
−
<h3> Inspiration </h3>
+
            <div class="width-limit">
−
<p>
+
                <div class="two-columns">
−
Here are a few examples from previous teams:
+
                    <div>
−
</p>
+
                        <!-- IMAGE -->
−
<ul>
+
                        <img class="is-revealing" src="https://static.igem.org/mediawiki/2019/5/54/T--Humboldt_Berlin--ideonella_grafik.png" alt="ideonella grafic" />
−
<li><a href="https://2016.igem.org/Team:BostonU_HW">2016 BostonU HW</a></li>
+
                    </div>
−
<li><a href="https://2016.igem.org/Team:Valencia_UPV">2016 Valencia UPV</a></li>
+
                    <div>
−
<li><a href="https://2014.igem.org/Team:Heidelberg/Software">2014 Heidelberg</a></li>
+
                        <!----------------------------------------------------------------------->
−
<li><a href="https://2014.igem.org/Team:Aachen/Project/Measurement_Device#Software">2014 Aachen</a></li>
+
                        <!----------------------------TEXT---------------------------->
−
</ul>
+
                        <!----------------------------------------------------------------------->
−
</div>
+
                        <h3 class="headline3">Text Headline</h3>
−
</div>
+
                        <p class="block-text medium-sized">
 +
                            Text for the two column thingy here
 +
                        </p>
 +
                    </div>
 +
                </div>
 +
 
 +
 
 +
<!--------------------------------------- TWO COLUMN IMG LEFT END ----------------------------------------------->
 +
 
 +
<!---------------------------------------------- QUOTE -------------------------------------------------------->
 +
 
 +
                <blockquote class="quote image-left">
 +
                    <div class="quote-image-container">
 +
                        <!-- QUOTE IMAGE -->
 +
                        <img src="https://static.igem.org/mediawiki/2019/2/2d/T--Humboldt_Berlin--flasche_igem.png" alt="plastic bottle illustration" />
 +
                    </div>
 +
                    <div class="block-text big-underline big-text">
 +
                        <!----------------------------------------------------------------------->
 +
                        <!----------------------------  Quote Text  ---------------------------->
 +
                        <!----------------------------------------------------------------------->
 +
                        <p><b>
 +
                            Have the Quote Text Here - it is underlined
 +
                        </b></p>
 +
                    </div>
 +
                </blockquote>
 +
 
 +
<!---------------------------------------------- QUOTE END ------------------------------------------------------->
 +
 
 +
 
 +
<!------------------------------------------ TWO COLUMN IMG RIGHT ------------------------------------------------>
 +
 
 +
                <div class="two-columns">
 +
                    <div>
 +
                        <!----------------------------------------------------------------------->
 +
                        <!------------------IGEM PROJECTS THAT INSPIRED US----------------------->
 +
                        <!----------------------------------------------------------------------->
 +
                        <h3 class="headline3">Headline</h3>
 +
                        <p class="block-text medium-sized">
 +
                            Text for the two column image right block
 +
                        </p>
 +
                    </div>
 +
                    <div>
 +
                        <!--- IMAGE --->
 +
                        <img class="is-revealing" src="https://static.igem.org/mediawiki/2019/b/bc/T--Humboldt_Berlin--microplastic_icon.png" alt="microplastic icon" />
 +
                    </div>
 +
                </div>
 +
 
 +
<!--------------------------------------- TWO COLUMN IMG RIGHT END ------------------------------------------------>
 +
 
 +
 
 +
<!------------------------------------------ TWO COLUMN LONG TEXT ------------------------------------------------>
 +
                <div class="two-columns-headline">
 +
                    <!-- HEADLINE -->
 +
                    <h3 class="headline3">Long text headline</h3>
 +
                </div>
 +
                <div class="two-columns block-text medium-sized not-centered no-margin-top">
 +
                    <div>
 +
                        <!-- TEXT - PARAGRAPHS ARE WRAPPED IN <p> TAGS -->
 +
                        <p>
 +
                            Paragraph Left 1
 +
                        </p>
 +
                        <p>
 +
                            Paragraph Left 2
 +
                        </p>
 +
                        <br />
 +
                        <!-- IMAGE INBETWEEN -->
 +
                        <img src="https://static.igem.org/mediawiki/2019/4/42/T--Humboldt_Berlin--chlamy_overview-cloning-system.png" alt="Pverview of the hierarchical and modular cloning system"/>
 +
                        <p>
 +
                            Paragraph Left 3
 +
                        </p>
 +
                    </div>
 +
                    <div>
 +
                        <p>
 +
                            Paragraph Right 1
 +
                        </p>
 +
                        <p>
 +
                            Paragraph Right 2
 +
                        </p>
 +
                        <p>
 +
                            Paragraph Right 3
 +
                        </p>
 +
                        <p>
 +
                            Paragraph Right 4
 +
                        </p>
 +
                    </div>
 +
                </div>
 +
            </div>
 +
        </section>
 +
 
 +
<!------------------------------------------ TWO COLUMN LONG TEXT END -------------------------------------------->
 +
 
 +
<!------------------------------------------ DEVIDER LINE -------------------------------------------->
 +
        <div class="greyblue-devider"></div>
 +
<!------------------------------------------ DEVIDER LINE END -------------------------------------------->
 +
 
 +
 
 +
<!------------------------------------------ TWO COLUMN SMALL TEXT -------------------------------------------->
 +
 
 +
        <section class="width-limit">
 +
            <div class="two-columns block-text not-centered small-sized">
 +
                <div>
 +
                  <!-- TEXT LEFT COLUMN -->
 +
                  <p>Small Text Left Column
 +
                </div>
 +
                <div>
 +
                  <!-- TEXT RIGHT COLUMN -->
 +
                  <p>Small Text Right Column</p>
 +
                </div>
 +
            </div>
 +
        </section>
 +
 
 +
<!------------------------------------------ TWO COLUMN SMALL TEXT END ---------------------------------------->
 +
 
 +
    </main>
 +
 
 +
<!------------------------------------------ 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
 +
  );
 +
}
 +
</script>
  
 
</html>
 
</html>

Revision as of 05:44, 20 August 2019

notebook

Headline

Subheadline

ideonella grafic

Text Headline

Text for the two column thingy here

plastic bottle illustration

Have the Quote Text Here - it is underlined

Headline

Text for the two column image right block

microplastic icon

Long text headline

Paragraph Left 1

Paragraph Left 2


Pverview of the hierarchical and modular cloning system

Paragraph Left 3

Paragraph Right 1

Paragraph Right 2

Paragraph Right 3

Paragraph Right 4

Small Text Left Column

Small Text Right Column