Difference between revisions of "Team:Stanford-Brown/css/custom"

Line 1: Line 1:
−
/* Fixing previously installed css */
+
{{:Team:Stanford-Brown/Templates/AddCSS|:Team:Stanford-Brown/css/custom}}
  
−
.firstHeading {
 
−
  display: none;
 
−
}
 
  
−
#content {
+
<html lang="en">
−
  width: 100%;
+
<head>
−
   height: 100%;
+
   <meta charset="utf-8">
−
   border: 0px;
+
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
−
   background-color: #FFFFFF;
+
   <meta name="viewport" content="width=device-width, initial-scale=1">
−
   margin: 0px;
+
   <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
−
  margin-top: -48px;
+
   <meta name="description" content="">
−
   padding: 0px;
+
   <meta name="author" content="">
−
   line-height: normal;
+
  <link rel="icon" href="../../favicon.ico">
−
}
+
  
−
li {
+
   <title>SB iGEM 2015</title>
−
   margin-bottom: 0;
+
−
}
+
  
−
ul.nav {
+
</head>
−
  line-height: inherit;
+
<!-- NAVBAR
−
   list-style-type: none;
+
   ================================================== -->
−
   margin: 0 0 0 0;
+
   <body>
−
  padding: 0;
+
    <div class="container">
−
  list-style-image: none;
+
      <nav class="navbar navbar-inverse navbar-fixed-top">
−
}
+
−
p {
+
−
  margin: 0 0 0 0;
+
−
}
+
  
−
/* GLOBAL STYLES
+
        <div class="container">
−
-------------------------------------------------- */
+
  
 +
          <div class="navbar-header">
  
−
/* CUSTOMIZE THE NAVBAR
+
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
−
-------------------------------------------------- */
+
  
 +
              <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="#">SB iGEM</a>
 +
              <!-- <a class="navbar-brand" href="#"><img src="https://static.igem.org/mediawiki/2015/e/e1/SB_logo.jpg" alt="SB Logo"></a>
 +
            -->
 +
          </div>
  
 +
          <div id="navbar" class="navbar-collapse collapse">
  
−
/* CUSTOMIZE THE CAROUSEL
+
            <ul class="nav navbar-nav">
−
-------------------------------------------------- */
+
  
−
/* Carousel base class */
+
              <li class="active"><a href="https://2015.igem.org/Team:Stanford-Brown">Home</a></li>
−
.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 */
+
              <li><a href="https://2015.igem.org/Team:Stanford-Brown/Team">About</a></li>       
−
.carousel .item {
+
−
  height: 500px;
+
−
  background-color: #FFFFFF;
+
−
}
+
−
.carousel-inner > .item > img {
+
−
  position: absolute;
+
−
  top: 0;
+
−
  left: 0;
+
−
  min-width: 100%;
+
−
  height: 500px;
+
−
}
+
  
 +
              <li><a href="https://2015.igem.org/Team:Stanford-Brown/Outreach">Outreach</a></li>
  
−
/* MARKETING CONTENT
+
              <li><a href="https://2015.igem.org/Team:Stanford-Brown/Projects">Projects</a></li>
−
-------------------------------------------------- */
+
  
−
/* Center align the text within the three columns below the carousel */
+
            </ul>
−
.marketing .col-sm-4 {
+
          </div>
−
  margin-bottom: 20px;
+
        </div>
−
  text-align: center;
+
      </nav>
−
}
+
    </div>
