Team:Northwestern/Home

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
{{CSS/Main}}
{{CSS/Main}}
{{:Team:Northwestern/Templates/Reset}}
{{:Team:Northwestern/Templates/Reset}}
-
{{:Team:Northwestern/Templates/noscript}}
+
{{Team:Northwestern/Template/bootstrap}}
-
{{:Team:Northwestern/Templates/Escape}}
+
{{Team:Northwestern/Template/nav}}
{{Team:Northwestern/Templates/Slider}}
{{Team:Northwestern/Templates/Slider}}
<html>
<html>
<!DOCTYPE HTML>
<!DOCTYPE HTML>
-
<!--
+
 
-
Escape Velocity 2.5 by HTML5 UP
+
-
html5up.net | @n33co
+
-
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+
-
-->
+
<html>
<html>
<head>
<head>
-
<title>iGEM Northwestern 2014</title>
+
<meta charset="utf-8">
-
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-
<meta name="description" content="" />
+
    <meta name="viewport" content="width=device-width, initial-scale=1">
-
<meta name="keywords" content="" />
+
    <meta name="description" content="">
-
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic,700,900" rel="stylesheet" />
+
    <meta name="author" content="">
-
        <link href='http://fonts.googleapis.com/css?family=Titillium+Web:700' rel='stylesheet' type='text/css'/>
+
   
-
        <script src="js/html5shiv.js"></script><link rel="stylesheet" href="css/ie8.css" /><![endif]-->
+
-
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+
-
<script src="js/jquery.min.js"></script>
+
-
<script src="js/jquery.dropotron.min.js"></script>
+
-
<script src="js/config.js"></script>
+
-
<script src="js/skel.min.js"></script>
+
-
<script src="js/skel-panels.min.js"></script>
+
-
        <script src="imageslider/js-image-slider.js"></script>
+
-
       
+
-
<noscript>
+
-
<link rel="stylesheet" href="css/skel-noscript.css" />
+
-
<link rel="stylesheet" href="css/style.css" />
+
-
<link rel="stylesheet" href="css/style-desktop.css" />
+
-
</noscript>
+
-
</head>
+
-
<body class="homepage">
+
-
<!-- Header Wrapper -->
+
    <title>Home</title>
-
<div id="header-wrapper" class="wrapper">
+
 
-
<div class="container">
+
   
-
<div class="row">
+
<style>
-
<div class="12u">
+
/* GLOBAL STYLES
-
+
-------------------------------------------------- */
-
<!-- Header -->
+
/* Padding below the footer and lighter body text */
-
<div id="header">
+
 
-
                                         
+
body {
-
<img id="nulogo" src="http://www.northwestern.edu/african-studies/images/northwestern-university-seal-logo.png"/>
+
  padding-bottom: 40px;
-
                                   
+
  color: #5a5a5a;
-
+
}
-
<!-- Logo -->
+
 
-
<div id="logo">
+
 
-
<h1>NU Models: Think Outside the Cell</h1>
+
 
-
<span class="byline">Exploring transcription and translation rates in non-model organisms using a cell-free system</span>
+
/* CUSTOMIZE THE NAVBAR
 +
-------------------------------------------------- */
 +
 
 +
/* Special class on .container surrounding .navbar, used for positioning it into place. */
 +
.navbar-wrapper {
 +
  position: absolute;
 +
  top: 0;
 +
  right: 0;
 +
  left: 0;
 +
  z-index: 20;
 +
}
 +
 
 +
/* Flip around the padding for proper display in narrow viewports */
 +
.navbar-wrapper > .container {
 +
  padding-right: 0;
 +
  padding-left: 0;
 +
}
 +
.navbar-wrapper .navbar {
 +
  padding-right: 15px;
 +
  padding-left: 15px;
 +
}
 +
.navbar-wrapper .navbar .container {
 +
  width: auto;
 +
}
 +
 
 +
 
 +
/* CUSTOMIZE THE CAROUSEL
 +
-------------------------------------------------- */
 +
 
 +
/* Carousel base class */
 +
.carousel {
 +
  height: 500px;
 +
  margin-bottom: 60px;
 +
}
 +
/* Since positioning the image, we need to help out the caption */
 +
.carousel-caption {
 +
  z-index: 10;
 +
}
 +
 
 +
