Difference between revisions of "Team:USNA Annapolis/HP/Silver"

(Prototype team page)
 
Line 1: Line 1:
 
{{USNA_Annapolis}}
 
{{USNA_Annapolis}}
 
<html>
 
<html>
−
<div class="column full_size judges-will-not-evaluate">
+
 
−
<h3>★  ALERT! </h3>
+
<style>
−
<p>This page is used by the judges to evaluate your team for the <a href="https://2017.igem.org/Judging/Medals">medal criterion</a> or <a href="https://2017.igem.org/Judging/Awards"> award listed above</a>. </p>
+
<!-- Footer for each webpage, do not edit for fear of never ever in the history of ever working again!! -Beware- -->
−
<p> Delete this box in order to be evaluated for this medal criterion and/or award. See more information at <a href="https://2017.igem.org/Judging/Pages_for_Awards"> Instructions for Pages for awards</a>.</p>
+
 
 +
 
 +
.img-50 {
 +
        max-width:50%!important;
 +
}
 +
 
 +
li {
 +
        font-family: "Helvetica Neue", Helvetica, sans-serif;;
 +
        font-size: 18px!important;
 +
        opacity: 1!important;
 +
}
 +
 
 +
 
 +
.halfcol {
 +
        width: 75%;
 +
}
 +
 
 +
.riskback {
 +
        padding-right: 50px;
 +
}
 +
 
 +
 
 +
 
 +
.footerbox {
 +
        display: inline;
 +
        width: 100%;
 +
        height: 500px;
 +
        margin-top: 200px;
 +
       
 +
}
 +
 
 +
.footerlogosizes {
 +
       
 +
        max-width: 200px!important;
 +
 
 +
}
 +
 
 +
.logoclear:hover {
 +
        opacity: 1;
 +
}
 +
.logoclear1 {
 +
        opacity: .6;
 +
}
 +
 
 +
.sealopactiy {
 +
        opacity: .6!important;
 +
}
 +
 
 +
.riskopacity {
 +
        opacity: .8;
 +
        width: 60%!important;
 +
}
 +
 
 +
.transphotopad {
 +
        padding-top: 100px;
 +
        padding-bottom: 100px;
 +
}
 +
 
 +
 
 +
.box-picshad {
 +
        -moz-box-shadow: 12px 29px 81px 0px rgba(0,0,0,0.75);
 +
        -webkit-box-shadow: 12px 29px 81px 0px rgba(0,0,0,0.75);
 +
        box-shadow: 12px 29px 81px 0px rgba(0,0,0,0.75);
 +
}
 +
 
 +
 
 +
 
 +
.textcenter {
 +
        text-align: center;
 +
}
 +
 
 +
.textpadding {
 +
        padding-left: 200px;
 +
        padding-right: 300px;
 +
        padding-top: 30px;
 +
}
 +
 
 +
.textpadding2 {
 +
        padding-left: 200px;
 +
        padding-top: 30px;
 +
        padding-bottom: 30px;
 +
}
 +
 
 +
 
 +
.textheading1 {
 +
        color: black!important;
 +
}
 +
 
 +
.subheading {
 +
        font-size: 22px;
 +
        opacity: 1!important;
 +
}
 +
 
 +
.riskbox {
 +
        height: 800px;
 +
}
 +
 
 +
 
 +
 
 +
h4 {
 +
        line-height: 150%!important;
 +
        font-family: "Helvetica Neue", Helvetica, sans-serif;
 +
        font-size: 18px!important;
 +
}
 +
 
 +
 
 +
.headingfont1 {
 +
        color: #FFFFFF!important;
 +
}
 +
 
 +
 
 +
.navbar {
 +
margin: 0 auto;
 +
margin-top: 1em;
 +
padding: 1em;
 +
border-radius: 10px;
 +
}
 +
 
 +
.outline1 {
 +
text-shadow:
 +
1px -1px 0 #000,
 +
-1px 1px 0 #000,
 +
        -1px -1px 0 #000,
 +
1px 1px 0 #000;
 +
 +
}
 +
