Difference between revisions of "Team:Imperial College/ArtGallery"

 
(12 intermediate revisions by the same user not shown)
Line 49: Line 49:
 
             $darkMint - #1FFFB4;}
 
             $darkMint - #1FFFB4;}
 
                  
 
                  
            #HQ h1{
+
    font-family:'Varela Round', sans-serif;
+
 
+
}
+
 
                  
 
                  
 
                  
 
                  
 
             body{
 
             body{
                 font-family:'Varela Round', sans-serif;
+
                 font-family:'Varela Round', sans-serif !important;
 
                 background-color: ivory;
 
                 background-color: ivory;
                 color:#24305E;
+
                 color:#24305E!important;
 
             }
 
             }
  
 
             .clr{
 
             .clr{
                 clear: both;
+
                 clear: both !important;
 
             }
 
             }
 
                  
 
                  
Line 68: Line 65:
  
 
             .intro h1{
 
             .intro h1{
                 font-family: 'Varela Round', sans-serif;
+
                 font-family: 'Varela Round', sans-serif !important;
                 font-size: 50px;
+
                 font-size: 50px !important;
                 text-align: center;
+
                 text-align: center !important;
 
             }
 
             }
  
 
             .intro h2{
 
             .intro h2{
                 font-family: 'Varela Round', sans-serif;
+
                 font-family: 'Varela Round', sans-serif !important;
                 font-size: 36px;
+
                 font-size: 36px !important;
                 text-align: center;
+
                 text-align: center !important;
                 font-weight: bold;
+
                 font-weight: bold !important;
 
             }
 
             }
  
 
             .intro h3{
 
             .intro h3{
                 font-family: 'Varela Round', sans-serif;
+
                 font-family: 'Varela Round', sans-serif !important;
                 font-size: 24px;
+
                 font-size: 24px !important;
                 text-align: left;center;
+
                 text-align: left !important;center;
                 font-weight: bold;
+
                 font-weight: bold !important;
                 margin-left:10%;
+
                 margin-left:10% !important;
 
             }
 
             }
  
 
             .intro p{
 
             .intro p{
                 font-family: 'Varela Round', sans-serif;
+
                 font-family: 'Varela Round', sans-serif !important;
                 font-size: 18px;
+
                 font-size: 18px !important;
                 text-align:justify;left;center;
+
                 text-align:justify !important;left;center;
                 width: 80%;
+
                 width: 80% !important;
                 margin:auto;
+
                 margin:auto !important;
                 margin-bottom:18px;
+
                 margin-bottom:18px !important;
 
             }
 
             }
  
 
             .container{
 
             .container{
                 width: 90%;
+
                 width: 90% !important;
                 margin:auto;   
+
                 margin:auto !important;   
                 margin-top: 20px;   
+
                 margin-top: 20px !important;   
                 margin-bottom:100px;
+
                 margin-bottom:100px !important;
 
             }
 
             }
  
 
             .container2 {
 
             .container2 {
                 width:25%;
+
                 width:25% !important;
                 margin:0px;
+
                 margin:0px !important;
                 height: 300px;
+
                 height: 300px !important;
                 float:left;
+
                 float:left !important;
 
             }
 
             }
  
 
             .profilePic{
 
             .profilePic{
                 width:70%;
+
                 width:70% !important;
                 border-radius: 50%;
+
                 border-radius: 50% !important;
                 margin-left:15%;
+
                 margin-left:15% !important;
                 margin-right:15%;
+
                 margin-right:15% !important;
                 border: 5px solid  #F76C6C;#F8E9A1;
+
                 border: 5px solid  #F76C6C !important;#F8E9A1;
                 cursor: pointer;
+
                 cursor: pointer!important;
                 transition: border-color 0.3s ease;
+
                 transition: border-color 0.3s ease !important;
 
             }
 
             }
  
 
             .profilePic:hover{
 
             .profilePic:hover{
                 border-color: #F8E9A1;
+
                 border-color: #F8E9A1!important;
 
             }
 
             }
  
 
             .container2 h1{
 
             .container2 h1{
                 text-align:center;
+
                 text-align:center !important;
                 font-size:28px;
+
                 font-size:28px !important;
                 margin-top:10px;
+
                 margin-top:10px !important;
                 font-weight:bold;
+
                 font-weight:bold !important;
                 font-family:'Varela Round', sans-serif;
+
                 font-family:'Varela Round', sans-serif !important;
 
             }
 
             }
  
 
             .thumbNail{
 
             .thumbNail{
                 width:80%;
+
                 width:80% !important;
                 margin-left:10%;
+
                 margin-left:10% !important;
                 border-radius:10px;
+
                 border-radius:10px !important;
                 opacity:0.8;
+
                 opacity:0.8 !important;
                 transition: opacity 0.3s ease;
+
                 transition: opacity 0.3s ease !important;
                 cursor: pointer;
+
                 cursor: pointer !important;
 
             }
 
             }
  
 
             .thumbNail:hover{
 
             .thumbNail:hover{
                 opacity:1;
+
                 opacity:1 !important;
 
             }
 
             }
  
 
             .container2 p{
 
             .container2 p{
                 width: 80%;
+
                 width: 80% !important;
                 font-size:16px;
+
                 font-size:16px !important;
                 text-align:center;
+
                 text-align:center !important;
                 margin-left:10%;
+
                 margin-left:10% !important;
                 margin-bottom:20px;
+
                 margin-bottom:20px !important;
 
             }
 
             }
  
 
             .container2 p b{
 
             .container2 p b{
                 font-size:20px;
+
                 font-size:20px !important;
 
             }
 
             }
  
 
             .artBio{
 
             .artBio{
                 width:90%;
+
                 width:90% !important;
                 margin:auto;
+
                 margin:auto !important;
                 padding-top:20px;
+
                 padding-top:20px !important;
 
             }
 
             }
  
 
             .artBio img{
 
             .artBio img{
                 width:20%;
+
                 width:20% !important;
                 float:left;
+
                 float:left !important;
                 border-radius: 50%;
+
                 border-radius: 50% !important;
                 box-sizing: border-box;  
+
                 box-sizing: border-box !important;  
                 margin-right:2%;
+
                 margin-right:2% !important;
                 border: 6px solid  #F76C6C;#F8E9A1;
+
                 border: 6px solid  #F76C6C !important;#F8E9A1;
                 cursor: pointer;
+
                 cursor: pointer !important;
                 transition: border-color 0.3s ease;
+
                 transition: border-color 0.3s ease !important;
 
             }
 
             }
  
 
             .artBio img:hover{
 
             .artBio img:hover{
                 border-color: #F8E9A1;
+
                 border-color: #F8E9A1 !important;
 
             }
 
             }
  
 
             .artBio h1{
 
             .artBio h1{
                 font-family:'Varela Round', sans-serif;
+
                 font-family:'Varela Round', sans-serif !important;
                 font-size:38px;
+
                 font-size:38px !important;
                 font-weight: bold;
+
                 font-weight: bold !important;
                 text-align:center;
+
                 text-align:center !important;
 
             }
 
             }
  
 
             .artText{
 
             .artText{
                 box-sizing: border-box;     
+
                 box-sizing: border-box !important;     
                 float:left;
+
                 float:left !important;
                 width: 78%;
+
                 width: 78% !important;
                 margin-bottom:100px;
+
                 margin-bottom:100px !important;
 
             }
 
             }
  
 
             .artText h1{
 
             .artText h1{
                 font-family: 'Varela Round', sans-serif;
+
                 font-family: 'Varela Round', sans-serif !important;
                 font-size: 30px;
+
                 font-size: 30px !important;
                 font-weight: bold;  
+
                 font-weight: bold !important;  
                 margin:0px;
+
                 margin:0px !important;
                 padding:0px;
+
                 padding:0px !important;
                 text-align:left;
+
                 text-align:left !important;
 
             }
 
             }
  
 
             .artText p{
 
             .artText p{
                 font-family: 'Varela Round', sans-serif;
+
                 font-family: 'Varela Round', sans-serif !important;
                 font-size: 18px;
+
                 font-size: 18px !important;
                 font-weight: normal;  
+
                 font-weight: normal !important;  
                 margin:0px;
+
                 margin:0px !important;
                 margin-top:10px;
+
                 margin-top:10px !important;
                 padding:0px;
+
                 padding:0px !important;
 
             }
 
             }
  
 
             .show{
 
             .show{
                 align:center;
+
                 align:center !important;
 
             }
 
             }
  
 
             .show img{
 
             .show img{
                 height:80%;
+
                 height:80% !important;
                 margin:auto;
+
                 margin:auto !important;
                 margin-bottom:2%;
+
                 margin-bottom:2% !important;
                 border-radius:10px;
+
                 border-radius:10px !important;
 
             }
 
             }
  
 
             .show video{
 
             .show video{
                 margin-left:20%;
+
                 margin-left:20% !important;
 
             }
 
             }
  
 
             .select{
 
             .select{
                 width:80%;
+
                 width:80% !important;
                 margin:auto;
+
                 margin:auto !important;
 
             }
 
             }
  
 
             .select img{
 
             .select img{
                 opacity:0.5;
+
                 opacity:0.5 !important;
                 width:8%;
+
                 width:8% !important;
                 height:auto;
+
                 height:auto !important;
                 float:left;
+
                 float:left !important;
                 margin-right:2%;
+
                 margin-right:2% !important;
                 transition: opacity 0.3s ease;
+
                 transition: opacity 0.3s ease !important;
                 cursor:pointer;
+
                 cursor:pointer !important;
                 border-radius:5px;
+
                 border-radius:5px !important;
 
             }
 
             }
  
 
             .select img:hover{
 
             .select img:hover{
                 opacity:1;
+
                 opacity:1 !important;
 
             }
 
             }
  
 
             .aboutPiece h2{
 
             .aboutPiece h2{
                 font-family: 'Varela Round', sans-serif;
+
                 font-family: 'Varela Round', sans-serif !important;
                 text-align:center;
+
                 text-align:center !important;
                 margin-bottom:18px;
+
                 margin-bottom:18px !important;
                 font-weight: bold;
+
                 font-weight: bold !important;
 
             }
 
             }
  
 
             .aboutPiece p{
 
             .aboutPiece p{
                 font-family: 'Varela Round', sans-serif;
+
                 font-family: 'Varela Round', sans-serif !important;
                 width:80%;
+
                 width:80% !important;
                 margin:auto;
+
                 margin:auto !important;
                 text-align:center;
+
                 text-align:center !important;
                 font-size: 18px;
+
                 font-size: 18px !important;
 
             }
 
             }
 
              
 
              
