Difference between revisions of "Team:Exeter/BioMechDownload"

Line 6: Line 6:
 
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 
   <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
 
   <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
−
    
+
   <script type="text/javascript" async
 +
  src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML">
 +
  MathJax.Hub.Config({
 +
  tex2jax: {
 +
    inlineMath: [['$','$'], ['\\(','\\)']],
 +
    processEscapes: true
 +
  }
 +
});
 +
</script>
 
   
 
   
 
</head>
 
</head>
Line 47: Line 55:
 
       display:block !important;
 
       display:block !important;
 
   }
 
   }
−
  #soc{
+
#soc{
 
display:none;
 
display:none;
 
   }
 
   }
−
  .subdiv_banner.left img, .subdiv_banner.right img{
 
−
width:100%;
 
−
position: relative;
 
−
top: 32%;
 
−
-ms-transform: translateY(-50%) /* IE 9 */
 
−
    -webkit-transform: translateY(-50%) /* Chrome, Safari, Opera */
 
−
    transform: translateY(-50%);
 
−
}
 
 
}
 
}
 
#links{
 
#links{
 
color:#47BCC2;
 
color:#47BCC2;
 
/*font-size:20px;*/
 
/*font-size:20px;*/
−
font-size:1.6vw;
+
font-size:1.2vw;
 
margin:0 0.9vw 0.5vh 0.9vw;
 
margin:0 0.9vw 0.5vh 0.9vw;
 
padding:0;
 
padding:0;
Line 279: Line 279:
 
#Section_Link:hover{
 
#Section_Link:hover{
  
 +
}
 +
#sectionGap, #sectionGap:focus, #contentTitle{
 +
min-width:100%;
 +
min-height:10vh;
 +
background:#e8e8e8;
 +
display:block;
 +
font-size:400%;
 +
text-align:center;
 +
color:#47BCC2;
 +
text-decoration:none;
 +
border-style:none none solid none;
 +
border-width:3px;
 +
border-color:#8cd5d9;
 +
}
 +
#sectionGap:hover, #sectionGap:active{
 +
color:#339499;
 
}
 
}
 
#sectionGap, #sectionGap:focus, #contentTitle{
 
#sectionGap, #sectionGap:focus, #contentTitle{
Line 399: Line 415:
 
height:1px;
 
height:1px;
 
top:-15px;
 
top:-15px;
−
}
 
−
.img_banner{
 
−
width:100vw;
 
−
margin:40px 0 30px 0;
 
−
padding:0;
 
−
height:10vh;
 
−
background:#e8e8e8;
 
−
opacity:0.6;
 
 
}
 
}
 
/*Mobile and small screen css*/
 
/*Mobile and small screen css*/
Line 426: Line 434:
 
}
 
}
 
}
 
}
 +
#dropdownMenu1{
 +
margin-top:-0.15vw;
 +
background:#e8e8e8;
 +
border-style:none;
 +
}
 +
@media (min-width: 767px){
 +
.dropdown-menu{
 +
margin-top:24px;
 +
left:-19px;
 +
border-radius:0px;
 +
padding:4px;
 +
}
 +
}
 +
/*Mobile and small screen css*/
 +
@media (max-width: 767px){
 +
.div_vl.backgroundimage{
 +
height:37vh;
 +
background-size: auto 200%;
 +
}
 +
.div_l{
 +
display:none;
 +
}
 +
#logo_Banner_Desktop{
 +
display:none;
 +
}
 +
#logo_Banner_Mobile{
 +
display:block;
 +
width:100%;
 +
max-width:200px;
 +
margin:auto;
 +
}
 +
#dropdownMenu1{
 +
padding:2.5% 0 2% 0;
 +
margin:-1.6% auto -1.4% 0.9%;
 +
}
 +
#links{
 +
padding:10px 0;
 +
margin-left:0.85vw;
 +
}
 
}
 
}
−
</style>
 
−
<!--BioMech download page styling-->
 
−
<style type="text/css">
 
−
 
 
</style>
 
</style>
 
<div id="top_page" class="link_fix"></div>
 
<div id="top_page" class="link_fix"></div>
Line 450: Line 493:
 
         <div class="collapse navbar-collapse" id="myNavbar">
 
         <div class="collapse navbar-collapse" id="myNavbar">
 
