Difference between revisions of "Team:Calgary/Layout"

Line 1: Line 1:
 +
{{:Team:Calgary/Layout}}
 
<html lang="en">
 
<html lang="en">
  
 
<head>
 
<head>
−
     <meta charset="UTF-8">
+
     <title>Team:Calgary - 2018.igem.org</title>
−
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
−
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+
 
     <!-- CSS -->
 
     <!-- CSS -->
−
     <link rel="stylesheet" href="https://2018.igem.org/Team:Calgary/WikiResetCSSImposter?action=raw&ctype=text/css">
+
     <link rel="stylesheet" href="https://2018.igem.org/Team:Calgary/jquery_fullPage_css?action=raw&ctype=text/css">
−
    <link rel="stylesheet" href="https://2018.igem.org/Team:Calgary/bootstrap_min_css?action=raw&ctype=text/css">
+
−
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Josefin+Sans">
+
 
     <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://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/jquery_fullPage_css?action=raw&ctype=text/css">
 
−
    <link rel="stylesheet" href="https://2018.igem.org/Team:Calgary/animation_css?action=raw&ctype=text/css">
 
−
    <link rel="stylesheet" href="https://2018.igem.org/Team:Calgary/layout_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">
 
     <link rel="stylesheet" href="https://2018.igem.org/Team:Calgary/animation_css?action=raw&ctype=text/css">
−
  <link rel="stylesheet" href="https://2018.igem.org/Team:Calgary/ProjectCSS_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;
 +
            line-height: 1.2;
 +
            font-size: 1.6rem;
 +
        }
 +
 
 +
        p {
 +
            font-size: 20px !important;
 +
            line-height: 2;
 +
        }
 +
 
 +
        .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;
 +
        }
 +
 
 +
        #team-photo {
 +
            padding-bottom: 1%;
 +
            padding-left: 10%;
 +
            padding-right: 10%;
 +
            padding-top: 1%;
 +
            width: 75%;
 +
            display: block;
 +
            margin: 0 auto;
 +
        }
 +
 
 +
        @media only screen and (max-width: 1050px) {
 +
            .bottom-left {
 +
                display: none;
 +
            }
 +
 
 +
            .bottom-right {
 +
                display: none;
 +
            }
 +
        }
 +
 
 +
        @media only screen and (max-width: 400px) {
 +
            h2 {
 +
                font-size: 18px;
 +
            }
 +
 
 +
            .home-title {
 +
                color: #44414d;
 +
                font-size: 26px;
 +
            }
 +
 
 +
            #home-subtitle {
 +
                color: #44414d;
 +
                font-size: 16px;
 +
            }
 +
 
 +
            .fp-tableCell {
 +
                display: block;
 +
                height: 100% !important;
 +
                padding-bottom: 0;
 +
                padding-top: 0;
 +
            }
 +
 
 +
            .fp-table {
 +
                height: 100% !important;
 +
            }
 +
         
 +
            .section-content {
 +
                height: 50vh;
 +
            }
 +
        }
 +
    </style>
 
     <!-- JS -->
 
     <!-- JS -->
−
    <script src="https://2018.igem.org/Team:Calgary/jquery_3_3_1_min_js?action=raw&ctype=text/javascript"></script>
 
 
     <script src="https://2018.igem.org/Team:Calgary/jquery_fullPage_js?action=raw&ctype=text/javascript"></script>
 
     <script src="https://2018.igem.org/Team:Calgary/jquery_fullPage_js?action=raw&ctype=text/javascript"></script>
 
     <script>
 
     <script>
Line 25: Line 179:
 
                 loopBottom: true,
 
                 loopBottom: true,
 
                 loopTop: true,
 
                 loopTop: true,
−
                 responsiveWidth: 750,
+
                 responsiveWidth: 1050,
−
                responsiveHeight: 400,
+
 
                 afterResponsive: function (isResponsive) { }
 
                 afterResponsive: function (isResponsive) { }
 
             });
 
             });
 
         });
 
         });
−
    window.onscroll = function() {scrollFunction()};
 
−
 
−
function scrollFunction() {
 
−
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
 
−
        document.getElementById("topBtn").style.display = "block";
 
−
    } else {
 
−
        document.getElementById("topBtn").style.display = "none";
 
−
    }
 
−
}
 
−
 
−
// When the user clicks on the button, scroll to the top of the document
 
