Team:KIT-Kyoto/Project

From 2014.igem.org

(Difference between revisions)
Line 49: Line 49:
<h2 id="gallery">Gallery</h2>
<h2 id="gallery">Gallery</h2>
<div class="scroll"></div>
<div class="scroll"></div>
 +
<div class="clear"><hr /></div>
 +
<div id="gbox">
 +
<div class="gallery">
 +
<img src="">
 +
</div>
 +
<div class="gallery">
 +
<img src="">
 +
</div>
 +
</div>
 +
<div class="clear"><hr /></div>
 +
<div id="gbox">
 +
<div class="gallery">
 +
<img src="">
 +
</div>
 +
<div class="gallery">
 +
<img src="">
 +
</div>
 +
</div>
<div class="clear"><hr /></div>
<div class="clear"><hr /></div>
<p class="sentence">
<p class="sentence">
-
 
<br>
<br>
<br>a
<br>a
Line 59: Line 76:
<br>a
<br>a
<br>
<br>
-
<br><br>
+
</p>
-
<br>
+
 
-
<br>a
+
<div id="gbox">
-
<br>a
+
<div class="gallery">
-
<br>a
+
<img src="">
-
<br>a
+
</div>
-
<br>a
+
<div class="gallery">
-
<br>
+
<img src="">
-
<br><br>
+
</div>
-
<br>
+
</div>
-
<br>a
+
<div class="clear"><hr /></div>  
-
<br>a
+
<div id="gbox">
-
<br>a
+
<div class="gallery">
-
<br>a
+
<img src="">
-
<br>a
+
</div>
-
<br>
+
<div class="gallery">
-
<br><br>
+
<img src="">
-
<br>
+
</div>
-
<br>a
+
</div>
-
<br>a
+
<h3></h3>
-
<br>a
+
<p class="sentence">
-
<br>a
+
</p>
-
<br>a
+
<div class="clear"><hr /></div>
-
<br>
+
<div id="gbox">
-
<br>
+
<div class="gallery">
-
<br>
+
<img src="">
-
<br></p>
+
</div>
 +
<div class="gallery">
 +
<img src="">
 +
</div>
 +
</div>
 +
<div class="clear"><hr /></div>
 +
<h3></h3>
 +
<p class="sentence">
 +
</p>
 +
<div id="qbox">
 +
<ul class="question">
 +
    <li><img src="/wiki/images/a/a2/Kit_Q1_c.jpg"></li>
 +
    <li><img src="/wiki/images/0/06/Kit_Q1_1_c.jpg"></li>
 +
    <li><img src="/wiki/images/a/a4/Kit_Q1_2_c.jpg"></li>
 +
    <li><img src="/wiki/images/5/5e/Kit_Q1_3_c.jpg"></li>
 +
    <li><img src="/wiki/images/8/8c/Kit_Q1_4_c.jpg"></li>
 +
    <li><img src="/wiki/images/4/42/Kit_Q1_result_c.jpg"></li>
 +
</ul>
 +
<div class="q">
 +
<h3>Q1. Do you like iGEM?</h3>
 +
<div id="stop1" class="stop"><a href="javascript:void(0);"><span>stop</span></a></div>
 +
</div>
 +
</div>
<h2 id="shortfilm">Short Film</h2>
<h2 id="shortfilm">Short Film</h2>
<div class="scroll"></div>
<div class="scroll"></div>
Line 143: Line 182:
height: 100%;
height: 100%;
}
}
-
.qbox,.qbox2{
+
.qbox,.gbox{
position:relative;
position:relative;
-
 
+
border:1px solid green;
 +
}
 +
.gbpx{
 +
  overflow: hidden;
}
}
-
.question,.question2{  
+
.question{  
   list-style: none;
   list-style: none;
   width:100%;
   width:100%;
   overflow: hidden;
   overflow: hidden;
-
  position: relative;
 
   width:620px;
   width:620px;
   height:414px;
   height:414px;
}
}
-
.question{
+
.question,.gallery{
 +
border:1px solid red;
float:left;
float:left;
 +
  position: relative;
}
}
-
.question2{
+
 
-
float:right;
+
.gallery{
 +
border:1px solid skyblue;
 +
margin:15px 5px;
}
}
-
.q,.q2{
+
 
 +
.q{
position:relative;
position:relative;
float:left;
float:left;
Line 170: Line 216:
}
}
-
.q h3,.q2 h3{
+
.q h3{
margin-top:180px;
margin-top:180px;
}
}
-
.question,.question2{
+
.question{
margin:10px 0px;
margin:10px 0px;
}
}
Line 183: Line 229:
}
}
-
#stop1,#stop2{
+
#stop1{
position:absolute;
position:absolute;
bottom:0;
bottom:0;
Line 190: Line 236:
left:0;
left:0;
}
}
-
#stop2{
+
 