.bufmargin1 {
 +
        margin-top: 150px;
 +
}
 +
.slidephoto {
 +
        background-size: contain;
 +
        position: absolute;
 +
        top: 250px;
 +
        left: 500px;
 +
}
 +
 
 +
 
 +
.background-pic {
 +
        background-image: url("https://static.igem.org/mediawiki/2017/4/4a/USNA_Annapolis-homebackfade6.jpg");
 +
        width: 100%;
 +
        height: 800px;
 +
        float: left;
 +
      margin-top: -20px;
 +
        <!-- text-shadow: 2px 2px 8px #4D4D4D; -->
 +
       
 +
}
 +
 
 +
.animate-leftlong {
 +
        animation: animateleft 1.5s!important;
 +
        transition-duration: 5s!important;
 +
}
 +
.teal-color{
 +
        color: #fff44f!important;
 +
}
 +
 
 +
.usnacrest {
 +
       
 +
        max-width: 25px;
 +
        background-size: contain;
 +
        position: absolute;
 +
        top: 100px;
 +
        left: 80px;
 +
        opacity: .75;
 +
        z-index: 0;
 +
}
 +
.usnacrest2 {
 +
       
 +
        text-align: center;
 +
}
 +
 
 +
 
 +
@media screen and (min-width: 700px){
 +
.dnaback {
 +
        background-image: url("https://static.igem.org/mediawiki/2017/0/06/USNA_Annapolis-Pipesback.jpg");
 +
        background-position: 80%;
 +
        background-attachment: relative;
 +
        background-repeat: repeat-y;
 +
        background-size: 300px;
 +
        z-index:-1;
 +
}
 +
}
 +
 
 +
<!-- end tag for reformatting for phone screens. -->
 +
 
 +
</style>
 +
 
 +
 
 +
 
 +
 
 +
<meta name= "viewport" content = "initial-scale=1.0, width= device-width" />
 +
 
 +
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
 +
 
 +
<link rel="stylesheet" href="https://2014.igem.org/Team:Aalto-Helsinki/bootstrap.min.css?action=raw&amp;ctype=text/css" type="text/css">
 +
<link rel="stylesheet" href="https://2014.igem.org/Team:Aalto-Helsinki/stylesheet.css?action=raw&amp;ctype=text/css" type="text/css">
 +
 
 +
<link rel="stylesheet" type="text/css"
 +
href="https://2017.igem.org/Template:USNA_Annapolis/CSS?action=raw&ctype=text/css" />
 +
 
 +
 
 +
 
 +