Line 371: Line 368:
 
             <div class="show">
 
             <div class="show">
 
                 <div class="large">
 
                 <div class="large">
                     <img  id="hus1" src="https://static.igem.org/mediawiki/2018/thumb/4/48/T--Imperial_College--Frankie0.jpg/1200px-T--Imperial_College--Frankie0.jpg" style="display:block">
+
                     <img  style="width:70%;margin-left:15%;margin-top:50px;margin-bottom:20px;display:none;" id="hus1" src="https://static.igem.org/mediawiki/2018/thumb/4/48/T--Imperial_College--Frankie0.jpg/1200px-T--Imperial_College--Frankie0.jpg" style="display:block">
                     <img  id="hus2" src="https://static.igem.org/mediawiki/2018/5/5f/T--Imperial_College--Frankie22.jpg" style="display:none">
+
                     <img style="width:70%;margin-left:15%;margin-top:50px;margin-bottom:20px;display:none;" id="hus2" src="https://static.igem.org/mediawiki/2018/5/5f/T--Imperial_College--Frankie22.jpg" style="display:none">
                     <img id="hus3" src="https://static.igem.org/mediawiki/2018/5/5e/T--Imperial_College--Frankie3.jpg" style="display:none">                 
+
                     <img style="width:70%;margin-left:15%;margin-top:50px;margin-bottom:20px;display:none;" id="hus3" src="https://static.igem.org/mediawiki/2018/5/5e/T--Imperial_College--Frankie3.jpg" style="display:none">                 
                     <img id="hus4" src="https://static.igem.org/mediawiki/2018/b/b7/T--Imperial_College--Frankie4.jpg" style="display:none">                 
