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

 
(95 intermediate revisions by 3 users not shown)
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;
 +
}
  
 +
.marketing .col-sm-2 {
 +
  text-align: center;
 +
}
  
−
   </div><!-- /.container -->
+
.centerT {
 +
   text-align: center !important;
 +
}
  
−
  <div class="container">
 
  
−
    <div class="row">
+
/* Featurettes
 +
------------------------- */
 +
/*
 +
.featurette-divider {
 +
  margin: 80px 0;  Space out the Bootstrap <hr> more
 +
  }*/
  
−
      <div class="col-sm-8">   
+
  /* Thin out the marketing headings */
−
        <h1>Our Vision</h1>
+
  .featurette-heading {
−
        <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>
+
    font-weight: 300;
−
        <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
+
    line-height: 1;
−
      </div><!-- end col-sm-8 -->
+
    letter-spacing: -1px;
 +
  }
  
−
      <div class="col-sm-4">
 
−
        <img src="http://lorempixel.com/200/200" alt="Vision Pic">
 
−
      </div><!-- end col-sm-4 -->
 
  
−
    </div><!-- end row -->
+
/* Footer
 +
--------------------------------*/
  
−
    <hr></hr>
+
/*footer {
 +
  background: #333;
 +
  color: #eee;
 +
  font-size: 0.em;
 +
  padding: 20px;
 +
}
 +
*/
 +
/* RESPONSIVE CSS
 +
-------------------------------------------------- */
  
−
    <div class="row">
+
@media (min-width: 768px) {
  
−
      <div class="col-sm-4">
+
  /* Bump up size of carousel content */
−
        <img src="http://lorempixel.com/200/200" alt="Vision Pic">
+
  .carousel-caption p {
−
      </div><!-- end col-sm-4 --> 
+
    margin-bottom: 20px;
 +
    font-size: 21px;
 +
    line-height: 1.4;
 +
  }
  
−
      <div class="col-sm-8">    
+
   .featurette-heading {
−
        <h1>How are we doing this?</h1>
+
    font-size: 50px;
−
        <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 -->
+
  
−
     </div><!-- end row -->
+
@media (min-width: 992px) {
 +
  .featurette-heading {
 +
     /*margin-top: 120px;*/
 +
  }
 +
}
 +
/*===================================================*/
  
−
  </div><!-- end container -->
+
/*----------Font-----------*/
  
−
  <div class="container">
 
−
    <div class="col-sm-6">
 
−
      <h1>Substrates</h1>
 
  
−
      <p>Substrates? More like contraints! Hmmmmmm</p>
+
.pp {
 +
  font-size: 1.7em;
 +
}
  
 +
.pf {
 +
  font-size: 1.7em;
 +
}
  
−
      <div class="row well">
+
h1, h2 {
 +
  border: none;
 +
}
  
−
        <div class="col-sm-8">
+
/*#bodyContent {
−
          <h3>Cellulose</h3>
+
  transform-style: preserve-3d;
−
          <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">
 
−
          <img src="http://lorempixel.com/150/150" class="img-circle" alt="Vision Pic">
 
−
        </div><!-- end col-sm-4 -->
 
−
       
 
−
      </div><!-- end row -->
 
  
  
−
      <div class="row well">
+
  /*------- Navbar ---------*/
  
 +
/*
 +
  #top_menu_inside {
 +
    border: none !important;
 +
    color: ##03a9f4 !important;
  
−
        <div class="col-sm-4">
+
}
−
          <img src="http://lorempixel.com/150/150" alt="Vision Pic">
+
−
        </div><!-- end col-sm-4 -->
+
  
−
        <div class="col-sm-8">
+
#top_menu_14 {
−
          <h3>Bio-Plastics</h3>
+
  background-color: #03a9f4 !important;
−
          <p>Look at this we are working on two plastics. The first is polystyrene, and the other is P(3HB)</p>
+
  border-bottom: none !important;
−
          <p><a class="btn btn-info" href="#" role="button">Polystyrene</a>  <a class="btn btn-primary" href="#" role="button">PHA</a></p>
+
  color: #03a9f4 !important;
−
        </div><!-- end col-sm-8 -->
+
  
−
      </div><!-- end row -->
+
}
  
−
    </div><!-- end col-sm-6 -->
+
#top_menu_14 a {
  
 +
}
 +
*/
  
−
    <div class="col-sm-6">
+
.navbar {
−
      <h1>Folding Mechanism</h1>
+
  z-index: 9999999;
  
−
      <p>This is how we do it. </p>
+
}
  
  
−
      <div class="row panel">
 
  
−
        <div class="col-sm-8">
+
nav {
−
          <h3>Bio-Pigment</h3>
+
  padding-top: 15px;
−
          <p>With the infrared light and bacteria produced pigment... WE CAN RULE THE WORLD BWAHAHAHA</p>
+
  z-index: 9999999999;
−
          <p><a class="btn btn-warning" href="#" role="button">Learn more</a></p>
+
  margin: 0px !important;
−
        </div><!-- end col-sm-8 -->
+
  /*background-color: #42AAC9 !important;*/
 +
}
  
−
        <div class="col-sm-4">
+
.oriEdit {
−
          <img src="http://lorempixel.com/150/150" class="img-rounded" alt="Vision Pic">
+
  padding-top: 42px !important;
−
        </div><!-- end col-sm-4 -->
+
}
  
−
      </div><!-- end row -->
 
  
−
      <div class="row well">
+
/*-------Wells-----------*/
  
−
        <div class="col-sm-4">
+
.well {
−
          <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 -->
+
/*-------Moving jumbotron down ------- */
  
−
    </div><!-- end col-sm-6 -->
+
.jumbotron {
 +
  margin-top: 65px;
 +
}
  
−
   </div><!-- end container -->
+
.jumbotron .null {
 +
   margin-top: 0px;
 +
}
  
−
  <div class="container">
+
/*-------Team Pictures----------*/
−
    <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>
+
.pic {
 +
  margin-bottom: 15px;
 +
}
  
−
  </div>
+
/* ------Footer--------*/
  
 +
ul.unstyled {
 +
list-style: none;
 +
padding: 0;
 +
}
  
−
</body>
 
  
−
</html>
+
#globalWrapper {
 +
  font-size: 100%
 +
}
  
−
{{Stanford-Brown_Footer}}
+
/*--------btn---------*/
−
{{:Team:Stanford-Brown/Templates/AddJS|:Team:Stanford-Brown/js/custom}}
+
 
 +
/*.btnEdit{
 +
  text-transform: none !important;
 +
  text-align: left !important;
 +
  white-space: normal !important;
 +
  }*/
 +
 
 +
#be1, #be2, #be3, #be4, #be5, #be6, #be7, #be8, #be9, #be10, #be11, #be12, #be13, #be14, #be15, #be16 {
 +
  text-transform: none !important;
 +
  text-align: left !important;
 +
  white-space: normal !important;
 +
}
 +
 
 +
.dropdown-menu li a {
 +
  font-size: 1.2em;
 +
}
 +
 
 +
.head123 {
 +
  margin-top: 50px;
 +
}
 +
 
 +
.rotate90 {
 +
    -webkit-transform: rotate(90deg);
 +
    -moz-transform: rotate(90deg);
 +
    -o-transform: rotate(90deg);
 +
    -ms-transform: rotate(90deg);
 +
    transform: rotate(90deg);
 +
}

Latest revision as of 19:09, 18 September 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;

}