<header>
 +
  <div class= "navbar navbar-default navbar-fixed-top" style="padding-top: 25px">
 +
 
 +
  <!-- spacer column -->
 +
  <div class="text-center col-sm-2" id="navtigation"></div>
 +
 
 +
 
 +
    <div class="text-center col-sm-2" id="navigation">
 +
     
 +
      <div class="dropdown"><a href="https://2017.igem.org/Team:USNA_Annapolis"> Main </a>
 +
 
 +
    </div>
 +
    </div>
 +
    <div class="text-center col-sm-2" id="navigation">
 +
     
 +
      <div class="dropdown"><a href="https://2017.igem.org/Team:USNA_Annapolis/Team"> Team </a>
 +
    </div>
 +
    </div>
 +
 
 +
    <div class="text-center col-sm-2" id="navigation">
 +
     
 +
      <div class="dropdown"><span> <a href="https://2017.igem.org/Team:USNA_Annapolis/Description"> Project </a> </span>
 +
 
 +
      <div class="dropdown-content">
 +
        <div class="dropcolor">
 +
          <span class="drop" style="color: blue;"> <a href="https://2017.igem.org/Team:USNA_Annapolis/Model">Modeling</a>  
 +
          </span>  
 +
        </div>
 +
        <div class="dropcolor">
 +
          <span class="drop" style="color: blue"> <a href="https://2017.igem.org/Team:USNA_Annapolis/InterLab">InterLab</a>
 +
          </span>
 +
        </div>
 +
        <div class="dropcolor">
 +
          <span class="drop" style="color: blue"><a href="https://2017.igem.org/Team:USNA_Annapolis/Improve">Improve</a>
 +
          </span>
 +
        </div>
 +
        <div class="dropcolor">
 +
          <span class="drop" style="color: blue"> <a
 +
          href="https://2017.igem.org/Team:USNA_Annapolis/Demonstrate">Demonstrate</a>
 +
          </span>
 +
        </div>
 +
        <div class="dropcolor">
 +
          <span class="drop" style="color: blue">
 +
          <a href="https://2017.igem.org/Team:USNA_Annapolis/Collaborations">Collaboration</a>
 +
          </span>
 +
        </div>
 +
        <div class="dropcolor">
 +
          <span class="drop" style="color: blue"> <a
 +
          href="https://2017.igem.org/Team:USNA_Annapolis/Notebook">Notebook</a>
 +
          </span>
 +
        </div>
 +
      </div>
 +
    </div>
 +
  </div>
 +
      <div class="text-center col-sm-2" id="navigation">
 +
     
 +
        <div class="dropdown"><a href="https://2017.igem.org/Team:USNA_Annapolis/HP/Gold_Integrated">Human Practice</a>
 +
          <div class="dropdown-content">
 +
            <div class="dropcolor">
 +
              <span class="drop" style="color: blue">
 +
              <a href="https://2017.igem.org/Team:USNA_Annapolis/HP/Silver">HP-Silver</a>
 +
              </span>
 +
            </div>
 +
            <div class="dropcolor">
 +
              <span class="drop" style="color: blue">
 +
              <a href="https://2017.igem.org/Team:USNA_Annapolis/HP/Gold_Integrated">HP-Gold</a>
 +
              </span>
 +
            </div>
 +
 
 +
          </div>
 +
        </div>
 +
      </div>
 +
  </div>
 +
</header>
 +
 
 +
 
 +
 
 +
 
 +
 
 +
<div class="background-pic">
 +
 
 +
<div class="w3-container">
 +
  <h2 class="outline1 bufmargin1 headingfont1"> Human Practices </h2>
 +
  <h3 class="outline1 usnacrest2 headingfont1"> Going Beyond the Lab </h3>
 +
  <p class="usnacrest2"><img src="https://static.igem.org/mediawiki/igem.org/8/82/USNA_Annapolis-Seal.jpg" width="200px" style="float: center"></img></p>
 
</div>
 
</div>
 +
</div>
 +
 +
 +
<!-- this might actually look cool for like a banner pic? Too early?-->
 +
<div class="clear" >
 +
</div>
 +
 +
 +
 +
<div class="row">
 +
<h2 class="col-md-4 textheading1" > Outreach </h2>
 +
</div>
 +
 
<div class="clear"></div>
 
<div class="clear"></div>
  
  
−
<div class="column full_size">
 
  
−
<h1>Silver Medal Human Practices</h1>
+
<div class="dnaback img-responsive">
−
<p>iGEM teams are leading in the area of Human Practices because they conduct their projects within a social/environmental context, to better understand issues that might influence the design and use of their technologies.</p>
+
<article>
−
<p>Teams work with students and advisors from the humanities and social sciences to explore topics concerning ethical, legal, social, economic, safety or security issues related to their work. Consideration of these Human Practices is crucial for building safe and sustainable projects that serve the public interest. </p>
+
<div class="link" id="Abstract"></div>
−
<p>For more information, please see the <a href="https://2017.igem.org/Competition/Human_Practices">Human Practices page</a>.</p>
+
        <h3> First Way We Interacted <h3>
 +
        <h4> Short Description about how we interacted with some group of people (Plebe survey thing?) and we'll throw in a photo or two here with the plebes or some pictures of people talking and smiling.</h4><br>
 +
       
 +
 
 +
</article>
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
<article>
 +