+
                     <img style="width:70%;margin-left:15%;margin-top:50px;margin-bottom:20px;display:none;" id="hus4" src="https://static.igem.org/mediawiki/2018/b/b7/T--Imperial_College--Frankie4.jpg" style="display:none">                 
                     <img  id="hus5" src="https://static.igem.org/mediawiki/2018/c/c2/T--Imperial_College--Frankie5.jpg" style="display:none">                 
+
                     <img style="width:70%;margin-left:15%;margin-top:50px;margin-bottom:20px;display:none;" id="hus5" src="https://static.igem.org/mediawiki/2018/c/c2/T--Imperial_College--Frankie5.jpg" style="display:none">                 
                     <img id="hus6" src="https://static.igem.org/mediawiki/2018/2/29/T--Imperial_College--Frankie6.jpg" style="display:none">                 
+
                     <img style="width:70%;margin-left:15%;margin-top:50px;margin-bottom:20px;display:none;" id="hus6" src="https://static.igem.org/mediawiki/2018/2/29/T--Imperial_College--Frankie6.jpg" style="display:none">                 
 
                 </div>
 
                 </div>
 
                  
 
                  
 
                 <div class="select">
 
                 <div class="select">
                   <img src="https://static.igem.org/mediawiki/2018/thumb/4/48/T--Imperial_College--Frankie0.jpg/1200px-T--Imperial_College--Frankie0.jpg" onclick="exchange(0, 'hus1')" style="margin-left:15%">
