Difference between revisions of "Team:Calgary"

Line 166: Line 166:
 
         <!-- Description -->
 
         <!-- Description -->
 
         <div class="section">
 
         <div class="section">
             <div style="padding: 6%" class="row vertical-align">
+
             <div style="padding: 4%" class="row vertical-align">
 
                 <div class="col-10">
 
                 <div class="col-10">
 
                     <h1 class="home-title">SNIP
 
                     <h1 class="home-title">SNIP
Line 248: Line 248:
 
         <!-- Page 2 -->
 
         <!-- Page 2 -->
 
         <div class="section">
 
         <div class="section">
             <div style="padding: 6%" style="transform: translateY(20%)">
+
             <div style="padding: 4%" style="transform: translateY(20%)">
 
                 <h1 style="text-align: left; transform: translateX(20px); color: #44414d">The ideal medicine is not a
 
                 <h1 style="text-align: left; transform: translateX(20px); color: #44414d">The ideal medicine is not a
 
                     perfect treatment
 
                     perfect treatment
Line 261: Line 261:
 
         <!-- Page 3 -->
 
         <!-- Page 3 -->
 
         <div class="section">
 
         <div class="section">
             <div style="padding: 6%" class="row">
+
             <div style="padding: 4%" class="row">
 
                 <div>
 
                 <div>
 
                     <p style="text-align: left">
 
                     <p style="text-align: left">
Line 284: Line 284:
 
         <!-- Page 4 -->
 
         <!-- Page 4 -->
 
         <div class="section">
 
         <div class="section">
             <div class="sef" tyle="padding: 6%">
+
             <div class="sef" tyle="padding: 4%">
 
                 <p style="text-align: center">How do we overcome these problems?</p>
 
                 <p style="text-align: center">How do we overcome these problems?</p>
 
                 <br><br>
 
                 <br><br>
Line 294: Line 294:
 
         <!-- Page 5 -->
 
         <!-- Page 5 -->
 
         <div class="section">
 
         <div class="section">
             <div style="padding: 6%" class="row">
+
             <div style="padding: 4%" class="row">
 
                 <div class="col-lg-6 info">
 
                 <div class="col-lg-6 info">
 
                     <p style="text-align: left">
 
                     <p style="text-align: left">
