Team:AUC TURKEY

From 2014hs.igem.org

(Difference between revisions)
(Undo revision 28239 by Alihancelikcan (talk))
 
(71 intermediate revisions not shown)
Line 1: Line 1:
 +
{{AUC_TURKEY}}
 +
<html>
 +
<head>
 +
    <meta name="viewport" content="width=device-width">
 +
<meta charset="UTF-8" />
 +
        <meta name="description" content="Animated Text and Icon Menu with jQuery" />
 +
        <meta name="keywords" content="jquery, menu, navigation, sliding, animation, icon" />
 +
<meta name="author" content="Codrops" />
 +
        <link rel="stylesheet" type="text/css" href="https://2014hs.igem.org/Team:AUC_TURKEY/style.css?action=raw&ctype=text/css" />
 +
<link rel="stylesheet" type="text/css" href="https://2014hs.igem.org/Team:AUC_TURKEY/stimenu.css?action=raw&ctype=text/css" />
 +
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow&v1' rel='stylesheet' type='text/css' />
 +
<link href='http://fonts.googleapis.com/css?family=Wire+One&v1' rel='stylesheet' type='text/css' />
 +
<script" type="text/javascript">
 +
</script>
 +
<style type="text/css">
-
{|align="justify"
+
.divider {
-
|You can write a background of your team here.  Give us a background of your team, the members, etc.  Or tell us more about something of your choosing.
+
  height: 1px;
-
|[[Image:AUC_TURKEY_logo.png|200px|right|frame]]
+
  background: #000;
-
|-
+
  background: -webkit-linear-gradient(left, rgb(255,255,255) 0%, rgb(50,50,50) 50%, rgb(255,255,255) 100%);
-
|
+
}
-
''Tell us more about your project. Give us background.  Use this as the abstract of your project. Be descriptive but concise (1-2 paragraphs)''
+
.divider.light {
-
|[[Image:AUC_TURKEY_team.png|right|frame|Your team picture]]
+
  background: #fff;
-
|-
+
  background: -webkit-linear-gradient(left, rgb(90,90,90) 0%, rgb(255,255,255) 50%, rgb(90,90,90) 100%);
-
|
+
}
-
|align="center"|[[Team:AUC_TURKEY | Team AUC_TURKEY]]
+
-
|}
+
-
<!--- Team Information Link --->
+
.divider.light:before {
 +
  position:relative;
 +
  float:left;
 +
  background: linear-gradient(to right, rgba(100, 100, 100, 0), rgba(100, 100, 100, 1) 50%);
 +
  margin-top:2px;
 +
  width:50%;
 +
  height:1px;
 +
  content:"";
 +
}
-
{| style="color:#1b2c8a;background-color:#0c6;" cellpadding="3" cellspacing="1" border="1" bordercolor="#fff" width="62%" align="center"
+
.divider.light:after {
-
!align="center"|[https://igem.org/Team.cgi?year=2013&division=high_school&team_name=AUC_TURKEY Official Team Profile]
+
  position:relative;
-
|}
+
  float:right;
 +
  background: linear-gradient(to left, rgba(100, 100, 100, 0), rgba(100, 100, 100, 1) 50%);
 +
  margin-top:2px;
 +
  width:50%;
 +
  height:1px;
 +
  content:""; 
 +
}
-
===Team===
+
.divider:before {
-
Tell us about your team, your school!
+
  position:relative;
 +
  float:left;
 +
  background: linear-gradient(to right, rgba(200, 200, 200, 0), rgba(200, 200, 200, 1) 50%);
 +
  margin-top:2px;
 +
  width:50%;
 +
  height:1px;
 +
  content:"";
 +
}
 +
.divider:after {
 +
  position:relative;
 +
  float:right;
 +
  background: linear-gradient(to left, rgba(100, 200, 200, 0), rgba(200, 200, 200, 1) 50%);
 +
  margin-top:2px;
 +
  width:50%;
 +
  height:1px;
 +
  content:""; 
 +
}
-
===Project Description===
+
</style>
-
Our project this year will be the continuation of our last year's project. In 'BactoCooler 2.0' we shall make major improvements to the project itself to allow it to reach the state in which it can be effectively applied in real life as a product.
+
<style type="text/css">
-
After the analysis of the functions of the project last year, we discovered three main problems. The problems with their solutions are as follows:
+
#animatedmenu
-
1)There are safety issues with BactoCooler being released into the environment and specifically into the air.
+
{
-
Through installing Kill-Switch mechanisms designed to activate on air contact, we can remove concerns of contamination.
+
  font-size:12px;
-
2)BactoCooler synthesizes the urease enzyme which catalyzes the breakdown of the urea in the environment eventually leading to the accumulation of ammonia. Ammonia, being a basic compound, raises the pH of the environment after accumulating and causes alkalization. The highly basic environment results in the death of BactoCooler.
+
  margin-left:auto;