-
right:0;
+
#stop1 a{
-
}
+
-
#stop1 a,#stop2 a{
+
display:block;
display:block;
background-image:url(/wiki/images/9/90/Kit_Pause.png);
background-image:url(/wiki/images/9/90/Kit_Pause.png);
Line 201: Line 245:
}
}
-
#stop1 span,#stop2 span{
+
#stop1 span{
visibility:hidden;
visibility:hidden;
}
}
@media screen and (max-width: 568px) {
@media screen and (max-width: 568px) {
-
#stop1,#stop2{
+
#stop1{
left:auto;
left:auto;
right:0px;
right:0px;
bottom:0px;
bottom:0px;
}
}
-
.q h3,.q2 h3{
+
.q h3{
margin-top:10px;
margin-top:10px;
}
}
-
.question,.question2,.q,.q2{
+
.question,.q{
float:none;
float:none;
}
}
Line 224: Line 268:
var pdfix = function(){
var pdfix = function(){
var pd_w = $(".main-contents").width();
var pd_w = $(".main-contents").width();
-
$(".qbox,.qbox2").css({width:pd_w});
+
$(".qbox").css({width:pd_w});
var pd_w1;
var pd_w1;
var pd_s;
var pd_s;
Line 232: Line 276:
pd_s = pd_w/3*2;
pd_s = pd_w/3*2;
pd_h = pd_s*2/3;
pd_h = pd_s*2/3;
-
$(".question img,.question2 img,.question,.question2").css({width:pd_s});
+
$(".question img,.question").css({width:pd_s});
-
$(".q,.q2").css({width:pd_w1});
+
$(".q").css({width:pd_w1});
-
$(".question img,.question2 img,.question,.question2,.qbox,.qbox2,.q,.q2").css({height:pd_h});
+
$(".question img,.question,.qbox,.q").css({height:pd_h});
 +
}
 +
var gfix = function(){
 +
var ga_w;
 +
var g_w = $(".main-contents").width();
 +
$(".gbox").css({width:g_w});
 +
g_w -= 22;
 +
ga_w = g_w/2;
 +
$(".gallery img,.gallery").css({width:ga_w});
}
}
 +
var m_pdfix =function(){
var m_pdfix =function(){
var mpd_w = $(".main-contents").width();
var mpd_w = $(".main-contents").width();
-
$(".qbox,.qbox2,.question img,.question2 img,.question,.question2").css({width:mpd_w});
+
$(".qbox,.question img,.question,.gbox,.gallery img,.gallery").css({width:mpd_w});
var mpd_h;
var mpd_h;
mpd_h = mpd_w*2/3;
mpd_h = mpd_w*2/3;
-
$(".question,.question2").css({height:mpd_h});
+
$(".question").css({height:mpd_h});
}
}
$(function(){
$(function(){
Line 255: Line 308:
$(function(){
$(function(){
pdfix();
pdfix();
 +
gfix();
$(window).resize(pdfix);
$(window).resize(pdfix);
 +
$(window).resize(gfix);
});
});
}
}
Line 276: Line 331:
function(){
function(){
$("#stop1 a").stop().animate({opacity:"1"},400);
$("#stop1 a").stop().animate({opacity:"1"},400);
-
}
 
-
);
 
-
$("#stop2 a").click(function(){
 
-
var stopfunc = $("#stop2").hasClass("stop");
 
-
if(stopfunc){
 
-
clearInterval(loop2);
 
-
$("#stop2").removeClass('stop');
 
-
$("#stop2 a").css("background-image","url(/wiki/images/0/0c/Kit_Play.png)");
 
-
}else {
 
-
loop2 = setInterval(slide2,5000);
 
-
$("#stop2").addClass('stop');
 
-
$("#stop2 a").css("background-image","url(/wiki/images/9/90/Kit_Pause.png)");
 
-
}
 
-
});
 
-
$("#stop2 a").hover(function(){
 
-
$("#stop2 a").stop().animate({opacity:"0.7"},400);
 
-
},
 
-
function(){
 
-
$("#stop2 a").stop().animate({opacity:"1"},400);
 
}
}
);
);
Line 313: Line 349:
     });
     });
     }
     }
-
var loop2 = setInterval(slide2,5000);
 
-
    function slide2() {
 
-
    var clone = $(".question2 li:first").clone(true);
 
-
    var qw = $(".question2").height();
 
-
    $(".question2 li:nth-child(2)").css({opacity:"0"});
 
-
    $(".question2 li:first").animate({
 
-
    marginTop : qw,opacity:"0"
 
-
    }, {
 
-
    duration : 800,
 
-
    complete : function() { 
 
-
    $(".question2 li:nth-child(2)").animate({opacity:"1"},1200);
 
-
        $(".question2 li:first").remove();
 
-
        clone.clone(true).insertAfter($(".question2 li:last"));
 
-
    }
 
-
    });
 
-
    }
 
-
 
});
});
</script>
</script>

Revision as of 14:40, 17 October 2014

project

Project

Overview

As a part of Policy & Practices project, we conducted a survey on people’s attitudes toward genetic engineering. The results showed that the general public does not feel familiar not only with genetic engineering but also with science. So we designed our project in order to change this for the better.

What can we do to make science more appealing to everyone? One of the solutions for us was to harmonize science with arts. You may say that science is incompatible with arts. But KIT actually constitutes of science and arts majors embodying a fusion of them, as its philosophy posits “Wisdom, Beauty and Technology”. Our project fused science and arts in a KIT way. KIT has the Drosophila Genetic Resource Center (DGRC), which collects stocks of Drosophila melanogaster, an important model organism in life science research, from laboratories around the world. There are only two other such centers in the world. Inspired by this, we let Drosophila in our project with the help of E. coli and S. cerevisiae. Please enjoy living BioArt to feel science closer.



a
a
a
a
a

Q1. Do you like iGEM?

Short Film

KIT-Kyoto made an introductory video "How to make basic BioArt." We hope that more people can find genetic engineering appealing. With a little bit of labware, you can make BioArt! → ShortFilm

Top

Retrieved from "http://2014.igem.org/Team:KIT-Kyoto/Project"