Line 332: Line 332:
 
         </div>
 
         </div>
 
     </div>
 
     </div>
    <!-- Arrow Keys -->
 
    <div class="bottom-right">
 
        <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
 
            xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
 
            xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" height="600" viewBox="0 0 36.634037 23.343925"
 
            version="1.1" id="blinking-arrows" sodipodi:docname="Arrows.svg" inkscape:version="0.92.3 (2405546, 2018-03-11)">
 
            <defs id="defs2408" />
 
            <sodipodi:namedview id="base" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0"
 
                inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="5.6" inkscape:cx="54.174134"
 
                inkscape:cy="3.2464811" inkscape:document-units="mm" inkscape:current-layer="layer1" showgrid="false"
 
                inkscape:window-width="3000" inkscape:window-height="1875" inkscape:window-x="-13" inkscape:window-y="67"
 
                inkscape:window-maximized="1" showborder="true" fit-margin-top="0" fit-margin-left="0" fit-margin-right="0"
 
                fit-margin-bottom="0" />
 
            <metadata id="metadata2411">
 
                <rdf:RDF>
 
                    <cc:Work rdf:about="">
 
                        <dc:format>image/svg+xml</dc:format>
 
                        <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
 
                        <dc:title></dc:title>
 
                    </cc:Work>
 
                </rdf:RDF>
 
            </metadata>
 
            <g inkscape:label="Layer 1" inkscape:groupmode="layer" id="layer1" transform="translate(-97.154707,-91.237265)">
 
                <rect id="rect2350" class="box-light-grey blinky-delay" width="9.2528639" height="9.2528648" x="110.84529"
 
                    y="91.751549" ry="1.505878" />
 
                <path sodipodi:type="star" id="path2352" class="arrow-v-light-grey blinky-delay" sodipodi:sides="3"
 
                    sodipodi:cx="115.4742" sodipodi:cy="96.813065" sodipodi:r1="1.7300762" sodipodi:r2="0.8650381"
 
                    sodipodi:arg1="0.52359878" sodipodi:arg2="1.5707963" inkscape:flatsided="false" inkscape:rounded="0"
 
                    inkscape:randomized="0" d="m 116.97249,97.678103 -1.49829,0 -1.49829,0 0.74914,-1.297557 0.74915,-1.297558 0.74914,1.297558 z"
 
                    inkscape:transform-center-x="-0.0018211996" inkscape:transform-center-y="-0.43061005" />
 
                <rect ry="1.505878" y="-114.06599" x="110.84529" height="9.2528648" width="9.2528639" id="rect2354"
 
                    class="box-light-grey blinky" transform="scale(1,-1)" />
 
                <path inkscape:transform-center-y="0.43023049" inkscape:transform-center-x="-0.0018211996" transform="scale(1,-1)"
 
                    d="m 116.97249,-108.14041 -1.49829,0 -1.49829,0 0.74914,-1.29756 0.74915,-1.29755 0.74914,1.29755 z"
 
                    inkscape:randomized="0" inkscape:rounded="0" inkscape:flatsided="false" sodipodi:arg2="1.5707963"
 
                    sodipodi:arg1="0.52359878" sodipodi:r2="0.8650381" sodipodi:r1="1.7300762" sodipodi:cy="-109.00545"
 
                    sodipodi:cx="115.4742" sodipodi:sides="3" id="path2357" class="arrow-v-light-grey blinky"
 
                    sodipodi:type="star" />
 
                <rect transform="matrix(0,1,1,0,0,0)" id="rect2359" class="box-verylight-grey" width="9.2528648" height="9.2528639"
 
                    x="104.81404" y="97.668991" ry="1.5058781" />
 
                <path sodipodi:type="star" id="path2361" class="arrow-h-verylight-grey" sodipodi:sides="3" sodipodi:cx="92040"
 
                    sodipodi:cy="-62277.48" sodipodi:r1="200" sodipodi:r2="100" sodipodi:arg1="0.52359878"
 
                    sodipodi:arg2="1.5707963" inkscape:flatsided="false" inkscape:rounded="0" inkscape:randomized="0" d="m 92213.205,-62177.48 -173.205,0 -173.205,0 86.602,-150 86.603,-150 86.603,150 z"
 
                    transform="matrix(0,0.00865039,0.00865039,0,641.45271,-686.73889)" inkscape:transform-center-x="0.43408464"
 
                    inkscape:transform-center-y="0.0019150242" />
 
                <rect transform="matrix(0,-1,-1,0,0,0)" id="rect2363" class="box-verylight-grey" width="9.2528648"
 
                    height="9.2528639" x="-114.06599" y="-133.27446" ry="1.5058781" />
 
                <path sodipodi:type="star" id="path2366" class="arrow-h-verylight-grey" sodipodi:sides="3" sodipodi:cx="92040"
 
                    sodipodi:cy="-62277.48" sodipodi:r1="200" sodipodi:r2="100" sodipodi:arg1="0.52359878"
 
                    sodipodi:arg2="1.5707963" inkscape:flatsided="false" inkscape:rounded="0" inkscape:randomized="0" d="m 92213.205,-62177.48 -173.205,0 -173.205,0 86.602,-150 86.603,-150 86.603,150 z"
 
                    transform="matrix(0,-0.00865039,-0.00865039,0,-410.50945,905.62203)" inkscape:transform-center-x="-0.43298603"
 
                    inkscape:transform-center-y="-0.00080335859" />
 
            </g>
 
        </svg>
 
        <span id="instructions">Use arrow keys
 
            <br>or scroll</span>
 
    </div>
 
</body>
 
 
</html>{{:Team:Calgary/Layout}}
 