−
function topFunction() {
 
−
    document.body.scrollTop = 0;
 
−
    document.documentElement.scrollTop = 0;
 
−
}
 
−
 
 
     </script>
 
     </script>
−
    <script src="https://2018.igem.org/Team:Calgary/bootstrap_min_js?action=raw&ctype=text/javascript"></script>
 
 
</head>
 
</head>
  
 
<body>
 
<body>
−
     <button onclick="topFunction()" id="topBtn" title="Go to top">TOP</button>
+
     <!-- Content -->
−
    <!-- Header -->
+
    <div class="container" id="fullpage">
−
    <nav class="navbar navbar-expand-lg navbar-light">
+
        <!-- Description -->
−
        <a class="navbar-brand" href="https://2018.igem.org/Team:Calgary">
+
        <div class="section">
−
            <img class="navbar-logo" src="https://static.igem.org/mediawiki/2018/4/43/T--Calgary--LogoNavOff.png">
+
            <div class="row vertical-align">
−
        </a>
+
                <div class="col-10">
−
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
+
                    <h1 class="home-title">SNIP
−
            <span class="navbar-toggler-icon"></span>
+
                        <span style="color: #7ccfb8">EQUIP</span> FLIP</h1>
−
        </button>
+
                </div>
−
        <div class="collapse navbar-collapse" id="navbarNavDropdown">
+
                <div class="col-2">
−
            <ul class="navbar-nav">
+
                    <svg style="width: 50%" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#"
−
                <li class="nav-item dropdown">
+
                        xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg"
−
                    <a class="nav-link underline-animation" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+
                        xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
−
                        Project
+
                        xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" viewBox="0 0 79.80928 292.63452"
−
                    </a>
+
                        version="1.1" id="moving-helix" inkscape:version="0.92.3 (2405546, 2018-03-11)"
−
                    <div class="dropdown-menu dropdown-menu-center" aria-labelledby="navbarDropdownMenuLink">
+
                        sodipodi:docname="Helix.svg">
−
                         <a class="dropdown-item" href="https://2018.igem.org/Team:Calgary/Description">Description</a>
+
                        <defs id="defs1848" />
−
                      <a class="dropdown-item" href="https://2018.igem.org/Team:Calgary/CRISPR">CRISPR</a>
+
                        <sodipodi:namedview id="base" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0"
−
                        <a class="dropdown-item" href="https://2018.igem.org/Team:Calgary/FLP-Beta">FLP-Beta</a>
+
                            inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="0.64" inkscape:cx="40.612564"
−
                        <a class="dropdown-item" href="https://2018.igem.org/Team:Calgary/Chromatin_Modifying_Elements">CME</a>
+
                            inkscape:cy="524.45313" inkscape:document-units="mm" inkscape:current-layer="layer1"
−
                      <a class="dropdown-item" href="https://2018.igem.org/Team:Calgary/Applied_Design">Product Design</a>
+
                            showgrid="false" inkscape:window-width="1920" inkscape:window-height="1017"
−
                         <a class="dropdown-item" href="https://2018.igem.org/Team:Calgary/Model">Modelling</a>
+
                            inkscape:window-x="-8" inkscape:window-y="32" inkscape:window-maximized="1" borderlayer="false"
−
                        <a class="dropdown-item" href="https://2018.igem.org/Team:Calgary/Software">Software</a>
+
                            fit-margin-top="0" fit-margin-left="0" fit-margin-right="0" fit-margin-bottom="0"
−
                        <a class="dropdown-item" href="https://2018.igem.org/Team:Calgary/Results">Results</a>
+
                            showborder="false" />
−
                    </div>
+
                         <metadata id="metadata1851">
−
                </li>
+
                            <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)">
  
−
                <li class="nav-item dropdown">
+
                                <path class="dark-grey appear-right-delay" id="dgrey4" sodipodi:nodetypes="ccccc"
−
                    <a class="nav-link underline-animation" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+
                                    inkscape:connector-curvature="0" d="m 134.34178,5.592011 v 19.23694 l 57.7106,38.473729 V 44.065821 Z" />
−
                        Notebook
+
−
                    </a>
+
−
                    <div class="dropdown-menu dropdown-menu-center" aria-labelledby="navbarDropdownMenuLink">