-
To counteract the issue, a pH sensitive system which will detect the alkaline conditions will allow the secretion of an acidic buffer protein will be integrated in 'BactoCooler 2.0'.
+
  margin-right:auto;
-
3)The time required for over-night incubation is much too long making immediate effect impossible to reach.  Aside from the long term effect, due to the nature of our project,  we the switch system regulated by the RNA Thermometer cannot be actively used if a short term response is not achieved.
+
}
-
We have conducted research to find possible solutions on the matter and found some possible solutions that suit our project from the work of previous iGEM projects. Different protein expression experiments such as the Western-Blot, SDS-Page and ELISA can serve our purpose.
+
</style>
-
Alongside the application of the possible solutions to 'BactoCooler 2.0', we are planning to do modelling to inspect the real-life application of our project.
+
<style type="text/css">
-
As AUC_TURKEY we would like to state our wishes of an enjoyable and enthusiastic year of iGEM to every team and iGEM HQ.
+
-
===Notebook===
+
label, a {
-
Show us how you spent your days.
+
  cursor: pointer;
 +
  text-decoration: none;
 +
}
 +
article
 +
{
 +
  width:87.8%;
 +
}
-
===Results/Conclusions===
+
label, #active, img {
-
What did you achieve over the course of your semester?
+
  -moz-user-select: none;
 +
  -webkit-user-select: none;
 +
}
 +
#slider {
 +
margin: 0 auto;
 +
 
 +
}
-
===Safety===
+
/* NEW EXPERIMENT */
-
What safety precautions did your team take? Did you take a safety training course? Were you supervised at all times in the lab?
+
/* Slider Setup */
 +
input {
 +
  display: none;
 +
}
 +
#slide1:checked ~ #slides .inner {
 +
  margin-left: 0;
 +
}
-
===Attributions===
+
#slide2:checked ~ #slides .inner {
-
Who worked on what?
+
  margin-left: -100%;
 +
}
 +
#slide3:checked ~ #slides .inner {
 +
  margin-left: -200%;
 +
}
-
===Human Practices===
+
#slide4:checked ~ #slides .inner {
-
What impact does/will your project have on the public? 
+
  margin-left: -300%;
 +
}
 +
#slide5:checked ~ #slides .inner {
 +
  margin-left: -400%;
 +
}
-
===Fun!===
+
#overflow {
-
What was your favorite team snack?? Have a picture of your team mascot?
+
  width: 100%;
 +
  overflow: hidden;
 +
}
 +
article img {
 +
  width: 100%;
 +
}
 +
#slides .inner {
 +
  width: 500%;
 +
}
-
<forum_subtle />
+
#slides article {
 +
  width: 20%;
 +
  float: left;
 +
}
 +
 
 +
/* Slider Styling */
 +
/* Control Setup */
 +
