Difference between revisions of "Team:NTU-Singapore/HP/Silver"

(Prototype team page)
 
Line 1: Line 1:
 
{{NTU-Singapore}}
 
{{NTU-Singapore}}
−
<html>
+
<html lang="en">
  
 +
<head>
  
 +
    <meta charset="utf-8">
 +
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 +
    <meta name="viewport" content="width=device-width, initial-scale=1">
 +
    <meta name="description" content="">
 +
    <meta name="author" content="">
  
−
<div class="column full_size judges-will-not-evaluate">
+
    <title>NTU-Singapore</title>
−
<h3>★  ALERT! </h3>
+
−
<p>This page is used by the judges to evaluate your team for the <a href="https://2016.igem.org/Judging/Medals">human practices silver medal criterion</a>. </p>
+
  
 +
    <!-- Bootstrap Core CSS
 +
    <link href="css/bootstrap.css" rel="stylesheet">-->
  
−
<p> Delete this box in order to be evaluated for this medal. See more information at <a href="https://2016.igem.org/Judging/Pages_for_Awards/Instructions"> Instructions for Pages for awards</a>.</p>
+
    <!-- Custom CSS -->
−
</div>
+
    <link href="css/sb-admin.css" rel="stylesheet">
  
 +
    <!-- Custom Fonts -->
 +
<script src="https://use.fontawesome.com/597ba5ca72.js"></script>
 +
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
 +
<link href="https://fonts.googleapis.com/css?family=Amatic+SC:700|Annie+Use+Your+Telescope|Gloria+Hallelujah|Just+Me+Again+Down+Here|Nothing+You+Could+Do|Reenie+Beanie|Rock+Salt|Schoolbell|Shadows+Into+Light|Sue+Ellen+Francisco" rel="stylesheet">
 +
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
 +
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
 +
    <!--[if lt IE 9]>
 +
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
 +
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
 +
    <![endif]-->
  
 +
</head>
  
−
<div class="column full_size">
+
<body>
  
−
<p>iGEM teams are unique and leading the field because they "go beyond the lab" to imagine their projects in a social/environmental context, to better understand issues that might influence the design and use of their technologies.</p>
+
    <div id="wrapper">
−
<p>Teams work with students and advisors from the humanities and social sciences to explore topics concerning ethical, legal, social, economic, safety or security issues related to their work. Consideration of these Human Practices is crucial for building safe and sustainable projects that serve the public interest. </p>
+
 
−
<p>For more information, please see the <a href="https://2016.igem.org/Human_Practices">Human Practices Hub</a>.</p>
+
        <!-- Navigation -->
 +
        <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
 +
            <!-- Brand and toggle get grouped for better mobile display -->
 +
            <div class="navbar-header">
 +
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
 +
                    <span class="sr-only">Toggle navigation</span>
 +
                    <span class="icon-bar"></span>
 +
                    <span class="icon-bar"></span>
 +
                    <span class="icon-bar"></span>
 +
                </button>
 +
                <a class="navbar-brand" href="index.html">NTU-Singapore</a>
 +
            </div>
 +
            <!-- Top Menu Items -->
 +
            <ul class="nav navbar-right top-nav">
 +
<!-- <li class="dropdown">
 +
<a href="javascript:;" data-toggle="collapse" data-target="#demo"><i class="fa fa-fw fa-arrows-v"></i> Dropdown <i class="fa fa-fw fa-caret-down"></i></a>
 +
<ul id="demo" class="collapse">
 +
<li>
 +
<a href="#">Dropdown Item</a>
 +
</li>
 +
<li>
 +
<a href="#">Dropdown Item</a>
 +
</li>
 +
</ul>
 +
                </li>  -->
 +
<li class="dropdown">
 +
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-2x fa-home"></i> <span class="navbar-name"> Home</span> </a>
 +
</li>
 +
 
 +
 
 +
<!-- <li class="dropdown">
 +
<a href="javascript:;" data-toggle="collapse" data-target="#demo"><i class="fa fa-fw fa-arrows-v"></i> Dropdown <i class="fa fa-fw fa-caret-down"></i></a>
 +
<ul id="demo" class="collapse">
 +
<li>
 +
<a href="#">Dropdown Item</a>
 +
</li>
 +
<li>
 +
<a href="#">Dropdown Item</a>
 +
</li>
 +
</ul>
 +
</li> -->
 +
 +
                <li class="dropdown">
 +
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-2x fa-globe"></i><span class="navbar-name"> Collaboration</span></a>
 +
</li>
 +
 +
