Team:UCL Academy/Project
From 2014hs.igem.org
(Difference between revisions)
(Created page with "<h1> Project </h1>") |
|||
Line 1: | Line 1: | ||
- | < | + | <!doctype html> |
+ | <html> | ||
+ | <head> | ||
+ | <meta http-equiv="content-type" content="text/html; charset="utf-8"> | ||
+ | <title>iGem slideshow stuff</title> | ||
+ | <meta name="viewport" content="width=device-width"> | ||
+ | <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | ||
+ | |||
+ | <!-- CSS for slidesjs.com example --> | ||
+ | <link rel="stylesheet" href="css/example.css"> | ||
+ | <link rel="stylesheet" href="css/font-awesome.min.css"> | ||
+ | <!-- End CSS for slidesjs.com example --> | ||
+ | <!-- BEGIN Navigation bar CSS - This is where the magic happens --> | ||
+ | <link rel="stylesheet" href=".../navbar.css"> | ||
+ | <!-- END Navigation bar CSS --> | ||
+ | |||
+ | <!-- SlidesJS Required: Link to jQuery --> | ||
+ | <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> | ||
+ | <script src="js/jquery.slides.min.js"></script> | ||
+ | <!-- End SlidesJS Required --> | ||
+ | |||
+ | <!-- BEGIN JavaScript --> | ||
+ | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> | ||
+ | <script type="text/javascript"> | ||
+ | $(document).ready(function(){ | ||
+ | |||
+ | // Requried: Navigation bar drop-down | ||
+ | $("nav ul li").hover(function() { | ||
+ | $(this).addClass("active"); | ||
+ | $(this).find("ul").show().animate({opacity: 1}, 400); | ||
+ | },function() { | ||
+ | $(this).find("ul").hide().animate({opacity: 0}, 200); | ||
+ | $(this).removeClass("active"); | ||
+ | }); | ||
+ | |||
+ | // Requried: Addtional styling elements | ||
+ | $('nav ul li ul li:first-child').prepend('<li class="arrow"></li>'); | ||
+ | $('nav ul li:first-child').addClass('first'); | ||
+ | $('nav ul li:last-child').addClass('last'); | ||
+ | $('nav ul li ul').parent().append('<span class="dropdown"></span>').addClass('drop'); | ||
+ | |||
+ | }); | ||
+ | </script> | ||
+ | <!-- END JavaScript --> | ||
+ | |||
+ | |||
+ | <style> | ||
+ | body { | ||
+ | -webkit-font-smoothing: antialiased; | ||
+ | font: normal 15px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif; | ||
+ | color: #232525; | ||
+ | padding-top:70px; | ||
+ | } | ||
+ | |||
+ | #slides { | ||
+ | display: none | ||
+ | } | ||
+ | |||
+ | #slides .slidesjs-navigation { | ||
+ | margin-top:5px; | ||
+ | } | ||
+ | |||
+ | a.slidesjs-next, | ||
+ | a.slidesjs-previous, | ||
+ | a.slidesjs-play, | ||
+ | a.slidesjs-stop { | ||
+ | background-image: url(img/btns-next-prev.png); | ||
+ | background-repeat: no-repeat; | ||
+ | display:block; | ||
+ | width:12px; | ||
+ | height:18px; | ||
+ | overflow: hidden; | ||
+ | text-indent: -9999px; | ||
+ | float: left; | ||
+ | margin-right:5px; | ||
+ | } | ||
+ | |||
+ | a.slidesjs-next { | ||
+ | margin-right:10px; | ||
+ | background-position: -12px 0; | ||
+ | } | ||
+ | |||
+ | a:hover.slidesjs-next { | ||
+ | background-position: -12px -18px; | ||
+ | } | ||
+ | |||
+ | a.slidesjs-previous { | ||
+ | background-position: 0 0; | ||
+ | } | ||
+ | |||
+ | a:hover.slidesjs-previous { | ||
+ | background-position: 0 -18px; | ||
+ | } | ||
+ | |||
+ | a.slidesjs-play { | ||
+ | width:15px; | ||
+ | background-position: -25px 0; | ||
+ | } | ||
+ | |||
+ | a:hover.slidesjs-play { | ||
+ | background-position: -25px -18px; | ||
+ | } | ||
+ | |||
+ | a.slidesjs-stop { | ||
+ | width:18px; | ||
+ | background-position: -41px 0; | ||
+ | } | ||
+ | |||
+ | a:hover.slidesjs-stop { | ||
+ | background-position: -41px -18px; | ||
+ | } | ||
+ | |||
+ | .slidesjs-pagination { | ||
+ | margin: 7px 0 0; | ||
+ | float: right; | ||
+ | list-style: none; | ||
+ | } | ||
+ | |||
+ | .slidesjs-pagination li { | ||
+ | float: left; | ||
+ | margin: 0 1px; | ||
+ | } | ||
+ | |||
+ | .slidesjs-pagination li a { | ||
+ | display: block; | ||
+ | width: 13px; | ||
+ | height: 0; | ||
+ | padding-top: 13px; | ||
+ | background-image: url(img/pagination.png); | ||
+ | background-position: 0 0; | ||
+ | float: left; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | |||
+ | .slidesjs-pagination li a.active, | ||
+ | .slidesjs-pagination li a:hover.active { | ||
+ | background-position: 0 -13px | ||
+ | } | ||
+ | |||
+ | .slidesjs-pagination li a:hover { | ||
+ | background-position: 0 -26px | ||
+ | } | ||
+ | |||
+ | #slides a:link, | ||
+ | #slides a:visited { | ||
+ | color: #333 | ||
+ | } | ||
+ | |||
+ | #slides a:hover, | ||
+ | #slides a:active { | ||
+ | color: #9e2020 | ||
+ | } | ||
+ | |||
+ | .navbar { | ||
+ | overflow: hidden | ||
+ | } | ||
+ | </style> | ||
+ | <!-- End SlidesJS Optional--> | ||
+ | |||
+ | <!-- SlidesJS Required: These styles are required if you'd like a responsive slideshow --> | ||
+ | <style> | ||
+ | #slides { | ||
+ | display: none | ||
+ | } | ||
+ | |||
+ | .container { | ||
+ | margin: 0 auto | ||
+ | } | ||
+ | |||
+ | /* For tablets & smart phones */ | ||
+ | @media (max-width: 767px) { | ||
+ | body { | ||
+ | padding-left: 20px; | ||
+ | padding-right: 20px; | ||
+ | } | ||
+ | .container { | ||
+ | width: auto | ||
+ | } | ||
+ | } | ||
+ | |||
+ | /* For smartphones */ | ||
+ | @media (max-width: 480px) { | ||
+ | .container { | ||
+ | width: auto | ||
+ | } | ||
+ | } | ||
+ | |||
+ | /* For smaller displays like laptops */ | ||
+ | @media (min-width: 768px) and (max-width: 979px) { | ||
+ | .container { | ||
+ | width: 724px | ||
+ | } | ||
+ | } | ||
+ | |||
+ | /* For larger displays */ | ||
+ | @media (min-width: 1200px) { | ||
+ | .container { | ||
+ | width: 1170px | ||
+ | } | ||
+ | } | ||
+ | </style> | ||
+ | <!-- SlidesJS Required: --> | ||
+ | </head> | ||
+ | <body> | ||
+ | <div class="wrapper"> | ||
+ | |||
+ | <!-- BEGIN Dark navigation bar --> | ||
+ | <nav class="dark"> | ||
+ | <ul class="clear"> | ||
+ | <li><a href="#">Home</a></li> | ||
+ | <li><a href="#">About</a></li> | ||
+ | <li><a href="#">Services</a> | ||
+ | <ul> | ||
+ | <li><a href="#">Branding</a></li> | ||
+ | <li><a href="#">Print</a></li> | ||
+ | <li><a href="#">Web</a></li> | ||
+ | <li><a href="#">Marketing</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li><a href="#">Portfolio</a></li> | ||
+ | <li><a href="#">Clients</a></li> | ||
+ | <li><a href="#">Our blog</a></li> | ||
+ | <li><a href="#">Downloads</a></li> | ||
+ | <li><a href="#">Contact us</a></li> | ||
+ | </ul> | ||
+ | </nav> | ||
+ | <!-- END Dark navigation bar --> | ||
+ | |||
+ | </div> | ||
+ | <!-- SlidesJS : Start Slideshow --> | ||
+ | <div class="container"> | ||
+ | <div id="slides"> | ||
+ | <a href="#"><img src="img/example-slide-1.jpg"></a> | ||
+ | <a href="#"><img src="img/example-slide-2.jpg"></a> | ||
+ | <a href="#"><img src="img/example-slide-3.jpg"></a> | ||
+ | <a href="#"><img src="img/example-slide-4.jpg"></a> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | <script> | ||
+ | $(function() { | ||
+ | $('#slides').slidesjs({ | ||
+ | width: 940, | ||
+ | height: 528, | ||
+ | play: { | ||
+ | active: true, | ||
+ | auto: true, | ||
+ | interval: 4000, | ||
+ | swap: true | ||
+ | } | ||
+ | }); | ||
+ | }); | ||
+ | </script> | ||
+ | <!-- End SlidesJS Slideshow --> | ||
+ | </body> | ||
+ | </html> |
Revision as of 15:59, 24 May 2014
<!doctype html>