+
                   <img src="https://static.igem.org/mediawiki/2018/thumb/4/48/T--Imperial_College--Frankie0.jpg/1200px-T--Imperial_College--Frankie0.jpg" onclick="exchange(0, 'hus1')" style="margin-left:20%">
 
                   <img src="https://static.igem.org/mediawiki/2018/5/5f/T--Imperial_College--Frankie22.jpg" onclick="exchange(0, 'hus2')">
 
                   <img src="https://static.igem.org/mediawiki/2018/5/5f/T--Imperial_College--Frankie22.jpg" onclick="exchange(0, 'hus2')">
 
                   <img src="https://static.igem.org/mediawiki/2018/5/5e/T--Imperial_College--Frankie3.jpg" onclick="exchange(0, 'hus3')">
 
                   <img src="https://static.igem.org/mediawiki/2018/5/5e/T--Imperial_College--Frankie3.jpg" onclick="exchange(0, 'hus3')">
Line 424: Line 421:
 
             <div class="show">
 
             <div class="show">
 
                 <div class="large">
 
                 <div class="large">
                     <img id="oli0" src="https://static.igem.org/mediawiki/2018/e/ed/T--Imperial_College--oli0.png" style="display:block">
+
                     <img style="width:70%;margin-left:15%;margin-top:50px;margin-bottom:20px;display:none;" id="oli0" src="https://static.igem.org/mediawiki/2018/e/ed/T--Imperial_College--oli0.png" style="display:block">
                     <img id="oli1" src="https://static.igem.org/mediawiki/2018/thumb/8/85/T--Imperial_College--oli1.png/1600px-T--Imperial_College--oli1.png" style="display:none">
+
                     <img style="width:70%;margin-left:15%;margin-top:50px;margin-bottom:20px;display:none;" id="oli1" src="https://static.igem.org/mediawiki/2018/thumb/8/85/T--Imperial_College--oli1.png/1600px-T--Imperial_College--oli1.png" style="display:none">
                     <img id="oli2" src="https://static.igem.org/mediawiki/2018/thumb/c/cf/T--Imperial_College--oli2.png/1600px-T--Imperial_College--oli2.png" style="display:none">                 
+
                     <img style="width:70%;margin-left:15%;margin-top:50px;margin-bottom:20px;display:none;" id="oli2" src="https://static.igem.org/mediawiki/2018/thumb/c/cf/T--Imperial_College--oli2.png/1600px-T--Imperial_College--oli2.png" style="display:none">                 
                     <img id="oli3" src="https://static.igem.org/mediawiki/2018/thumb/b/b8/T--Imperial_College--oli3.png/1600px-T--Imperial_College--oli3.png" style="display:none">                 