+
−
                        <a class="dropdown-item" href="https://2018.igem.org/Team:Calgary/Notebook">Journals</a>
+
−
                        <a class="dropdown-item" href="https://2018.igem.org/Team:Calgary/Protocols">Protocols</a>
+
−
                    </div>
+
−
                </li>
+
  
−
                <li class="nav-item dropdown">
+
                                <path class="dark-green move-right appear-right" id="dgreen3" sodipodi:nodetypes="ccccc"
−
                    <a class="nav-link underline-animation" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+
                                    inkscape:connector-curvature="0" d="m 134.34175,44.065952 v 19.236859 l 57.7106,38.473789 V 82.539731 Z" />
−
                        Team
+
−
                    </a>
+
−
                    <div class="dropdown-menu dropdown-menu-center" aria-labelledby="navbarDropdownMenuLink">
+
−
                        <a class="dropdown-item" href="https://2018.igem.org/Team:Calgary/Team">Team Members</a>
+
−
                        <a class="dropdown-item" href="https://2018.igem.org/Team:Calgary/Attributions">Attributions</a>
+
−
                        <a class="dropdown-item" href="https://2018.igem.org/Team:Calgary/Sponsors">Sponsors</a>
+
−
                        <a class="dropdown-item" href="https://2018.igem.org/Team:Calgary/Contact_Us">Contact Us</a>
+
−
                    </div>
+
−
                </li>
+
  
−
                <li class="nav-item dropdown">
+
                                <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"
−
                    <a class="nav-link underline-animation" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+
                                    inkscape:connector-curvature="0" sodipodi:nodetypes="ccccc" />
−
                        Human Practices
+
−
                    </a>
+
−
                    <div class="dropdown-menu dropdown-menu-center" aria-labelledby="navbarDropdownMenuLink">
+
−
                        <a class="dropdown-item" href="https://2018.igem.org/Team:Calgary/Human_Practices">Summary</a>
+
−
                        <a class="dropdown-item" href="https://2018.igem.org/Team:Calgary/Human_Practices/Silver">Silver</a>
+
−
                        <a class="dropdown-item" href="https://2018.igem.org/Team:Calgary/Human_Practices/Gold_Integrated">Integrated</a>
+
−
                        <a class="dropdown-item" href="https://2018.igem.org/Team:Calgary/Collaborations">Collaborations</a>
+
−
                        <a class="dropdown-item" href="https://2018.igem.org/Team:Calgary/Public_Engagement">Public Engagement</a>
+
−
                        <a class="dropdown-item" href="https://2018.igem.org/Team:Calgary/Safety">Safety</a>
+
−
                    </div>
+
−
                </li>
+
  
−
                <li class="nav-item dropdown">
+
                                <path class="dark-grey" id="dgrey1" sodipodi:nodetypes="ccccc"
−
                    <a class="nav-link underline-animation" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+
                                    inkscape:connector-curvature="0" d="m 76.631184,44.065871 v 19.23694 L 134.34178,101.77654 V 82.539681 Z" />
−
                        Judging
+
−
                    </a>
+
−
                    <div class="dropdown-menu dropdown-menu-center" aria-labelledby="navbarDropdownMenuLink">
+
−
                        <a class="dropdown-item" href="https://2018.igem.org/Team:Calgary/MedalRequirements">Medal Requirements</a>
+
−
                        <a class="dropdown-item" href="https://2018.igem.org/Team:Calgary/Parts">Parts</a>
+
−
                        <a class="dropdown-item" href="https://2018.igem.org/Team:Calgary/Improve">Improved Part</a>
+
−
                        <a class="dropdown-item" href="https://2018.igem.org/Team:Calgary/InterLab">Interlab</a>
+
−
                    </div>
+
−
                </li>
+
  
−
             </ul>
