|
|
(110 intermediate revisions not shown) |
Line 1: |
Line 1: |
| <html> | | <html> |
| <head> | | <head> |
- | <link href='http://fonts.googleapis.com/css?family=Audiowide|Share+Tech+Mono' rel='stylesheet' type='text/css'>
| |
- | <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
| |
- | <script src="http://yourjavascript.com/428146502/menu.js"></script>
| |
- | <script src="http://yourjavascript.com/415112464/responsiveslides-min.js"></script>
| |
- | </head>
| |
| | | |
- | <style> | + | <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> |
| | | |
- | /* Hide Defaults */ | + | <script type="text/javascript"> |
- | #contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {
| + | |
- | display:none;}
| + | |
- | #top-section {
| + | |
- | border: none;
| + | |
- | height: 0px;}
| + | |
- | #content {
| + | |
- | border: none;}
| + | |
| | | |
- | /* Background */
| + | $(document).ready(function(){ |
- | body {
| + | |
- | background-image:url("http://oi62.tinypic.com/2uek64o.jpg");
| + | |
- | }
| + | |
- | div#bodyContent {
| + | |
- | background-image: url('http://oi59.tinypic.com/2qvgkcw.jpg !important');
| + | |
- | }
| + | |
- | div#content{
| + | |
- | background-image: url('http://oi59.tinypic.com/2qvgkcw.jpg !important');
| + | |
- | }
| + | |
- | div#menubar {
| + | |
- | background-image: url('http://oi59.tinypic.com/2qvgkcw.jpg !important');
| + | |
- | }
| + | |
| | | |
- | /* Text Styles */ | + | // PLEASE READ BELOW COMMENT |
- | h1{
| + | // |
- | font: 400 45px/0.5 'Audiowide', Helvetica, sans-serif;
| + | // don't worry, we're open source --> https://github.com/raptor-igem/2014hs-website |
- | text-align:center;
| + | // |
- | border-bottom: medium none !important;
| + | // PLEASE READ ABOVE COMMENT |
- | }
| + | |
- | p{
| + | $("body.page-Team_Ravenwood_Raptors").append("<iframe class='real' src='http://raptor-igem.github.io/2014hs-website/'></iframe>"); |
- | font: 400 14px/1.5 'Share Tech Mono', Times, serif;
| + | }); |
- | } | + | |
| | | |
- | /* Navigation */ | + | </script> |
- | #cssmenu {
| + | |
- | position: relative;
| + | <style type="text/css"> |
- | height: 44px;
| + | body { |
- | background: url('http://oi59.tinypic.com/2qvgkcw.jpg');
| + | overflow-x: hidden; |
- | width: auto;
| + | height: 100%; |
- | }
| + | } |
- | #cssmenu ul {
| + | .real { |
- | list-style: none; | + | |
- | padding: 0; | + | |
- | margin: 0;
| + | |
- | line-height: 1;
| + | |
- | }
| + | |
- | #cssmenu > ul {
| + | |
- | position: relative;
| + | |
- | display: block;
| + | |
- | background: url('http://oi59.tinypic.com/2qvgkcw.jpg');
| + | |
- | height: 32px;
| + | |
- | width: 100%;
| + | |
- | z-index: 500;
| + | |
- | } | + | |
- | #cssmenu > ul > li {
| + | |
- | display: block;
| + | |
- | position: relative;
| + | |
- | float: left;
| + | |
- | margin: 0;
| + | |
- | padding: 0;
| + | |
- | }
| + | |
- | #cssmenu > ul > #menu-button {
| + | |
- | display: none;
| + | |
- | }
| + | |
- | #cssmenu ul li a {
| + | |
- | display: block;
| + | |
- | font-family: Helvetica, sans-serif;
| + | |
- | text-decoration: none;
| + | |
- | }
| + | |
- | #cssmenu > ul > li > a {
| + | |
- | font-size: 14px;
| + | |
- | font-weight: bold;
| + | |
- | padding: 15px 20px;
| + | |
- | color: black;
| + | |
- | text-transform: uppercase;
| + | |
- | -webkit-transition: color 0.25s ease-out;
| + | |
- | -moz-transition: color 0.25s ease-out;
| + | |
- | -ms-transition: color 0.25s ease-out;
| + | |
- | -o-transition: color 0.25s ease-out;
| + | |
- | transition: color 0.25s ease-out;
| + | |
- | }
| + | |
- | #cssmenu > ul > li.has-sub > a {
| + | |
- | padding-right: 32px;
| + | |
- | }
| + | |
- | #cssmenu > ul > li:hover > a {
| + | |
- | color: #9c9c9c;
| + | |
- | }
| + | |
- | #cssmenu li.has-sub::after {
| + | |
- | display: block;
| + | |
- | content: '';
| + | |
- | position: absolute;
| + | |
- | width: 0;
| + | |
- | height: 0;
| + | |
- | }
| + | |
- | #cssmenu > ul > li.has-sub::after {
| + | |
- | right: 10px;
| + | |
- | top: 20px;
| + | |
- | border: 5px solid transparent;
| + | |
- | border-top-color: black;
| + | |
- | }
| + | |
- | #cssmenu > ul > li:hover::after {
| + | |
- | border-top-color: #9c9c9c;
| + | |
- | }
| + | |
- | #indicatorContainer {
| + | |
| position: absolute; | | position: absolute; |
- | height: 12px;
| |
| width: 100%; | | width: 100%; |
- | bottom: 0px; | + | height: 99%; |
| + | background-color: white; |
| + | top: 0%; |
| + | left: 0%; |
| overflow: hidden; | | overflow: hidden; |
- | z-index: -1; | + | z-index: 999; |
| } | | } |
- | #pIndicator {
| |
- | position: absolute;
| |
- | height: 0;
| |
- | width: 100%;
| |
- | border: 12px solid transparent;
| |
- | border-top-color: #2b2f3a;
| |
- | z-index: -2;
| |
- | -webkit-transition: left .25s ease;
| |
- | -moz-transition: left .25s ease;
| |
- | -ms-transition: left .25s ease;
| |
- | -o-transition: left .25s ease;
| |
- | transition: left .25s ease;
| |
- | }
| |
- | #cIndicator {
| |
- | position: absolute;
| |
- | height: 0;
| |
- | width: 100%;
| |
- | border: 12px solid transparent;
| |
- | border-top-color: #2b2f3a;
| |
- | top: -12px;
| |
- | right: 100%;
| |
- | z-index: -2;
| |
- | }
| |
- | #cssmenu ul ul {
| |
- | position: absolute;
| |
- | left: -9999px;
| |
- | top: 70px;
| |
- | opacity: 0;
| |
- | -webkit-transition: opacity .3s ease, top .25s ease;
| |
- | -moz-transition: opacity .3s ease, top .25s ease;
| |
- | -ms-transition: opacity .3s ease, top .25s ease;
| |
- | -o-transition: opacity .3s ease, top .25s ease;
| |
- | transition: opacity .3s ease, top .25s ease;
| |
- | z-index: 1000;
| |
- | }
| |
- | #cssmenu ul ul ul {
| |
- | top: 37px;
| |
- | padding-left: 5px;
| |
- | }
| |
- | #cssmenu ul ul li {
| |
- | position: relative;
| |
- | }
| |
- | #cssmenu > ul > li:hover > ul {
| |
- | left: auto;
| |
- | top: 44px;
| |
- | opacity: 1;
| |
- | }
| |
- | #cssmenu ul ul li:hover > ul {
| |
- | left: 170px;
| |
- | top: 0;
| |
- | opacity: 1;
| |
- | }
| |
- | #cssmenu ul ul li a {
| |
- | width: 130px;
| |
- | border-bottom: 1px solid #eee;
| |
- | padding: 10px 20px;
| |
- | font-size: 12px;
| |
- | color: #7a8189;
| |
- | background: #fff;
| |
- | -webkit-transition: all .35s ease;
| |
- | -moz-transition: all .35s ease;
| |
- | -ms-transition: all .35s ease;
| |
- | -o-transition: all .35s ease;
| |
- | transition: all .35s ease;
| |
- | }
| |
- | #cssmenu ul ul li:hover > a {
| |
- | background: #f6f6f6;
| |
- | color: #8c9195;
| |
- | }
| |
- | #cssmenu ul ul li:last-child > a,
| |
- | #cssmenu ul ul li.last > a {
| |
- | border-bottom: 0;
| |
- | }
| |
- | .submenuArrow {
| |
- | border: 6px solid transparent;
| |
- | width: 0;
| |
- | height: 0;
| |
- | border-bottom-color: #fff;
| |
- | position: absolute;
| |
- | top: -12px;
| |
- | }
| |
- | #cssmenu ul ul li.has-sub::after {
| |
- | border: 4px solid transparent;
| |
- | border-left-color: #7a8189;
| |
- | right: 10px;
| |
- | top: 12px;
| |
- | -moz-transition: all .2s ease;
| |
- | -ms-transition: all .2s ease;
| |
- | -o-transition: all .2s ease;
| |
- | transition: all .2s ease;
| |
- | -webkit-transition: -webkit-transform 0.2s ease, right 0.2s ease;
| |
- | }
| |
- | #cssmenu ul ul li.has-sub:hover::after {
| |
- | border-left-color: #fff;
| |
- | right: -5px;
| |
- | -webkit-transform: rotateY(180deg);
| |
- | -ms-transform: rotateY(180deg);
| |
- | -moz-transform: rotateY(180deg);
| |
- | -o-transform: rotateY(180deg);
| |
- | transform: rotateY(180deg);
| |
- | }
| |
- | @media all and (max-width: 800px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
| |
- | #cssmenu {
| |
- | width: auto;
| |
- | }
| |
- | #cssmenu ul {
| |
- | width: auto;
| |
- | }
| |
- | #cssmenu .submenuArrow,
| |
- | #cssmenu #indicatorContainer {
| |
- | display: none;
| |
- | }
| |
- | #cssmenu > ul {
| |
- | height: auto;
| |
- | display: block;
| |
- | }
| |
- | #cssmenu > ul > li {
| |
- | float: none;
| |
- | }
| |
- | #cssmenu li,
| |
- | #cssmenu > ul > li {
| |
- | display: none;
| |
- | }
| |
- | #cssmenu ul ul,
| |
- | #cssmenu ul ul ul,
| |
- | #cssmenu ul > li:hover > ul,
| |
- | #cssmenu ul ul > li:hover > ul {
| |
- | position: relative;
| |
- | left: auto;
| |
- | top: auto;
| |
- | topacity: 1;
| |
- | padding-left: 0;
| |
- | }
| |
- | #cssmenu ul .has-sub::after {
| |
- | display: none;
| |
- | }
| |
- | #cssmenu ul li a {
| |
- | padding: 12px 20px;
| |
- | }
| |
- | #cssmenu ul ul li a {
| |
- | border: 0;
| |
- | background: none;
| |
- | width: auto;
| |
- | padding: 8px 35px;
| |
- | }
| |
- | #cssmenu ul ul li:hover > a {
| |
- | background: none;
| |
- | color: #8c9195;
| |
- | }
| |
- | #cssmenu ul ul ul a {
| |
- | padding: 8px 50px;
| |
- | }
| |
- | #cssmenu ul ul ul ul a {
| |
- | padding: 8px 65px;
| |
- | }
| |
- | #cssmenu ul ul ul ul ul a {
| |
- | padding: 8px 80px;
| |
- | }
| |
- | #cssmenu ul ul ul ul ul ul a {
| |
- | padding: 8px 95px;
| |
- | }
| |
- | #cssmenu > ul > #menu-button {
| |
- | display: block;
| |
- | cursor: pointer;
| |
- | }
| |
- | #cssmenu #menu-button > a {
| |
- | padding: 14px 20px;
| |
- | }
| |
- | #cssmenu ul.open li,
| |
- | #cssmenu > ul.open > li {
| |
- | display: block;
| |
- | }
| |
- | #cssmenu > ul.open > li#menu-button > a {
| |
- | color: #fff;
| |
- | border-bottom: 1px solid rgba(150, 150, 150, 0.1);
| |
- | }
| |
- | #cssmenu #menu-button::after {
| |
- | display: block;
| |
- | content: '';
| |
- | position: absolute;
| |
- | height: 3px;
| |
- | width: 22px;
| |
- | border-top: 2px solid black;
| |
- | border-bottom: 2px solid black;
| |
- | right: 20px;
| |
- | top: 15px;
| |
- | }
| |
- | #cssmenu #menu-button::before {
| |
- | display: block;
| |
- | content: '';
| |
- | position: absolute;
| |
- | height: 3px;
| |
- | width: 22px;
| |
- | border-top: 2px solid black;
| |
- | right: 20px;
| |
- | top: 25px;
| |
- | }
| |
- | #cssmenu ul.open #menu-button::after,
| |
- | #cssmenu ul.open #menu-button::before {
| |
- | border-color: #fff;
| |
- | }
| |
- | }
| |
- | #cssmenu {
| |
- | padding-left: 200px !important;
| |
- | }
| |
- |
| |
- | /* Slider */
| |
- | .rslides {
| |
- | margin: 0 auto;
| |
- | }
| |
- | .rslides_container {
| |
- | margin-bottom: 50px;
| |
- | position: relative;
| |
- | float: left;
| |
- | width: 100%;
| |
- | }
| |
- | .rslides1_nav {
| |
- | position: absolute;
| |
- | -webkit-tap-highlight-color: rgba(0,0,0,0);
| |
- | top: 50%;
| |
- | left: 0;
| |
- | z-index: 99;
| |
- | opacity: 0.7;
| |
- | text-indent: -9999px;
| |
- | overflow: hidden;
| |
- | text-decoration: none;
| |
- | height: 61px;
| |
- | width: 38px;
| |
- | background: transparent url("themes.gif") no-repeat left top;
| |
- | margin-top: -45px;
| |
- | }
| |
- | .rslides1_nav:active {
| |
- | opacity: 1.0;
| |
- | }
| |
- | .rslides1_nav.next {
| |
- | left: auto;
| |
- | background-position: right top;
| |
- | right: 0;
| |
- | }
| |
- | .rslides2_nav {
| |
- | position: absolute;
| |
- | -webkit-tap-highlight-color: rgba(0,0,0,0);
| |
- | top: 0;
| |
- | left: 0;
| |
- | display: block;
| |
- | background: #fff; /* Fix for IE6-9 */
| |
- | opacity: 0;
| |
- | filter: alpha(opacity=1);
| |
- | width: 48%;
| |
- | text-indent: -9999px;
| |
- | overflow: hidden;
| |
- | height: 91%;
| |
- | }
| |
- | .rslides2_nav.next {
| |
- | left: auto;
| |
- | right: 0;
| |
- | }
| |
- | .rslides3_nav {
| |
- | position: absolute;
| |
- | -webkit-tap-highlight-color: rgba(0,0,0,0);
| |
- | opacity: 0.6;
| |
- | text-indent: -9999px;
| |
- | overflow: hidden;
| |
- | top: 0;
| |
- | bottom: 0;
| |
- | left: 0;
| |
- | background: #000 url("themes.gif") no-repeat left 50%;
| |
- | width: 38px;
| |
- | }
| |
- | .rslides3_nav:active {
| |
- | opacity: 1.0;
| |
- | }
| |
- | .rslides3_nav.next {
| |
- | left: auto;
| |
- | background-position: right 50%;
| |
- | right: 0;
| |
- | }
| |
- | .rslides1_nav:focus,
| |
- | .rslides2_nav:focus,
| |
- | .rslides3_nav:focus {
| |
- | outline: none;
| |
- | }
| |
- | .rslides_tabs {
| |
- | margin-top: 10px;
| |
- | text-align: center;
| |
- | }
| |
- | .rslides_tabs li {
| |
- | display: inline;
| |
- | float: none;
| |
- | _float: left;
| |
- | *float: left;
| |
- | margin-right: 5px;
| |
- | }
| |
- | .rslides_tabs a {
| |
- | text-indent: -9999px;
| |
- | overflow: hidden;
| |
- | -webkit-border-radius: 15px;
| |
- | -moz-border-radius: 15px;
| |
- | border-radius: 15px;
| |
- | background: #ccc;
| |
- | background: rgba(0,0,0, .2);
| |
- | display: inline-block;
| |
- | _display: block;
| |
- | *display: block;
| |
- | -webkit-box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
| |
- | -moz-box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
| |
- | box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
| |
- | width: 9px;
| |
- | height: 9px;
| |
- | }
| |
- | .rslides_tabs .rslides_here a {
| |
- | background: #222;
| |
- | background: rgba(0,0,0, .8);
| |
- | }
| |
- | .caption {
| |
- | position: absolute;
| |
- | display: block;
| |
- | bottom: 0;
| |
- | left: 0;
| |
- | right: 0;
| |
- | padding: 15px;
| |
- | text-align: center;
| |
- | background: #000;
| |
- | background: rgba(0,0,0, .8);
| |
- | color: #fff;
| |
- | }
| |
- | .rslides {
| |
- | position: relative;
| |
- | list-style: none;
| |
- | overflow: hidden;
| |
- | width: 100%;
| |
- | padding: 0;
| |
- | margin: 0;
| |
- | }
| |
- | .rslides li {
| |
- | -webkit-backface-visibility: hidden;
| |
- | position: absolute;
| |
- | display: none;
| |
- | width: 100%;
| |
- | left: 0;
| |
- | top: 0;
| |
- | }
| |
- | .rslides li:first-child {
| |
- | position: relative;
| |
- | display: block;
| |
- | float: left;
| |
- | }
| |
- | .rslides img {
| |
- | display: block;
| |
- | height: auto;
| |
- | float: left;
| |
- | width: 100%;
| |
- | border: 0;
| |
- | }
| |
- |
| |
| </style> | | </style> |
| | | |
| + | </head> |
| <body> | | <body> |
| | | |
- | <!-- Logo -->
| + | <div id="page-contain"> |
- | <h1><font color=black>Ravenwood</font><font color=#820909> Raptors</font></h1>
| + | <div class="page-real-main"> |
- | | + | </div> |
- | <!-- Navigation -->
| + | |
- | <div id='cssmenu'> | + | |
- | <ul>
| + | |
- | <li class='active'><a href='https://2014hs.igem.org/Team:Ravenwood_Raptors'><span>Home</span></a></li>
| + | |
- | <li class='active'><a href='https://2014hs.igem.org/Team:Ravenwood_Raptors/team'><span>Team</span></a>
| + | |
- | <li class='has-sub'><a href='#'><span>Project</span></a>
| + | |
- | <ul> | + | |
- | <li class='active'><a href='https://2014hs.igem.org/Team:Ravenwood_Raptors/project/overview'><span>Overview</span></a>
| + | |
- | <li class='active'><a href='https://2014hs.igem.org/Team:Ravenwood_Raptors/Project/process'><span>Process</span></a>
| + | |
- | <li class='active'><a href='https://2014hs.igem.org/Team:Ravenwood_Raptors/Project/results'><span>Results</span></a>
| + | |
- | </ul>
| + | |
- | <li class='has-sub'><a href='#'><span>Technicalities</span></a>
| + | |
- | <ul> | + | |
- | <li class='active'><a href='https://2014hs.igem.org/Team:Ravenwood_Raptors/Project/technicalities/safety'><span>Safety</span></a>
| + | |
- | <li class='active'><a href='https://2014hs.igem.org/Team:Ravenwood_Raptors/Project/technicalities/credits'><span>Credits</span></a>
| + | |
- | </ul>
| + | |
- | <li class='active'><a href='https://2014hs.igem.org/Team:Ravenwood_Raptors/sponsors'><span>sponsors</span></a>
| + | |
- | </ul>
| + | |
| </div> | | </div> |
- |
| |
- | <!-- Slider -->
| |
- | <ul class="rslides">
| |
- | <li><a href="https://2014hs.igem.org/Team:Ravenwood_Raptors/team"><img src="http://oi57.tinypic.com/veuid5.jpg" alt=""><p class="caption">Meet Our Team</p></a></li>
| |
- | <li><a href="https://2014hs.igem.org/Team:Ravenwood_Raptors/project/overview"><img src="http://oi60.tinypic.com/qrc1vb.jpg" alt=""><p class="caption">What'd We Do?</p></a></li>
| |
- | <li><a href="https://2014hs.igem.org/Team:Ravenwood_Raptors/Project/technicalities/safety"><img src="http://oi60.tinypic.com/2dqm5oj.jpg" alt=""><p class="caption">Safety Comes First</p></a></li>
| |
- | <li><a href="https://2014hs.igem.org/Team:Ravenwood_Raptors/Project/technicalities/credits"><img src="http://oi59.tinypic.com/2wdu05h.jpg" alt=""><p class="caption">Who Did What?</p></a></li>
| |
- | <li><a href="https://2014hs.igem.org/Team:Ravenwood_Raptors/sponsors"><img src="http://oi60.tinypic.com/6za2a9.jpg" alt=""><p class="caption">Couldn't Have Done It Without Who?</p></a></li>
| |
- | </ul>
| |
- |
| |
- | <script>
| |
- | $(function() {
| |
- | $(".rslides").responsiveSlides();
| |
- | });
| |
- |
| |
- | $(".rslides").responsiveSlides({
| |
- | auto: true, // Boolean: Animate automatically, true or false
| |
- | speed: 500, // Integer: Speed of the transition, in milliseconds
| |
- | timeout: 4000, // Integer: Time between slide transitions, in milliseconds
| |
- | pager: true, // Boolean: Show pager, true or false
| |
- | nav: true, // Boolean: Show navigation, true or false
| |
- | random: false, // Boolean: Randomize the order of the slides, true or false
| |
- | pause: false, // Boolean: Pause on hover, true or false
| |
- | pauseControls: true, // Boolean: Pause when hovering controls, true or false
| |
- | prevText: "Previous", // String: Text for the "previous" button
| |
- | nextText: "Next", // String: Text for the "next" button
| |
- | maxwidth: "", // Integer: Max-width of the slideshow, in pixels
| |
- | navContainer: "", // Selector: Where controls should be appended to, default is after the 'ul'
| |
- | manualControls: "", // Selector: Declare custom pager navigation
| |
- | namespace: "rslides", // String: Change the default namespace used
| |
- | before: function(){}, // Function: Before callback
| |
- | after: function(){} // Function: After callback
| |
- | });
| |
- | </script>
| |
| | | |
| </body> | | </body> |
- |
| |
- | <footer>
| |
- |
| |
- | </footer>
| |
- |
| |
| </html> | | </html> |