−
.marketing h2 {
+
    <!-- Carousel
−
  font-weight: normal;
+
    ================================================== -->
−
}
+
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
−
.marketing .col-sm-4 p {
+
      <!-- Indicators -->
−
  margin-right: 10px;
+
      <ol class="carousel-indicators">
−
  margin-left: 10px;
+
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
−
}
+
        <li data-target="#myCarousel" data-slide-to="1"></li>
 +
        <li data-target="#myCarousel" data-slide-to="2"></li>
 +
      </ol>
 +
      <div class="carousel-inner" role="listbox">
 +
        <div class="item active">
 +
          <img class="first-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide">
 +
          <div class="container">
 +
            <div class="carousel-caption">
 +
              <h1>The Vision</h1>
 +
              <p>As in Biological Origami. Are you interested now? Click below to find out more!</p>
 +
              <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn More</a></p>
 +
            </div>
 +
          </div>
 +
        </div>
 +
        <div class="item">
 +
          <img class="second-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Second slide">
 +
          <div class="container">
 +
            <div class="carousel-caption">
 +
              <h1>How are we doing this?</h1>
 +
              <p>Imganine the elimination of petrochemicals in the production of plastics. Now imagine that in space. See below to see our Projects. </p>
 +
              <p><a class="btn btn-lg btn-primary" href="#" role="button">See More</a></p>
 +
            </div>
 +
          </div>
 +
        </div>
 +
        <div class="item">
 +
          <img class="third-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide">
 +
          <div class="container">
 +
            <div class="carousel-caption">
 +
              <h1>Who are we?</h1>
 +
              <p>A group of strange and funny looking students who decided to spend the summer stuck in a lab together aka the Stanford-Brown 2015 iGEM Team</p>
 +
              <p><a class="btn btn-lg btn-primary" href="#" role="button">About Us</a></p>
 +
            </div>
 +
          </div>
 +
        </div>
 +
      </div>
 +
      <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
 +
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
 +
        <span class="sr-only">Previous</span>
 +
      </a>
 +
      <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
 +
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
 +
        <span class="sr-only">Next</span>
 +
      </a>
 +
    </div><!-- /.carousel -->
  
−
.marketing .col-sm-3 {
 
−
  margin-bottom: 20px;
 
−
  text-align: center;
 
−
}
 
−
.marketing h2 {
 
−
  font-weight: normal;
 
−
}
 
−
.marketing .col-sm-3 p {
 
−
  margin-right: 10px;
 
−
  margin-left: 10px;
 
−
}
 
  
  
 +
  </div><!-- /.container -->
  
−
/* Featurettes
+
   <div class="container">
−
------------------------- */
+
−
/*
+
−
.featurette-divider {
+
−
   margin: 80px 0;  Space out the Bootstrap <hr> more
+
−
}*/
+
  
−
/* Thin out the marketing headings */
+
    <div class="row">
−
.featurette-heading {
+
−
  font-weight: 300;
+
−
  line-height: 1;
+
−
  letter-spacing: -1px;
+
−
}
+
  
 +
      <div class="col-sm-8">   
 +
        <h1>Our Vision</h1>
 +
        <p>Imagine the ability to produce plastics without petrochemicals. We wanted to engineer bacteria to become bioplastic factories so on space colonies plastics could be produced and unilized.</p>
 +
        <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
 +
      </div><!-- end col-sm-8 -->
  
−
/* Footer
+
      <div class="col-sm-4">
−
--------------------------------*/
+
        <img src="http://lorempixel.com/200/200" alt="Vision Pic">
 +
      </div><!-- end col-sm-4 -->
  
−
/*footer {
+
    </div><!-- end row -->
−
  background: #333;
+
−
  color: #eee;
+
−
  font-size: 0.em;
+
−
  padding: 20px;
+
−
}
+
−
*/
+
−
/* RESPONSIVE CSS
+
−
-------------------------------------------------- */
+
  
−
@media (min-width: 768px) {
+
    <hr></hr>
  
−
  /* Bump up size of carousel content */
+
     <div class="row">
−
  .carousel-caption p {
+
−
     margin-bottom: 20px;
+
−
    font-size: 21px;
+
−
    line-height: 1.4;
+
−
  }
+
  
−
  .featurette-heading {
+
      <div class="col-sm-4">
−
    font-size: 50px;
+
        <img src="http://lorempixel.com/200/200" alt="Vision Pic">
−
  }
+
      </div><!-- end col-sm-4 --> 
−
}
+
  
