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

Line 1: Line 1:
−
{{:Team:Stanford-Brown/Templates/AddCSS|:Team:Stanford-Brown/css/custom}}
+
/* Fixing previously installed css */
  
 +
.firstHeading {
 +
  display: none;
 +
}
  
−
<html lang="en">
+
#content {
−
<head>
+
  width: 100%;
−
   <meta charset="utf-8">
+
   height: 100%;
−
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
+
   border: 0px;
−
   <meta name="viewport" content="width=device-width, initial-scale=1">
+
   background-color: #FFFFFF;
−
   <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
+
   margin: 0px;
−
   <meta name="description" content="">
+
  margin-top: -48px;
−
   <meta name="author" content="">
+
   padding: 0px;
−
  <link rel="icon" href="../../favicon.ico">
+
   line-height: normal;
 +
}
  
−
   <title>SB iGEM 2015</title>
+
li {
 +
   margin-bottom: 0;
 +
}
  
−
</head>
+
ul.nav {
−
<!-- NAVBAR
+
  line-height: inherit;
−
   ================================================== -->
+
   list-style-type: none;
−
   <body>
+
   margin: 0 0 0 0;
−
    <div class="container">
+
  padding: 0;
−
      <nav class="navbar navbar-inverse navbar-fixed-top">
+
  list-style-image: none;
 +
}
 +
p {
 +
  margin: 0 0 0 0;
 +
}
  
−
        <div class="container">
+
/* GLOBAL STYLES
 +
-------------------------------------------------- */
  
−
          <div class="navbar-header">
 
  
−
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
+
/* CUSTOMIZE THE 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">
 
  
−
            <ul class="nav navbar-nav">
+
/* CUSTOMIZE THE CAROUSEL
 +
-------------------------------------------------- */
  
−
              <li class="active"><a href="https://2015.igem.org/Team:Stanford-Brown">Home</a></li>
+
/* 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;
 +
}
  
−
              <li><a href="https://2015.igem.org/Team:Stanford-Brown/Team">About</a></li>       
+
/* Declare heights because of positioning of img element */
 +
.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>
 
  
−
              <li><a href="https://2015.igem.org/Team:Stanford-Brown/Projects">Projects</a></li>
+
/* MARKETING CONTENT
 +
-------------------------------------------------- */
  
−
            </ul>
+
/* Center align the text within the three columns below the carousel */
−
          </div>
+
.marketing .col-sm-4 {
−
        </div>
+
  margin-bottom: 20px;
−
      </nav>
+
  text-align: center;
−
    </div>
+
}
−
    <!-- Carousel
+
.marketing h2 {
−
    ================================================== -->
+
  font-weight: normal;
−
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
+
}
−
      <!-- Indicators -->
+
.marketing .col-sm-4 p {
−
      <ol class="carousel-indicators">
+
  margin-right: 10px;
−
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
+
  margin-left: 10px;
−
        <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 -->
 
  
−
   <div class="container">
+
/* Featurettes
 +
------------------------- */
 +
/*
 +
.featurette-divider {
 +
   margin: 80px 0;  Space out the Bootstrap <hr> more
 +
}*/
  
−
    <div class="row">
+
/* Thin out the marketing headings */
 +
.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 -->
 
  
−
      <div class="col-sm-4">
+
/* Footer
−
        <img src="http://lorempixel.com/200/200" alt="Vision Pic">
+
--------------------------------*/
−
      </div><!-- end col-sm-4 -->
+
  
−
    </div><!-- end row -->
+
/*footer {
 +
  background: #333;
 +
  color: #eee;
 +
  font-size: 0.em;
 +
  padding: 20px;
 +
}
 +
*/
 +
/* RESPONSIVE CSS
 +
-------------------------------------------------- */
  
−
    <hr></hr>
+
@media (min-width: 768px) {
  
−
     <div class="row">
+
  /* Bump up size of carousel content */
 +
  .carousel-caption p {
 +
     margin-bottom: 20px;
 +
    font-size: 21px;
 +
    line-height: 1.4;
 +
  }
  
−
      <div class="col-sm-4">
+
  .featurette-heading {
−
        <img src="http://lorempixel.com/200/200" alt="Vision Pic">
+
    font-size: 50px;
−
      </div><!-- end col-sm-4 --> 
+
  }
 +
}
  
−
      <div class="col-sm-8">    
+
@media (min-width: 992px) {
−
        <h1>How are we doing this?</h1>
+
   .featurette-heading {
−
        <p>Bioplastics, substrates, cellulose, CRATER, PHA, Polystyrene, Biopigments. Wow. Much fold. Very NASA.</p>
+
    /*margin-top: 120px;*/
−
        <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
+
  }
−
      </div><!-- end col-sm-8 -->
+
}
 +
/*===================================================*/
  
−
    </div><!-- end row -->
+
/*----------Font-----------*/
  
−
   </div><!-- end container -->
+
p {
 +
   font-size: 0.8em;
 +
}
  
−
   <div class="container">
+
h1, h2 {
−
    <div class="col-sm-6">
+
   border: none;
−
      <h1>Substrates</h1>
+
}
  
−
      <p>Substrates? More like contraints! Hmmmmmm</p>
 
  
  
−
      <div class="row well">
+
/*------- Navbar ---------*/
  
−
        <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 -->
 
  
−
        <div class="col-sm-4">
+
#top_menu_inside {
−
          <img src="http://lorempixel.com/150/150" class="img-circle" alt="Vision Pic">
+
  border: none !important;
−
        </div><!-- end col-sm-4 -->
+
  color: #3F51B5 !important;
−
       
+
  margin-bottom: 100px;
−
      </div><!-- end row -->
+
  /*margin-left: 450px !important;
 +
  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;*/
 +
}
  