<ul class="nav navbar-nav">
 
<ul class="nav navbar-nav">
−
<li ><a id="links"href="https://2016.igem.org/Team:Exeter/Project">Project</a></li>
+
<li><div id="links" style="margin:0;" class="dropdown">
 +
  <button class="dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
 +
    <span style="margin-bottom:4px;">Lab</span>
 +
    <span class="caret"></span>
 +
  </button>
 +
  <ul class="dropdown-menu" style="background:#e8e8e8;margin-left:25px;" aria-labelledby="dropdownMenu1">
 +
<li><a id="links" style="margin:10px 0 30px 2px;padding:0;font-size:1.8vh;" href="https://2016.igem.org/Team:Exeter/Project">Lab Project</a></li>
 +
    <li><a id="links" style="margin:30px 0 10px 2px;padding:0;font-size:1.8vh;" href="https://2016.igem.org/Team:Exeter/Labbook">Lab Book</a></li>
 +
 
 +
  </ul>
 +
</div></li>
 
<li ><a id="links"href="https://2016.igem.org/Team:Exeter/Parts">Parts</a></li>
 
<li ><a id="links"href="https://2016.igem.org/Team:Exeter/Parts">Parts</a></li>
 
<li ><a id="links"href="https://2016.igem.org/Team:Exeter/Team">Team</a></li>
 
<li ><a id="links"href="https://2016.igem.org/Team:Exeter/Team">Team</a></li>
−
<li ><a id="links"href="https://2016.igem.org/Team:Exeter/Human_Practices">Human Practices</a></li>
+
<li ><a id="links" href="https://2016.igem.org/Team:Exeter/Interlab">InterLab</a></li>
 +
<li><div id="links" style="margin:0;" class="dropdown">
 +
  <button class="dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
 +
    <span style="margin-bottom:4px;">Human Practices</span>
 +
    <span class="caret"></span>
 +
  </button>
 +
  <ul class="dropdown-menu" style="background:#e8e8e8;margin-left:25px;" aria-labelledby="dropdownMenu1"> 
 +
<li><a id="links" style="margin:10px 0 30px 2px;padding:0;font-size:1.8vh;" href="https://2016.igem.org/Team:Exeter/Human_Practices">Human Practices Homepage</a></li>
 +
    <li><a id="links" style="margin:30px 0 10px 2px;padding:0;font-size:1.8vh;" href="https://2016.igem.org/Team:Exeter/Integrated_Practices">Integrated</a></li>
 +
<li><a id="links" style="margin:30px 0 10px 2px;padding:0;font-size:1.8vh;" href="https://2016.igem.org/Team:Exeter/Engagement">Engagement</a></li>
 +
<li><a id="links" style="margin:30px 0 10px 2px;padding:0;font-size:1.8vh;" href="https://2016.igem.org/Team:Exeter/Log">Log</a></li>
 +
 
 +
  </ul>
 +
</div></li>
 +
 
 
<li ><a id="links"href="https://2016.igem.org/Team:Exeter/Attributions">Attributions</a></li>
 
<li ><a id="links"href="https://2016.igem.org/Team:Exeter/Attributions">Attributions</a></li>
−
<li ><a id="links"href="https://2016.igem.org/Team:Exeter/Awards">Awards</a></li>
+
 
−
<li ><a id="links"href="https://2016.igem.org/Team:Exeter/Log">Log</a></li>
+
<li><div id="links" style="margin:0;" class="dropdown">
−
<li ><a id="links"href="https://2016.igem.org/Team:Exeter/Collaborations">Collaborations</a></li>
+
  <button class="dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
−
<li ><a id="links"href="https://2016.igem.org/Team:Exeter/Interlab">InterLab</a></li>
+
    <span style="margin-bottom:4px;">Awards</span>
 +
    <span class="caret"></span>
 +
  </button>
 +
  <ul class="dropdown-menu" style="background:#e8e8e8;margin-left:25px;" aria-labelledby="dropdownMenu1">
 +
 
 +
<li><a id="links" style="margin:10px 0 30px 2px;padding:0;font-size:1.8vh;" href="https://2016.igem.org/Team:Exeter/Awards">Medals</a></li>
 +