<div class="link" id="Abstract"></div>
 +
        <h3> Second Way We Interacted <h3>
 +
        <h4> I'm still thinking of keeping the little quote thing around since it adds a little bit to the paragraph, so maybe we can get a person from the crowd to comment on what they think of the project, or just talk about how it is nice to go out and spread our message. Nothing crazy. </h4>
 +
        <blockquote> An inspirational message about how we love to tell people about the wonderful things we are doing down in D.C! </blockquote>
 +
        <h4> Wrap up sentence of the interaction, talk about how it impacted our work.</h4>
 +
 
 +
</article>
 +
 
 +
 
 +
 
 +
<article>
 +
<div class="link" id="Abstract"></div>
 +
        <div class="row">
 +
 
 +
        <div class="col-md-6 text-col-left">
 +
        <h4> In this section it would be nice to have a close up picture of someone from the group talking to a bunch of students or something, or maybe pointing to a volunteer who is asking questions. </h4>
 +
        </div>
 +
  <div class="col-md-6 img-100">
 +
            <img src="" alt="person pointing" class="img-responsive riskopacity">
 +
          </div>
 +
        </div>
 +
</article>
 
</div>
 
</div>
  
−
<div class="clear"></div>
 
  
−
<div class="column half_size">
+
<div class="row">
−
<h3>Silver Medal Criterion #3</h3>
+
<h2 class="col-md-4 textheading1" > Event Photos </h2>
−
<p>Convince the judges you have thought carefully and creatively about whether your work is safe, responsible and good for the world. You could accomplish this through engaging with your local, national and/or international communities or other approaches. Please note that standard surveys will not fulfill this criteria.</p>
+
</div>
 +
 
 +
 
 +
 
 +
<div class="w3-content w3-display-container">
 +
 
 +
<div class="w3-display-container mySlides">
 +
  <img src="" alt="some nice pictures" style="width:100%">
 +
  <div class="w3-display-bottomleft w3-large w3-container w3-padding-16 w3-black">
 +
    Nice kids or something
 +
  </div>
 
</div>
 
</div>
  
−
<div class="column half_size">
+
<div class="w3-display-container mySlides">
−
<h5>Some Human Practices topic areas </h5>
+
  <img src="" alt="some nice pictures"style="width:25%">
−
<ul>
+
  <div class="w3-display-bottomleft w3-large w3-container w3-padding-16 w3-black">
−
<li>Philosophy</li>
+
    Park being happy
−
<li>Public Engagement / Dialogue</li>
+
  </div>
−
<li>Education</li>
+
−
<li>Product Design</li>
+
−
<li>Scale-Up and Deployment Issues</li>
+
−
<li>Environmental Impact</li>
+
−
<li>Ethics</li>
+
−
<li>Safety</li>
+
−
<li>Security</li>
+
−
<li>Public Policy</li>
+
−
<li>Law and Regulation</li>
+
−
<li>Risk Assessment</li>
+
−
</ul>
+
 
</div>
 
</div>
  
 +
<div class="w3-display-container mySlides">
 +
  <img src="" alt="some nice pictures" style="width:25%">
 +
  <div class="w3-display-bottomleft w3-large w3-container w3-padding-16 w3-black">
 +
    bunch of people smiling
 +
  </div>
 +
</div>
  
−
<div class="column half_size">
+
<div class="w3-display-container mySlides">
−
<h5>What should we write about on this page?</h5>
+
  <img src=""  alt="some nice pictures" style="width:25%">
−
<p>On this page, you should write about the Human Practices topics you considered in your project, and document any special activities you did (such as visiting experts, talking to lawmakers, or doing public engagement). This should include all of the work done for the Silver Medal Criterion #3. Details for your Gold medal work and/or work for the two Human Practices special prizes should be put on those specified pages.</p>
+
  <div class="w3-display-bottomleft w3-large w3-container w3-padding-16 w3-black">
 +
    People taking the survey
 +
  </div>
 
</div>
 
</div>
  
 +
<div class="w3-display-container mySlides usnacrest2">
 +
  <img src="https://static.igem.org/mediawiki/2017/a/ae/USNA_Annapolis-homebackfade11.jpg" alt="some nice pictures" style="width:50%">
 +
  <div class="w3-display-bottomleft w3-large w3-container w3-padding-16 w3-black">
 +
    Cassie or someone demonstrating something
 +
  </div>
 +
