Team:Cambridge-JIC/Notebook

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
-
<!-- *** What falls between these lines is the Alert Box!  You can remove it from your pages once you have read and understood the alert *** -->
+
<!DOCTYPE html>
 +
<html lang="en">
 +
<head>
 +
    <meta charset="utf-8">
 +
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 +
    <meta name="description" content="">
 +
    <meta name="author" content="">
-
{{CSS/Main}}
+
    <title>Landing Page Template for Bootstrap</title>
 +
    <!-- Bootstrap core CSS -->
 +
            <!-- Latest compiled and minified CSS -->
 +
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
-
<html>
+
        <!-- Optional theme -->
 +
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
-
<!--main content -->
+
        <!-- Latest compiled and minified JavaScript -->
-
<table width="70%" align="center">
+
        <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
 +
    <!-- Custom Google Web Font -->
 +
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet">
 +
    <link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
-
<tr>  
+
    <!-- Add custom CSS here -->
 +
    <link href="css/landing-page.css" rel="stylesheet">
-
<!--navigation menu -->
+
</head>
-
<td align="center" colspan="3">
+
-
<table  width="100%">
+
<body>
-
<tr heigth="15px"></tr>
+
-
<tr heigth="75px">  
+
 +
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
 +
        <div class="container">
 +
            <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="http://startbootstrap.com">iGEM</a>
 +
            </div>
-
<td style="border:1px solid black;" align="center" height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>
+
            <!-- Collect the nav links, forms, and other content for toggling -->
-
<a href="https://2014.igem.org/Team:Cambridge-JIC"style="color:#000000">Home </a> </td>
+
            <div class="collapse navbar-collapse navbar-right navbar-ex1-collapse">
 +
                <ul class="nav navbar-nav">
 +
                    <li><a href="#about">About</a>
 +
                    </li>
 +
                    <li><a href="#services">Notes</a>
 +
                    </li>
 +
                    <li><a href="#contact">Project</a>
 +
                    </li>
 +
                    <li><a href="#Team">Team</a>
 +
                    </li>
 +
                    <li><a href="#Modelling">Modelling</a>
 +
                    </li>
 +
                    <li><a href="#Safety">Safety</a>
 +
                    </li>
 +
                </ul>
 +
            </div>
 +
            <!-- /.navbar-collapse -->
 +
        </div>
 +
        <!-- /.container -->
 +
    </nav>
-
<td style="border:1px solid black;" align="center" height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>
+
    <div class="intro-header">
-
<a href="https://2014.igem.org/Team:Cambridge-JIC/Team"style="color:#000000"> Team </a> </td>
+
-
<td style="border:1px solid black;" align="center"  height ="45px"  onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>
+
        <div class="container">
-
<a href="https://igem.org/Team.cgi?year=2014&team_name=Cambridge-JIC"style="color:#000000"> Official Team Profile </a></td>
+
-
<td style="border:1px solid black" align="center" height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>
+
            <div class="row">
-
<a href="https://2014.igem.org/Team:Cambridge-JIC/Project"style="color:#000000"> Project</a></td>
+
                <div class="col-lg-12">
 +
                    <div class="intro-message">
 +
                        <h1>Cambrdige JIC</h1>
 +
                        <h4>the International Genetically Engingeered Machine Competition</h4>
 +
                        <hr class="intro-divider">
 +
                        <ul class="list-inline intro-social-buttons">
 +
                            <li><a href="https://twitter.com/SBootstrap" class="btn btn-default btn-lg"><i class="fa fa-twitter fa-fw"></i> <span class="network-name">Twitter</span></a>
 +
                            </li>
 +
                            <li><a href="https://github.com/IronSummitMedia/startbootstrap" class="btn btn-default btn-lg"><i class="fa fa-github fa-fw"></i> <span class="network-name">Github</span></a>
 +
                            </li>
 +
                            <li><a href="#" class="btn btn-default btn-lg"><i class="fa fa-linkedin fa-fw"></i> <span class="network-name">Linkedin</span></a>
 +
                            </li>
 +
                        </ul>
 +
                    </div>
 +
                </div>
 +
            </div>
-
<td style="border:1px solid black;" align="center"  height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>  
+
        </div>
-
<a href="https://2014.igem.org/Team:Cambridge-JIC/Parts"style="color:#000000"> Parts</a></td>
+
        <!-- /.container -->
-
<td style="border:1px solid black;" align="center" height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>  
+
    </div>
-
<a href="https://2014.igem.org/Team:Cambridge-JIC/Modeling"style="color:#000000"> Modeling</a></td>
+
    <!-- /.intro-header -->
-
<td style="border:1px solid black;" align="center" height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7> 
+
    <div class="content-section-a">
