Difference between revisions of "Team:Bielefeld-CeBiTec/Sandbox"
Line 1: | Line 1: | ||
− | {{ | + | {{Bielefeld-CeBiTec/Header}} |
<html> | <html> | ||
Line 18: | Line 18: | ||
} | } | ||
</style> | </style> | ||
+ | |||
+ | <style type="text/css"> | ||
+ | h2{ | ||
+ | margin: 0; | ||
+ | color: #666; | ||
+ | padding-top: 90px; | ||
+ | font-size: 52px; | ||
+ | font-family: "trebuchet ms", sans-serif; | ||
+ | } | ||
+ | .item{ | ||
+ | background: #333; | ||
+ | text-align: center; | ||
+ | height: 300px !important; | ||
+ | } | ||
+ | .carousel{ | ||
+ | margin-top: 20px; | ||
+ | } | ||
+ | .bs-example{ | ||
+ | margin: 20px; | ||
+ | } | ||
+ | </style> | ||
+ | </head> | ||
+ | <body> | ||
+ | <div class="bs-example"> | ||
+ | <div id="myCarousel" class="carousel slide" data-interval="3000" data-ride="carousel"> | ||
+ | <!-- Carousel indicators --> | ||
+ | <ol class="carousel-indicators"> | ||
+ | <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> | ||
+ | <!-- Carousel items --> | ||
+ | <div class="carousel-inner"> | ||
+ | <div class="active item"> | ||
+ | <h2>Slide 1</h2> | ||
+ | <div class="carousel-caption"> | ||
+ | <h3>First slide label</h3> | ||
+ | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="item"> | ||
+ | <h2>Slide 2</h2> | ||
+ | <div class="carousel-caption"> | ||
+ | <h3>Second slide label</h3> | ||
+ | <p>Aliquam sit amet gravida nibh, facilisis gravida odio.</p> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="item"> | ||
+ | <h2>Slide 3</h2> | ||
+ | <div class="carousel-caption"> | ||
+ | <h3>Third slide label</h3> | ||
+ | <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!-- Carousel nav --> | ||
+ | <a class="carousel-control left" href="#myCarousel" data-slide="prev"> | ||
+ | <span class="glyphicon glyphicon-chevron-left"></span> | ||
+ | </a> | ||
+ | <a class="carousel-control right" href="#myCarousel" data-slide="next"> | ||
+ | <span class="glyphicon glyphicon-chevron-right"></span> | ||
+ | </a> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | |||
</head> | </head> | ||
Line 105: | Line 171: | ||
</div> | </div> | ||
</div> | </div> | ||
+ | |||
+ | |||
+ | |||
+ | <!-- Carousel | ||
+ | ================================================== --> | ||
+ | <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" > | ||
+ | <!-- Indicators --> | ||
+ | <ol class="carousel-indicators"> | ||
+ | <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> | ||
+ | <li data-target="#carousel-example-generic" data-slide-to="1"></li> | ||
+ | <li data-target="#carousel-example-generic" data-slide-to="2"></li> | ||
+ | </ol> | ||
+ | |||
+ | <!-- Wrapper for slides --> | ||
+ | <div class="carousel-inner" role="listbox"> | ||
+ | <div class="item active"> | ||
+ | <img class="img-responsive center-block" src="https://static.igem.org/mediawiki/2015/c/c9/Logo.png" alt="First slide"> | ||
+ | <div class="carousel-caption"> | ||
+ | ... | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="item"> | ||
+ | <img src="..." alt="..."> | ||
+ | <div class="carousel-caption"> | ||
+ | ... | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="item"> | ||
+ | <img src="..." alt="..."> | ||
+ | <div class="carousel-caption"> | ||
+ | ... | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <!-- Controls --> | ||
+ | <a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next"> | ||
+ | <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> | ||
+ | <span class="sr-only">Next</span> | ||
+ | </a> | ||
+ | </div> | ||
+ | |||
+ | |||
</body> | </body> | ||
</html> | </html> | ||
+ | |||
+ | {{Bielefeld-CeBiTec/Footer}} |
Revision as of 12:47, 11 May 2015