(345 intermediate revisions by 3 users not shown) | |||
Line 1: | Line 1: | ||
+ | {{:Team:Edinburgh_UG/Templates/NavigationBar}} | ||
+ | |||
<html> | <html> | ||
+ | |||
<head> | <head> | ||
− | <link href="https:// | + | <meta name="viewport" content="width=device-width,initial-scale=1"> |
− | + | <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> | |
+ | <link rel="stylesheet" href="https://2017.igem.org/Template:Edinburgh_UG/CSS?action=raw&ctype=text/css"> | ||
− | < | + | |
− | + | <!-- External CSS for navbar, footer and page. --> | |
+ | |||
+ | <style> | ||
+ | /* Max Width must be the max width of the carousel... */ | ||
+ | .same-width { | ||
+ | width: 70%; | ||
+ | max-width: 55em; | ||
+ | } | ||
+ | |||
+ | .carousel-control.left, | ||
+ | .carousel-control.right { | ||
+ | background-image: none | ||
+ | } | ||
+ | |||
+ | #carousel { | ||
+ | border-style: solid; | ||
+ | border-width: 5pt; | ||
+ | } | ||
+ | |||
+ | /*CSS for the sponsor us images. */ | ||
+ | .sponsor img { | ||
+ | display: inline; | ||
+ | max-width: 6.5em; | ||
+ | height: auto; | ||
+ | margin: 10px; | ||
+ | } | ||
+ | /* Putting the carousel indicators outside the carousel: */ | ||
+ | .carousel-indicators { | ||
+ | bottom:-2.5em; | ||
+ | width: auto; | ||
+ | margin-left: 0; | ||
+ | left: 20.5em; | ||
+ | } | ||
+ | |||
+ | .carousel-inner { | ||
+ | } | ||
+ | |||
+ | .carousel-indicators li { | ||
+ | background-color: white; | ||
+ | border-color: black; | ||
+ | border-width: 2.5pt; | ||
+ | } | ||
+ | .carousel-indicators .active { | ||
+ | background-color: black; | ||
+ | border-color: black; | ||
+ | border-width: 2.5pt; | ||
+ | } | ||
+ | |||
+ | .carousel-control.left { | ||
+ | margin-left: -4.5em; | ||
+ | color: black; | ||
+ | } | ||
+ | |||
+ | .carousel-control.right { | ||
+ | margin-right: -4.5em; | ||
+ | color: black; | ||
+ | } | ||
+ | |||
+ | .carousel .carousel-control{ | ||
+ | opacity: 1; | ||
+ | } | ||
+ | |||
+ | </style> | ||
</head> | </head> | ||
− | <body | + | <body> |
− | < | + | <!-- Preloading hidden images. --> |
− | <div class=" | + | <div class="hidden"> |
− | < | + | <script type="text/javascript"> |
− | < | + | <!--//--><![CDATA[//><!-- |
− | + | var images = new Array() | |
− | + | ||
− | < | + | function preload() { |
− | + | for (i = 0; i < preload.arguments.length; i++) { | |
− | + | images[i] = new Image() | |
− | + | images[i].src = preload.arguments[i] | |
− | + | } | |
− | + | } | |
− | + | preload( | |
− | + | "https://static.igem.org/mediawiki/2017/4/43/T--Edinburgh_UG--sponsorBronze.svg", | |
− | + | "https://static.igem.org/mediawiki/2017/0/09/T--Edinburgh_UG--sponsorBronzeHover.svg", | |
− | + | "https://static.igem.org/mediawiki/2017/c/ce/T--Edinburgh_UG--sponsorSilver.svg", | |
− | + | "https://static.igem.org/mediawiki/2017/6/66/T--Edinburgh_UG--sponsorSilverHover.svg", | |
− | + | "https://static.igem.org/mediawiki/2017/4/44/T--Edinburgh_UG--sponsorGold.svg", | |
− | + | "https://static.igem.org/mediawiki/2017/6/6a/T--Edinburgh_UG--sponsorGoldHover.svg", | |
− | + | "https://static.igem.org/mediawiki/2017/0/09/T--Edinburgh_UG--sponsorPlatinum.svg", | |
− | + | "https://static.igem.org/mediawiki/2017/e/e8/T--Edinburgh_UG--sponsorPlatinumHover.svg", | |
− | + | "https://static.igem.org/mediawiki/2017/d/db/T--Edinburgh_UG--ContactUsHover.svg" | |
− | + | ) | |
− | + | //--><!]]> | |
− | + | </script> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | </ | + | |
</div> | </div> | ||
− | |||
+ | <br><br><br><br><br> | ||
+ | <!-- Logo --> | ||
+ | <center> | ||
+ | <img src="https://static.igem.org/mediawiki/2017/c/c0/T--Edinburgh_UG--Smore_Main.svg" class="same-width"> | ||
+ | <h2 style="text-align:centre; font-size: 30px; margin-top: 40px;"> Project Introduction | ||
+ | </center> | ||
− | < | + | <br><br><br> |
− | < | + | <!-- Carousel --> |
+ | <div style="text-align: center"> | ||
+ | <div id="carousel" class="carousel slide same-width" data-ride="carousel" style="margin-left: auto; margin-right: auto"> | ||
+ | <!-- Menu --> | ||
+ | <div style="margin: 0 auto; width: 100px; margin-left: 0px;"> | ||
+ | <ol class="carousel-indicators"> | ||
+ | <li data-target="#carousel" data-slide-to="0" class="active"></li> | ||
+ | <li data-target="#carousel" data-slide-to="1"></li> | ||
+ | <li data-target="#carousel" data-slide-to="2"></li> | ||
+ | <li data-target="#carousel" data-slide-to="3"></li> | ||
+ | <li data-target="#carousel" data-slide-to="4"></li> | ||
+ | <li data-target="#carousel" data-slide-to="5"></li> | ||
+ | </ol></div> | ||
− | < | + | <!-- Items --> |
− | < | + | <div class="carousel-inner"> |
− | + | ||
− | + | ||
− | </ | + | <div class="item active"> |
+ | <img src="https://static.igem.org/mediawiki/2017/c/cb/T--Edinburgh_UG--Carousel1.svg" alt="Slide 1" /> | ||
+ | </div> | ||
+ | <div class="item"> | ||
+ | <img src="https://static.igem.org/mediawiki/2017/5/5d/T--Edinburgh_UG--Carousel2.svg" alt="Slide 2" /> | ||
+ | </div> | ||
+ | <div class="item"> | ||
+ | <img src="https://static.igem.org/mediawiki/2017/4/42/T--Edinburgh_UG--Carousel3.svg" alt="Slide 3" /> | ||
+ | </div> | ||
+ | <div class="item"> | ||
+ | <img src="https://static.igem.org/mediawiki/2017/5/5a/T--Edinburgh_UG--Carousel4.svg" alt="Slide 4" /> | ||
+ | </div> | ||
+ | <div class="item"> | ||
+ | <img src="https://static.igem.org/mediawiki/2017/2/28/T--Edinburgh_UG--Carousel5.svg" alt="Slide 5" /> | ||
+ | </div> | ||
+ | <div class="item"> | ||
+ | <a href="https://2017.igem.org/Team:Edinburgh_UG/Description"> | ||
+ | <img src="https://static.igem.org/mediawiki/2017/0/04/T--Edinburgh_UG--Carousel6.svg" alt="Slide 6" /></a> | ||
+ | </div> | ||
+ | </div> | ||
+ | <a href="#carousel" class="left carousel-control" data-slide="prev"> | ||
+ | <span class="glyphicon glyphicon-chevron-left"></span> | ||
+ | </a> | ||
+ | <a href="#carousel" class="right carousel-control" data-slide="next"> | ||
+ | <span class="glyphicon glyphicon-chevron-right"></span> | ||
+ | </a> | ||
+ | </div> | ||
+ | </center> | ||
+ | |||
+ | <!-- Importing jquery and Bootstrap min.js + making the carousel work. --> | ||
+ | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> | ||
+ | <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> | ||
+ | <script> | ||
+ | $("#carousel").carousel(); | ||
+ | </script> | ||
+ | </body> | ||
</html> | </html> | ||
+ | |||
+ | {{:Team:Edinburgh_UG/Templates/Footer}} |
Latest revision as of 05:53, 1 November 2017
Project Introduction