<html lang="en">
 
 
<head>
 
    <title>Team:Calgary - 2018.igem.org</title>
 
    <!-- CSS -->
 
    <link rel="stylesheet" href="https://2018.igem.org/Team:Calgary/jquery_fullPage_css?action=raw&ctype=text/css">
 
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ"
 
        crossorigin="anonymous">
 
    <link rel="stylesheet" href="https://2018.igem.org/Team:Calgary/animation_css?action=raw&ctype=text/css">
 
    <style>
 
        .maincontent {
 
            margin-top: 180px;
 
            margin-bottom: 180px;
 
 
        }
 
 
        h1 {
 
            font-family: 'Josefin Sans', sans-serif !important;
 
            font-weight: normal !important;
 
            text-align: center;
 
        }
 
 
        h2 {
 
            text-align: center;
 
        }
 
 
        p {
 
            font-size: 20px !important;
 
        }
 
 
        .info-link {
 
            padding: 0 !important;
 
        }
 
 
        a:link {
 
            color: #f38f8f;
 
        }
 
 
        a:visited {
 
            color: #f38f8f;
 
        }
 
 
        a:hover {
 
            color: #f38f8f;
 
        }
 
 
        a:active {
 
            color: #f38f8f;
 
        }
 
 
        #moving-helix {
 
            height: 400px;
 
        }
 
 
        #blinking-arrows {
 
            height: 54px;
 
        }
 
 
        .bottom-left {
 
            bottom: 20px;
 
            left: 20px;
 
            line-height: 3;
 
            position: fixed;
 
            text-align: center;
 
        }
 
 
        .bottom-right {
 
            bottom: 20px;
 
            display: inline-block;
 
            line-height: 1.5;
 
            position: fixed;
 
            right: 70px;
 
            text-align: center;
 
        }
 
 
        .social-media-icon {
 
            color: rgba(0, 0, 0, 0.5);
 
            font-size: 24px;
 
        }
 
 
        .social-media-icon:hover {
 
            color: rgba(0, 0, 0, 0.9);
 
        }
 
 
        .vertical-align {
 
            display: flex;
 
            justify-content: center;
 
            align-items: center;
 
        }
 
 
        .home-title {
 
            color: #44414d;
 
            font-size: 80px;
 
        }
 
 
        #home-subtitle {
 
            color: #44414d;
 
            font-size: 47px;
 
        }
 
 
        #social-media-icons {
 
            list-style: none;
 
        }
 
 
        #instructions {
 
            display: block;
 
            font-size: 12px;
 
        }
 
 
        .wrapper {
 
            text-align: center;
 
        }
 
 
        .maincontent {
 
            background-color: #eeedf0;
 
            margin-top: 210px;
 
            margin-bottom: 210px;
 
            padding: 0;
 
        }
 
 
        @media only screen and (max-width: 1050px) {
 
            .bottom-left {
 
                display: none;
 
            }
 
 
            .bottom-right {
 
                display: none;
 
            }
 
        }
 
 
        @media only screen and (max-width: 400px) {
 
            h1 {
 
                font-size: 26px;
 
            }
 
 
            .home-title {
 
                color: #44414d;
 
                font-size: 26px;
 
            }
 
 
            #home-subtitle {
 
                color: #44414d;
 
                font-size: 16px;
 
            }
 
        }
 
    </style>
 
    <!-- JS -->
 
    <script src="https://2018.igem.org/Team:Calgary/jquery_fullPage_js?action=raw&ctype=text/javascript"></script>
 
    <script>
 
        $(document).ready(function () {
 
            $('#fullpage').fullpage({
 
                navigation: true,
 
                loopBottom: true,
 
                loopTop: true,
 
                responsiveWidth: 1050,
 
                afterResponsive: function (isResponsive) { }
 
            });
 
        });
 
    </script>
 
