Team:AUC TURKEY

From 2014hs.igem.org

(Difference between revisions)
(Undo revision 28239 by Alihancelikcan (talk))
 
(72 intermediate revisions not shown)
Line 1: Line 1:
-
<!-- *** What falls between these lines is the Alert Box!  You can remove it from your pages once you have read and understood the alert *** -->
+
{{AUC_TURKEY}}
-
 
+
<html>
<html>
-
<div id="box" style="width: 700px; margin-left: 137px; padding: 5px; border: 3px solid #fe2b33; /*background-color: #fe2b33;*/">
+
<head>
-
<div id="template" style="text-align: center; font-weight: bold; font-size: large; /*color: #f6f6f6*/; padding: 5px;">
+
    <meta name="viewport" content="width=device-width">
-
This is a template page. READ THESE INSTRUCTIONS.
+
<meta charset="UTF-8" />
-
</div>
+
        <meta name="description" content="Animated Text and Icon Menu with jQuery" />
-
<div id="instructions" style="text-align: center; font-weight: normal; font-size: small; /*color: #f6f6f6*/; padding: 5px;">
+
        <meta name="keywords" content="jquery, menu, navigation, sliding, animation, icon" />
-
You are provided with this team page template with which to start the iGEM season.  You may choose to personalize it to fit your team but keep the same "look." Or you may choose to take your team wiki to a different level and design your own wiki.  You can find some examples <a href="https://2009.igem.org/Help:Template/Examples">HERE</a>.
+
<meta name="author" content="Codrops" />
-
</div>
+
        <link rel="stylesheet" type="text/css" href="https://2014hs.igem.org/Team:AUC_TURKEY/style.css?action=raw&ctype=text/css" />
-
<div id="warning" style="/*text-align: center;*/ font-weight: bold; font-size: small; /*color: #f6f6f6*/; padding: 5px;">
+
<link rel="stylesheet" type="text/css" href="https://2014hs.igem.org/Team:AUC_TURKEY/stimenu.css?action=raw&ctype=text/css" />
-
You <strong>MUST</strong> have the following information on your wiki:
+
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow&v1' rel='stylesheet' type='text/css' />
-
<ul style="font-weight:normal;">
+
<link href='http://fonts.googleapis.com/css?family=Wire+One&v1' rel='stylesheet' type='text/css' />
-
<li>a team description</li>
+
-
<li>project description</li>
+
-
<li>safety information (did your team take a safety training course? were you supervised in the lab?)</li>
+
-
<li>team attribution (who did what part of your project?)</li>
+
-
</ul>
+
-
You may also wish to add other page such as:
+
-
<ul style="font-weight:normal;">
+
-
<li>lab notebook</li>
+
-
<li>sponsor information</li>
+
-
<li>other information</li>
+
-
</ul>
+
-
REMEMBER, keep all of your pages within your teams namespace. <br><span style="font-weight:normal; font-style:italic;">Example: 2013hs.igem.org/Team:AUC_TURKEY/Our_Pets</span>
+
-
</div>
+
-
</div>
+
-
</html>
+
-
<!-- *********************** End of the alert box *********************** -->
+
<script" type="text/javascript">
 +
</script>
 +
<style type="text/css">
 +
.divider {
 +
  height: 1px;
 +
  background: #000;
 +
  background: -webkit-linear-gradient(left, rgb(255,255,255) 0%, rgb(50,50,50) 50%, rgb(255,255,255) 100%);
 +
}
 +
.divider.light {
 +
  background: #fff;
 +
  background: -webkit-linear-gradient(left, rgb(90,90,90) 0%, rgb(255,255,255) 50%, rgb(90,90,90) 100%);
 +
}
-
{|align="justify"
+
.divider.light:before {
-
|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.
+
  position:relative;
-
|[[Image:AUC_TURKEY_logo.png|200px|right|frame]]
+
  float:left;
-
|-
+
  background: linear-gradient(to right, rgba(100, 100, 100, 0), rgba(100, 100, 100, 1) 50%);
-
|
+
  margin-top:2px;
-
''Tell us more about your project.  Give us background.  Use this as the abstract of your project.  Be descriptive but concise (1-2 paragraphs)''
+
  width:50%;
-
|[[Image:AUC_TURKEY_team.png|right|frame|Your team picture]]
+
  height:1px;
-
|-
+
  content:"";
-
|
+
}
-
|align="center"|[[Team:AUC_TURKEY | Team AUC_TURKEY]]
+
-
|}
+
-
<!--- Team Information Link --->
+
.divider.light:after {
 +
  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:""; 
 +
}
-
{| style="color:#1b2c8a;background-color:#0c6;" cellpadding="3" cellspacing="1" border="1" bordercolor="#fff" width="62%" align="center"
+
.divider:before {
-
!align="center"|[https://igem.org/Team.cgi?year=2013&division=high_school&team_name=AUC_TURKEY Official Team Profile]
+
  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:"";
 +
}
-
===Team===
+
.divider:after {
-
Tell us about your team, your school!
+
  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:""; 
 +
}
 +
</style>
 +
<style type="text/css">
 +
#animatedmenu
 +
{
 +
  font-size:12px;
 +
  margin-left:auto;
 +
  margin-right:auto;
 +
}
 +
</style>
 +
<style type="text/css">
-
===Project Description===
+
label, a {
-
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.
+
  cursor: pointer;
-
After the analysis of the functions of the project last year, we discovered three main problems. The problems with their solutions are as follows:
+
  text-decoration: none;
-
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.
+
-
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.
+
-
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'.
+
-
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.
+
-
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.
+
-
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===
+
article
-
Show us how you spent your days.
+
{
 +
  width:87.8%;
 +
}
 +
label, #active, img {
 +
  -moz-user-select: none;
 +
  -webkit-user-select: none;
 +
}
-
===Results/Conclusions===
+
#slider {
-
What did you achieve over the course of your semester?
+
margin: 0 auto;
 +
 
 +
}
 +
/* NEW EXPERIMENT */
 +
/* Slider Setup */
 +
input {
 +
  display: none;
 +
}
-
===Safety===
+
#slide1:checked ~ #slides .inner {
-
What safety precautions did your team take? Did you take a safety training course? Were you supervised at all times in the lab?
+
  margin-left: 0;
 +
}
 +
#slide2:checked ~ #slides .inner {
 +
  margin-left: -100%;
 +
}
-
===Attributions===
+
#slide3:checked ~ #slides .inner {
-
Who worked on what?
+
  margin-left: -200%;
 +
}
 +
#slide4:checked ~ #slides .inner {
 +
  margin-left: -300%;
 +
}
-
===Human Practices===
+
#slide5:checked ~ #slides .inner {
-
What impact does/will your project have on the public? 
+
  margin-left: -400%;
 +
}
 +
#overflow {
 +
  width: 100%;
 +
  overflow: hidden;
 +
}
-
===Fun!===
+
article img {
-
What was your favorite team snack?? Have a picture of your team mascot?
+
  width: 100%;
 +
}
 +
#slides .inner {
 +
  width: 500%;
 +
}
 +
#slides article {
 +
  width: 20%;
 +
  float: left;
 +
}
-
<forum_subtle />
+
/* 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"