<li><span style="margin:10px 0 30px 2px;padding:0;">Special pages</span></li>
 +
<li><a id="links" style="margin:30px 0 10px 2px;padding:0;font-size:1.8vh;" href="https://2016.igem.org/Team:Exeter/HP/Silver">HP Silver</a></li>
 +
<li><a id="links" style="margin:30px 0 10px 2px;padding:0;font-size:1.8vh;" href="https://2016.igem.org/Team:Exeter/HP/Gold">HP Gold</a></li>
 +
 
 +
  </ul>
 +
</div></li>
 +
<li ><a id="links"href="https://2016.igem.org/Team:Exeter/Model">Models</a></li>
 +
<li ><a id="links"href="https://2016.igem.org/Team:Exeter/Collaborations">Collaborations</a></li>
 +
 
 
</ul>
 
</ul>
 
<ul class="nav navbar-nav navbar-right">
 
<ul class="nav navbar-nav navbar-right">
Line 514: Line 595:
 
$('#logo_inverse').toggle();
 
$('#logo_inverse').toggle();
 
});
 
});
−
//Smooth scrolling//
 
−
$('a[href^="#"]').on('click',function (e) {
 
−
    e.preventDefault();
 
−
 
−
    var target = this.hash;
 
−
    var $target = $(target);
 
−
 
−
    $('html, body').stop().animate({
 
−
        'scrollTop': $target.offset().top
 
−
    }, 900, 'swing', function () {
 
−
        window.location.hash = target;
 
−
    });
 
−
});
 
 
});
 
});
 
</script>  
 
</script>  
 +
<style>
 +
h1
 +
</style>
 
<!--Counter and topnav ends-->
 
<!--Counter and topnav ends-->
 
<!--Content begins-->
 
<!--Content begins-->
Line 550: Line 621:
 
<div class="col-xs-12" style="margin:0;padding:0;">
 
<div class="col-xs-12" style="margin:0;padding:0;">
 
<h6>Game Board</h6>
 
<h6>Game Board</h6>
−
<p id="pp">
+
<div class="col-xs-12 col-sm-6">
−
Instructions to come
+
<p id="pp">
−
</p>
+
<ol>
 +
<li>
 +
Open the board game PDF files. If you have access to an A3 printer
 +
click <a target="_blank" href="https://static.igem.org/mediawiki/2016/1/1b/T--Exeter--HumanPractises_BoardGame_A3.pdf">here</a>, otherwise
 +
for an A4 printers click <a target="_blank" href="https://static.igem.org/mediawiki/2016/7/7a/T--Exeter--HumanPractises_BoardGame_A4.pdf">here</a>.
 +
Both links open in a new tab.
 +
</li>
 +
 
 +
<li>
 +
If printing an A4 version of the game it is reccommended that you tape the two sheets
 +
together. For a better experience the board can then be attatched to a cardboard box
 +
to maintain its shape.
 +
</li>
 +
 +
</ol>
 +
</p>
 +
</div>
 +
<div class="col-xs-12 col-sm-6">
 +
<img src="https://static.igem.org/mediawiki/2016/0/03/T--Exeter--HumanPractises_BoardGame_Cards.png" style="max-width:90%;margin:40px auto;display:block;">
 +
</div>
 
</div>
 
</div>
 
<div class="col-xs-12" style="margin:0;padding:0;">
 
<div class="col-xs-12" style="margin:0;padding:0;">
Line 564: Line 654:
 
may not always be correctly aligned.
 
may not always be correctly aligned.
 
</p>
 
</p>
−
<p id="pp">
+
<div class="col-xs-12 col-sm-6">
−
Firstly, open the correct BioBrick PDF file. If you have access to a double sided printer
+
<p id="pp">
−
click <a target="_blank" href="https://static.igem.org/mediawiki/2016/b/b7/T--Exeter--HumanPractises_BoardGame_DoubleSide.pdf">here</a>, and  
+
<ol>
−
for single sided printers click <a target="_blank" href="https://static.igem.org/mediawiki/2016/3/37/T--Exeter--HumanPractises_BoardGame_SingleSide.pdf">here</a>.
+
<li>
−
Both links open in a new tab.
+
Open the correct BioBrick PDF file. If you have access to a double sided printer
−
</p>
+
click <a target="_blank" href="https://static.igem.org/mediawiki/2016/b/b7/T--Exeter--HumanPractises_BoardGame_DoubleSide.pdf">here</a>, and  
−
<div class="img_banner" style="background-image:url('https://static.igem.org/mediawiki/2016/0/03/T--Exeter--HumanPractises_BoardGame_Instruc3.png');">
+
for single sided printers click <a target="_blank" href="https://static.igem.org/mediawiki/2016/3/37/T--Exeter--HumanPractises_BoardGame_SingleSide.pdf">here</a>.
−
+
Both links open in a new tab.
 +