+
                     <img style="width:70%;margin-left:15%;margin-top:50px;margin-bottom:20px;display:none;display:none;" id="oli3" src="https://static.igem.org/mediawiki/2018/thumb/b/b8/T--Imperial_College--oli3.png/1600px-T--Imperial_College--oli3.png" style="display:none">                 
                     <img id="oli4" src="https://static.igem.org/mediawiki/2018/thumb/2/29/T--Imperial_College--oli4.png/1600px-T--Imperial_College--oli4.png" style="display:none">                 
+
                     <img style="width:70%;margin-left:15%;margin-top:50px;margin-bottom:20px;display:none;" id="oli4" src="https://static.igem.org/mediawiki/2018/thumb/2/29/T--Imperial_College--oli4.png/1600px-T--Imperial_College--oli4.png" style="display:none">                 
                     <img id="oli5" src="https://static.igem.org/mediawiki/2018/thumb/c/ca/T--Imperial_College--oli5.png/1600px-T--Imperial_College--oli5.png" style="display:none">                 
+
                     <img style="width:70%;margin-left:15%;margin-top:50px;margin-bottom:20px;display:none;" id="oli5" src="https://static.igem.org/mediawiki/2018/thumb/c/ca/T--Imperial_College--oli5.png/1600px-T--Imperial_College--oli5.png" style="display:none">                 
                     <img id="oli6" src="https://static.igem.org/mediawiki/2018/e/e0/T--Imperial_College--oli6.png" style="display:none">                 
+
                     <img style="width:70%;margin-left:15%;margin-top:50px;margin-bottom:20px;display:none;" id="oli6" src="https://static.igem.org/mediawiki/2018/e/e0/T--Imperial_College--oli6.png" style="display:none">                 
                     <img id="oli7" src="https://static.igem.org/mediawiki/2018/9/9f/T--Imperial_College--oli7.png" style="display:none">                 
+
                     <img style="width:70%;margin-left:15%;margin-top:50px;margin-bottom:20px;display:none;" id="oli7" src="https://static.igem.org/mediawiki/2018/9/9f/T--Imperial_College--oli7.png" style="display:none">                 
                     <img id="oli8" src="https://static.igem.org/mediawiki/2018/6/6b/T--Imperial_College--oli8.png" style="display:none">                 
+
                     <img style="width:70%;margin-left:15%;margin-top:50px;margin-bottom:20px;display:none;" id="oli8" src="https://static.igem.org/mediawiki/2018/6/6b/T--Imperial_College--oli8.png" style="display:none">                 
                     <img id="oli9" src="https://static.igem.org/mediawiki/2018/f/fb/T--Imperial_College--oli9.png" style="display:none">                 
+
                     <img style="width:70%;margin-left:15%;margin-top:50px;margin-bottom:20px;display:none;" id="oli9" src="https://static.igem.org/mediawiki/2018/f/fb/T--Imperial_College--oli9.png" style="display:none">                 
                     <img id="oli10" src="https://static.igem.org/mediawiki/2018/4/4a/T--Imperial_College--oli10.png" style="display:none">                 
+
                     <img style="width:70%;margin-left:15%;margin-top:50px;margin-bottom:20px;display:none;" id="oli10" src="https://static.igem.org/mediawiki/2018/4/4a/T--Imperial_College--oli10.png" style="display:none">                 
 
                      
 
                      
 
                 </div>
 
                 </div>
 
                  
 
                  
 
                 <div class="select">
 
                 <div class="select">
                     <img src="https://static.igem.org/mediawiki/2018/e/ed/T--Imperial_College--oli0.png" onclick="exchange(1, 'oli0')"  style="margin-left:3%">
+
                     <img src="https://static.igem.org/mediawiki/2018/e/ed/T--Imperial_College--oli0.png" onclick="exchange(1, 'oli0')"  style="margin-left:10%">
 
                     <img src="https://static.igem.org/mediawiki/2018/thumb/8/85/T--Imperial_College--oli1.png/1600px-T--Imperial_College--oli1.png" onclick="exchange(1, 'oli1')">
 
                     <img src="https://static.igem.org/mediawiki/2018/thumb/8/85/T--Imperial_College--oli1.png/1600px-T--Imperial_College--oli1.png" onclick="exchange(1, 'oli1')">
 
                     <img src="https://static.igem.org/mediawiki/2018/thumb/c/cf/T--Imperial_College--oli2.png/1600px-T--Imperial_College--oli2.png" onclick="exchange(1, 'oli2')">
 
                     <img src="https://static.igem.org/mediawiki/2018/thumb/c/cf/T--Imperial_College--oli2.png/1600px-T--Imperial_College--oli2.png" onclick="exchange(1, 'oli2')">
