|
|
| Line 1: |
Line 1: |
| | {{:Team:British Columbia/Template/Fixednavbar}} | | {{:Team:British Columbia/Template/Fixednavbar}} |
| − | {{:Team:British Columbia/Lightbox_CSS}}
| |
| | | | |
| | <html> | | <html> |
| Line 15: |
Line 14: |
| | <div id="UBCbody"> | | <div id="UBCbody"> |
| | | | |
| − | <h4 style="text-align:center;">Click on the image to zoom in.</h4> | + | <h4 style="text-align:center;">Hover on the image to zoom in.</h4> |
| − | <section id="gallery">
| + | |
| − | <!-- thumbnail image wrapped in a link -->
| + | |
| − | <section class="item">
| + | |
| − | <a href="#img1"> <img src="https://static.igem.org/mediawiki/2015/4/4e/InterviewInfographic1UBC.png" width="450">
| + | |
| − | </a>
| + | |
| − | </section>
| + | |
| − | <section class="item">
| + | |
| − | <a href="#img2"><img src="https://static.igem.org/mediawiki/2015/e/e0/InterviewInfographic2UBC.png" width="450">
| + | |
| − | </a>
| + | |
| − | </section>
| + | |
| − | <section class="item"><a href="#img4"><img src="https://static.igem.org/mediawiki/2015/8/8c/InterviewInfographic4UBC.png" width="450">
| + | |
| − | </a>
| + | |
| − | </section>
| + | |
| − | <section class="item" style="margin-top:-380px;"><a href="#img3"><img src="https://static.igem.org/mediawiki/2015/4/46/InterviewInfographic3UBC.png" width="450">
| + | |
| − | </a>
| + | |
| − | </section>
| + | |
| − | </section>
| + | |
| − | <h4 style="float:left;padding-left:30px;padding-top:100px;">Click <a>here</a> to read our report from the interviews</h4>
| + | |
| − | <div style="clear:both;"></div>
| + | |
| | | | |
| − | <div class="lightbox" id="img1"> | + | <img class="img-zoom" src="https://static.igem.org/mediawiki/2015/4/4e/InterviewInfographic1UBC.png" width="450"> |
| − | <div class="box">
| + | <img class="img-zoom" src="https://static.igem.org/mediawiki/2015/e/e0/InterviewInfographic2UBC.png" width="450"> |
| − | <a class="close" href="#">Close</a>
| + | <img class="img-zoom" src="https://static.igem.org/mediawiki/2015/8/8c/InterviewInfographic4UBC.png" width="450"> |
| − | <div class="content">
| + | <img class="img-zoom" src="https://static.igem.org/mediawiki/2015/4/46/InterviewInfographic3UBC.png" width="450"> |
| − | <img src="https://static.igem.org/mediawiki/2015/ 4/ 4e/ InterviewInfographic1UBC.png" height=" 600"> | + | |
| − | </div>
| + | |
| − | <a class="next" href="#img2">Next</a>
| + | |
| − | <div class="clear"></div>
| + | |
| − | </div> | + | |
| − | </div>
| + | |
| | | | |
| − | <div class="lightbox" id="img2"> | + | < h4 style=" float: left;padding-left: 30px;padding-top: 100px;"> Click <a> here</a> to read our report from the interviews</ h4> |
| − | <div class="box">
| + | |
| − | <a class="close" href="#">Close</a>
| + | |
| − | <div class="content">
| + | |
| − | <img src="https://static.igem.org/mediawiki/2015/e/e0/InterviewInfographic2UBC.png" height="600">
| + | |
| − | </div>
| + | |
| − | <a class="prev" href="#img1">Previous</a>
| + | |
| − | <a class="next" href="#img3">Next</a>
| + | |
| − | <div class="clear"></div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="lightbox" id="img3">
| + | |
| − | <div class="box">
| + | |
| − | <a class="close" href="#">Close</a>
| + | |
| − | <div class="content">
| + | |
| − | <img src="https://static.igem.org/mediawiki/2015/4/46/InterviewInfographic3UBC.png" height="600">
| + | |
| − | </div>
| + | |
| − | <a class="prev" href="#img2">Previous</a>
| + | |
| − | <a class="next" href="#img4">Next</a>
| + | |
| − | <div class="clear"></div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="lightbox" id="img4">
| + | |
| − | <div class="box">
| + | |
| − | <a class="close" href="#">Close</a>
| + | |
| − | <div class="content">
| + | |
| − | <img src="https://static.igem.org/mediawiki/2015/8/8c/InterviewInfographic4UBC.png" height="600">
| + | |
| − | </div>
| + | |
| − | <a class="prev" href="#img3">Previous</a> | + | |
| − | <a class="next" href="#img5">Next</a>
| + | |
| − | <div class="clear"></div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div style="clear:both;"></div>
| + | |
| | | | |
| | <style> | | <style> |
| − | IMG.infographic {
| + | .img-zoom { |
| − | display: block; | + | width: 310px; |
| − | margin-left: auto; | + | -webkit-transition: all .2s ease-in-out; |
| − | margin-right: auto } | + | -moz-transition: all .2s ease-in-out; |
| | + | -o-transition: all .2s ease-in-out; |
| | + | -ms-transition: all .2s ease-in-out; |
| | + | } |
| | + | |
| | + | .transition { |
| | + | -webkit-transform: scale(2); |
| | + | -moz-transform: scale(2); |
| | + | -o-transform: scale(2); |
| | + | transform: scale(2); |
| | + | } |
| | </style> | | </style> |
| − | | + | <script> |
| − | | + | $(document).ready(function(){ |
| − | <!-- | + | $('.img-zoom').hover(function() { |
| − | | + | $(this).addClass('transition'); |
| − | <div class="highlightBox">
| + | |
| − | <h4>Note</h4>
| + | }, function() { |
| − | <p>You must fill out this page in order to be considered for all <a href="https://2015.igem.org/Judging/Awards">awards</a> for Human Practices:</p>
| + | $(this).removeClass('transition'); |
| − | <ul>
| + | }); |
| − | <li>Human Practices silver medal criterion</li>
| + | }); |
| − | <li>Human Practices gold medal criterion</li>
| + | </script> |
| − | <li>Best Integrated Human Practices award</li>
| + | |
| − | <li>Best Education and Public Engagement award</li>
| + | |
| − | </ul>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | | + | |
| − | <h5>Some Human Practices topic areas </h5>
| + | |
| − | <ul>
| + | |
| − | <li>Philosophy</li>
| + | |
| − | <li>Public Engagement / Dialogue</li>
| + | |
| − | <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>
| + | |
| − | | + | |
| − | <h5>What should we write about on this page?</h5>
| + | |
| − | <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).</p>
| + | |
| − | | + | |
| − | | + | |
| − | <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>
| + | |
| − | | + | |
| − | <h3>Integrated Human Practices</h3>
| + | |
| − | | + | |
| − | <p>Do you want to be considered for the <a href="https://2015.igem.org/Judging/Awards#SpecialPrizes">Best Integrated Human Practices award</a>? Make it easy for the judges to find any wiki content that is relevant to this prize. Highlight this content with a header or separate section.</p>
| + | |
| − | | + | |
| − | <h3>Education and Public Engagement</h3>
| + | |
| − | | + | |
| − | <p>Do you want to be considered for the <a href="https://2015.igem.org/Judging/Awards#SpecialPrizes">Best Education and Public Outreach award</a>? Make it easy for the judges to find any wiki content that is relevant to this prize. Highlight this content with a header or separate section.</p> | + | |
| − | | + | |
| − | </div>-->
| + | |
| | </div> | | </div> |
| | </div> | | </div> |