</head>
 
 
<body>
 
    <!-- Content -->
 
    <div class="container" id="fullpage">
 
        <!-- Description -->
 
        <div class="section">
 
            <div style="padding: 6%" class="row vertical-align">
 
                <div class="col-10">
 
                    <h1 class="home-title">SNIP
 
                        <span style="color: #7ccfb8">EQUIP</span> FLIP</h1>
 
                </div>
 
                <div class="col-2">
 
                    <svg style="width: 50%" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#"
 
                        xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg"
 
                        xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
 
                        xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" viewBox="0 0 79.80928 292.63452"
 
                        version="1.1" id="moving-helix" inkscape:version="0.92.3 (2405546, 2018-03-11)"
 
                        sodipodi:docname="Helix.svg">
 
                        <defs id="defs1848" />
 
                        <sodipodi:namedview id="base" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0"
 
                            inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="0.64" inkscape:cx="40.612564"
 
                            inkscape:cy="524.45313" inkscape:document-units="mm" inkscape:current-layer="layer1"
 
                            showgrid="false" inkscape:window-width="1920" inkscape:window-height="1017"
 
                            inkscape:window-x="-8" inkscape:window-y="32" inkscape:window-maximized="1" borderlayer="false"
 
                            fit-margin-top="0" fit-margin-left="0" fit-margin-right="0" fit-margin-bottom="0"
 
                            showborder="false" />
 
                        <metadata id="metadata1851">
 
                            <rdf:RDF>
 
                                <cc:Work rdf:about="">
 
                                    <dc:format>image/svg+xml</dc:format>
 
                                    <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
 
                                    <dc:title></dc:title>
 
                                </cc:Work>
 
                            </rdf:RDF>
 
                        </metadata>
 
                        <g inkscape:label="Layer 1" inkscape:groupmode="layer" id="layer1" transform="translate(-2.4802186,-2.7247285)">
 
                            <g class="move-up" id="g2473" transform="matrix(1.3829225,0,0,1.3829225,-103.49477,-58.214956)">
 
 
                                <path class="dark-grey appear-right-delay" id="dgrey4" sodipodi:nodetypes="ccccc"
 
                                    inkscape:connector-curvature="0" d="m 134.34178,5.592011 v 19.23694 l 57.7106,38.473729 V 44.065821 Z" />
 
 
                                <path class="dark-green move-right appear-right" id="dgreen3" sodipodi:nodetypes="ccccc"
 
                                    inkscape:connector-curvature="0" d="m 134.34175,44.065952 v 19.236859 l 57.7106,38.473789 V 82.539731 Z" />
 
 
                                <path class="light-green appear-left-delay" id="lgreen4" d="m 76.63115,5.592011 v 19.23694 L 18.920612,63.30268 V 44.065821 Z"
 
                                    inkscape:connector-curvature="0" sodipodi:nodetypes="ccccc" />
 
 
                                <path class="dark-grey" id="dgrey1" sodipodi:nodetypes="ccccc"
 
                                    inkscape:connector-curvature="0" d="m 76.631184,44.065871 v 19.23694 L 134.34178,101.77654 V 82.539681 Z" />
 
 
                                <path class="light-grey move-left appear-left" id="lgrey3" d="M 76.631184,44.066002 V 63.302811 L 18.920588,101.7766 V 82.539731 Z"
 
                                    inkscape:connector-curvature="0" sodipodi:nodetypes="ccccc" />
 
 
                                <path class="dark-green" id="dgreen1" sodipodi:nodetypes="ccccc"
 
                                    inkscape:connector-curvature="0" d="m 76.631184,82.539681 v 19.236859 l 57.710596,38.47379 v -19.23687 z" />
 
 
                                <path class="light-green" id="lgreen1" d="m 134.34175,44.065871 v 19.23694 L 76.631212,101.77654 V 82.539681 Z"
 
                                    inkscape:connector-curvature="0" sodipodi:nodetypes="ccccc" />
 
 
                                <path class="dark-grey" id="dgrey2" d="m 76.631184,121.01346 v 19.23681 l 57.710596,38.47384 v -19.23692 z"
 
                                    inkscape:connector-curvature="0" sodipodi:nodetypes="ccccc" />
 
 
                                <path class="dark-green disappear-left-delay" id="dgreen2" d="m 76.631184,159.48725 v 19.23686 l 57.710596,38.47378 v -19.23691 z"
 
                                    inkscape:connector-curvature="0" sodipodi:nodetypes="ccccc" />
 
 
                                <path class="light-green" id="lgreen2" sodipodi:nodetypes="ccccc"
 
                                    inkscape:connector-curvature="0" d="m 134.34178,121.01346 v 19.23681 l -57.710596,38.47384 v -19.23692 z" />
 
 
                                <path class="light-grey" id="lgrey1" d="M 134.34178,82.539731 V 101.77654 L 76.631184,140.25033 V 121.01346 Z"
 
                                    inkscape:connector-curvature="0" sodipodi:nodetypes="ccccc" />
 
 
                                <path class="dark-grey disappear-left" id="dgrey3" sodipodi:nodetypes="ccccc"
 
                                    inkscape:connector-curvature="0" d="m 76.631184,197.96103 v 19.23686 l 57.710596,38.47385 v -19.23692 z" />
 
 
                                <path class="light-grey disappear-right-delay" id="lgrey2" sodipodi:nodetypes="ccccc"
 
                                    inkscape:connector-curvature="0" d="m 134.34178,159.4873 v 19.23681 l -57.710596,38.47378 v -19.23691 z" />
 
 
                                <path class="light-green disappear-right" id="lgreen3" d="m 134.34178,197.96103 v 19.23686 l -57.710596,38.47385 v -19.23692 z"
 
                                    inkscape:connector-curvature="0" sodipodi:nodetypes="ccccc" />
 
 
                            </g>
 
                        </g>
 
                    </svg>
 
                </div>
 
            </div>
 
        </div>
 
        <!-- Page 2 -->
 
        <div class="section">
 
            <div style="padding: 6%" style="transform: translateY(20%)">
 
                <h1 style="text-align: left; transform: translateX(20px); color: #44414d">The ideal medicine is not a
 
                    perfect treatment
 
                    . . .</h1>
 
                <br>
 
                <br>
 
                <br>
 
                <br>
 
                <h1 style="text-align: right; transform: translateX(-20px); color: #44414d">. . . it's a <span style="color: #7ccfb8">cure</span></h1>
 
            </div>
 
        </div>
 
        <!-- Page 3 -->
 
        <div class="section">
 
            <div style="padding: 6%" class="row">
 
                <div>
 
                    <p style="text-align: left">
 
                        Advancements in genetic modification have opened avenues towards numerous tracks of scientific
 
                        development. In particular,
 
                        the demand for permanent health solutions has sparked massive interest in gene therapy.
 
                    </p>
 
                </div>
 
                <br>
 
                <div>
 
                    <p style="text-align: left">
 
                        Despite the potential for establishing an ideal medicine, there are still numerous challenges.
 
                        The selection of an integration target site,
 
                        methodology pertaining to gene
 
                        delivery, and maintenance of gene expression currently limit the potential for gene therapy
 
                        to become common practice.
 
                    </p>
 
                </div>
 
            </div>
 
 
        </div>
 
        <!-- Page 4 -->
 
        <div class="section">
 
            <div style="padding: 6%">
 
                <h1>How do we overcome these problems?</h1>
 
                <br><br>
 
                <h1 class="home-title">SNIP
 
                    <span style="color: #7ccfb8">EQUIP</span> FLIP</h1>
 
 
                <p style="text-align: center; font-size: 20px">The system that allows for the integration and
 
                    maintenance
 
                    of
 
                    large-scale genetic
 
                    constructs in eukaryotic systems.</p>
 
            </div>
 
        </div>
 
        <!-- Page 5 -->
 
        <div class="section">
 
            <div style="padding: 6%" class="row">
 
                <div class="col-lg-6 info">
 
                    <p style="text-align: left">
 
                        University of Calgary’s Snip, Equip, Flip aims to overcome the aforementioned obstacles.
 
                        This system allows
 
                        for the creation of eukaryotic cell lines via stable integration and expression of exogenous
 
                        genes.
 
                        <br><br>
 
                        Snip, Equip, Flip is a simple and reliable method that can be used by experienced and entrant
 
                        researchers
 
                        alike that can lead to a vast array of scientific discoveries.
 
                    </p>
 
                </div>
 
                <div class="col-lg-6 info">
 
                    <p style="text-align: left">
 
                        By complementing the specificity of targeting that CRISPR/Cas9 offers with the much larger
 
                        integration
 
                        capabilities of FLP recombinase and beta resolvase, gene integration into eukaryotic genomes
 
                        becomes a
 
                        simple process of Snip, Equip, Flip.
 
                        <br><br>
 
                        The expression of integrated genes is then protected and maintained over time by adding
 
                        flanking
 
                        chromatin modifying elements.
 
                    </p>
 
                </div>
 
            </div>
 
 
        </div>
 
        <!-- Page 6 -->
 
        <div class="section">
 
            <div style="text-align: center">
 
                <a href="https://2018.igem.org/Team:Calgary/Description"><button style="font-size: 20px" type="button"
 
                        class="btn btn-outline-dark btn-lg">Our
 
                        System</button></a>
 
            </div>
 
        </div>
 
    </div>
 
    <!-- Social Media -->
 
 
 
     <!-- Arrow Keys -->
 
     <!-- Arrow Keys -->
 
     <div class="bottom-right">
 
     <div class="bottom-right">