Line 448: Line 445:
 
                     <img src="https://static.igem.org/mediawiki/2018/9/9f/T--Imperial_College--oli7.png" onclick="exchange(1, 'oli7')">
 
                     <img src="https://static.igem.org/mediawiki/2018/9/9f/T--Imperial_College--oli7.png" onclick="exchange(1, 'oli7')">
 
                     <br class="clr">
 
                     <br class="clr">
                     <img src="https://static.igem.org/mediawiki/2018/6/6b/T--Imperial_College--oli8.png" onclick="exchange(1, 'oli8')" style="margin-left:33%">
+
                     <img src="https://static.igem.org/mediawiki/2018/6/6b/T--Imperial_College--oli8.png" onclick="exchange(1, 'oli8')" style="margin-left:35%">
 
                     <img src="https://static.igem.org/mediawiki/2018/f/fb/T--Imperial_College--oli9.png" onclick="exchange(1, 'oli9')">
 
                     <img src="https://static.igem.org/mediawiki/2018/f/fb/T--Imperial_College--oli9.png" onclick="exchange(1, 'oli9')">
 
                     <img src="https://static.igem.org/mediawiki/2018/4/4a/T--Imperial_College--oli10.png" onclick="exchange(1, 'oli10')">
 
                     <img src="https://static.igem.org/mediawiki/2018/4/4a/T--Imperial_College--oli10.png" onclick="exchange(1, 'oli10')">
Line 478: Line 475:
 
             </div>  
 
             </div>  
 
             <div class="show">
 
             <div class="show">
                 <video height="70%" width="auto" controls> <source src="https://static.igem.org/mediawiki/2018/2/26/T--Imperial_College--ronVideo.mp4" type="video/mp4"></video>                 
+
                 <video height="40%" width="auto" controls> <source src="https://static.igem.org/mediawiki/2018/2/26/T--Imperial_College--ronVideo.mp4" type="video/mp4"></video>                 
 
             </div>
 
             </div>
 
              
 
              
Line 518: Line 515:
 
             <div class="show">
 
             <div class="show">
 
                 <div class="large">
 
                 <div class="large">
                     <img id="tia0" src="https://static.igem.org/mediawiki/2018/4/46/T--Imperial_College--tia0.png" style="display:block">
+
                     <img style="width:70%;margin-left:15%;margin-top:50px;margin-bottom:20px;" id="tia0" src="https://static.igem.org/mediawiki/2018/4/46/T--Imperial_College--tia0.png" style="display:block">
                     <img id="tia1" src="https://static.igem.org/mediawiki/2018/6/68/T--Imperial_College--tia1.jpg" style="display:none">
+
                     <img style="width:70%;margin-left:15%;margin-top:50px;margin-bottom:20px;" id="tia1" src="https://static.igem.org/mediawiki/2018/6/68/T--Imperial_College--tia1.jpg" style="display:none">
                     <img id="tia2" src="https://static.igem.org/mediawiki/2018/a/a7/T--Imperial_College--tia2.png" style="display:none">                 
+
                     <img style="width:70%;margin-left:15%;margin-top:50px;margin-bottom:20px;" id="tia2" src="https://static.igem.org/mediawiki/2018/a/a7/T--Imperial_College--tia2.png" style="display:none">                 
                     <img id="tia3" src="https://static.igem.org/mediawiki/2018/a/af/T--Imperial_College--tia3.png" style="display:none">                 
+
                     <img style="width:70%;margin-left:15%;margin-top:50px;margin-bottom:20px;" id="tia3" src="https://static.igem.org/mediawiki/2018/a/af/T--Imperial_College--tia3.png" style="display:none">                 
                     <img id="tia4" src="https://static.igem.org/mediawiki/2018/d/d2/T--Imperial_College--tia4.png" style="display:none">                 
