Difference between revisions of "Team:Humboldt Berlin/Public Engagement"

(Prototype team page)
 
Line 2: Line 2:
 
<html>
 
<html>
  
−
<div class="column full_size judges-will-not-evaluate">
 
−
<h3>★  ALERT! </h3>
 
−
<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>
 
  
 +
<div class="has-animations description no-js" id="container">
 +
    <div class="container">
  
−
<div class="clear"></div>
+
<!------------------------------------------ NAVIGATION -------------------------------------------------->
 +
<!-- INFO: move the class="active" to the correct <a> Tag -->
  
 +
        <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 class="active" href="/Team:Humboldt_Berlin/Human_Practices">Human Practices</a>
 +
                            <div class="submenu">
 +
                                <a href="/Team:Humboldt_Berlin/Human_Practices">Human Practices</a>
 +
                                <a class="active" 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>
  
−
<div class="column full_size">
+
<!------------------------------------------ NAVIGATION END -------------------------------------------------->
  
−
<h1>Human Practices: Education and Public Engagement Special Prize</h1>
+
<!------------------------------------------ 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>
  
−
<p>Innovative educational tools and public engagement activities have the ability to discuss the science behind synthetic biology, spark new scientific curiosity and establish a public dialogue about synthetic biology from voices and views outside the lab. </p>
+
<!------------------------------------------ HEADER END -------------------------------------------------->
  
−
<p>On this page, your team should document your Education and Public Engagement work and activities. Describe your team’s efforts to include more people in shaping synthetic biology (such as creating or building upon innovative educational tools and/or public engagement activities to establish two-way dialogue with new communities, and/or engaging new groups in discussions about synthetic biology and public values). Describe your approach, why you chose it, and what was learned by everyone involved (including yourselves!).</p>
+
        <section class="page-content fixed-header-content">
 +
            <!---------- SUB HEADLINE ------------->
 +
            <h2 class="page-subheadline">Subheadline</h2>
  
−
<p>This work may relate to or overlap with the work you document on your Human Practices page. Whereas Integrated Human Practices relates to the process of refining your project purpose and design, this page may highlight significant efforts that go beyond your particular project focus and/or address a significant broader concern in iGEM.
 
−
</p>
 
  
 +
<!------------------------------------------ TWO COLUMN IMG LEFT -------------------------------------------------->
  
−
<p>For more information, please see the <a href="https://2019.igem.org/Human_Practices">Human Practices Hub</a>. There you will find:</p>
+
            <div class="width-limit">
−
+
                <div class="two-columns">
−
<ul>
+
                    <div>
−
<li> an <a href="https://2019.igem.org/Human_Practices/Introduction">introduction</a> to Human Practices at iGEM </li>
+
                        <!-- IMAGE -->
−
<li>tips on <a href="https://2019.igem.org/Human_Practices/How_to_Succeed">how to succeed</a> including explanations of judging criteria and advice about how to conduct and document your Human Practices work</li>
+
                        <img class="is-revealing" src="https://static.igem.org/mediawiki/2019/5/54/T--Humboldt_Berlin--ideonella_grafik.png" alt="ideonella grafic" />
−
<li>descriptions of <a href="https://2019.igem.org/Human_Practices/Examples">exemplary work</a> to inspire you</li>
+
                    </div>
−
<li>links to helpful <a href="https://2019.igem.org/Human_Practices/Resources">resources</a></li>
+
                    <div>
−
<li>and more! </li>
+
                        <!----------------------------------------------------------------------->
−
</ul>
+
                        <!----------------------------TEXT---------------------------->
−
+
                        <!----------------------------------------------------------------------->
−
+
                        <h3 class="headline3">Text Headline</h3>
−
<div class="clear extra_space"></div>
+
                        <p class="block-text medium-sized">
−
+
                            Text for the two column thingy here
−
<p>If you nominate your team for the <a href="https://2019.igem.org/Judging/Awards">Best Education and Public Engagement Special Prize</a> by filling out the corresponding field in the <a href="https://2019.igem.org/Judging/Judging_Form">judging form</a>, the judges will review this page to consider your team for that prize. The criteria are listed below. </p>
+
                        </p>
 +
                    </div>
 +
                </div>
  
−
<div class="highlight decoration_background">
+
 
−
<p>How have you developed new opportunities to include more people in shaping synthetic biology? Innovative educational tools and public engagement activities have the ability to establish a two-way dialogue with new communities by discussing public values and the science behind synthetic biology. Document your approach and what was learned by everyone involved to compete for this award.
+
<!--------------------------------------- TWO COLUMN IMG LEFT END ----------------------------------------------->
−
</p>
+
 
−
</div>
+
<!---------------------------------------------- QUOTE -------------------------------------------------------->
−
</div>
+
 
 +
                <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>

Revision as of 05:41, 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