</div>
 +
 +
<button class="w3-button w3-display-left w3-black" onclick="plusDivs(-1)">&#10094;</button>
 +
<button class="w3-button w3-display-right w3-black" onclick="plusDivs(1)">&#10095;</button>
  
−
<div class="column half_size">
 
−
<h5>Inspiration</h5>
 
−
<p>Read what other teams have done:</p>
 
−
<ul>
 
−
<li><a href="https://2014.igem.org/Team:Dundee/policypractice/experts">2014 Dundee </a></li>
 
−
<li><a href="https://2014.igem.org/Team:UC_Davis/Policy_Practices_Overview">2014 UC Davis </a></li>
 
−
<li><a href="https://2013.igem.org/Team:Manchester/HumanPractices">2013 Manchester </a></li>
 
−
<li><a href="https://2013.igem.org/Team:Cornell/outreach">2013 Cornell </a></li>
 
−
</ul>
 
 
</div>
 
</div>
  
 +
<script>
 +
var slideIndex = 1;
 +
showDivs(slideIndex);
 +
 +
function plusDivs(n) {
 +
  showDivs(slideIndex += n);
 +
}
 +
 +
function showDivs(n) {
 +
  var i;
 +
  var x = document.getElementsByClassName("mySlides");
 +
  if (n > x.length) {slideIndex = 1}   
 +
  if (n < 1) {slideIndex = x.length}
 +
  for (i = 0; i < x.length; i++) {
 +
    x[i].style.display = "none"; 
 +
  }
 +
  x[slideIndex-1].style.display = "block"; 
 +
}
 +
</script>
 +
 +
 +
 +
 +
<footer>
 +
<div id="logorow">
 +
  <div class="footerlogo">
 +
    <a href="http://www.dtra.mil/"><img class="footerlogosizes logoclear logoclear1 img-responsive footerimg" src="https://static.igem.org/mediawiki/igem.org/8/8b/USNA_Annapolis-DTRAseal.jpg"></img></a>
 +
  </div>
 +
  <div class="footerlogo">
 +
    <a href="https://www.nrl.navy.mil/"><img class="footerlogosizes logoclear logoclear1 img-responsive footerimg" src="https://static.igem.org/mediawiki/igem.org/d/dc/USNA_Annapolis-NRLseal.jpg"></img></a>
 +
  </div>
 +
  <div class="footerlogo">
 +
    <a href="https://www.onr.navy.mil//"><img class="footerlogosizes logoclear logoclear1 img-responsive footerimg" src="https://static.igem.org/mediawiki/igem.org/3/30/USNA_Annapolis-NavalResearchSeal.jpg"></a>
 +
  </div>
 +
 +
</div>
 +
</footer>
  
  
 
</html>
 
</html>

Revision as of 12:17, 17 July 2017

Main
Team
Project
Modeling
InterLab
Improve
Demonstrate
Collaboration
Notebook
Human Practice
HP-Silver
HP-Gold

Human Practices

Going Beyond the Lab

Outreach

First Way We Interacted

Short Description about how we interacted with some group of people (Plebe survey thing?) and we'll throw in a photo or two here with the plebes or some pictures of people talking and smiling.


Second Way We Interacted

I'm still thinking of keeping the little quote thing around since it adds a little bit to the paragraph, so maybe we can get a person from the crowd to comment on what they think of the project, or just talk about how it is nice to go out and spread our message. Nothing crazy.

An inspirational message about how we love to tell people about the wonderful things we are doing down in D.C!

Wrap up sentence of the interaction, talk about how it impacted our work.

In this section it would be nice to have a close up picture of someone from the group talking to a bunch of students or something, or maybe pointing to a volunteer who is asking questions.

person pointing

Event Photos

some nice pictures
Nice kids or something
some nice pictures
Park being happy
some nice pictures
bunch of people smiling
some nice pictures
People taking the survey
some nice pictures
Cassie or someone demonstrating something