+
                     <img style="width:70%;margin-left:15%;margin-top:50px;margin-bottom:20px;" id="tia4" src="https://static.igem.org/mediawiki/2018/d/d2/T--Imperial_College--tia4.png" style="display:none">                 
                     <img id="tia5" src="https://static.igem.org/mediawiki/2018/2/2a/T--Imperial_College--tia5.png" style="display:none">                 
+
                     <img style="width:70%;margin-left:15%;margin-top:50px;margin-bottom:20px;" id="tia5" src="https://static.igem.org/mediawiki/2018/2/2a/T--Imperial_College--tia5.png" style="display:none">                 
                     <img id="tia6" src="https://static.igem.org/mediawiki/2018/1/1d/T--Imperial_College--tia6.png" style="display:none">                 
+
                     <img style="width:70%;margin-left:15%;margin-top:50px;margin-bottom:20px;" id="tia6" src="https://static.igem.org/mediawiki/2018/1/1d/T--Imperial_College--tia6.png" style="display:none">                 
 
                  
 
                  
 
                 </div>
 
                 </div>
 
                  
 
                  
 
                 <div class="select">
 
                 <div class="select">
                   <img src="https://static.igem.org/mediawiki/2018/4/46/T--Imperial_College--tia0.png" onclick="exchange(3, 'tia0')" style="margin-left:10%">
+
                   <img src="https://static.igem.org/mediawiki/2018/4/46/T--Imperial_College--tia0.png" onclick="exchange(3, 'tia0')" style="margin-left:16%">
 
                   <img src="https://static.igem.org/mediawiki/2018/6/68/T--Imperial_College--tia1.jpg" onclick="exchange(3, 'tia1')">
 
                   <img src="https://static.igem.org/mediawiki/2018/6/68/T--Imperial_College--tia1.jpg" onclick="exchange(3, 'tia1')">
 
                   <img src="https://static.igem.org/mediawiki/2018/a/a7/T--Imperial_College--tia2.png" onclick="exchange(3, 'tia2')">
 
                   <img src="https://static.igem.org/mediawiki/2018/a/a7/T--Imperial_College--tia2.png" onclick="exchange(3, 'tia2')">

Latest revision as of 03:59, 18 October 2018


Art Gallery

PixCell Art Collection

Science communication is not just about conveying information from one person to another, but it should also be about conveying emotion and inspiration to its audience. Sometimes words are not enough to bring these emotions in others, and so we tried to approach science communication through the alternate channel of art, where word are not necessary to invoke emotion.

We reached out to art students at the University of Arts London (UAL) Camberwell, with whom we worked closely on helping the create art pieces that represent our project, PixCell, in the context of the field of synthetic biology. Throughout the summer, we contacted them regularly, answering any questions they may have, about our project and the field of synthetic biology. From the artists, we asked that their work represent two key themes.

Patterning In Nature

We wanted the art pieces to highlight the importance of patterning in nature and biology, especially as our project, PixCell, is about utilising electrogenetic control for creating biopatterns, a necessary condition in evolution for the emergence of complex biological life. Through the pieces, we want the audience to appreciate the presence and importance of patterns in nature, something that we are used to seeing every day, and have overtime become too accustomed to.

Patterning In Synthetic Biology

We wished the pieces to present the significance of biopatterning to the field of synthetic biology in trying to better mimic and understand natural systems. We also understand that the field of synthetic biology has its controversies, where the reductionism of nature to controllable parts that we can manipulate and experiment with at will can be revolutionary and awe-inspiring, but also alarming and unnerving. We wished for the artists to be fair in their work and encouraged them to not shy away from the controversial aspects of synthetic biology and to show a balanced image of synthetic biology.

The Results

In the end, we have four amazing pieces of art that beautifully convey the themes of biopatterning and synthetic biology. These pieces are presented here in our digital art gallery for everyone to see online, but we also took some of the pieces to New Scientist Live, where many visitors were intrigued and impressed by the work, but furthermore, it helped many of them clearly see the significance of biopatterning and why we are pursuing it through PixCell. This confirmed for us that the art collaboration was a success and has achieved its goal.