/* Declare heights because of positioning of img element */
 +
.carousel .item {
 +
  height: 500px;
 +
  background-color: #777;
 +
}
 +
.carousel-inner > .item > img {
 +
  position: absolute;
 +
  top: 0;
 +
  left: 0;
 +
  min-width: 100%;
 +
  height: 500px;
 +
}
 +
 
 +
 
 +
 
 +
/* MARKETING CONTENT
 +
-------------------------------------------------- */
 +
 
 +
/* Center align the text within the three columns below the carousel */
 +
.marketing .col-lg-4 {
 +
  margin-bottom: 20px;
 +
  text-align: center;
 +
}
 +
.marketing h2 {
 +
  font-weight: normal;
 +
}
 +
.marketing .col-lg-4 p {
 +
  margin-right: 10px;
 +
  margin-left: 10px;
 +
}
 +
 
 +
 
 +
/* Featurettes
 +
------------------------- */
 +
 
 +
.featurette-divider {
 +
  margin: 80px 0; /* Space out the Bootstrap <hr> more */
 +
}
 +
 
 +
/* Thin out the marketing headings */
 +
.featurette-heading {
 +
  font-weight: 300;
 +
  line-height: 1;
 +
  letter-spacing: -1px;
 +
}
 +
 
 +
 
 +
 
 +
/* RESPONSIVE CSS
 +
-------------------------------------------------- */
 +
 
 +
@media (min-width: 768px) {
 +
 
 +
  /* Navbar positioning foo */
 +
  .navbar-wrapper {
 +
    margin-top: 20px;
 +
  }
 +
  .navbar-wrapper .container {
 +
    padding-right: 15px;
 +
    padding-left: 15px;
 +
  }
 +
  .navbar-wrapper .navbar {
 +
    padding-right: 0;
 +
    padding-left: 0;
 +
  }
 +
 
 +
  /* The navbar becomes detached from the top, so we round the corners */
 +
  .navbar-wrapper .navbar {
 +
    border-radius: 4px;
 +
  }
 +
 
 +
  /* Bump up size of carousel content */
 +
  .carousel-caption p {
 +
    margin-bottom: 20px;
 +
    font-size: 21px;
 +
    line-height: 1.4;
 +
  }
 +
 
 +
  .featurette-heading {
 +
    font-size: 50px;
 +
  }
 +
}
 +
 
 +
@media (min-width: 992px) {
 +
  .featurette-heading {
 +
    margin-top: 120px;
 +
  }
 +
}
 +
</style>
 +
  </head>
 +
 
 +
<body>
 +
<div class="navbar-wrapper">
 +
      <div class="container">
 +
 
 +
        <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
 +
          <div class="container">
 +
            <div class="navbar-header">
 +
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-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="https://2014.igem.org/Team:Northwestern/Home">Home</a>
 +
            </div>
 +
            <div class="navbar-collapse collapse">
 +
              <ul class="nav navbar-nav">
 +
              <li><a href="https://2014.igem.org/Team:Northwestern/Project">Project</a></li>
 +
                <li><a href="https://2014.igem.org/Team:Northwestern/Team">Team</a></li>
 +
                <li><a href="https://2014.igem.org/Team:Northwestern/Safety">Safety</a></li>
 +
                <li class="active"><a href="https://2014.igem.org/Team:Northwestern/Notebook">Notebook</a></li>
 +
                <li class="dropdown">
 +
                  <a href="#"class="dropdown-toggle" data-toggle="dropdown">To be fixed soon<span class="caret"></span></a>
 +
                  <ul class="dropdown-menu" role="menu">
 +
                    <li><a href="#">Action</a></li>
 +
                    <li><a href="#">Another action</a></li>
 +
                    <li><a href="#">Something else here</a></li>
 +
                    <li class="divider"></li>
 +
                    <li class="dropdown-header">Nav header</li>
 +
                    <li><a href="#">Separated link</a></li>
 +
                    <li><a href="#">One more separated link</a></li>
 +
                  </ul>
 +
                </li>
 +
              </ul>
 +
            </div>
 +
          </div>
 +
        </div>
 +
 
 +
      </div>
 +
    </div>   
 +
<!--Jumbotron-->
 +
