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

(Prototype team page)
 
Line 3: Line 3:
  
  
−
<div class="column full_size">
+
<div class="has-animations description no-js" id="container">
−
<h1>Results</h1>
+
    <div class="container">
−
<p>Here you can describe the results of your project and your future plans. </p>
+
−
</div>
+
  
 +
<!------------------------------------------ NAVIGATION -------------------------------------------------->
 +
<!-- INFO: move the class="active" to the correct <a> Tag -->
  
−
<div class="column third_size" >
+
        <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>
  
−
<h3>What should this page contain?</h3>
+
                    <div class="menu-items">
−
<ul>
+
                        <a href="/Team:Humboldt_Berlin">
−
<li> Clearly and objectively describe the results of your work.</li>
+
                            Home
−
<li> Future plans for the project. </li>
+
                        </a>
−
<li> Considerations for replicating the experiments. </li>
+
                        <div class="devider"></div>
−
</ul>
+
                        <div class="item">
−
</div>
+
                            <a href="/Team:Humboldt_Berlin/Team">Team</a>
 +
                            <div class="submenu">
 +
                                <a href="/Team:Humboldt_Berlin/Team">Team members</a>
 +
                                <a class="active" href="/Team:Humboldt_Berlin/Collaborations">Collaboration</a>
 +
                            </div>
 +
                        </div>
 +
                        <div class="devider"></div>
 +
                        <div class="item">
 +
                            <a class="active" 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 class="active" 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 Practises</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/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 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>
  
 +
<!------------------------------------------ NAVIGATION END -------------------------------------------------->
  
 +
<!------------------------------------------ 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">Results</h1>
 +
        </div>
  
 +
<!------------------------------------------ HEADER END -------------------------------------------------->
  
−
<div class="column two_thirds_size" >
+
        <section class="page-content fixed-header-content">
−
<h3>Describe what your results mean </h3>
+
            <!---------- SUB HEADLINE ------------->
−
<ul>
+
            <h2 class="page-subheadline">Subheadline</h2>
−
<li> Interpretation of the results obtained during your project. Don't just show a plot/figure/graph/other, tell us what you think the data means. This is an important part of your project that the judges will look for. </li>
+
−
<li> Show data, but remember <b>all measurement and characterization data must also be on the part's Main Page on the Registry.</b> Otherwise these data will not be in consideration for any medals or part awards! </li>
+
−
<li> Consider including an analysis summary section to discuss what your results mean. Judges like to read what you think your data means, beyond all the data you have acquired during your project. </li>
+
−
</ul>
+
−
</div>
+
  
  
−
<div class="clear extra_space"></div>
+
<!------------------------------------------ TWO COLUMN IMG LEFT -------------------------------------------------->
  
 +
            <div class="width-limit">
 +
                <div class="two-columns">
 +
                    <div>
 +
                        <!-- IMAGE -->
 +
                        <img class="is-revealing" src="https://static.igem.org/mediawiki/2019/5/54/T--Humboldt_Berlin--ideonella_grafik.png" alt="ideonella grafic" />
 +
                    </div>
 +
                    <div>
 +
                        <!----------------------------------------------------------------------->
 +
                        <!----------------------------TEXT---------------------------->
 +
                        <!----------------------------------------------------------------------->
 +
                        <h3 class="headline3">Text Headline</h3>
 +
                        <p class="block-text medium-sized">
 +
                            Text for the two column thingy here
 +
                        </p>
 +
                    </div>
 +
                </div>
  
  
−
<div class="column two_thirds_size" >
+
<!--------------------------------------- TWO COLUMN IMG LEFT END ----------------------------------------------->
−
<h3> Project Achievements </h3>
+
  
−
<p>You can also include a list of bullet points (and links) of the successes and failures you have had over your summer. It is a quick reference page for the judges to see what you achieved during your summer.</p>
+
<!---------------------------------------------- QUOTE -------------------------------------------------------->
  
−
<ul>
+
                <blockquote class="quote image-left">
−
<li>A list of linked bullet points of the successful results during your project</li>
+
                    <div class="quote-image-container">
−
<li>A list of linked bullet points of the unsuccessful results during your project. This is about being scientifically honest. If you worked on an area for a long time with no success, tell us so we know where you put your effort.</li>
+
                        <!-- QUOTE IMAGE -->
−
</ul>
+
                        <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>
  
−
</div>
+
<!---------------------------------------------- QUOTE END ------------------------------------------------------->
  
  
 +
<!------------------------------------------ TWO COLUMN IMG RIGHT ------------------------------------------------>
  
−
<div class="column third_size" >
+
                <div class="two-columns">
−
<div class="highlight decoration_A_full">
+
                    <div>
−
<h3>Inspiration</h3>
+
                        <!----------------------------------------------------------------------->
−
<p>See how other teams presented their results.</p>
+
                        <!------------------IGEM PROJECTS THAT INSPIRED US----------------------->
−
<ul>
+
                        <!----------------------------------------------------------------------->
−
<li><a href="https://2014.igem.org/Team:TU_Darmstadt/Results/Pathway">2014 TU Darmstadt </a></li>
+
                        <h3 class="headline3">Headline</h3>
−
<li><a href="https://2014.igem.org/Team:Imperial/Results">2014 Imperial </a></li>
+
                        <p class="block-text medium-sized">
−
<li><a href="https://2014.igem.org/Team:Paris_Bettencourt/Results">2014 Paris Bettencourt </a></li>
+
                            Text for the two column image right block
−
</ul>
+
                        </p>
−
</div>
+
                    </div>
−
</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:34, 20 August 2019

notebook

Results

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