Team:AUC TURKEY

From 2014hs.igem.org

(Difference between revisions)
(Prototype team page)
(Undo revision 28239 by Alihancelikcan (talk))
 
(75 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===
+
label, a {
-
What are you working on this semester?
+
  cursor: pointer;
 +
  text-decoration: none;
 +
}
 +
article
 +
{
 +
  width:87.8%;
 +
}
-
===Notebook===
+
label, #active, img {
-
Show us how you spent your days.
+
  -moz-user-select: none;
 +
  -webkit-user-select: none;
 +
}
 +
#slider {
 +
margin: 0 auto;
 +
 
 +
}
-
===Results/Conclusions===
+
/* NEW EXPERIMENT */
-
What did you achieve over the course of your semester?
+
/* Slider Setup */
 +
input {
 +
  display: none;
 +
}
 +
#slide1:checked ~ #slides .inner {
 +
  margin-left: 0;
 +
}
-
===Safety===
+
#slide2: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: -100%;
 +
}
 +
#slide3:checked ~ #slides .inner {
 +
  margin-left: -200%;
 +
}
-
===Attributions===
+
#slide4:checked ~ #slides .inner {
-
Who worked on what?
+
  margin-left: -300%;
 +
}
 +
#slide5:checked ~ #slides .inner {
 +
  margin-left: -400%;
 +
}
-
===Human Practices===
+
#overflow {
-
What impact does/will your project have on the public? 
+
  width: 100%;
 +
  overflow: hidden;
 +
}
 +
article img {
 +
  width: 100%;
 +
}
-
===Fun!===
+
#slides .inner {
-
What was your favorite team snack?? Have a picture of your team mascot?
+
  width: 500%;
 +
}
 +
#slides article {
 +
  width: 20%;
 +
  float: left;
 +
}
 +
/* Slider Styling */
 +
/* Control Setup */
 +
#controls {
 +
  margin: -25% 0 0 0;
 +
  width: 100%;
 +
  height: 50px;
 +
}
-
<forum_subtle />
+
#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"