-
<a href="https://2014.igem.org/Team:Cambridge-JIC/Notebook"style="color:#000000"> Notebook</a></td>
+
-
<td style="border:1px solid black;" align="center"  height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>
+
        <div class="container">
-
<a href="https://2014.igem.org/Team:Cambridge-JIC/Safety"style=" color:#000000"> Safety </a></td>
+
-
<td style="border:1px solid black;" align="center" height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>  
+
            <div class="row">
-
<a href="https://2014.igem.org/Team:Cambridge-JIC/Attributions"style="color:#000000"> Attributions </a></td>
+
                <div class="col-lg-5 col-sm-6">
 +
                    <hr class="section-heading-spacer">
 +
                    <div class="clearfix"></div>
 +
                    <h2 class="section-heading">Death to the Stock Photo:
 +
                        <br>Special Thanks</h2>
 +
                    <p class="lead">A special thanks to Death to the Stock Photo for providing the photographs that you see in this template. <a target="_blank" href="http://join.deathtothestockphoto.com/">Visit their website</a> to become a member.</p>
 +
                </div>
 +
                <div class="col-lg-5 col-lg-offset-2 col-sm-6">
 +
                    <img class="img-responsive" src="http://i.imgur.com/FwgjhQn.jpg" alt="">
 +
                </div>
 +
            </div>
 +
        </div>
 +
        <!-- /.container -->
-
<td align ="center"> <a href="https://2014.igem.org/Main_Page"> <img src="https://static.igem.org/mediawiki/igem.org/6/60/Igemlogo_300px.png" width="55px"></a> </td>
+
    </div>
-
</tr>
+
    <!-- /.content-section-a -->
-
</table>
+
 +
    <div class="content-section-b">
-
</tr>
+
        <div class="container">
 +
            <div class="row">
 +
                <div class="col-lg-5 col-lg-offset-1 col-sm-push-6  col-sm-6">
 +
                    <hr class="section-heading-spacer">
 +
                    <div class="clearfix"></div>
 +
                    <h2 class="section-heading">3D Device Mockups
 +
                        <br>by PSDCovers</h2>
 +
                    <p class="lead">Turn your 2D designs into high quality, 3D product shots in seconds using free Photoshop actions by PSDCovers! <a target="_blank" href="http://www.psdcovers.com/">Visit their website</a> to download some of their awesome, free photoshop actions!</p>
 +
                </div>
 +
                <div class="col-lg-5 col-sm-pull-6  col-sm-6">
 +
                    <img class="img-responsive" src="img/doge.png" alt="">
 +
                </div>
 +
            </div>
-
</tr>
+
        </div>
-
+
        <!-- /.container -->
 +
    </div>
 +
    <!-- /.content-section-b -->
 +
    <div class="content-section-a">
 +
        <div class="container">
-
</td>
+
            <div class="row">
 +
                <div class="col-lg-5 col-sm-6">
 +
                    <hr class="section-heading-spacer">
 +
                    <div class="clearfix"></div>
 +
                    <h2 class="section-heading">Google Web Fonts and
 +
                        <br>Font Awesome Icons</h2>
 +
                    <p class="lead">This template features the 'Lato' font, part of the <a target="_blank" href="http://www.google.com/fonts">Google Web Font library</a>, as well as <a target="_blank" href="http://fontawesome.io">icons from Font Awesome</a>.</p>
 +
                </div>
 +
                <div class="col-lg-5 col-lg-offset-2 col-sm-6">
 +
                    <img class="img-responsive" src="img/phones.png" alt="">
 +
                </div>
 +
            </div>
-
<tr> <td colspan="3"  height="15px"> </td></tr>
+
        </div>
-
<tr><td bgColor="#e7e7e7" colspan="3" height="1px"> </tr>
+
        <!-- /.container -->
-
<tr> <td colspan="3"  height="5px"> </td></tr>
+
 +
    </div>
 +
    <!-- /.content-section-a -->
-
<!--requirements section -->
+
    <div class="banner">
-
<font face="Segoe UI, Arial, Helvetica, sans-serif">
+
-
<tr><td colspan="3"> <h3>Notebook</h3></td></tr>
+
-
</tr>
+
 +
        <div class="container">
-
<tr>
+
            <div class="row">
-
<td width="45%" valign="top">  
+
                <div class="col-lg-6">
-
<p>  
+
                    <h2>Connect to Start Bootstrap:</h2>
 +
                </div>
 +
                <div class="col-lg-6">
 +
                    <ul class="list-inline banner-social-buttons">
 +
                        <li><a href="https://twitter.com/SBootstrap" class="btn btn-default btn-lg"><i class="fa fa-twitter fa-fw"></i> <span class="network-name">Twitter</span></a>
 +
                        </li>
 +
                        <li><a href="https://github.com/IronSummitMedia/startbootstrap" class="btn btn-default btn-lg"><i class="fa fa-github fa-fw"></i> <span class="network-name">Github</span></a>
 +
                        </li>
 +
                        <li><a href="#" class="btn btn-default btn-lg"><i class="fa fa-linkedin fa-fw"></i> <span class="network-name">Linkedin</span></a>
 +
                        </li>
 +
                    </ul>
 +
                </div>
 +
            </div>
 +
        </div>
 +
        <!-- /.container -->
 +
    </div>
 +
    <!-- /.banner -->