</li>
 +
 
 +
<li>
 +
Press "print" and locate the printing properties for your browser and ensure
 +
portrait printing is selected. For single sided
 +
prints, do not change any options. For double sided prints select "flip on short side".
 +
If you wish to save paper and ink here by printing only the fonts of the cards
 +
only print odd pages (1,3,5...19), this is only recommended for single side printing.
 +
</li>
 +
 +
<li>
 +
If printing double sided use scissors or a guillotine to separate the cards.
 +
If printing printing single sided stick pairs of pages back to back (5 and 6 for example)
 +
before cutting.
 +
</li>
 +
</ol>
 +
</p>
 
</div>
 
</div>
−
<p id="pp">
+
<div class="col-xs-12 col-sm-6">
−
Secondly, press "print" and locate the printing properties for your browser and ensure
+
<img src="https://static.igem.org/mediawiki/2016/d/d7/T--Exeter--HumanPractises_BoardGame_Boardpic.png" style="max-width:90%;margin:40px auto;display:block;">
−
portrait printing is selected. For single sided
+
−
prints, do not change any options. For double sided prints select "flip on short side".
+
−
If you wish to save paper and ink here by printing only the fonts of the cards
+
−
only print odd pages (1,3,5...19), this is only recommended for single side printing.
+
−
</p>
+
−
<div class="img_banner" style="background-image:url('https://static.igem.org/mediawiki/2016/b/bc/T--Exeter--HumanPractises_BoardGame_Instruc4.png');">
+
−
+
−
</div>
+
−
<p id="pp">
+
−
Lastly, if printing double sided use scissors or a guillotine to separate the cards.
+
−
If printing printing single sided stick pairs of pages back to back (5 and 6 for example)
+
−
before cutting.
+
−
</p>
+
−
<div class="img_banner" style="background-image:url('https://static.igem.org/mediawiki/2016/5/53/T--Exeter--HumanPractises_BoardGame_Instruc5.png');">
+
−
+
 
</div>
 
</div>
 
</div>
 
</div>
 
<div class="col-xs-12" style="margin:0;padding:0;">
 
<div class="col-xs-12" style="margin:0;padding:0;">
−
<h6>Rules</h6>
+
<h6>Instructions Pamphlet</h6>
−
<p id="pp">
+
<div style="margin:0;padding:0;" class="col-xs-12 col-sm-6">
−
Instructions to come
+
<p id="pp">
−
</p>
+
BioMech's instructions can be downloaded from this <a target="_blank" href="https://static.igem.org/mediawiki/2016/b/bd/T--Exeter--HumanPractises_BoardGame_Pamphlet.pdf">link</a>. The booklet is
 +
not required to be read online, feel free to download or print it out.
 +
</p>
 +
</div>
 +
<div class="col-xs-12 col-sm-6">
 +
<img src="https://static.igem.org/mediawiki/2016/4/4f/T--Exeter--HumanPractises_BoardGame_Pamphletpic.png" style="max-width:90%;margin:40px auto;display:block;">
 +
</div>
 
</div>
 
</div>
 +
 +
 +
<nav id="topnav" class="nav-navbar" style="right:2px;">
 +
<div class="container-fluid">
 +
    <div class="navbar-header">
 +
      <a class="navbar-brand" id="Top_link" href="#Top">
 +
<span class="glyphicon glyphicon-menu-up" aria-hidden="true" style="max-width:1%;"></span>
 +
  </a>
 +
    </div>
 +
</div>
 +
 +
 
</div>
 
</div>
  

Revision as of 21:10, 7 October 2016