Team:Carnegie Mellon/Overview

From 2014.igem.org

(Difference between revisions)
 
(4 intermediate revisions not shown)
Line 7: Line 7:
     <meta name="description" content="">
     <meta name="description" content="">
     <meta name="author" content="">
     <meta name="author" content="">
-
 
-
<script>
 
-
$(document).ready(function() {
 
-
//Display slider for Javascript users
 
-
$('#Slider').css('display', 'block');
 
-
 
-
//Set height of slider (16/5 ratio)
 
-
$('#Slider').css('height', ($('body').width() / 3.2));
 
-
 
-
//Position right/left arrows
 
-
var BarHeight = $('#Slider').height() -  $('#BottomLinks').height();
 
-
$('#LeftBar, #RightBar').css('height', BarHeight);
 
-
$('#LeftArrow, #RightArrow').css('top', (BarHeight-60)/2);
 
-
 
-
//Repeats for window resize
 
-
$(window).resize(function() {
 
-
$('#Slider').css('height', ($('body').width() / 3.2));
 
-
 
-
var BarHeight = $('#Slider').height() -  $('#BottomLinks').height();
 
-
$('#LeftBar, #RightBar').css('height', BarHeight);
 
-
$('#LeftArrow, #RightArrow').css('top', (BarHeight-60)/2);
 
-
});
 
-
 
-
var TotalSlides = $('.Slides').length;
 
-
var CurrentSlide = 0;
 
-
 
-
$('#RightArrow').click(function() {
 
-
CurrentSlide = ++CurrentSlide % TotalSlides;
 
-
changeSlide(CurrentSlide);
 
-
});
 
-
 
-
$('#LeftArrow').click(function() {
 
-
CurrentSlide = (CurrentSlide + TotalSlides - 1) % TotalSlides;
 
-
changeSlide(CurrentSlide);
 
-
});
 
-
 
-
$('.SlideLink').click(function() {
 
-
var ClickedSlide = $(this).attr('id');
 
-
CurrentSlide = parseInt(ClickedSlide.replace('Link', ''));
 
-
changeSlide(CurrentSlide);
 
-
});
 
-
 
-
function changeSlide(num){
 
-
var SlideID = '#Slide' + num;
 
-
$('.Slides').css('display', 'none');
 
-
$(SlideID).css('display', 'block');
 
-
}
 
-
});
 
-
</script>
 
     <!-- Le styles -->
     <!-- Le styles -->
     <link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet">
     <link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet">
-
     <link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet">
+
     <link href="https://2014.igem.org/Template:CarnegieMellon:CarnegieMellon/CSS?action=raw&ctype=text/css" rel="stylesheet">
-
    <style>
+
-
 
+
-
    /* GLOBAL STYLES
+
-
    -------------------------------------------------- */
+
-
    /* Padding below the footer and lighter body text */
+
-
 
+
-
    body {
+
-
      padding-bottom: 40px;
+
-
    background: #333333;
+
-
      color: #5a5a5a;
+
-
  font-size: 12px;
+
-
    }
+
-
 
+
-
 
+
-
    /* CUSTOMIZE THE NAVBAR
+
-
    -------------------------------------------------- */
+
-
 
+
-
    /* Special class on .container surrounding .navbar, used for positioning it into place. */
+
-
    .navbar-wrapper {
+
-
      position: absolute;
+
-
      top: 0;
+
-
      left: 0;
+
-
      right: 0;
+
-
      z-index: 10;
+
-
      margin-top: 80px;
+
-
      margin-bottom: -90px; /* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */
+
-
    }
+
-
    .navbar-wrapper .navbar {
+
-
 
+
-
    }
+
-
 
+
-
    /* Remove border and change up box shadow for more contrast */
+
-
    .navbar .navbar-inner {
+
-
width:80%;
+
-
      border: 0;
+
-
      -webkit-box-shadow: 0 2px 10px rgba(0,0,0,.25);
+
-
        -moz-box-shadow: 0 2px 10px rgba(0,0,0,.25);
+
-
              box-shadow: 0 2px 10px rgba(0,0,0,.25);
+
-
    }