+
                                <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 class="section-content">
 +
                <h2 style="text-align: left; color: #44414d">The ideal medicine is not a perfect treatment . . .</h2>
 +
                <br>
 +
                <br>
 +
                <h2 style="text-align: right; color: #44414d">. . . it's a <span style="color: #7ccfb8">cure</span></h2>
 +
            </div>
 +
        </div>
 +
        <!-- Page 3 -->
 +
        <div class="section">
 +
            <div class="section-content">
 +
                <h2 style="text-align: left; color: #44414d">Advancements in genetic modification have opened avenues towards numerous tracks of scientific development.</h2>
 +
                <br>
 +
                <br>
 +
                <h2 style="text-align: left; color: #44414d">In particular, the demand for permanent health solutions has sparked massive interest in <span style="color: #7ccfb8">gene therapy</span>.</h2>
 +
            </div>
 +
        </div>
 +
        <!-- Page 4 -->
 +
        <div class="section">
 +
            <div class="section-content">
 +
                <h2 style="text-align: left; color: #44414d">Despite the potential for establishing an ideal medicine, there are still numerous challenges.</h2>
 +
                <br>
 +
                <br>
 +
                <h2 style="text-align: left; color: #44414d">The selection of an <span style="color: #7ccfb8">integration target site</span>, methodology pertaining to <span style="color: #7ccfb8">gene delivery</span>, and <span style="color: #7ccfb8">maintenance</span> of gene expression currently limit the potential for gene therapy to become common practice.</h2>
 +
            </div>
 +
        </div>
 +
        <!-- Page 5 -->
 +
        <div class="section">
 +
            <div class="section-content">
 +
                <h2 style="text-align: center; color: #44414d">How do we overcome these problems?</h2>
 +
                <br>
 +
                <br>
 +
                <h2 style="text-align: center; color: #44414d" class="home-title">SNIP <span style="color: #7ccfb8">EQUIP</span> FLIP</h2>
 +
                <br>
 +
                <h2 style="text-align: center; color: #44414d">The system that allows for the integration and maintenance of large-scale genetic constructs in eukaryotic systems.</h2>
 +
            </div>
 +
        </div>
 +
        <!-- Page 6 -->
 +
        <div class="section">
 +
            <div class="section-content">
 +
                <h2 style="text-align: left; color: #44414d">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.</h2>
 +
                <br>
 +
                <br>
 +
                <h2 style="text-align: left; color: #44414d">Snip, Equip, Flip is a simple and reliable method that can be used by experienced and entrant researchers alike and may facilitate a vast array of scientific discoveries.</h2>
 +
            </div>
 +
        </div>
 +
        <!-- Page 7 -->
 +
        <div class="section">
 +
            <div class="section-content">
 +
                <h2 style="text-align: left; color: #44414d">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.</h2>
 +
                <br>
 +
                <br>
 +
                <h2 style="text-align: left; color: #44414d">The expression of integrated genes is then protected and maintained over time by adding flanking chromatin modifying elements.</h2>
 +
                <br>
 +
                <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">Learn more about our system here</button></a>
 +
                </div>
 +
             </div>
 
         </div>
 
         </div>
−
     </nav>
+
     </div>
−
     <!-- Social Media -->
+
     <!-- Achievement Tab -->
−
     <div class="bottom-left">
+
     <div class="top-right">
 
         <ul id="social-media-icons">
 
         <ul id="social-media-icons">
 
             <li>
 
             <li>
−
                 <a class="social-media-link" href="https://www.facebook.com/igemcalgary/" target="_blank">
+
                 <i class="far fa-turkey social-media-icon" aria-hidden="true"></i>
−
                    <i class="fab fa-facebook-f social-media-icon" aria-hidden="true"></i>
+
−
                </a>
+
−
            </li>
+
−
            <li>
+
−
                <a class="social-media-link" href="https://www.instagram.com/igemcalgary/?hl=en" target="_blank">
+
−
                    <i class="fab fa-instagram social-media-icon" aria-hidden="true"></i>
+
−
                </a>
+
−
            </li>
+
−
            <li>
+
−
                <a class="social-media-link" href="https://twitter.com/igemcalgary?lang=en" target="_blank">
+
−
                    <i class="fab fa-twitter social-media-icon" aria-hidden="true"></i>
+
−
                </a>
+
 
             </li>
 
             </li>
 
             <li>
 
             <li>
−
                 <a class="social-media-link" href="https://2018.igem.org/Team:Calgary/Contact_Us" target="_blank">
+
                 <i class="far fa-laptop social-media-icon" aria-hidden="true"></i>
−
                    <i class="far fa-envelope social-media-icon" aria-hidden="true"></i>
+
−
                </a>
+
 
             </li>
 
             </li>
 
         </ul>
 
         </ul>
 +
    </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>
 
     </div>
 
</body>
 
</body>
  
 
</html>
 
</html>

Revision as of 22:19, 25 November 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 and may facilitate 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