<div class="jumbotron">
 +
  <div class="container">
 +
    <h1>NU Models: Breaking Down Walls</h1>
 +
  <p>Using the cell free system to explore non-model organisms</p>
 +
  <p><a href="https://2014.igem.org/Team:Northwestern/Project" class="btn btn-info btn-lg" role="button">Learn more</a></p>
 +
  </div>
</div>
</div>
-
<!-- /Logo -->
+
    <!-- Marketing messaging and featurettes
-
+
    ================================================== -->
-
<!-- Nav -->
+
    <!-- Wrap the rest of the page in another container to center all the content. -->
-
<nav id="nav">
+
-
                                          <a href ="https://2014.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/2012/archive/f/f0/20120817084834!IGEM_logo.png" id="igemlogo"/></a>
+
-
<ul>
+
-
                                               
+
-
<li class="current_page_item"><a href="#">Home</a></li>
+
-
<li>
+
-
                                       
+
-
<span><a href="https://2014.igem.org/Team:Northwestern/Project">Project</a></span>
+
-
<ul>
+
-
<li><a href="https://2014.igem.org/Team:Northwestern/Project">Overview</a></li>
+
-
<li><a href="#">Parts</a></li>
+
-
<li><a href="#">Modeling</a></li>
+
-
<li>
+
-
<span>Other information</span>
+
-
+
-
</li>
+
-
<li><a href="#">Even more information</a></li>
+
-
</ul>
+
-
</li>
+
-
<li><a href="https://2014.igem.org/Team:Northwestern/Team">Official team profile</a></li>
+
-
<li><a href="https://2014.igem.org/Team:Northwestern/Notebook">Notebook</a></li>
+
-
                                                <li><a href="https://2014.igem.org/Team:Northwestern/Safety">Safety</a></li>
+
-
                                                <li><a href="https://2014.igem.org/Team:Northwestern/Attributions">Attributions</a></li>
+
-
</ul>
+
-
</nav>
+
-
<!-- /Nav -->
+
-
</div>
+
    <div class="container marketing">
-
<!-- /Header -->
+
    <div>{{Team:Northwestern/Templates/Slider}}</div>
 +
      <!-- Four columns of text below the carousel -->
 +
      <div class="row">
 +
        <div class="col-md-3">
 +
          <img class="img-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" style="width: 200px; height: 200px;">
 +
          <h2>June</h2>
 +
          <p>Initial Planning Stage</p>
 +
          <p><a class="btn btn-success btn-lg" href="/Team:Northwestern/Notebook/June" role="button">Week by week</a></p>
 +
        </div>
-
</div>
+
        <div class="col-md-3">
-
</div>
+
          <img class="img-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" style="width: 200px; height: 200px;">
-
</div>
+
          <h2>July</h2>
-
</div>
+
          <p>Learning genetic engineering techniques</p>
-
<!-- /Header Wrapper -->
+
          <p><a class="btn btn-success btn-lg" href="2014.igem.org/Team:Northwestern/July" role="button">Week by week</a></p>
-
+
        </div>
-
<!-- Intro Wrapper -->
+
-
<div id="intro-wrapper" class="wrapper wrapper-style1">
+
-
<div class="title">The Introduction</div>
+
-
<div class="container">
+
-
<div class="row">
+
-
<div class="12u">
+
-
+
-
<!-- Intro -->
+
-
<section id="intro">
+
-
<p class="style1">Most of the existing genetic engineering has been done with E. Coli</p>
+
-
<p class="style2">
+
-
But what if we could work in more organisms?
+
-
+
-
</p>
+
-
<p class="style3">NU Models seeks to expand promoter and ribosome binding site characterization of E. Coli to other non-model organisms chosen for their promise in other fields of research. All processes take place in a cell-free system to provide a consistent characterization platform. This information is useful in synthetic biology applications for healthcare, the environment, and industry as it provides a basis for DNA design in organisms other than E. Coli that are more optimized for the needs of a given application.</p>
+
-
+
-
+
-
+
-
<ul class="actions">
+
-
<li><a href="https://2014.igem.org/Team:Northwestern/Project" class="button button-style3 button-big">Learn More</a></li>
+
-
</ul>
+
-
</section>
+
-
<!-- /Intro -->
+
-
+
-
</div>
+
-
</div>
+
-
</div>
+
-
</div>
+
-
<!-- /Intro Wrapper -->
+
-
+
        <div class="col-md-3">
 +
          <img class="img-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" style="width: 200px; height: 200px;">
 +
          <h2>August</h2>
 +
          <p>Producing results...and sometimes not. Troubleshooting</p>
 +
          <p><a class="btn btn-success btn-lg" href="2014.igem.org/Team:Northwestern/August" role="button">Week by week</a></p>
 +
        </div>