+
-
 
+
-
    /* Downsize the brand/project name a bit */
+
-
    .navbar .brand {
+
-
      padding: 14px 20px 16px; /* Increase vertical padding to match navbar links */
+
-
      font-size: 16px;
+
-
      font-weight: bold;
+
-
      text-shadow: 0 -1px 0 rgba(0,0,0,.5);
+
-
    }
+
-
 
+
-
    /* Navbar links: increase padding for taller navbar */
+
-
    .navbar .nav > li > a {
+
-
      padding: 15px 20px;
+
-
    }
+
-
 
+
-
    /* Offset the responsive button for proper vertical alignment */
+
-
    .navbar .btn-navbar {
+
-
      margin-top: 10px;
+
-
    }
+
-
 
+
-
 
+
-
 
+
-
    /* CUSTOMIZE THE CAROUSEL
+
-
    -------------------------------------------------- */
+
-
 
+
-
    /* Carousel base class */
+
-
    .carousel {
+
-
      margin-bottom: 60px;
+
-
 
+
-
    }
+
-
 
+
-
    .carousel .container {
+
-
      position: relative;
+
-
      z-index: 9;
+
-
    }
+
-
 
+
-
    .carousel-control {
+
-
      height: 80px;
+
-
      margin-top: 0;
+
-
      font-size: 120px;
+
-
      text-shadow: 0 1px 1px rgba(0,0,0,.4);
+
-
      background-color: transparent;
+
-
      border: 0;
+
-
      z-index: 10;
+
-
    }
+
-
 
+
-
    .carousel .item {
+
-
      height: 500px;
+
-
    }
+
-
    .carousel img {
+
-
      position: absolute;
+
-
      top: 0;
+
-
      left: 0;
+
-
      min-width: 100%;
+
-
      height: 500px;
+
-
    }
+
-
 
+
-
    .carousel-caption {
+
-
      background-color: transparent;
+
-
 
+
-
      position: static;
+
-
      max-width: 550px;
+
-
      padding: 0 20px;
+
-
      margin-top: 500px;
+
-
    }
+
-
    .carousel-caption h1,
+
-
    .carousel-caption .lead {
+
-
      margin: 0;
+
-
      line-height: 1.25;
+
-
      color: #000000;
+
-
      text-shadow: 0 1px 1px rgba(0,0,0,.4);
+
-
    }
+
-
    .carousel-caption .btn {
+
-
      margin-top: 10px;
+
-
    }
+
-
 
+
-
 
+
-
 
+
-
    /* MARKETING CONTENT
+
-
    -------------------------------------------------- */
+
-
 
+
-
    /* Center align the text within the three columns below the carousel */
+
-
    .marketing .span4 {
+
-
width:25%;
+
-
 
+
-
      text-align: center;
+
-
    }
+
-
    .marketing h2 {
+
-
      font-weight: normal;
+
-
    }
+
-
    .marketing .span4 p {
+
-
      margin-left: 10px;
+
-
      margin-right: 10px;
+
-
    }
+
-
 
+
-
 
+
-
    /* Featurettes
+
-
    ------------------------- */
+
-
 
+
-
    .featurette-divider {
+
-
width:82%;
+
-
 
+
-
      margin: 80px 0; /* Space out the Bootstrap <hr> more */
+
-
    }
+
-
    .featurette {
+
-
width:82%;
+
-
 
+
-
      padding-top: 100px; /* Vertically center images part 1: add padding above and below text. */
+
-
      overflow: hidden; /* Vertically center images part 2: clear their floats. */
+
-
    }
+
-
    .featurette-image {
+
-
      margin-top: -120px; /* Vertically center images part 3: negative margin up the image the same amount of the padding to center it. */
+
-
    }
+
-
 
+
-
    /* Give some space on the sides of the floated elements so text doesn't run right into it. */
