|
|
(47 intermediate revisions not shown) |
Line 1: |
Line 1: |
- | <!DOCTYPE html>
| + | {{:Team:Cambridge-JIC/Templates/header_prototype2}} |
- | <html lang="en">
| + | |
| | | |
- | <head> | + | <html> |
- | <meta charset="utf-8">
| + | |
- | <meta name="viewport" content="width=device-width, initial-scale=1.0">
| + | |
- | <meta name="description" content="">
| + | |
- | <meta name="author" content="">
| + | |
| | | |
- | <title>Landing Page Template for Bootstrap</title>
| + | <div align="center"><a href="https://2014.igem.org/wiki/index.php?title=Team:Cambridge-JIC/Notebook&action=edit">Edit this page</a></div> |
| + | <br> |
| + | <div align="center"> |
| + | <a href="https://2014.igem.org/Special:Upload">Use this page to upload pictures to the wiki</a> |
| + | </div> |
| + | <br> |
| | | |
- | <!-- Bootstrap core CSS -->
| + | <div id="lab notebook" align="center"> |
- | <!-- Latest compiled and minified CSS -->
| + | Lab notebook: |
- | <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
| + | <ul> |
| + | <li><a href="https://2014.igem.org/Team:Cambridge-JIC/Notebook/Lab_Week_1">Week 1</a></li> |
| + | <li><a href="https://2014.igem.org/Team:Cambridge-JIC/Notebook/Lab_Week_2">Week 2</a></li> |
| + | <li><a href="https://2014.igem.org/Team:Cambridge-JIC/Notebook/Lab_Week_3">Week 3</a></li> |
| + | <li><a href="https://2014.igem.org/Team:Cambridge-JIC/Notebook/Lab_Week_4">Week 4</a></li> |
| + | <li><a href="https://2014.igem.org/Team:Cambridge-JIC/Notebook/Lab_Week_5">Week 5</a></li> |
| + | <li><a href="https://2014.igem.org/Team:Cambridge-JIC/Notebook/Lab_Week_6">Week 6</a></li> |
| + | <li><a href="https://2014.igem.org/Team:Cambridge-JIC/Notebook/Lab_Week_7">Week 7</a></li> |
| + | <li><a href="https://2014.igem.org/Team:Cambridge-JIC/Notebook/Lab_Week_8">Week 8</a></li> |
| + | <li><a href="https://2014.igem.org/Team:Cambridge-JIC/Notebook/Lab_Week_9">Week 9</a></li> |
| + | <li><a href="https://2014.igem.org/Team:Cambridge-JIC/Notebook/Lab_Week_10">Week 10</a></li> |
| + | </ul> |
| + | </div><br/> |
| | | |
- | <!-- Optional theme -->
| |
- | <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
| |
| | | |
- | <style> | + | <div id="constructs" align="center"> |
- | body, html {
| + | Constructs: |
- | height: 100%;
| + | <ul> |
- | width: 100%;
| + | <li><a href="https://2014.igem.org/Team:Cambridge-JIC/Constructs/progress_template">Construct Progress Template</li> |
- | }
| + | <li><a href="https://2014.igem.org/Team:Cambridge-JIC/Constructs/gal4_hap1gr_H2RBmRFP">Gal4-Hap1GR-H2RBmRFP</a></li> |
| + | <li><a href="https://2014.igem.org/Team:Cambridge-JIC/Constructs/35S-HBRmRFP">35S-HBRmRFP</a></li> |
| + | </ul> |
| + | </div><br> |
| + | </html> |
| | | |
- | body, h1, h2, h3, h4, h5, h6 {
| + | {{:Team:Cambridge-JIC/Templates/CL_grid}} |
- | font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
| + | |
- | font-weight: 700;
| + | |
- | }
| + | |
- | | + | |
- | .lead {
| + | |
- | font-size: 18px;
| + | |
- | font-weight: 400;
| + | |
- | }
| + | |
- | | + | |
- | .intro-header {
| + | |
- | padding-top: 50px; /* If you're making other pages, make sure there is 50px of padding to make sure the navbar doesn't overlap content! */
| + | |
- | padding-bottom: 50px;
| + | |
- | color: #f8f8f8;
| + | |
- | background: url(../img/intro-bg.jpg) no-repeat center center;
| + | |
- | background-size: cover;
| + | |
- | text-align: center;
| + | |
- | } | + | |
- | | + | |
- | .intro-message {
| + | |
- | position: relative;
| + | |
- | padding-top: 20%;
| + | |
- | padding-bottom: 20%;
| + | |
- | } | + | |
- | | + | |
- | .intro-message > h1 {
| + | |
- | margin: 0;
| + | |
- | font-size: 5em;
| + | |
- | text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
| + | |
- | }
| + | |
- | | + | |
- | .intro-divider {
| + | |
- | width: 400px;
| + | |
- | border-top: 1px solid #f8f8f8;
| + | |
- | border-bottom: 1px solid rgba(0, 0, 0, 0.2);
| + | |
- | }
| + | |
- | | + | |
- | .intro-message > h3 {
| + | |
- | text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
| + | |
- | }
| + | |
- | | + | |
- | @media (max-width: 767px) {
| + | |
- | .intro-message {
| + | |
- | padding-bottom: 15%;
| + | |
- | }
| + | |
- | | + | |
- | .intro-message > h1 {
| + | |
- | font-size: 3em;
| + | |
- | }
| + | |
- | | + | |
- | ul.intro-social-buttons > li {
| + | |
- | display: block;
| + | |
- | margin-bottom: 20px;
| + | |
- | padding: 0;
| + | |
- | }
| + | |
- | | + | |
- | ul.intro-social-buttons > li:last-child {
| + | |
- | margin-bottom: 0;
| + | |
- | }
| + | |
- | | + | |
- | .intro-divider {
| + | |
- | width: 100%;
| + | |
- | }
| + | |
- | }
| + | |
- | | + | |
- | .network-name {
| + | |
- | text-transform: uppercase;
| + | |
- | font-size: 14px;
| + | |
- | font-weight: 400;
| + | |
- | letter-spacing: 2px;
| + | |
- | }
| + | |
- | | + | |
- | .content-section-a {
| + | |
- | background-color: #f8f8f8;
| + | |
- | padding: 50px 0;
| + | |
- | }
| + | |
- | | + | |
- | .content-section-b {
| + | |
- | border-top: 1px solid #e7e7e7;
| + | |
- | border-bottom: 1px solid #e7e7e7;
| + | |
- | padding: 50px 0;
| + | |
- | }
| + | |
- | | + | |
- | .section-heading {
| + | |
- | margin-bottom: 30px;
| + | |
- | }
| + | |
- | | + | |
- | .section-heading-spacer {
| + | |
- | border-top: 3px solid #e7e7e7;
| + | |
- | width: 200px;
| + | |
- | float: left;
| + | |
- | }
| + | |
- | | + | |
- | .banner {
| + | |
- | padding: 100px 0;
| + | |
- | color: #f8f8f8;
| + | |
- | background: url(../img/banner-bg.jpg) no-repeat center center;
| + | |
- | background-size: cover;
| + | |
- | }
| + | |
- | | + | |
- | .banner h2 {
| + | |
- | margin: 0;
| + | |
- | text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
| + | |
- | font-size: 3em;
| + | |
- | }
| + | |
- | | + | |
- | .banner ul {
| + | |
- | margin-bottom: 0;
| + | |
- | }
| + | |
- | | + | |
- | .banner-social-buttons {
| + | |
- | float: right;
| + | |
- | margin-top: 0;
| + | |
- | }
| + | |
- | | + | |
- | @media (max-width: 1199px) {
| + | |
- | ul.banner-social-buttons {
| + | |
- | float: left;
| + | |
- | margin-top: 15px;
| + | |
- | }
| + | |
- | }
| + | |
- | | + | |
- | @media (max-width: 767px) {
| + | |
- | .banner h2 {
| + | |
- | margin: 0;
| + | |
- | text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
| + | |
- | font-size: 3em;
| + | |
- | }
| + | |
- | | + | |
- | ul.banner-social-buttons > li {
| + | |
- | display: block;
| + | |
- | margin-bottom: 20px;
| + | |
- | padding: 0;
| + | |
- | }
| + | |
- | | + | |
- | ul.banner-social-buttons > li:last-child {
| + | |
- | margin-bottom: 0;
| + | |
- | }
| + | |
- | }
| + | |
- | | + | |
- | footer {
| + | |
- | background-color: #f8f8f8;
| + | |
- | padding: 50px 0;
| + | |
- | }
| + | |
- | | + | |
- | p.copyright {
| + | |
- | margin: 15px 0 0;
| + | |
- | }</style>
| + | |
- | | + | |
- | <!-- Latest compiled and minified JavaScript -->
| + | |
- | <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'>
| + | |
- | | + | |
- | <!-- Add custom CSS here -->
| + | |
- | <link href="css/landing-page.css" rel="stylesheet">
| + | |
- | | + | |
- | </head>
| + | |
- | | + | |
- | <body>
| + | |
- | | + | |
- | <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>
| + | |
- | | + | |
- | <!-- Collect the nav links, forms, and other content for toggling -->
| + | |
- | <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>
| + | |
- | | + | |
- | <div class="intro-header">
| + | |
- | | + | |
- | <div class="container">
| + | |
- | | + | |
- | <div class="row">
| + | |
- | <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>
| + | |
- | | + | |
- | </div>
| + | |
- | <!-- /.container -->
| + | |
- | | + | |
- | </div>
| + | |
- | <!-- /.intro-header -->
| + | |
- | | + | |
- | <div class="content-section-a">
| + | |
- | | + | |
- | <div class="container">
| + | |
- | | + | |
- | <div class="row">
| + | |
- | <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 -->
| + | |
- | | + | |
- | </div>
| + | |
- | <!-- /.content-section-a -->
| + | |
- | | + | |
- | <div class="content-section-b">
| + | |
- | | + | |
- | <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>
| + | |
- | | + | |
- | </div>
| + | |
- | <!-- /.container -->
| + | |
- | | + | |
- | </div>
| + | |
- | <!-- /.content-section-b -->
| + | |
- | | + | |
- | <div class="content-section-a">
| + | |
- | | + | |
- | <div class="container">
| + | |
- | | + | |
- | <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>
| + | |
- | | + | |
- | </div>
| + | |
- | <!-- /.container -->
| + | |
- | | + | |
- | </div>
| + | |
- | <!-- /.content-section-a -->
| + | |
- | | + | |
- | <div class="banner">
| + | |
- | | + | |
- | <div class="container">
| + | |
- | | + | |
- | <div class="row">
| + | |
- | <div class="col-lg-6">
| + | |
- | <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 -->
| + | |
- | | + | |
- | <footer>
| + | |
- | <div class="container">
| + | |
- | <div class="row">
| + | |
- | <div class="col-lg-12">
| + | |
- | <ul class="list-inline">
| + | |
- | <li><a href="#home">Home</a>
| + | |
- | </li>
| + | |
- | <li class="footer-menu-divider">⋅</li>
| + | |
- | <li><a href="#about">About</a>
| + | |
- | </li>
| + | |
- | <li class="footer-menu-divider">⋅</li>
| + | |
- | <li><a href="#services">Services</a>
| + | |
- | </li>
| + | |
- | <li class="footer-menu-divider">⋅</li>
| + | |
- | <li><a href="#contact">Contact</a>
| + | |
- | </li>
| + | |
- | </ul>
| + | |
- | <p class="copyright text-muted small">Copyright © Your Company 2013. All Rights Reserved</p>
| + | |
- | </div>
| + | |
- | </div>
| + | |
- | </div>
| + | |
- | </footer>
| + | |
- | | + | |
- | <!-- JavaScript -->
| + | |
- | <script src="js/jquery-1.10.2.js"></script>
| + | |
- | <script src="js/bootstrap.js"></script>
| + | |
- | | + | |
- | </body>
| + | |
- | | + | |
- | </html>
| + | |