Revision as of 01:41, 18 October 2018

Team:Calgary - 2018.igem.org

SNIP EQUIP FLIP

image/svg+xml

The ideal medicine is not a perfect treatment . . .





. . . it's a cure

Advancements in genetic modification have opened avenues towards numerous tracks of scientific development. In particular, the demand for permanent health solutions has sparked massive interest in gene therapy.


Despite the potential for establishing an ideal medicine, there are still numerous challenges. The selection of an integration target site, methodology pertaining to gene delivery, and maintenance of gene expression currently limit the potential for gene therapy to become common practice.

How do we overcome these problems?



SNIP EQUIP FLIP

The system that allows for the integration and maintenance of large-scale genetic constructs in eukaryotic systems.

University of Calgary’s Snip, Equip, Flip aims to overcome the aforementioned obstacles. This system allows for the creation of eukaryotic cell lines via stable integration and expression of exogenous genes.

Snip, Equip, Flip is a simple and reliable method that can be used by experienced and entrant researchers alike that can lead to a vast array of scientific discoveries.

By complementing the specificity of targeting that CRISPR/Cas9 offers with the much larger integration capabilities of FLP recombinase and beta resolvase, gene integration into eukaryotic genomes becomes a simple process of Snip, Equip, Flip.

The expression of integrated genes is then protected and maintained over time by adding flanking chromatin modifying elements.

image/svg+xml Use arrow keys
or scroll