Team:Arizona State/Test

From 2011.igem.org

(Difference between revisions)
(Created page with "{{:Team:Arizona State/Templates/main|title=Test|content= __NOTOC__ <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; chars...")
 
(4 intermediate revisions not shown)
Line 2: Line 2:
__NOTOC__
__NOTOC__
-
 
+
<html>
-
<html xmlns="http://www.w3.org/1999/xhtml">
+
-
 
+
<head>
<head>
-
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+
        <meta charset="UTF-8">
-
<title>CSS-Only Accordion Effect: Horizontal Accordian</title>
+
       
-
<style>
+
        <!--[if IE]>
-
body {
+
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
-
  font: small/1.2 Arial, Helvetica, sans-serif; }
+
  <![endif]-->
-
#accordion {
+
        <link rel="stylesheet" href="css/style.css">
-
  width: 700px;
+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
-
  margin: 75px auto; }
+
-
#accordion div {
+
-
  float: left;
+
-
  width:25%;
+
-
  height: 500px;
+
-
  overflow: hidden;}
+
-
#accordion:hover div {
+
-
  width: 20px; }
+
-
#accordion:hover div:hover {
+
-
  width: 650px;
+
-
  overflow: auto; }
+
-
#overview {
 
-
  background-color: #CCFF99; }
 
-
#crispr {
 
-
  background-color:#FF6633; }
 
-
#outreach {
 
-
  background-color: #FFCC00; }
 
-
#future {
 
-
  background-color:#99FFFF; }
 
-
h1 {
 
-
  font-size: 100%;
 
-
  margin: 10px 10px .2em 25px; }
 
-
p {
 
-
  margin: 1em 25px; }
 
-
</style>
 
-
</head>
 
<body>
<body>
-
  <div id="accordion">
+
        <div id="page-wrap">
-
      <div id="overview">
+
       
-
        <h1>Overview</h1>
+
                <h1>Photos with Slide-in Captions</h1>
-
        <p>Clustered Regularly Interspaced Short Palindromic Repeats (CRISPR) are a genomic feature of many prokaryotic and archeal species. CRISPR functions as an adaptive immune system, targeting exogenous sequences that match spacers integrated into the genome. Our project focuses on developing a set of tools for synthetic control over the CRISPR pathway. This includes a method for creating polymers of repeat-spacer-repeat units, the development of CRISPR biobricks (CAS genes, leader sequences) for several CRISPR subtypes (E. coli, B. halodurans, and L. innocua), testing these components on plasmids containing GFP, and a software tool to collect and display CRISPR information, as well as select spacers from a particular sequence. Given the relatively recent progress in the scientific understanding of this system, we see the potential for a wide range of biotechnological applications of CRISPR in the future.</p>
+
               
-
        <p>Project Links:</p>
+
                <figure class="cap-left">