#controls {
 +
  margin: -25% 0 0 0;
 +
  width: 100%;
 +
  height: 50px;
 +
}
 +
 
 +
#controls label {
 +
  width: 50px;
 +
  height: 50px;
 +
  opacity: 0.3;
 +
}
 +
#controls label:hover {
 +
  opacity: 0.8;
 +
}
 +
 
 +
#slide1:checked ~ #controls label:nth-child(2),
 +
#slide2:checked ~ #controls label:nth-child(3),
 +
#slide3:checked ~ #controls label:nth-child(4),
 +
#slide4:checked ~ #controls label:nth-child(5),
 +
#slide5:checked ~ #controls label:nth-child(1) {
 +
  background: url("http://csscience.com/responsiveslidercss3/next.png") no-repeat;
 +
  float: right;
 +
  margin: 0 -70px 0 0;
 +
  display: block;
 +
}
 +
 
 +
#slide1:checked ~ #controls label:nth-child(5),
 +
#slide2:checked ~ #controls label:nth-child(1),
 +
#slide3:checked ~ #controls label:nth-child(2),
 +
#slide4:checked ~ #controls label:nth-child(3),
 +
#slide5:checked ~ #controls label:nth-child(4) {
 +
  background: url("http://csscience.com/responsiveslidercss3/prev.png") no-repeat;
 +
  float: left;
 +
  margin: 0 0 0 -70px;
 +
  display: block;
 +
}
 +
 
 +
/* Info Box */
 +
.info {
 +
  line-height: 20px;
 +
  margin: 0 0 -150%;
 +
  position: absolute;
 +
  padding: 30px 30px;
 +
  opacity: 0;
 +
  text-align: left;
 +
}
 +
 
 +
.info h3 {
 +
  margin: 0 0 5px;
 +
  font-size: 22px;
 +
  font-style: normal;
 +
}
 +
 
 +
/* Animation */
 +
#slides .inner {
 +
  -webkit-transform: translateZ(0);
 +
  -webkit-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
 +
  -moz-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
 +
  -ms-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
 +
  -o-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
 +
  transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
 +
  /* easeInOutQuart */
 +
  -webkit-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
 +
  -moz-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
 +
  -ms-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
 +
  -o-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
 +
  transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
 +
  /* easeInOutQuart */
 +
}
 +
 
 +
#slider {
 +
  -webkit-transform: translateZ(0);
 +
  -webkit-transition: all 0.5s ease-out;
 +
  -moz-transition: all 0.5s ease-out;
 +
  -o-transition: all 0.5s ease-out;
 +
  transition: all 0.5s ease-out;
 +
}
 +
 
 +
#controls label {
 +
  -webkit-transform: translateZ(0);
 +
  -webkit-transition: opacity 0.2s ease-out;
 +
  -moz-transition: opacity 0.2s ease-out;
 +
  -o-transition: opacity 0.2s ease-out;
 +
  transition: opacity 0.2s ease-out;
 +
}
 +
 
 +
#slide1:checked ~ #slides article:nth-child(1) .info,
 +
#slide2:checked ~ #slides article:nth-child(2) .info,
 +
#slide3:checked ~ #slides article:nth-child(3) .info,
 +
#slide4:checked ~ #slides article:nth-child(4) .info,
 +
#slide5:checked ~ #slides article:nth-child(5) .info {
 +
  opacity: 1;
 +
  -webkit-transition: all 1s ease-out 0.6s;
 +
  -moz-transition: all 1s ease-out 0.6s;
 +
  -o-transition: all 1s ease-out 0.6s;
 +
  transition: all 1s ease-out 0.6s;
 +
}
 +
 
 +
.info, #controls, #slides, #active, #active label, .info h3 {
 +
  -webkit-transform: translateZ(0);
 +
  -webkit-transition: all 0.5s ease-out;
 +
  -moz-transition: all 0.5s ease-out;
 +
  -o-transition: all 0.5s ease-out;
 +
  transition: all 0.5s ease-out;
 +
}
 +
 
 +