-
== First Ideas == <p><br>
+
    <footer>
-
<b> Mar-Cam-tia as a volatiles factory</b> <p>
+
        <div class="container">
-
<p>Add metabolic pathways that produce perfumed volatiles (eg geraniol, limonene, geosmin).<p>
+
            <div class="row">
-
Or insect repellents/attractants such as E-beta-farnesene to repel aphids and attract ladybirds, or bombykol to attract moths from miles away.<p>
+
                <div class="col-lg-12">
-
Production could be linked to circadian clock to change smell (or species of moth attracted) throughout the day -<b> ie Mar-Cam-tia as a clock.</b><p>
+
                    <ul class="list-inline">
-
There could be a link to Marchy's air pores.<p>
+
                        <li><a href="#home">Home</a>
-
<br>
+
                        </li>
-
<b>Mar-Cam-tia as a new form of LCD screen</b><p>
+
                        <li class="footer-menu-divider">&sdot;</li>
-
If chromoprotein expression can be triggered in arbitrary cells by irradiating them with a far-red laser to induce the phytochrome signalling pathway in them, thalli could be written on with light and an image formed. Different lasers, different colour chromoproteins = full palette of laser-plant-pens.<p>
+
                        <li><a href="#about">About</a>
-
<br>
+
                        </li>
-
<b>Mar-Cam-tia as phytoELISA</b><p>
+
                        <li class="footer-menu-divider">&sdot;</li>
-
An antigen receptor based on an antibody would be expressed on the surface of Marchantia, and a potentially novel signalling pathway (perhaps involving cAMP production or a tyrosine kinase dimer formation mechanism) engineered such that when the antigen of interest binds with the receptor, downstream events induce an obvious reporting process such as chromoprotein expression, luciferin-mediated glowing, morphological changes or the release of a characteristic smell. Qualitative disease testing with a product that replicates itself out of water and sunshine instead of a single use ELISA that costs $300.<p>
+
                        <li><a href="#services">Services</a>
-
<br>
+
                        </li>
-
<b>Mar-Cam-tia as a reading lamp</b><p>
+
                        <li class="footer-menu-divider">&sdot;</li>
-
Engineer the luciferin-luciferase system that the 2010 Cambridge team put into 'E. glowli' into Marchy, and show the dodgy kickstarter dude how it should really be done. This could be linked to the plant's circadian rhythm to ensure only nightime glowing.<p>
+
                        <li><a href="#contact">Contact</a>
-
<br>
+
                        </li>
-
<b>Marchantia change-o-morpha</b><p>
+
                    </ul>
-
A morphological study of Marchy: Can we engineer shape? Can we disrupt the normal course of growth and shape formation? Maybe we can shape it like a cauliflower.<p>
+
                    <p class="copyright text-muted small">Copyright &copy; Your Company 2013. All Rights Reserved</p>
-
<br>
+
                </div>
-
<b>Spore removal</b><p>
+
            </div>
-
As is, spores are a biocontainment issue. If Marchy was less sexually prolific we would have less of a problem. It would be interesting and aesthetically pleasing to turn the gametophores into the readout of a potential biosensor.
+
        </div>
 +
    </footer>
 +
    <!-- JavaScript -->
 +
    <script src="js/jquery-1.10.2.js"></script>
 +
    <script src="js/bootstrap.js"></script>
 +
</body>
-
</font>
 
-
</td>
 
-
 
-
<td></td>
 
-
<td></td>
 
-
</tr>
 
-
 
-
 
-
</table>
 
</html>
</html>

Revision as of 20:20, 1 July 2014

<!DOCTYPE html> Landing Page Template for Bootstrap

Cambrdige JIC

the International Genetically Engingeered Machine Competition

Death to the Stock Photo:
Special Thanks

A special thanks to Death to the Stock Photo for providing the photographs that you see in this template. Visit their website to become a member.

3D Device Mockups
by PSDCovers

Turn your 2D designs into high quality, 3D product shots in seconds using free Photoshop actions by PSDCovers! Visit their website to download some of their awesome, free photoshop actions!

Google Web Fonts and
Font Awesome Icons

This template features the 'Lato' font, part of the Google Web Font library, as well as icons from Font Awesome.

Retrieved from "http://2014.igem.org/Team:Cambridge-JIC/Notebook"