-
+
  <div class="col-md-3">
-
<!-- Main Wrapper -->
+
          <img class="img-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" style="width: 200px; height: 200px;">
-
<div class="wrapper wrapper-style2">
+
          <h2>September</h2>
-
<div class="title">The Details</div>
+
          <p>Getting ready for the Jamboree!</p>
-
<div class="container">
+
          <p><a class="btn btn-success btn-lg" href="2014.igem.org/Team:Northwestern/September" role="button">Week by week</a></p>
-
<div class="row">
+
        </div>
-
<div class="12u">
+
      </div>
-
+
-
<!-- Main -->
+
-
<div id="main">
+
-
+
-
<!-- Image -->
+
-
<a href="http://fav.me/d5pjw3g" class="image image-featured">
+
-
<img src="" alt="" />
+
-
</a>
+
-
<!-- /Image -->
+
-
<!-- Features -->
+
-
<section id="features">
+
-
<p class="style1">
+
-
<p>Here are the highlights of our project! Coming soon</p>
+
-
<p class="byline">Want to collaborate? email <a href="www.gmail.com">nuigem2014@gmail.com</a></p>
+
-
</header>
+
-
+
-
+
-
</section>
+
-
<!-- /Features -->
+
-
+
-
</div>
+
-
<!-- /Main -->
+
-
+
-
</div>
+
-
</div>
+
-
</div>
+
-
</div>
+
 +
 +
 +
      <!-- START THE FEATURETTES -->
 +
 +
      <hr class="featurette-divider">
 +
 +
      <div class="row featurette">
 +
        <div class="col-md-7">
 +
          <h2 class="featurette-heading">Well, it looks like our notebook is empty at the moment<span class="text-muted"> but we'll be back with awesome graphs and data soon!</span></h2>
 +
          <p class="lead">see everyone at the Giant Jamboree!</p>
 +
        </div>
 +
        <div class="col-md-5">
 +
          <img class="featurette-image img-rounded" alt="Generic placeholder image">
 +
        </div>
 +
      </div>
 +
 +
 +
 +
      <!-- /END THE FEATURETTES -->
 +
 +
 +
      <!-- FOOTER -->
 +
      <footer>
 +
        <p class="pull-right"><a href="#">Back to top</a></p>
 +
        <p>&copy; 2014 Company, Inc. &middot; <a href="#">Hm</a> &middot; <a href="www.bootstrap.com">Bootstrap</a></p>
 +
      </footer>
 +
 +
    </div><!-- /.container -->
 +
 +
 +
    <!-- Bootstrap core JavaScript
 +
    ================================================== -->
 +
    <!-- Placed at the end of the document so the pages load faster -->
 +
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 +
<script type="text/javascript>
 +
$(document).ready(function(){
 +
$('.bxslider').bxSlider({
 +
responsive: false,
 +
auto: true,
 +
autoHover: true
 +
});
 +
});
 +
</script>
 +
    <script src="http:2014.igem.org/Team:Northwestern/bootstrap.js"></script>
 +
    <script src="../../assets/js/docs.min.js"></script>
 +
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
 +
    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
 +
  </body>
 +
</html>
</html>

Revision as of 21:54, 31 August 2014

Dropdown menu from bootstrap

Bootstrap 3 Carousel

Home

NU Models: Breaking Down Walls

Using the cell free system to explore non-model organisms

Learn more

{{Team:Northwestern/Templates/Slider}}
Generic placeholder image

June

Initial Planning Stage

Week by week

Generic placeholder image

July

Learning genetic engineering techniques

Week by week

Generic placeholder image

August

Producing results...and sometimes not. Troubleshooting

Week by week

Generic placeholder image

September

Getting ready for the Jamboree!

Week by week

Well, it looks like our notebook is empty at the moment but we'll be back with awesome graphs and data soon!

see everyone at the Giant Jamboree!

Generic placeholder image

Retrieved from "http://2014.igem.org/Team:Northwestern/Home"