+
-
    .featurette-image.pull-left {
+
-
      margin-right: 40px;
+
-
    }
+
-
    .featurette-image.pull-right {
+
-
      margin-left: 40px;
+
-
    }
+
-
 
+
-
    /* Thin out the marketing headings */
+
-
    .featurette-heading {
+
-
      font-size: 50px;
+
-
      font-weight: 300;
+
-
      line-height: 1;
+
-
      letter-spacing: -1px;
+
-
    }
+
-
 
+
-
 
+
-
 
+
-
    /* RESPONSIVE CSS
+
-
    -------------------------------------------------- */
+
-
 
+
-
    @media (max-width: 979px) {
+
-
 
+
-
      .container.navbar-wrapper {
+
-
        margin-bottom: 0;
+
-
        width: auto;
+
-
      }
+
-
      .navbar-inner {
+
-
        border-radius: 0;
+
-
        margin: -20px 0;
+
-
      }
+
-
 
+
-
      .carousel .item {
+
-
        height: 500px;
+
-
      }
+
-
      .carousel img {
+
-
        width: auto;
+
-
        height: 500px;
+
-
      }
+
-
 
+
-
      .featurette {
+
-
        height: auto;
+
-
        padding: 0;
+
-
      }
+
-
      .featurette-image.pull-left,
+
-
      .featurette-image.pull-right {
+
-
        display: block;
+
-
        float: none;
+
-
        max-width: 20%;
+
-
        margin: 0 auto 20px;
+
-
      }
+
-
    }
+
-
 
+
-
 
+
-
    @media (max-width: 767px) {
+
-
 
+
-
      .navbar-inner {
+
-
        margin: -20px;
+
-
      }
+
-
 
+
-
      .carousel {
+
-
        margin-left: -20px;
+
-
        margin-right: -20px;
+
-
      }
+
-
      .carousel .container {
+
-
 
+
-
      }
+
-
      .carousel .item {
+
-
        height: 300px;
+
-
      }
+
-
      .carousel img {
+
-
        height: 300px;
+
-
      }
+
-
      .carousel-caption {
+
-
        width: 65%;
+
-
        padding: 0 70px;
+
-
        margin-top: 100px;
+
-
      }
+
-
      .carousel-caption h1 {
+
-
        font-size: 30px;
+
-
      }
+
-
      .carousel-caption .lead,
+
-
      .carousel-caption .btn {
+
-
        font-size: 18px;
+
-
      }
+
-
 
+
-
      .marketing .span4 + .span4 {
+
-
        margin-top: 40px;
+
-
      }
+
-
 
+
-
      .featurette-heading {
+
-
        font-size: 30px;
+
-
      }
+
-
      .featurette .lead {
+
-
        font-size: 18px;
+
-
        line-height: 1.5;
+
-
      }
+
-
    }
 
-
    </style>
 
     <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
     <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
Line 343: Line 43:
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
             </button>
             </button>
-
            <a class="brand" href="https://igem.org/Main_Page">iGEM</a>
 
             <!-- Responsive Navbar Part 2: Place all navbar contents you want collapsed withing .navbar-collapse.collapse. -->
             <!-- Responsive Navbar Part 2: Place all navbar contents you want collapsed withing .navbar-collapse.collapse. -->
             <div class="nav-collapse collapse">
             <div class="nav-collapse collapse">
Line 351: Line 50:
                   <a href="#" class="dropdown-toggle" data-toggle="dropdown">Our Project <b class="caret"></b></a>
                   <a href="#" class="dropdown-toggle" data-toggle="dropdown">Our Project <b class="caret"></b></a>
                   <ul class="dropdown-menu">
                   <ul class="dropdown-menu">
-
                     <li><a href="https://2014.igem.org/Team:Carnegie_Mellon/Overview">Overview</a></li>
+
                     <li><a href="https://2014.igem.org/Team:Carnegie_Mellon/Project_Description">Project Description</a></li>
                     <li><a href="https://2014.igem.org/Team:Carnegie_Mellon/Our_Sensor">Our Sensor</a></li>
                     <li><a href="https://2014.igem.org/Team:Carnegie_Mellon/Our_Sensor">Our Sensor</a></li>
