Difference between revisions of "Team:Uppsala/Parts"

 
(46 intermediate revisions by 6 users not shown)
Line 5: Line 5:
 
{{Uppsala/javascript/scroll-button}}
 
{{Uppsala/javascript/scroll-button}}
 
{{Uppsala/javascript/redirect_js}}
 
{{Uppsala/javascript/redirect_js}}
 
+
{{Uppsala/buttons}}
  
 
<html>
 
<html>
Line 11: Line 11:
 
<title>SVG Stroke Animation</title>
 
<title>SVG Stroke Animation</title>
 
<style type="text/css">
 
<style type="text/css">
    html{
+
 
        margin:0;
+
 
        padding:0;
+
.content-card-heading {
        width:100%;
+
    margin-top: -75px;
    }
+
}
   
+
 
    body{
+
 
        margin: 0;
+
.parallax {
        padding: 0;
+
                /* The image used */
        width: 100%;
+
                background-image: url("https://static.igem.org/mediawiki/2018/b/bc/T--Uppsala--UnaG_Pellet-Elution.jpeg");
        text-align: center;
+
        background: url(https://static.igem.org/mediawiki/2018/5/50/T--Uppsala--horses.jpg) no-repeat 50% 50%;
+
        background-size: cover;
+
        height:100vh;
+
        display: table;
+
    }
+
   
+
    .svg-wrapper{
+
        position:absolute;
+
        top:45vh;
+
        left:50%;
+
        transform: translate(-50%, -50%);
+
        width: 60%;
+
    }
+
   
+
    path{
+
        stroke: red;
+
        fill: #fff;
+
        stroke-dasharray:2000 ;
+
        opacity: 10;
+
        animation: animate 3s cubic-bezier(0,.21,1,.47) ;
+
    }
+
   
+
    @keyframes animate{
+
        0% {
+
            opacity: 0;
+
            fill: none;
+
            stroke-dashoffset:2000;
+
        }
+
       
+
        30% {
+
            opacity: 10;
+
            fill: none;
+
            stroke-dashoffset:2000;
+
        }
+
       
+
            90% {
+
           
+
            fill: rgba(255,255,255,0);
+
           
+
            }
+
           
+
        100% {
+
            opacity: 10;
+
            fill: rgba(255,255,255,1);
+
            stroke-dashoffset:0;
+
            }
+
    }
+
 
      
 
      
 +
}
 
</style>
 
</style>
 
</head>
 
</head>
  
<body>
 
 
      
 
      
 
<div class="svg-wrapper">
 
<div class="svg-wrapper">
Line 135: Line 87:
  
 
</div>
 
</div>
</body>
+
 
<html>
+
  
  
Line 151: Line 102:
 
     <div class="body">
 
     <div class="body">
 
         <div class="parallax"></div>
 
         <div class="parallax"></div>
         <div class="igem-icon"><a href="https://2018.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/2018/b/b0/T--Uppsala--graylogo.png"></a></div>
+
         <div class="igem-icon"><a href="https://2018.igem.org/Main_Page "></a></div>
 
+
  <div class="igem-icon"><a href="https://2018.igem.org/Team:Uppsala"><img src="https://static.igem.org/mediawiki/2018/7/7a/T--Uppsala--WormBusterLogo_White.png"></a>
        <div class ="scroll-down-button">
+
</div>
            <section id="section02" class="demo">
+
     
                <h1></h1>
+
                <a href="#scrolldown"><span></span></a>
+
            </section>
+
        </div>
+
 
         <div class= "content blur-box" style="font-size:16px;">
 
         <div class= "content blur-box" style="font-size:16px;">
 
             <div class ="content-text" id="scrolldown" >
 
             <div class ="content-text" id="scrolldown" >
Line 165: Line 112:
 
                  
 
                  
  
<h1>Barcoding</h1>
 
             
 
  
<p>Throughout the worm buster project we have at many times felt the need for assistance or input on different parts of our project. Without those small but immensely meaningful things our project would never had gotten this far and in the worse case never been possible at all. Therefore we would like to express our gratitude to all the people that supported us throughout the project. </p>  
+
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
<div class="card-holder">
 +
                    <div class="content-card-heading"><h1>Part Table</h1>
 +
                    </div>
 +
                    <div class="content-card pic-next-to-text">
 +
                    <div class="side-text">
 +
                    <!-- start slipsum code -->
 +
 
 +
<p><b>Table 1. </b>Listed parts of the 2018 Uppsala team </p>
 +
 
 +
 
 +
 
 +
<table class=" pgrouptable tablesorter our-table" style="width: 100%;" cellspacing="0" cellpadding="0">
 +
<thead>
 +
<tr>
 +
 
 +
 
 +
 
 +
<th style="width: auto" >Name</th>
 +
<th style="width: auto" >Type</th>
 +
<th style="width: auto" >Description</th>
 +
<th style="width: auto">Length</th>
 +
 
 +
</tr></thead>
 +
 
 +
<tbody><tr>
 +
 
 +
 
 +
<td><a class="noul_link part_link" href="http://parts.igem.org/wiki/index.php?title=Part:BBa_K2669000">BBa_K2669000</a></td>
 +
<td>Composite</td>
 +
<td>Strongly constitutive His-tagged+flexible linker UnaG</td>
 +
<td align="right">620</td>
 +
</tr>
 +
 
 +
<tr>
 +
 
 +
 
 +
<td><a class="noul_link part_link" href="http://parts.igem.org/wiki/index.php?title=Part:BBa_K2669003">BBa_K2669003</a></td>
 +
<td>Composite</td>
 +
<td>Strong constitutive promotor + RBS + Optimized Amil CP (BBa_K2669002) + double terminator </td>
 +
<td align="right">841</td>
 +
</tr>
 +
 
 +
<tr>
 +
 
 +
<td><a class="noul_link part_link" href="http://parts.igem.org/wiki/index.php?title=Part:BBa_K2669001">BBa_K2669001</a></td>
 +
<td>Reporter</td>
 +
<td>Bilirubin-inducible UnaG+6xHis-tag+Flexible linker</td>
 +
<td align="right">459</td>
 +
</tr>
 +
 
 +
 
 +
 
 +
<td><a class="noul_link part_link" href="http://parts.igem.org/wiki/index.php?title=Part:BBa_K2669002">BBa_K2669002</a></td>
 +
<td>Coding</td>
 +
<td>AmilCP: Codon Optimized basic part</td>
 +
<td align="right">675</td>
 +
</tr></tbody>
 +
</table>
 +
             
 +
 
 +
 
 +
 
 +
<!-- end slipsum code -->
 +
                    </div>
 +
                 
 +
                       
 +
                    </div>
 +
                </div>
 +
 
 +
 
 +
 
  
  

Latest revision as of 19:11, 17 October 2018




SVG Stroke Animation