-
        <p>[https://2011.igem.org/Team:Arizona_State/Project/E_coli E. coli]</p>
+
                        <img src="https://static.igem.org/mediawiki/2011/2/20/ASU_Trinette.jpg" alt="" width="250" height="335">
-
        <p>[https://2011.igem.org/Team:Arizona_State/Project/B_halodurans B. halodurans]</p>
+
                        <figcaption>Our lovely thermocycler, Trinette.</figcaption>
-
        <p>[https://2011.igem.org/Team:Arizona_State/Project/L_innocua L. innocua]</p>
+
                </figure>
-
        <p>[https://2011.igem.org/Team:Arizona_State/Project/Software Software Tool]</p>
+
               
-
      </div>
+
                <figure class="cap-right">
-
      <div id="crispr">
+
                        <img src="https://static.igem.org/mediawiki/2011/4/47/PLiCRISPR.jpg" alt="" width=325"" height=220"">
-
        <h1>CRISPR</h1>
+
                        <figcaption>A beautiful CRISPR plasmid.</figcaption>
-
        <p>Clustered Regularly Interspaced Short Palindromic Repeats (CRISPR) are a genomic feature of many prokaryotic and archeal species. CRISPR functions as an adaptive immune system. A CRISPR locus consists of a set of CAS (CRISPR associated) genes, a leader, or promoter, sequence, and an array. This array consists of repeating elements along with "spacers". These spacer regions direct the CRISPR machinery to degrade or otherwise inactivate a complementary sequence in the cell.</p>
+
                </figure>
-
        <p>Want to read more? See our detailed review of CRISPR research here:</p>
+
               
-
        <p>[https://2011.igem.org/Team:Arizona_State/Project/CRISPR CRISPR Review]</p>
+
                <figure class="cap-top">
-
      </div>
+
                        <img src="https://static.igem.org/mediawiki/2011/6/6f/ASU_Joseph3.jpg" alt="" width="280" height="288">
-
      <div id="outreach">
+
                        <figcaption>Punk rock in the lab.</figcaption>
-
        <h1>Human Practices</h1>
+
                </figure>
-
        <p>The field of synthetic biology is rapidly expanding, and efforts to increase public understanding are crucial. Over the past few months, ASU iGEM has been busy collaborating with other iGEM teams to build an ultimate resource for synbio human practices, culminating in CommunityBricks: The Standard Registry of Synbio Activities, and AlumniGEM, an alumni network for former iGEMers. In addition, we have visited local high schools, spoken at university events, and helped found the very first high school iGEM team in the state of Arizona.</p>
+
               
-
        <p>Human Practices links:</p>
+
                <figure class="cap-bot">
-
        <p>[https://2011.igem.org/Team:Arizona_State/Outreach/Events Events]</p>
+
                        <img src="https://static.igem.org/mediawiki/2011/9/9e/ASU_Logo.png" alt="" width="300" height="292">
-
        <p>[https://2011.igem.org/Team:Arizona_State/Outreach/Collaborations Collaborations]</p>
+
                        <figcaption>Our official logo.</figcaption>
-
        <p>[https://2011.igem.org/Team:Arizona_State/Outreach/Exploring_Synthetic_Biology Curriculum]</p>
+
                </figure>
-
        <p>[https://2011.igem.org/Team:Arizona_State/Outreach/Outreach_in_Practice Outreach in Practice]</p>
+
               
-
      </div>
+
                <br style="clear: both;">
-
      <div id="future">
+
               
-
        <h1>Applications</h1>
+
                <section id="learninz">
-
        <p>CRISPR is a BFD.</p>
+
 
-
        <p>Read more here:</p>
+
               
-
        <p>[https://2011.igem.org/Team:Arizona_State/Project/Future Future Applications]</p>
+
                <style scoped="" contenteditable="">figure {
-
      </div>
+
  display: block;
-
      <div style="float: none; clear: both; height: 0;"> </div>
+
  position: relative;
-
  </div>
+
  float: left;
 +
  overflow: hidden;
 +
  margin: 0 20px 20px 0;
 +
}
 +
figcaption {
 +
  position: absolute;
 +
  background: black;
 +
  background: rgba(0,0,0,0.75);
 +
  color: white;
 +
  padding: 10px 20px;
 +
  opacity: 0;
 +
  -webkit-transition: all 0.6s ease;
 +
  -moz-transition:    all 0.6s ease;
 +
  -o-transition:      all 0.6s ease;
 +
}
 +
figure:hover figcaption {
 +
  opacity: 1;
 +
}
 +
figure:before {
 +
  content: "?";
 +
  position: absolute;
 +
  font-weight: 800;
 +
  background: black;
 +
  background: rgba(255,255,255,0.75);
 +
  text-shadow: 0 0 5px white;
 +
  color: black;
 +
  width: 24px;
 +
  height: 24px;
 +
  -webkit-border-radius: 12px;
 +
  -moz-border-radius:   12px;
 +
  border-radius:        12px;
 +
  text-align: center;
 +
  font-size: 14px;
 +
  line-height: 24px;
 +
  -moz-transition: all 0.6s ease;
 +
  opacity: 0.75;       
 +
}
 +
figure:hover:before {
 +
  opacity: 0;
 +
}
 +
 
 +
.cap-left:before {  bottom: 10px; left: 10px; }
 +
.cap-left figcaption { bottom: 0; left: -30%; }
 +
.cap-left:hover figcaption { left: 0; }
 +
 
 +
.cap-right:before { bottom: 10px; right: 10px; }
 +
.cap-right figcaption { bottom: 0; right: -30%; }
 +
.cap-right:hover figcaption { right: 0; }
 +
 
 +
.cap-top:before { top: 10px; left: 10px; }
 +
.cap-top figcaption { left: 0; top: -30%; }
 +
.cap-top:hover figcaption { top: 0; }
 +
 
 +
.cap-bot:before { bottom: 10px; left: 10px; }
 +
.cap-bot figcaption { left: 0; bottom: -30%;}
 +
.cap-bot:hover figcaption { bottom: 0; }</style>
 +
 
 +
                </section>
 +
       
 +
        </div>
 +
       
</body>
</body>
 +
</html>
</html>
}} <!-- close content attribute for menubar -->
}} <!-- close content attribute for menubar -->

Latest revision as of 02:20, 28 September 2011


Test


ASU Logo.png

Photos with Slide-in Captions

Our lovely thermocycler, Trinette.
A beautiful CRISPR plasmid.
Punk rock in the lab.
Our official logo.