-
                     <li><a href="https://2014.igem.org/Team:Carnegie_Mellon/Collaborations">Collaborations</a></li>
+
                     <li><a href="https://2014.igem.org/Team:Carnegie_Mellon/Colaborations">Collaborations</a></li>
-
                    <li><a href="https://2014.igem.org/Team:Carnegie_Mellon/Human_Practices">Human Practices</a></li>
+
                     <li><a href="https://2014.igem.org/Team:Carnegie_Mellon/Achievements">Achievements</a></li>
                     <li><a href="https://2014.igem.org/Team:Carnegie_Mellon/Achievements">Achievements</a></li>
                     <li><a href="https://2014.igem.org/Team:Carnegie_Mellon/Future_Plans">Future Plans</a></li>
                     <li><a href="https://2014.igem.org/Team:Carnegie_Mellon/Future_Plans">Future Plans</a></li>
Line 371: Line 69:
                   <a href="#" class="dropdown-toggle" data-toggle="dropdown">Outreach <b class="caret"></b></a>
                   <a href="#" class="dropdown-toggle" data-toggle="dropdown">Outreach <b class="caret"></b></a>
                   <ul class="dropdown-menu">
                   <ul class="dropdown-menu">
 +
                    <li><a href="https://2014.igem.org/Team:Carnegie_Mellon/Overview">Overview</a></li>
                     <li><a href="https://2014.igem.org/Team:Carnegie_Mellon/DNA_Extraction">DNA Extraction</a></li>
                     <li><a href="https://2014.igem.org/Team:Carnegie_Mellon/DNA_Extraction">DNA Extraction</a></li>
                     <li><a href="https://2014.igem.org/Team:Carnegie_Mellon/Creature_Feature">Creature Feature</a></li>
                     <li><a href="https://2014.igem.org/Team:Carnegie_Mellon/Creature_Feature">Creature Feature</a></li>
Line 376: Line 75:
                 </li>
                 </li>
<li class="dropdown">
<li class="dropdown">
-
                   <a href="#" class="dropdown-toggle" data-toggle="dropdown">Lab Work <b class="caret"></b></a>
+
                   <a href="#" class="dropdown-toggle" data-toggle="dropdown">Notebook <b class="caret"></b></a>
                   <ul class="dropdown-menu">
                   <ul class="dropdown-menu">
-
                    <li><a href="https://2014.igem.org/Team:Carnegie_Mellon/Notebook">Notebook</a></li>
+
                    <li><a href="https://2014.igem.org/Team:Carnegie_Mellon/Weeks">Week by Week</a></li>
-
                    <li><a href="https://2014.igem.org/Team:Carnegie_Mellon/InterLab">Inter Lab Study</a></li>
+
                    <li><a href="https://2014.igem.org/Team:Carnegie_Mellon/Sensor">Sensor</a></li>
                     <li><a href="https://2014.igem.org/Team:Carnegie_Mellon/Protein">Fluorescent Protein Evaluation</a></li>
                     <li><a href="https://2014.igem.org/Team:Carnegie_Mellon/Protein">Fluorescent Protein Evaluation</a></li>
                     <li><a href="https://2014.igem.org/Team:Carnegie_Mellon/Superoxide">Superoxide Generator Improvement</a></li>
                     <li><a href="https://2014.igem.org/Team:Carnegie_Mellon/Superoxide">Superoxide Generator Improvement</a></li>
-
                     <li><a href="https://2014.igem.org/Team:Carnegie_Mellon/Sensor">Sensor</a></li>
+
                     <li><a href="https://2014.igem.org/Team:Carnegie_Mellon/InterLab">Interlab Study</a></li>
                   </ul>
                   </ul>
                 </li>
                 </li>