<li class="dropdown">
 +
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-2x fa-flask"></i><span class="navbar-name"> Projects</span><b class="caret"></b></a>
 +
<ul class="dropdown-menu dropdown-menu-project">
 +
<li>
 +
<a href="#"><i class="fa fa-2x fa-balance-scale"></i><span style="top: -34px; float: left; left: 50px;"class="navbar-name"> Interlab Measurement </span> </a>
 +
</li>
 +
<li>
 +
<a href="#"><i class="fa fa-fw fa-2x fa-book"></i><span style="left: 9px;" class="navbar-name"> Description</span> </a>
 +
</li>
 +
 
 +
<li>
 +
<a href="#"><i class="fa fa-2x fa-paint-brush"></i><span style="left: 16px;" class="navbar-name"> Design</span> </a>
 +
</li>
 +
<li>
 +
<a href="#" style="height: 49px;"><i class="fa fa-2x  fa-bar-chart" style="float: left;"></i><span style="width: 96px;
 +
left: 10px;
 +
float: left;
 +
margin-left: 6px;
 +
top: -6px;" class="navbar-name"> Proof of concept</span> </a>
 +
</li>
 +
<li>
 +
<a href="#"><i class="fa fa-2x  fa-space-shuttle"></i><span style="left: 9px;" class="navbar-name"> Demonstrate</span> </a>
 +
</li>
 +
 +
</ul>
 +
 +
</li>
 +
<li class="dropdown">
 +
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-2x  fa-group"></i><span class="navbar-name"> Human Practice</span>  <b class="caret"></b></a>
 +
<ul class="dropdown-menu dropdown-menu-humanprac">
 +
<li>
 +
<a href="#"><i class="fa fa-fw fa-2x fa-user"></i><span class="navbar-name"> Silver</span> </a>
 +
</li>
 +
<li>
 +
<a href="#"><i class="fa fa-fw fa-2x fa-envelope"></i><span class="navbar-name"> Gold</span> </a>
 +
</li>
 +
<li>
 +
<a href="#"><i class="fa fa-fw fa-2x fa-heartbeat"></i><span class="navbar-name"> Engagement</span></a>
 +
</li>
 +
</ul>
 +
 +
</li>
 +
<li class="dropdown">
 +
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-2x fa-gears"></i><span class="navbar-name"> Parts</span>  <b class="caret"></b></a>
 +
<ul class="dropdown-menu">
 +
<li>
 +
<a href="#"><i class="fa fa-fw fa-2x fa-gear"></i><span style="left: 5px;"class="navbar-name"> Basic Parts</span> </a>
 +
</li>
 +
<li>
 +
<a href="#"><i class="fa fa-fw fa-2x fa-gavel"></i><span style="left: 5px;" class="navbar-name"> Composite Part</span> </a>
 +
</li>
 +
<li>
 +
<a style="height: 49px" href="#"><i style="float: left;" class="fa fa-fw fa-2x fa-briefcase"></i><span style="    float: left;
 +
width: 96px;
 +
top: -7px;
 +
left: 10px;" class="navbar-name"> Parts Collection</span> </a>
 +
</li>
 +
 +
 +
</ul>
 +
 +
</li>
 +
 +
 +
<li class="dropdown">
 +
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-2x fa-key"></i><span class="navbar-name"> Attribution</span>  </a>
 +
 +
