Difference between revisions of "Team:SHSID China/Design"

(Prototype team page)
 
Line 1: Line 1:
−
{{SHSID_China}}
+
{{Template:SHSID_China/header}}
 
<html>
 
<html>
 +
<head>
 +
    <link rel="stylesheet" type="text/css" href="header.css">
 +
    <link href="https://fonts.googleapis.com/css?family=Abril+Fatface|Trocchi" rel="stylesheet">
 +
    <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
 +
    <meta name="apple-mobile-web-app-capable" content="yes">
 +
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
 +
    <meta name="format-detection" content="telephone=no">
 +
</head>
 +
<body>
 +
<div id=""page-content-wrapper""><script
 +
  src="http://code.jquery.com/jquery-3.3.1.js"
 +
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
 +
  crossorigin="anonymous"></script>
  
−
<div class="column full_size">
+
<div class="splash" id="mainsplash" style="background: url(https://static.igem.org/mediawiki/2018/c/c7/T--SHSID_China--iGEMkit.jpeg); background-size: cover; background-position: center; position: relative" >
−
<h1>Design</h1>
+
−
<p>
+
−
Design is the first step in the design-build-test cycle in engineering and synthetic biology. Use this page to describe the process that you used in the design of your parts. You should clearly explain the engineering principles used to design your project.
+
−
</p>
+
−
 
+
−
<p>
+
−
This page is different to the "Applied Design Award" page. Please see the <a href="https://2018.igem.org/Team:SHSID_China/Applied_Design">Applied Design</a> page for more information on how to compete for that award.
+
−
</p>
+
  
 +
    <div class= "row splashesittely" style="position: absolute; top:46%; transform: translateY(-50%)">
 +
        <div class="col-md-3">
 +
        </div>
 +
        <div class="col-md-6">
 +
            <h1 style="font-family: 'Abril Fatface', cursive;">Design</h1>
 +
            <hr id="mainhr">
 +
            <h2 style="font-family: 'Trocchi', serif;">Experiment without design is like a bird without wings.</h2>
 +
        </div>
 +
            <div class ="col-md-12 transp scroller">
 +
                <a href="#Abstract">
 +
                <h3 style="color: white; font-family: 'Trocchi', serif;">Scroll down for more information</h3>
 +
                <img src="https://static.igem.org/mediawiki/2018/c/ce/T--SHSID_China--mainarrow.jpg" class="img-responsive center-block transp nuoli" style="max-height: 130px">
 +
                </a>
 +
        </div>
 +
    </div>
 
</div>
 
</div>
 +
<div style="background: url(https://static.igem.org/mediawiki/2018/d/d6/T--SHSID_China--main_bg2.jpg); background-size: cover; background-position: center" class="link" id="Abstract">
 +
    <article style="color: white; font-size: 16px; padding-top: 10px">
 +
        <div class="column full_size">
 +
            <h1>Design</h1>
 +
            <p>
 +
            Design is the first step in the design-build-test cycle in engineering and synthetic biology. Use this page to describe the process that you used in the design of your parts. You should clearly explain the engineering principles used to design your project.
 +
            </p>
 +
            <p>
 +
            This page is different to the "Applied Design Award" page. Please see the <a href="https://2018.igem.org/Team:SHSID_China/Applied_Design">Applied Design</a> page for more information on how to compete for that award.
 +
            </p>
  
 +
            </div>
 +
            <div class="column two_thirds_size">
 +
            <h3>What should this page contain?</h3>
 +
            <ul>
 +
            <li>Explanation of the engineering principles your team used in your design</li>
 +
            <li>Discussion of the design iterations your team went through</li>
 +
            <li>Experimental plan to test your designs</li>
 +
            </ul>
  
 +
            </div>
  
−
<div class="column two_thirds_size">
+
            <div class="column third_size">
−
<h3>What should this page contain?</h3>
+
            <div class="highlight decoration_A_full">
−
<ul>
+
            <h3>Inspiration</h3>
−
<li>Explanation of the engineering principles your team used in your design</li>
+
            <ul>
−
<li>Discussion of the design iterations your team went through</li>
+
            <li><a href="https://2016.igem.org/Team:MIT/Experiments/Promoters">2016 MIT</a></li>
−
<li>Experimental plan to test your designs</li>
+
            <li><a href="https://2016.igem.org/Team:BostonU/Proof">2016 BostonU</a></li>
−
</ul>
+
            <li><a href="https://2016.igem.org/Team:NCTU_Formosa/Design">2016 NCTU Formosa</a></li>
