Difference between revisions of "Team:Uppsala/Phage Display"

Line 9: Line 9:
 
     <head>
 
     <head>
 
         <style type="text/css">
 
         <style type="text/css">
 +
<meta name="viewport" content="width=device-width, initial-scale=1">
 +
<style>
 +
* {
 +
    box-sizing: border-box;
 +
}
  
 +
body {
 +
    margin: 0;
 +
    font-family: Arial;
 +
}
 +
 +
/* The grid: Four equal columns that floats next to each other */
 +
.column {
 +
    float: left;
 +
    width: 20%;
 +
    padding: 10px;
 +
}
 +
 +
/* Style the images inside the grid */
 +
.column img {
 +
    opacity: 0.8;
 +
    cursor: pointer;
 +
}
 +
 +
.column img:hover {
 +
    opacity: 1;
 +
}
 +
 +
/* Clear floats after the columns */
 +
.row:after {
 +
    content: "";
 +
    display: table;
 +
    clear: both;
 +
}
 +
 +
/* The expanding image container */
 +
.container {
 +
    position: relative;
 +
    display: none;
 +
}
 +
 +
/* Expanding image text */
 +
#imgtext {
 +
    position: absolute;
 +
    bottom: 15px;
 +
    left: 15px;
 +
    color: white;
 +
    font-size: 20px;
 +
}
 +
 +
/* Closable button inside the expanded image */
 +
.closebtn {
 +
    position: absolute;
 +
    top: 10px;
 +
    right: 15px;
 +
    color: white;
 +
    font-size: 35px;
 +
    cursor: pointer;
 +
}
 
           table.pgrouptable{
 
           table.pgrouptable{
 
     font-family: monospace;
 
     font-family: monospace;
Line 618: Line 676:
 
Predictive analysis was performed with <a href="http://immunet.cn/sarotup/cgi-bin/TUPScan.pl">SAROTUP: Target-Unrelated Peptides Scanners</a>[3][4][5].
 
Predictive analysis was performed with <a href="http://immunet.cn/sarotup/cgi-bin/TUPScan.pl">SAROTUP: Target-Unrelated Peptides Scanners</a>[3][4][5].
 
</p>
 
</p>
 +
</div>
 +
<div style="text-align:center">
 +
  <h2>Peptides</h2>
 +
  <p>Click on the images below:</p>
 
</div>
 
</div>
  
 +
<!-- The four columns -->
 +
<div class="row">
 +
  <div class="column" style="border:1px">
 +
    <img class="galleryimg" src="https://static.igem.org/mediawiki/2018/b/bf/T--Uppsala--peptide_17.png" alt="EF01122217" style="width:100%" onclick="myFunction(this);">
 +
  </div>
 +
  <div class="column">
 +
    <img class="galleryimg" src="https://static.igem.org/mediawiki/2018/5/55/T--Uppsala--peptide_18.png" alt="EF01122218" style="width:100%" onclick="myFunction(this);">
 +
  </div>
 +
  <div class="column">
 +
    <img class="galleryimg" src="https://static.igem.org/mediawiki/2018/0/0b/T--Uppsala--peptide_20.png" alt="EF01122220" style="width:100%" onclick="myFunction(this);">
 +
  </div>
 +
  <div class="column">
 +
    <img class="galleryimg" src="https://static.igem.org/mediawiki/2018/4/45/T--Uppsala--peptide_22.png" alt="EF01122222" style="width:100%" onclick="myFunction(this);">
 +
  </div>
 +
  <div class="column">
 +
    <img class="galleryimg" src="https://static.igem.org/mediawiki/2018/6/63/T--Uppsala--peptide_24.png" alt="EF01122224" style="width:100%" onclick="myFunction(this);">
 +
  </div>
 +
</div>
 +
 +
<div class="container">
 +
  <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
 +
  <img id="expandedImg" style="width:100%">
 +
  <div id="imgtext"></div>
 +
</div>
 +
 +
<script>
 +
function myFunction(imgs) {
 +
    var expandImg = document.getElementById("expandedImg");
 +
    var imgText = document.getElementById("imgtext");
 +
    expandImg.src = imgs.src;
 +
    imgText.innerHTML = imgs.alt;
 +
    expandImg.parentElement.style.display = "block";
 +
}
 +
</script>
 
<div>
 
<div>
 
<h1>Conclusions</h1>
 
<h1>Conclusions</h1>

Revision as of 16:38, 16 October 2018