</li>
 +
 
 +
 
 +
 
 +
            </ul>
 +
            <!-- Sidebar Menu Items - These collapse to the responsive navigation menu on small screens
 +
            <div class="collapse navbar-collapse navbar-ex1-collapse">
 +
                <ul class="nav navbar-nav side-nav">
 +
                    <li>
 +
                        <a href="index.html"><i class="fa fa-fw fa-dashboard"></i> Dashboard</a>
 +
                    </li>
 +
                    <li>
 +
                        <a href="charts.html"><i class="fa fa-fw fa-bar-chart-o"></i> Charts</a>
 +
                    </li>
 +
                    <li>
 +
                        <a href="tables.html"><i class="fa fa-fw fa-table"></i> Tables</a>
 +
                    </li>
 +
                    <li>
 +
                        <a href="forms.html"><i class="fa fa-fw fa-edit"></i> Forms</a>
 +
                    </li>
 +
                    <li class="active">
 +
                        <a href="bootstrap-elements.html"><i class="fa fa-fw fa-desktop"></i> Bootstrap Elements</a>
 +
                    </li>
 +
                    <li>
 +
                        <a href="bootstrap-grid.html"><i class="fa fa-fw fa-wrench"></i> Bootstrap Grid</a>
 +
                    </li>
 +
                    <li>
 +
                        <a href="javascript:;" data-toggle="collapse" data-target="#demo"><i class="fa fa-fw fa-arrows-v"></i> Dropdown <i class="fa fa-fw fa-caret-down"></i></a>
 +
                        <ul id="demo" class="collapse">
 +
                            <li>
 +
                                <a href="#">Dropdown Item</a>
 +
                            </li>
 +
                            <li>
 +
                                <a href="#">Dropdown Item</a>
 +
                            </li>
 +
                        </ul>
 +
                    </li>
 +
                    <li>
 +
                        <a href="blank-page.html"><i class="fa fa-fw fa-file"></i> Blank Page</a>
 +
                    </li>
 +
                    <li>
 +
                        <a href="index-rtl.html"><i class="fa fa-fw fa-dashboard"></i> RTL Dashboard</a>
 +
                    </li>
 +
                </ul>
 +
            </div> -->
 +
            <!-- /.navbar-collapse -->
 +
        </nav>
 +
 
 +
        <div id="page-wrapper" >
 +
 
 +
            <div class="container-fluid" style="height:650px;">
 +
 
 +
                <!-- Page Heading
 +
                <div class="row">
 +
                    <div class="col-lg-12">
 +
                        <h1 class="page-header">
 +
                            Bootstrap Elements
 +
                        </h1>
 +
                        <ol class="breadcrumb">
 +
                            <li>
 +
                                <i class="fa fa-dashboard"></i>  <a href="index.html">Dashboard</a>
 +
                            </li>
 +
                            <li class="active">
 +
                                <i class="fa fa-desktop"></i> Bootstrap Elements
 +
                            </li>
 +
                        </ol>
 +
                    </div>
 +
                </div>
 +
                <!-- /.row -->
 +
 
 +
                <!-- Main jumbotron for a primary marketing message or call to action -->
 +
                <div class="jumbotron content-page" style="font-family: 'Just Me Again Down Here', cursive;">
 +
<h1 style="font-size: 70px;"><span style="color: #0089A7; ">CRISPRy</span> Public Sharing</h1>
 +
<p style="font-family: 'Annie Use Your Telescope', cursive; font-size: 31px;">With informing the community about CRISPR gene therapy in mind, we devised a method to customise Cas9 models for 3D printing. The 3D models were used for public education in a nation-wide exhibition. Yay!!</p>
 +
</div>
 +
 
 +
<div class="content-overview">
 +
 +
<div class="circle-overview circle1" style="width: 300px;
 +
height: 150px;">
 +
<a href="#3dprint" class="overview-content"><br><br>Protein 3D printing</a>
 +
</div>
 +
<div class="circle-overview circle3" style="width: 300px;
 +
height: 150px; margin-left:442px">
 +
<a href="#separator-exhibition" class="overview-content"><br><br>CRISPR Exhibition</a>
 +
</div>
 +
 +
</div>
 +
<br><br><br><br>
 +
 +
</div>
 +
<div class="separator" id="3dprint" style="border-bottom: 0px;">
 +
 +
</div>
 +
 +
<div class="page-header">
 +
<h1>Protein 3D printing</h1>
 +
</div>
 +
<div class="well">
 +
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
 +
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
 +
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
 +
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
 +
</div>
 +
 +
<div class="separator" id="separator-exhibition">
 +
 +
</div>
 +
 +
<div id="exhibition" class="page-header">
 +
<h1>CRISPR Exhibition</h1>
 +
</div>
 +
<div class="well">
 +
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
 +
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
 +
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
 +
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
 +
</div>
 +
<!-- /.container-fluid -->
 +
<div style="height: 150px; background-color: rgba(120,194,196,1);">
 +
 
</div>
 
</div>
 +
        </div>
 +
        <!-- /#page-wrapper -->
 +
 +
    </div>
 +
    <!-- /#wrapper -->
 +
 +
    <!-- jQuery -->
 +
    <script src="js/jquery.js"></script>
 +
 +
    <!-- Bootstrap Core JavaScript -->
 +
    <script src="js/bootstrap.js"></script>
  
 +
</body>
  
 
</html>
 
</html>

Revision as of 18:21, 5 October 2016

NTU-Singapore

CRISPRy Public Sharing

With informing the community about CRISPR gene therapy in mind, we devised a method to customise Cas9 models for 3D printing. The 3D models were used for public education in a nation-wide exhibition. Yay!!



Protein 3D printing


CRISPR Exhibition




Protein 3D printing

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.

CRISPR Exhibition

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.