−
@media (min-width: 992px) {
+
      <div class="col-sm-8">    
−
   .featurette-heading {
+
        <h1>How are we doing this?</h1>
−
    /*margin-top: 120px;*/
+
        <p>Bioplastics, substrates, cellulose, CRATER, PHA, Polystyrene, Biopigments. Wow. Much fold. Very NASA.</p>
−
  }
+
        <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
−
}
+
      </div><!-- end col-sm-8 -->
−
/*===================================================*/
+
  
−
/*----------Font-----------*/
+
    </div><!-- end row -->
  
−
p {
+
   </div><!-- end container -->
−
   font-size: 0.8em;
+
−
}
+
  
−
h1, h2 {
+
   <div class="container">
−
   border: none;
+
    <div class="col-sm-6">
−
}
+
      <h1>Substrates</h1>
  
 +
      <p>Substrates? More like contraints! Hmmmmmm</p>
  
  
−
/*------- Navbar ---------*/
+
      <div class="row well">
  
 +
        <div class="col-sm-8">
 +
          <h3>Cellulose</h3>
 +
          <p>Man this cellulose stuff is smelly. Hopefully we can use this as a substrate some howw.......</p>
 +
          <p><a class="btn btn-warning" href="#" role="button">Learn more</a></p>
 +
        </div><!-- end col-sm-8 -->
  
−
#top_menu_inside {
+
        <div class="col-sm-4">
−
  border: none !important;
+
          <img src="http://lorempixel.com/150/150" class="img-circle" alt="Vision Pic">
−
  color: #3F51B5 !important;
+
        </div><!-- end col-sm-4 -->
−
  margin-bottom: 100px;
+
       
−
  /*margin-left: 450px !important;
+
      </div><!-- end row -->
−
  padding: 0px !important;
+
−
  width: 50% !important;
+
−
  position: static !important;
+
−
  float: left !important;*/*/
+
−
}
+
  
−
#top_menu_14 {
 
−
  background-color: #3F51B5 !important;
 
−
  border-bottom: none !important;
 
−
  color: #3F51B5 !important;
 
−
  margin-bottom: 100px;
 
−
  /*margin-left: 450px;
 
−
  padding: 0px !important;
 
−
  width: 50% !important;
 
−
  position: static !important;
 
−
  float: right !important;*/
 
−
}
 
  
−
element.style {
+
      <div class="row well">
−
  color: #3F51B5 !important;
+
−
}
+
  
  
−
.navbar {
+
        <div class="col-sm-4">
−
  /*margin-top: 15px !important;*/
+
          <img src="http://lorempixel.com/150/150" alt="Vision Pic">
 +
        </div><!-- end col-sm-4 -->
  
−
}
+
        <div class="col-sm-8">
 +
          <h3>Bio-Plastics</h3>
 +
          <p>Look at this we are working on two plastics. The first is polystyrene, and the other is P(3HB)</p>
 +
          <p><a class="btn btn-info" href="#" role="button">Polystyrene</a>  <a class="btn btn-primary" href="#" role="button">PHA</a></p>
 +
        </div><!-- end col-sm-8 -->
  
−
nav {
+
      </div><!-- end row -->
−
  /*margin-top: 15px !important;*/
+
−
  font-size: 0.8em;
+
−
}
+
  
 +
    </div><!-- end col-sm-6 -->
  
−
/*-------Wells-----------*/
 
  
−
.well {
+
    <div class="col-sm-6">
−
}
+
      <h1>Folding Mechanism</h1>
  
 +
      <p>This is how we do it. </p>
  
−
/*-------Moving jumbotron team down ------- */
 
  
−
.jumbotron {
+
      <div class="row panel">
−
  margin-top: 65px;
+
−
  /*margin-top: 200px;*/
+
−
}
+
  