−
      <div class="row well">
+
element.style {
 +
  color: #3F51B5 !important;
 +
}
  
  
−
        <div class="col-sm-4">
+
.navbar {
−
          <img src="http://lorempixel.com/150/150" alt="Vision Pic">
+
  /*margin-top: 15px !important;*/
−
        </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 -->
+
  
−
      </div><!-- end row -->
+
nav {
 +
  /*margin-top: 15px !important;*/
 +
  font-size: 0.8em;
 +
}
  
−
    </div><!-- end col-sm-6 -->
 
  
 +
/*-------Wells-----------*/
  
−
    <div class="col-sm-6">
+
.well {
−
      <h1>Folding Mechanism</h1>
+
}
  
−
      <p>This is how we do it. </p>
 
  
 +
/*-------Moving jumbotron team down ------- */
  
−
      <div class="row panel">
+
.jumbotron {
 +
  margin-top: 65px;
 +
  /*margin-top: 200px;*/
 +
}
  
−
        <div class="col-sm-8">
+
/*-------Team Pictures----------*/
−
          <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 -->
+
  
−
        <div class="col-sm-4">
+
.pic {
−
          <img src="http://lorempixel.com/150/150" class="img-rounded" alt="Vision Pic">
+
  margin-bottom: 15px;
−
        </div><!-- end col-sm-4 -->
+
}
  
−
      </div><!-- end row -->
+
/* ------Footer--------*/
  
−
      <div class="row well">
+
ul.unstyled {
 +
  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 -->
 
  
−
      </div><!-- end row -->
+
/*--------Pfold ------*/
  
−
    </div><!-- end col-sm-6 -->
+
.foldingStuff {
 +
height:500px !important;
 +
}
  
−
  </div><!-- end container -->
+
.uc-initial-content {
 +
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>
+
  
−
    </div>
+
.uc-final-content{
−
 
+
text-align:center;
−
  </div>
+
background-color:purple;
−
 
+
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

/* Fixing previously installed css */

.firstHeading { 

 display: none;

}

  1. content {
 width: 100%;
 height: 100%;
 border: 0px;
 background-color: #FFFFFF;
 margin: 0px;
 margin-top: -48px;
 padding: 0px;
 line-height: normal;

}

li { 

 margin-bottom: 0;

}

ul.nav { 

 line-height: inherit;
 list-style-type: none;
 margin: 0 0 0 0;
 padding: 0;
 list-style-image: none;

} p { 

 margin: 0 0 0 0;

}

/* GLOBAL STYLES

*/


/* CUSTOMIZE THE NAVBAR

*/


/* 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: #FFFFFF;

} .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-sm-4 { 

 margin-bottom: 20px;
 text-align: center;

} .marketing h2 { 

 font-weight: normal;

} .marketing .col-sm-4 p { 

 margin-right: 10px;
 margin-left: 10px;

}

.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;

}


/* Featurettes

*/

/* .featurette-divider {

margin: 80px 0; Space out the Bootstrap
more

}*/

/* Thin out the marketing headings */ .featurette-heading { 

 font-weight: 300;
 line-height: 1;
 letter-spacing: -1px;

}


/* Footer

*/

/*footer { 

  background: #333;
  color: #eee;
  font-size: 0.em;
  padding: 20px;

}

  • /

/* RESPONSIVE CSS

*/

@media (min-width: 768px) { 

 /* 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;*/
 }

} 

/*===================================================*/

/*----------Font-----------*/

p { 

 font-size: 0.8em;

}

h1, h2 { 

 border: none;

}


/*------- Navbar ---------*/


  1. top_menu_inside {
 border: none !important;
 color: #3F51B5 !important;
 margin-bottom: 100px;
 /*margin-left: 450px !important;
 padding: 0px !important;
 width: 50% !important;
 position: static !important;
 float: left !important;*/*/

}

  1. 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 { 

 color: #3F51B5 !important;

}


.navbar { 

 /*margin-top: 15px !important;*/

}

nav { 

 /*margin-top: 15px !important;*/
 font-size: 0.8em;

}


/*-------Wells-----------*/

.well { }


/*-------Moving jumbotron team down ------- */

.jumbotron { 

 margin-top: 65px;
 /*margin-top: 200px;*/

}

/*-------Team Pictures----------*/

.pic { 

 margin-bottom: 15px;

}

/* ------Footer--------*/

ul.unstyled { 

  list-style: none;
  padding: 0;

}


/*--------Pfold ------*/

.foldingStuff { height:500px !important; }

.uc-initial-content { text-align:center; background-color:blue;

}

.uc-final-content{ text-align:center; background-color:purple; z-index: 10; }