Line 399: Line 98:
       </div> <!-- /.container -->
       </div> <!-- /.container -->
     </div><!-- /.navbar-wrapper -->
     </div><!-- /.navbar-wrapper -->
-
 
-
 
-
 
-
    <!-- Carousel
 
-
    ================================================== -->
 
-
    <div id="myCarousel" class="carousel slide">
 
-
      <div class="carousel-inner">
 
-
        <div class="item active">
 
-
          <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTOnyR8iWr-1Ge9YcJHLVPfRX8YYJbeipjsJcPMYcPXgSae5FAlBQ" alt="">
 
-
          <div class="container">
 
-
            <div class="carousel-caption">
 
-
              <h1>Project Title.</h1>
 
-
              <p class="lead">Our project description...</p>
 
-
            </div>
 
-
          </div>
 
-
        </div>
 
-
        <div class="item">
 
-
          <img src="http://iloveubuntu.net/pictures_me/saucy%20salamander%20gtk_3%203.8.jpg" alt="">
 
-
          <div class="container">
 
-
            <div class="carousel-caption">
 
-
              <h1>Another example headline.</h1>
 
-
              <p class="lead">Our project description...</p>
 
-
              <a class="btn btn-large btn-primary" href="#">Learn more</a>
 
-
            </div>
 
-
          </div>
 
-
        </div>
 
-
        <div class="item">
 
-
          <img src="http://www.clker.com/cliparts/a/a/5/6/11954240121535699699fzap_salamander.svg.hi.png" alt="">
 
-
          <div class="container">
 
-
            <div class="carousel-caption">
 
-
              <h1>One more for good measure.</h1>
 
-
              <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
 
-
              <a class="btn btn-large btn-primary" href="#">Browse gallery</a>
 
-
            </div>
 
-
          </div>
 
-
        </div>
 
-
      </div>
 
-
      <a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>
 
-
      <a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>
 
-
    </div><!-- /.carousel -->
 
-
 
-
 
-
 
-
 
-
<h1> S.T.R.E.A.M. </h1>
 
-
<h2> Sensor That Reports Endocrine Activating Molecules </h2>
 
-
<p> Hormones are molecules that allow cells to communicate with each other and are used by organisms to alter growth and metabolism. The steroid hormones such as estrogen can diffuse across the plasma membrane, bind their receptor in the cytoplasm, migrate to the nucleus and act as transcription factors to alter cells, physiology and behavior. Naturally occurring steroid hormones include estrogen, progesterone, testosterone and cortisol.
 
-
</br>
 
-
</br>
 
-
 
-
Detection of hormones in the environment has raised concerns in recent years because of their potential to affect both humans and wildlife. Estrogens from natural, synthetic, plant, and fungal sources can show endocrine disrupting properties and even at low concentrations can have harmful effects due to receptor activation. Estrogenic activity can occur in water sources including waste, drinking and freshwater. In freshwater, estrogens are harmful to the ecosystems, feminizing fish and disrupting the overall populations of organisms in the ecosystem. Estrogenic substances can also be present in what we drink, however since the presence of hormones in water is a relatively new area of study there have been no previous restrictions or regulations regarding filtration of estrogenic compounds.
 
-
</br>
 
-
</br>
 
-
 
-
Due to concern with the compounds in water, we are developing a sensor to detect the molecules in water that will bind to the estrogen receptor, we hope that our STREAM, Sensor That Reports Endocrine Activating Molecules, will be sensitive and informative of water quality. A BioNetGen model of the sensor and  NetLogo model of fish populations were constructed to improve our understanding of these systems. </p>
 
-
 
-
 
-
     
 
-
 
Line 463: Line 103:
-
    <!-- Le javascript
+
<!-- Le javascript
     ================================================== -->
     ================================================== -->
     <!-- Placed at the end of the document so the pages load faster -->
     <!-- Placed at the end of the document so the pages load faster -->

Latest revision as of 17:08, 26 September 2014

Carousel Template · Bootstrap

Retrieved from "http://2014.igem.org/Team:Carnegie_Mellon/Overview"