−
/*-------Team Pictures----------*/
+
        <div class="col-sm-8">
 +
          <h3>Bio-Pigment</h3>
 +
          <p>With the infrared light and bacteria produced pigment... WE CAN RULE THE WORLD BWAHAHAHA</p>
 +
          <p><a class="btn btn-warning" href="#" role="button">Learn more</a></p>
 +
        </div><!-- end col-sm-8 -->
  
−
.pic {
+
        <div class="col-sm-4">
−
  margin-bottom: 15px;
+
          <img src="http://lorempixel.com/150/150" class="img-rounded" alt="Vision Pic">
−
}
+
        </div><!-- end col-sm-4 -->
  
−
/* ------Footer--------*/
+
      </div><!-- end row -->
  
−
ul.unstyled {
+
      <div class="row well">
−
  list-style: none;
+
−
  padding: 0;
+
−
}
+
  
 +
        <div class="col-sm-4">
 +
          <img src="http://lorempixel.com/450/450" class="img-responsive img-rounded" alt="Vision Pic">
 +
        </div><!-- end col-sm-4 -->
  
 +
        <div class="col-sm-8">
 +
          <h3>Spores aka HYDRA</h3>
 +
          <p>Spores are sooooo silly. Bacilus Subtilus and everything. </p>
 +
          <p><a class="btn btn-info" href="#" role="button">Learn about HYDRA</a></p>
 +
        </div><!-- end col-sm-8 -->
  
−
/*--------Pfold ------*/
+
      </div><!-- end row -->
  
−
.foldingStuff {
+
    </div><!-- end col-sm-6 -->
−
height:500px !important;
+
−
}
+
  
−
.uc-initial-content {
+
  </div><!-- end container -->
−
text-align:center;
+
−
background-color:blue;
+
  
−
}
+
  <div class="container">
 +
    <div class="row well">
 +
      <h1>CRATER <small>SHALL RULE THE WORLD</small></h1>
 +
      <p>See how Danny, Kirsten, and Jack? revoluationize synthetic biology forever!!!! Click below to find out more :D</p>
 +
      <a class="btn btn-danger btn-raised btn-lg" href="https://2015.igem.org/Team:Stanford-Brown/CRATER">CRATER!!!!!!</a>
  
−
.uc-final-content{
+
    </div>
−
text-align:center;
+
 
−
background-color:purple;
+
  </div>
−
z-index: 10;
+
 
−
}
+
 
 +
</body>
 +
 
 +
</html>
 +
 
 +
{{Stanford-Brown_Footer}}
 +
{{:Team:Stanford-Brown/Templates/AddJS|:Team:Stanford-Brown/js/custom}}

Revision as of 23:48, 23 August 2015


SB iGEM 2015

Our Vision

Imagine the ability to produce plastics without petrochemicals. We wanted to engineer bacteria to become bioplastic factories so on space colonies plastics could be produced and unilized.

Learn more

Vision Pic
Vision Pic

How are we doing this?

Bioplastics, substrates, cellulose, CRATER, PHA, Polystyrene, Biopigments. Wow. Much fold. Very NASA.

Learn more

Substrates

Substrates? More like contraints! Hmmmmmm

Cellulose

Man this cellulose stuff is smelly. Hopefully we can use this as a substrate some howw.......

Learn more

Vision Pic
Vision Pic

Bio-Plastics

Look at this we are working on two plastics. The first is polystyrene, and the other is P(3HB)

Polystyrene PHA

Folding Mechanism

This is how we do it.

Bio-Pigment

With the infrared light and bacteria produced pigment... WE CAN RULE THE WORLD BWAHAHAHA

Learn more

Vision Pic
Vision Pic

Spores aka HYDRA

Spores are sooooo silly. Bacilus Subtilus and everything.

Learn about HYDRA

CRATER SHALL RULE THE WORLD

See how Danny, Kirsten, and Jack? revoluationize synthetic biology forever!!!! Click below to find out more :D

CRATER!!!!!!

Copyright © 2015 Stanford-Brown iGEM Team