.marketing .col-sm-2 { 

 text-align: center;

}

.centerT { 

 text-align: center !important;

}


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


.pp { 

 font-size: 1.7em;

}

.pf { 

 font-size: 1.7em;

}

h1, h2 { 

 border: none;

}

/*#bodyContent { 

 transform-style: preserve-3d;
 }*/



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

/* 

 #top_menu_inside {
   border: none !important;
   color: ##03a9f4 !important;

}

  1. top_menu_14 {
 background-color: #03a9f4 !important;
 border-bottom: none !important;
 color: #03a9f4 !important;

}

  1. top_menu_14 a {

}

  • /

.navbar { 

 z-index: 9999999;

}


nav { 

 padding-top: 15px;
 z-index: 9999999999;
 margin: 0px !important;
 /*background-color: #42AAC9 !important;*/

}

.oriEdit { 

 padding-top: 42px !important;

}


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

.well { }


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

.jumbotron { 

 margin-top: 65px;

}

.jumbotron .null { 

 margin-top: 0px;

}

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

.pic { 

 margin-bottom: 15px;

}

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

ul.unstyled { 

list-style: none;
padding: 0;

}


  1. globalWrapper {
 font-size: 100%

}

/*--------btn---------*/

/*.btnEdit{ 

 text-transform: none !important;
 text-align: left !important;
 white-space: normal !important;
 }*/
  1. be1, #be2, #be3, #be4, #be5, #be6, #be7, #be8, #be9, #be10, #be11, #be12, #be13, #be14, #be15, #be16 {
 text-transform: none !important;
 text-align: left !important;
 white-space: normal !important;

}

.dropdown-menu li a { 

 font-size: 1.2em;

}

.head123 { 

 margin-top: 50px;

}

.rotate90 { 

   -webkit-transform: rotate(90deg);
   -moz-transform: rotate(90deg);
   -o-transform: rotate(90deg);
   -ms-transform: rotate(90deg);
   transform: rotate(90deg);

}