As well as New Scientist, we will be bringing the art pieces to the Giant Jamboree where we want to share them with the whole the iGEM community and inspire others to also pursue art as a medium of science communication.

Scroll down to see the results of our art collaboration, and to find out more about our artists and their pieces.

Our Artists

Francesca Hussey

Emergence
Examining the notion of ‘Natural’ in the context of synthetic biology and considering the effect of humanity’s awareness of the self – both as an individual and as part of a complex system – on the future of our species.

Olivia Wing Cheung

A Kaleidoscopic View
This is a giant kaleidoscope where you can create your own patterns with the coloured agar plates, with which one can discover and explore many intricate and intriguing patterns, as we do in synthetic biology.

Ronni Winkler

Change
The scientific approach of today has moved from being a one-dimensional-linear look, into a three-dimensional translated-looking of a phenomenon. This piece is a response to this rapid change in perspective of the current scientific field.

taïna Griscom

Sail On Skin
Patterns exist everywhere in nature, but what can we create if we merge them together? Taïna's work tries to give us a glimpse of this, by fusing together patterns that we see everyday but may not necessarily observe in detail.


Francesca Hussey

Working in a range of mediums—including Large scale painting, sculpture, and performance — Francesca Hussey’s work offers a holistic response to the life sciences, often denoting biomorphic structures through essential lines and intensifying waves of colour. Her most recent work, a performance piece presented at the hARTslane gallery in the collaborative exhibition ‘Is anybody else planning to come?’, explored the role of enacted ritual in patients’ phenomenal experience of medical care. She is currently studying a BA in Fine Art: Sculpture at the University of Arts London, based in Camberwell.

Emergence

About the piece

Examining the notion of ‘Natural’ in the context of synthetic biology and considering the effect of humanity’s awareness of the self – both as an individual and as part of a complex system – on the future of our species.Is the ability to observe our own progression and direct it, a manipulation of evolution or a further continuation of the incalculable possibilities of the process.

Olivia Wing Cheung

Born and raised in Hong Kong, Olivia Cheung is an illustration student from Camberwell College of Arts (University of the Arts London) developing her path in art and design. Her works stretch across the fields of character design, storybook illustrations and 3D installations. She tends to layer her visuals with the use of metaphors, the game of illusions and everyday objects or situations that link her audience with the art piece. She also enjoys eavesdropping in conversations on public transport and running imaginary adventures with strangers in her head, a great source of inspirations and stories.

A Kaleidoscopic View


About the piece

This is a giant kaleidoscope where you can create your own patterns with the coloured agar plates. It is a representation of how synthetic biology explores and redefines the patterns of cells and the infinite possibilities of its development. By rotating the plates or the kaleidoscope, the moving visuals created inside can be beautiful or disturbing. This is the artist’s response to the both exciting and alarming potential of this technology.

Ronni Winkler

Ronni Winkler was born in 1995 in Tel Aviv, Israel. She works in London, where she is also completing a degree at Goldsmith University.

Change

About the piece

The scientific approach of today has moved from being a one-dimensional-linear look, into a three-dimensional translated-looking of a phenomenon. The centre of today’s studies is communication and harmony within complex biological systems. Using old drawing techniques and manipulating the figures with modern software, an attempt was made to investigate the extremely rapid implementation of technology into the scientific work. I drew pencil drawings inspired by old anatomy text books and combined them with computer generated visuals that were originally microscopic images of fat tissue.

Taina Griscom

Taïna Griscom was born in 1995 in Geneva where she grew up. She works in London, where she is completing a BA in Fine Art and History of Art at Goldsmiths University. Her work explores notions of identity, movement and displacement. Movement as agitation, movement as a transformative force generating new territories.

Sail On Skin

About the piece

For this drawing I used various imageries found in magazines coming from nature, animals, micro-biology, fabrics, bones. I cut and assembled parts of the images to create a new organism, a hybridation made of elements that wouldn’t co-exist as part of the same body normally. I merged them together by the drawing process trying to draw patterns as small as possible with Indian ink and a nib. The relatively small scale of the patterns help to connect each part and give the impression of a harmonious creature half animal, half vegetal.