/* Responsive Styling */
 +
@media only screen and (max-width: 850px) and (min-width: 450px) {
 +
  #slider #controls {
 +
    margin: -25% 0 0 15%;
 +
    width: 70%;
 +
    height: 50px;
 +
  }
 +
 
 +
  #slider #controls label {
 +
    -moz-transform: scale(0.8);
 +
    -webkit-transform: scale(0.8);
 +
    -o-transform: scale(0.8);
 +
    -ms-transform: scale(0.8);
 +
    transform: scale(0.8);
 +
  }
 +
}
 +
@media only screen and (max-width: 450px) {
 +
  #slider #controls {
 +
    margin: -28% 0 0 24%;
 +
    width: 50%;
 +
    height: 50px;
 +
  }
 +
 
 +
  #slider #slides {
 +
    padding: 1% 0;
 +
    -webkit-border-radius: 0px;
 +
    -moz-border-radius: 0px;
 +
    border-radius: 0px;
 +
  }
 +
 
 +
  #slider #controls label {
 +
    -moz-transform: scale(0.6);
 +
    -webkit-transform: scale(0.6);
 +
    -o-transform: scale(0.6);
 +
    -ms-transform: scale(0.6);
 +
    transform: scale(0.6);
 +
  }
 +
}
 +
 
 +
</style>
 +
 
 +
 
 +
 
 +
 
 +
</head>
 +
<body>
 +
<article id="slider">
 +
     
 +
      <!-- Slider Setup -->
 +
     
 +
      <input checked type="radio" name="slider" id="slide1"/>
 +
      <input type="radio" name="slider" id="slide2" />
 +
      <input type="radio" name="slider" id="slide3" />
 +
      <input type="radio" name="slider" id="slide4" />
 +
      <input type="radio" name="slider" id="slide5" />
 +
     
 +
      <!-- The Slider -->
 +
     
 +
      <div id="slides">
 +
       
 +
        <div id="overflow">
 +
         
 +
          <div class="inner">
 +
           
 +
            <article>
 +
              <img src="https://static.igem.org/mediawiki/2014hs/7/78/900400.png">
 +
            </article>
 +
           
 +
            <article>
 +
              <img src="https://static.igem.org/mediawiki/2014hs/b/b6/900x400-2.jpg">
 +
            </article>
 +
           
 +
            <article>
 +
              <img src="https://static.igem.org/mediawiki/2014hs/0/0e/HumanPractices.png">
 +
            </article>
 +
           
 +
            <article>
 +
              <img src="https://static.igem.org/mediawiki/2014hs/3/3c/Teamselfie.png">
 +
            </article>
 +
           
 +
            <article>
 +
              <img src="https://static.igem.org/mediawiki/2014hs/6/6f/Resultauc.png">
 +
            </article>
 +
           
 +
          </div> <!-- .inner -->
 +
         
 +
        </div> <!-- #overflow -->
 +
       
 +
      </div> <!-- #slides -->
 +
     
 +
      <!-- Controls and Active Slide Display -->
 +
     
 +
      <div id="controls">
 +
       
 +
        <label for="slide1"></label>
 +
        <label for="slide2"></label>
 +
        <label for="slide3"></label>
 +
        <label for="slide4"></label>
 +
        <label for="slide5"></label>
 +
       
 +
      </div> <!-- #controls -->
 +
     
 +
      <div id="active">
 +
       
 +
        <label for="slide1"></label>
 +
        <label for="slide2"></label>
 +
        <label for="slide3"></label>
 +
        <label for="slide4"></label>
 +
        <label for="slide5"></label>
 +
       
 +
      </div> <!-- #active -->
 +
     
 +
    </article> <!-- #slider -->
 +
    <br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<div class="light-background">
 +
  <div class="width80">
 +
    <div class="divider" />
 +
  </div>
 +