−
 
+
            </ul>
 +
            </div>
 +
            </div>
 +
    </article>
 
</div>
 
</div>
−
 
−
<div class="column third_size">
 
−
<div class="highlight decoration_A_full">
 
−
<h3>Inspiration</h3>
 
−
<ul>
 
−
<li><a href="https://2016.igem.org/Team:MIT/Experiments/Promoters">2016 MIT</a></li>
 
−
<li><a href="https://2016.igem.org/Team:BostonU/Proof">2016 BostonU</a></li>
 
−
<li><a href="https://2016.igem.org/Team:NCTU_Formosa/Design">2016 NCTU Formosa</a></li>
 
−
</ul>
 
 
</div>
 
</div>
−
</div>
+
</body>
−
 
+
<script>
 +
    $(document).ready(function() {
  
 +
    if(location.pathname != "/Team:SHSID_China") {
 +
        $('#navigation a[href^="https://2018.igem.org' + location.pathname + '"]').addClass('active');
 +
    } else $('#navigation a.home').addClass('active');
 +
});
 +
</script>
 +
<script type="text/javascript">
 +
    // Picture reference script
 +
    /*
 +
    USAGE:
 +
    tag img with a ref that is connected to the image, such as:
 +
    <img src="" ref="" />
 +
    When you insert a reference in text, put a tag with a ref attribute:
 +
    <a ref=""></a>
 +
    Do not put href attribute, it will be replaced with a link to the image.
 +
    Moreover, inner html of the anchor tag will be "figure x" where x is the
 +
    correct figure number. If span or anchor has "." as the inner html, the
 +
    caption will be capitalized.
 +
    */
 +
    var images = $('img[ref]');
 +
    $.each(images, function(index, e){
 +
            var referenceName = e.getAttribute("ref");
 +
            if (!e.id){
 +
                e.setAttribute("id","figure"+(index+1));
 +
            }
 +
            $.each($('a[ref="'+referenceName+'"]'), function(j, e2){
 +
                e2.setAttribute("href","#"+e.id);
 +
                if (e2.innerHTML == "."){
 +
                    e2.innerHTML = "Figure " + (index+1);
 +
                } else {
 +
                    e2.innerHTML = "figure " + (index+1);
 +
                }
 +
            });
 +
            $.each($('span[ref="'+referenceName+'"]'), function(j, e2){
 +
                e2.setAttribute("href","#"+e.id);
 +
                if (e2.innerHTML == "."){
 +
                    e2.innerHTML = "Figure " + (index+1);
 +
                } else {
 +
                    e2.innerHTML = "figure " + (index+1);
 +
                }
 +
            });
 +
        }
 +
    );
  
 +
    // Table reference script
 +
    /*
 +
    USAGE:
 +
    tag table with a tab that is connected to the table, such as:
 +
    <table ref="intensities" />
 +
    When you insert a reference in text, put a tag with a ref attribute:
 +
    <a tab="intensities"></a>
 +
    Do not put href attribute, it will be replaced with a link to the image.
 +
    Moreover, inner html of the anchor tag will be "table x" where x is the
 +
    correct table number. If span or anchor has "." as the inner html, the
 +
    caption will be capitalized.
 +
    */
 +
    var tables = $('table[tab], img[tab]');
 +
    $.each(tables, function(index, e){
 +
            var tableName = e.getAttribute("tab");
 +
            if (!e.id){
 +
                e.setAttribute("id","table"+(index+1));
 +
            }
 +
            $.each($('a[tab="'+tableName+'"]'), function(j, e2){
 +
                e2.setAttribute("href","#"+e.id);
 +
                if (e2.innerHTML == "."){
 +
                    e2.innerHTML = "Table " + (index+1);
 +
                } else {
 +
                    e2.innerHTML = "table " + (index+1);
 +
                }
 +
            });
 +
            $.each($('span[tab="'+tableName+'"]'), function(j, e2){
 +
                e2.setAttribute("href","#"+e.id);
 +
                if (e2.innerHTML == "."){
 +
                    e2.innerHTML = "Table " + (index+1);
 +
                } else {
 +
                    e2.innerHTML = "table " + (index+1);
 +
                }
 +
            });
 +
        }
 +
    );
 +
</script>
 
</html>
 
</html>
 +
{{Template:SHSID_China/footer}}

Revision as of 07:07, 7 October 2018

Design

Experiment without design is like a bird without wings.

Scroll down for more information