Difference between revisions of "Team:Uppsala/Parts"

 
(44 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>
 
  
<p>Please include a table of all the parts your team has made during your project on this page. Remember part characterization and measurement data must go on your team part pages on the Registry. </p>
 
  
</html>
+
 
<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