</div>
 +
 
 +
 
 +
<div id="animatedmenu">
 +
<div class="container">
 +
<ul id="sti-menu" class="sti-menu">
 +
<li data-hovercolor="#37c5e9">
 +
<a href="https://2014hs.igem.org/Team:AUC_TURKEY/Project/Introduction">
 +
<h2 data-type="mText" class="sti-item">Introduction</h2>
 +
<h3 data-type="sText" class="sti-item">Story of a color wizard</h3>
 +
<span data-type="icon" class="sti-icon sti-icon-care sti-item"></span>
 +
</a>
 +
</li>
 +
<li data-hovercolor="#ff395e">
 +
<a href="https://2014hs.igem.org/Team:AUC_TURKEY/Notebook//Timeline">
 +
<h2 data-type="mText" class="sti-item">Notebook</h2>
 +
<h3 data-type="sText" class="sti-item">The day by day process</h3>
 +
<span data-type="icon" class="sti-icon sti-icon-alternative sti-item"></span>
 +
</a>
 +
</li>
 +
<li data-hovercolor="#57e676">
 +
<a href="https://2014hs.igem.org/Team:AUC_TURKEY/Team/Participants">
 +
<h2 data-type="mText" class="sti-item">Participants</h2>
 +
<h3 data-type="sText" class="sti-item">Hardworking guys</h3>
 +
<span data-type="icon" class="sti-icon sti-icon-info sti-item"></span>
 +
</a>
 +
</li>
 +
<li data-hovercolor="#d869b2">
 +
<a href="https://2014hs.igem.org/Team:AUC_TURKEY/Results/Functional_Essay">
 +
<h2 data-type="mText" class="sti-item">Assay</h2>
 +
<h3 data-type="sText" class="sti-item">Are those proteins working?</h3>
 +
<span data-type="icon" class="sti-icon sti-icon-family sti-item"></span>
 +
</a>
 +
</li>
 +
<li data-hovercolor="#ffdd3f">
 +
<a href="https://2014hs.igem.org/Team:AUC_TURKEY/Human_Practices/Future_Plan">
 +
<h2 data-type="mText" class="sti-item">Future Plans</h2>
 +
<h3 data-type="sText" class="sti-item">What we are looking forward to</h3>
 +
<span data-type="icon" class="sti-icon sti-icon-technology sti-item"></span>
 +
</a>
 +
</li>
 +
</ul>
 +
</div>
 +
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
 +
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
 +
<script type="text/javascript" src="https://2014hs.igem.org/Team:AUC_TURKEY/jquery.easing.1.3.js?action=raw&ctype=text/javascript"></script>
 +
<script type="text/javascript" src="https://2014hs.igem.org/Team:AUC_TURKEY/jquery.iconmenu.js?action=raw&ctype=text/javascript"></script>
 +
<script type="text/javascript">
 +
$(function() {
 +
$('#sti-menu').iconmenu({
 +
animMouseenter : {
 +
'mText' : {speed : 200, easing : 'easeOutExpo', delay : 250, dir : 1},
 +
'sText' : {speed : 200, easing : 'easeOutExpo', delay : 0, dir : 1},
 +
'icon'  : {speed : 200, easing : 'easeOutExpo', delay : 500, dir : 1}
 +
},
 +
animMouseleave : {
 +
'mText' : {speed : 200, easing : 'easeInExpo', delay : 250, dir : 1},
 +
'sText' : {speed : 200, easing : 'easeInExpo', delay : 500, dir : 1},
 +
'icon'  : {speed : 200, easing : 'easeInExpo', delay : 0, dir : 1}
 +
}
 +
});
 +
});
 +
</script>
 +
</body>
 +
 
 +
 
 +
</html>

Latest revision as of 17:30, 26 April 2015

Back to top Take a Tour














Retrieved from "http://2014hs.igem.org/Team:AUC_TURKEY"