Difference between revisions of "Team:Uppsala/Parts"

 
(40 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 167: Line 114:
  
  
−
<h3>Part Table </h3>
 
  
−
<groupparts>iGEM18 Uppsala</groupparts>
+
 
−
<html>
+
 
−
</div>
+
 
 +
 
 +
<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