Team:Carnegie Mellon/Gallery

From 2014.igem.org

(Difference between revisions)
Line 11: Line 11:
     <link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet">
     <link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet">
     <style>
     <style>
 +
 +
img {
 +
  filter: gray; /* IE6-9 */
 +
  -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
 +
    -webkit-box-shadow: 0px 2px 6px 2px rgba(0,0,0,0.75);
 +
    -moz-box-shadow: 0px 2px 6px 2px rgba(0,0,0,0.75);
 +
    box-shadow: 0px 2px 6px 2px rgba(0,0,0,0.75);
 +
    margin-bottom:20px;
 +
}
 +
 +
img:hover {
 +
  filter: none; /* IE6-9 */
 +
  -webkit-filter: grayscale(0); /* Google Chrome, Safari 6+ & Opera 15+ */
 +
 +
}
Line 73: Line 88:
-
   
+
 
-
 
+
-
 
+
-
    /* Featurettes
+
-
    ------------------------- */
+
-
 
+
-
    .featurette-divider {
+
-
width:100%;
+
-
 
+
-
      margin: 80px 0; /* Space out the Bootstrap <hr> more */
+
-
    }
+
-
    .featurette {
+
-
width:100%;
+
-
 
+
-
      padding-top: 200px; /* 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;
+
-
      text align: center;
+
-
      line-height: 1;
+
-
      letter-spacing: -1px;
+
-
    }
+
-
 
+
-
 
+
     /* RESPONSIVE CSS
     /* RESPONSIVE CSS
Line 249: Line 226:
-
<!-- The Bootstrap Image Gallery lightbox, should be a child element of the document body -->
+
 
-
<div id="blueimp-gallery" class="blueimp-gallery">
+
      <div class="container">
-
    <!-- The container for the modal slides -->
+
<div class="row">
-
    <div class="slides"></div>
+
<div class="col-md-3 col-sm-4 col-xs-6"><img class="img-responsive" src="http://2.bp.blogspot.com/-H6MAoWN-UIE/TuRwLbHRSWI/AAAAAAAABBk/89iiEulVsyg/s400/Free%2BNature%2BPhoto.jpg" /></div>
-
    <!-- Controls for the borderless lightbox -->
+
        <div class="col-md-3 col-sm-4 col-xs-6"><img class="img-responsive" src="http://www.virginia.org/uploadedImages/virginiaorg/Images/OrgImages/H/HamptonConventionVisitorBureau/Grandview_Nature_Preserve.jpg?width=300&height=200&scale=upscalecanvas" /></div>
-
    <h3 class="title"></h3>
+
        <div class="col-md-3 col-sm-4 col-xs-6"><img class="img-responsive" src="http://blog.arborday.org/wp-content/uploads/2013/02/NEC1-300x200.jpg" /></div>
-
    <a class="prev">‹</a>
+
        <div class="col-md-3 col-sm-4 col-xs-6"><img class="img-responsive" src="http://th03.deviantart.net/fs70/200H/f/2010/256/0/9/painting_of_nature_by_dhikagraph-d2ynalq.jpg" /></div>
-
    <a class="next">›</a>
+
    <div class="col-md-3 col-sm-4 col-xs-6"><img class="img-responsive" src="http://www.virginia.org/uploadedImages/virginiaorg/Images/OrgImages/H/HamptonConventionVisitorBureau/Grandview_Nature_Preserve.jpg?width=300&height=200&scale=upscalecanvas" /></div>
-
    <a class="close">×</a>
+
        <div class="col-md-3 col-sm-4 col-xs-6"><img class="img-responsive" src="http://th03.deviantart.net/fs70/200H/f/2010/256/0/9/painting_of_nature_by_dhikagraph-d2ynalq.jpg" /></div>
-
    <a class="play-pause"></a>
+
    <div class="col-md-3 col-sm-4 col-xs-6"><img class="img-responsive" src="http://2.bp.blogspot.com/-H6MAoWN-UIE/TuRwLbHRSWI/AAAAAAAABBk/89iiEulVsyg/s400/Free%2BNature%2BPhoto.jpg" /></div>
-
    <ol class="indicator"></ol>
+
        <div class="col-md-3 col-sm-4 col-xs-6"><img class="img-responsive" src="http://blog.arborday.org/wp-content/uploads/2013/02/NEC1-300x200.jpg" /></div>
-
    <!-- The modal dialog, which will be used to wrap the lightbox content -->
+
-
    <div class="modal fade">
+
-
        <div class="modal-dialog">
+
-
            <div class="modal-content">
+
-
                <div class="modal-header">
+
-
                    <button type="button" class="close" aria-hidden="true">&times;</button>
+
-
                    <h4 class="modal-title"></h4>
+
-
                </div>
+
-
                <div class="modal-body next"></div>
+
-
                <div class="modal-footer">
+
-
                    <button type="button" class="btn btn-default pull-left prev">
+
-
                        <i class="glyphicon glyphicon-chevron-left"></i>
+
-
                        Previous
+
-
                    </button>
+
-
                    <button type="button" class="btn btn-primary next">
+
-
                        Next
+
-
                        <i class="glyphicon glyphicon-chevron-right"></i>
+
-
                    </button>
+
-
                </div>
+
-
            </div>
+
-
        </div>
+
     </div>
     </div>
</div>
</div>
-
 
-
 
-
 
-
<div id="links">
 
-
    <a href="images/banana.jpg" title="Banana" data-gallery>
 
-
        <img src="http://upload.wikimedia.org/wikipedia/commons/8/8a/Banana-Single.jpg" alt="Banana">
 
-
    </a>
 
-
    <a href="images/apple.jpg" title="Apple" data-gallery>
 
-
        <img src="http://upload.wikimedia.org/wikipedia/commons/8/8a/Banana-Single.jpg" alt="Apple">
 
-
    </a>
 
-
    <a href="images/orange.jpg" title="Orange" data-gallery>
 
-
        <img src="http://upload.wikimedia.org/wikipedia/commons/8/8a/Banana-Single.jpg" alt="Orange">
 
-
    </a>
 
-
</div>
 
-
     
 

Revision as of 03:16, 17 October 2014

Carousel Template · Bootstrap

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