|
|
| (339 intermediate revisions not shown) |
| Line 1: |
Line 1: |
| - | <html> | + | {{:Team:Cornell/sandbox/header}} |
| - | <head> | + | <html> |
| - | <title> Parallax Test </title>
| + | <head> |
| - | <meta name="Description" content="2014 Parallax Down" />
| + | |
| - | <meta name="Keywords" content="hi this is going to be awesome" />
| + | |
| - | | + | |
| - | <!--Fixes IE browser older than IE9-->
| + | |
| - | <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
| + | |
| - | | + | |
| - | <!-- Remove all empty <p> tags -->
| + | |
| | <script type="text/javascript"> | | <script type="text/javascript"> |
| - | $(document).ready(function() {
| + | $(document).ready(function() { |
| - | $("p").filter( function() {
| + | //width of home body wrapper |
| - | return $.trim($(this).html()) == '';
| + | $(".home").height($(document).height()-200); |
| - | }).remove()
| + | |
| - | });
| + | $(window).resize(function() { |
| | + | $(".home").height($(document).height()-200); |
| | + | }); |
| | + | }); |
| | </script> | | </script> |
| - |
| |
| - | <style type="text/css">
| |
| - | /* -----------------------------------------
| |
| - | iGEM Reset
| |
| - | ----------------------------------------- */
| |
| - | #globalWrapper {
| |
| - | background-color: transparent;
| |
| - | border: none;
| |
| - | margin: 0;
| |
| - | padding: 0;
| |
| - | width: 100%;
| |
| - | height: 100%;
| |
| - | }
| |
| - | #content {
| |
| - | background-color: transparent;
| |
| - | border: none;
| |
| - | padding: 0;
| |
| - | margin: 0;
| |
| - | width: 100%;
| |
| - | overflow: visible;
| |
| - | height: 100%;
| |
| - | line-height: inherit;
| |
| - | }
| |
| - | #bodyContent {
| |
| - | border: none;
| |
| - | padding: 0px;
| |
| - | margin: 0px;
| |
| - | width: 100%;
| |
| - | height: 100%;
| |
| - | }
| |
| - | #top-section {
| |
| - | height: 15px;
| |
| - | margin: 0px;
| |
| - | margin-left: auto;
| |
| - | margin-right: auto;
| |
| - | margin-bottom: 0 !important;
| |
| - | padding: 0;
| |
| - | border: none;
| |
| - | font-size: 10px;
| |
| - | }
| |
| - | #p-logo {
| |
| - | height: 1px;
| |
| - | overflow: hidden;
| |
| - | display: none;
| |
| - | }
| |
| - | #search-controls {
| |
| - | overflow: hidden;
| |
| - | display: block;
| |
| - | background: none;
| |
| - | position: absolute;
| |
| - | top: 100px;
| |
| - | right: 40px;
| |
| - | }
| |
| - | #menubar.left-menu {
| |
| - | /* margin-top: -80px; uncomment this when page goes live */
| |
| - | background: none;
| |
| - | height: 20px;
| |
| - | left: 20px;
| |
| - | float: left;
| |
| - | }
| |
| - | .left-menu ul {
| |
| - | visibility: hidden;
| |
| - | }
| |
| - | .left-menu:hover ul {
| |
| - | visibility: visible;
| |
| - | }
| |
| - | .left-menu:hover ul li a {
| |
| - | color: #666;
| |
| - | }
| |
| - | .left-menu li a:hover {
| |
| - | color: #aaaaff !important;
| |
| - | text-decoration: underline;
| |
| - | }
| |
| - | #menubar.right-menu {
| |
| - | display: block;
| |
| - | width: 300px;
| |
| - | float: left;
| |
| - | margin-top: 2px;
| |
| - | margin-right: 0px;
| |
| - | border: none;
| |
| - | }
| |
| - | .right-menu ul {
| |
| - | width: 300px;
| |
| - | margin: 0px;
| |
| - | visibility: hidden;
| |
| - | }
| |
| - | .right-menu ul li a {
| |
| - | background: none;
| |
| - | color: #666;
| |
| - | }
| |
| - | .right-menu:hover ul {
| |
| - | visibility: visible;
| |
| - | }
| |
| - | #footer-box {
| |
| - | width: 100%;
| |
| - | margin: -10px auto 0 auto;
| |
| - | padding: 20px 0;
| |
| - | display: none; /* uncomment when page goes live */
| |
| - | }
| |
| - | .visualClear {
| |
| - | display: none;
| |
| - | }
| |
| - | #footer {
| |
| - | border: none;
| |
| - | width: 965px;
| |
| - | margin: 0 auto;
| |
| - | padding: 0;
| |
| - | }
| |
| - | .firstHeading {
| |
| - | display: none;
| |
| - | }
| |
| - | #f-list a {
| |
| - | color: #333;
| |
| - | font-size: 10px;
| |
| - | }
| |
| - | #f-list a:hover {
| |
| - | color: #666;
| |
| - | }
| |
| - | .printfooter {
| |
| - | display: none;
| |
| - | }
| |
| - | #footer ul {
| |
| - | margin: 0;
| |
| - | padding: 0;
| |
| - | }
| |
| - | #footer ul li {
| |
| - | margin-top: 0;
| |
| - | margin-bottom: 0;
| |
| - | margin-left: 10px;
| |
| - | margin-right: 10px;
| |
| - | padding: 0;
| |
| - | }
| |
| - | #search-controls {
| |
| - | display: none;
| |
| - | }
| |
| - | h3#siteSub {
| |
| - | display: none;
| |
| - | }
| |
| - | #contentSub {
| |
| - | display: none;
| |
| - | }
| |
| - | p:first-child {
| |
| - | display: none;
| |
| - | }
| |
| - | #catlinks {
| |
| - | display: none;
| |
| - | }
| |
| - | #footer-box {
| |
| - | width: 977px;
| |
| - | margin-bottom: 20px;
| |
| - | }
| |
| - |
| |
| - | /* -----------------------------------------
| |
| - | Basic Styles
| |
| - | ----------------------------------------- */
| |
| - | * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
| |
| - |
| |
| - | html { font-size: 62.5%; }
| |
| - |
| |
| - | body {
| |
| - | background: #f2f2f2;
| |
| - | font-family: Helvetica, sans-serif;
| |
| - | font-size: 15px;
| |
| - | line-height: 23px;
| |
| - | color: #222222;
| |
| - | -webkit-font-smoothing: antialiased;
| |
| - | }
| |
| - |
| |
| - | div.content {
| |
| - | margin: 0 204px;
| |
| - | }
| |
| - |
| |
| - | div.footer {
| |
| - | position: fixed;
| |
| - | z-index: 10;
| |
| - | width: 100%;
| |
| - | height: 77px;
| |
| - | text-align: center;
| |
| - | font-size: 13px;
| |
| - | bottom: -1px;
| |
| - | }
| |
| - |
| |
| - | h1, h2, h3, h4, h5, h6 {
| |
| - | font-family: Helvetica, serif;
| |
| - | font-weight: normal;
| |
| - | color: #000;
| |
| - | border-bottom: none;
| |
| - | margin-bottom: 0px !important;
| |
| - | }
| |
| - |
| |
| - | h1 { font-size: 44px; }
| |
| - | h2 { font-size: 37px; }
| |
| - | h3 { font-size: 27px; }
| |
| - | h4 { font-size: 23px; }
| |
| - | h5 { font-size: 17px; }
| |
| - | h6 { font-size: 14px; }
| |
| - |
| |
| - | h1.centered, h2.centered, h3.centered, h4.centered, h5.centered, h6.centered {
| |
| - | text-align: center;
| |
| - | }
| |
| - |
| |
| - | a, a:visited {
| |
| - | color: #b31b1b;
| |
| - | text-decoration: none;
| |
| - | }
| |
| - |
| |
| - | a:hover {
| |
| - | color: #871414;
| |
| - | text-decoration: none;
| |
| - | }
| |
| - |
| |
| - | /* -----------------------------------------
| |
| - | Lists
| |
| - | ----------------------------------------- */
| |
| - | ul, ol { font-size: 14px; line-height: 1.6; margin-bottom: 17px; list-style-position: inside; }
| |
| - |
| |
| - | ul li ul, ul li ol { margin-left: 20px; margin-bottom: 0; }
| |
| - | ul.square, ul.circle, ul.disc { margin-left: 17px; }
| |
| - | ul.square { list-style-type: square; }
| |
| - | ul.square li ul { list-style: inherit; }
| |
| - | ul.circle { list-style-type: circle; }
| |
| - | ul.circle li ul { list-style: inherit; }
| |
| - | ul.disc { list-style-type: disc; }
| |
| - | ul.disc li ul { list-style: inherit; }
| |
| - | ul.no-bullet { list-style: none; }
| |
| - | ul.no-bullet li {
| |
| - | margin-right: 15px;
| |
| - | padding-bottom: 7px;
| |
| - | padding-left: 10px;
| |
| - | padding-right: 10px;
| |
| - | padding-top: 10px;
| |
| - | text-align: left;
| |
| - | }
| |
| - | ul.large li { line-height: 21px; }
| |
| - |
| |
| - | ol li ul, ol li ol { margin-left: 20px; margin-bottom: 0; }
| |
| - |
| |
| - |
| |
| - | /* -----------------------------------------
| |
| - | Misc
| |
| - | ----------------------------------------- */
| |
| - | .left { float: left; }
| |
| - | .right { float: right; }
| |
| - | .text-left { text-align: left; }
| |
| - | .text-right { text-align: right; }
| |
| - | .text-center { text-align: center; }
| |
| - | .hide { display: none; }
| |
| - | .highlight { background: #ffff99; }
| |
| - |
| |
| - | #googlemap img, object, embed { max-width: none; }
| |
| - | #map_canvas embed { max-width: none; }
| |
| - | #map_canvas img { max-width: none; }
| |
| - | #map_canvas object { max-width: none; }
| |
| - |
| |
| - | .nohilite {
| |
| - | -webkit-touch-callout: none;
| |
| - | -webkit-user-select: none;
| |
| - | -khtml-user-select: none;
| |
| - | -moz-user-select: none;
| |
| - | -ms-user-select: none;
| |
| - | user-select: none;
| |
| - | }
| |
| - | div.clearfix {
| |
| - | content: ".";
| |
| - | display: block;
| |
| - | clear: both;
| |
| - | visibility: hidden;
| |
| - | line-height: 0;
| |
| - | height: 0;
| |
| - | }
| |
| - | .off-canvas {
| |
| - | width: 100%;
| |
| - | }
| |
| - | </style>
| |
| | </head> | | </head> |
| - | <body> | + | <body style="overflow: hidden"> |
| - | <div class="content"> | + | <div class="navbar" style="position: relative; z-index: 20; margin-top: -29px;"> |
| - | <h1> Whee </h1> | + | <a><div class="head"> Project </div></a> |
| - | <h2> Whoo </h2>
| + | <a><div class="head"> Outreach </div></a> |
| - | <h3> Whu </h3> | + | <div class="head"> |
| - | <h4> Wha </h4>
| + | <img style="width: 450px; padding: 0 30px;" src="https://static.igem.org/mediawiki/2013/0/0a/Cornell_newlogo.png"> |
| - | <h5> Why </h5> | + | |
| - | <h6> Whi </h6> | + | </div> |
| - | <div> Hi </div> | + | <div style="display: inline-block; position: absolute; margin-left: -210px;"> |
| - | <p> Paragraph </p>
| + | <a> |
| - | <a href="">Link</a> | + | <img src ="https://static.igem.org/mediawiki/igem.org/6/67/IGEMsmall.png""> |
| - | <ul> | + | </a> |
| - | <li> list </li>
| + | </div> |
| - | <li> still a list </li>
| + | <a><div class="head"> Notebook</div></a> |
| - | <ul>
| + | <a><div class="head"> Team</div></a> |
| | </div> | | </div> |
| - | <div class="footer"> | + | <div class="wrapper home"> |
| - | <ul class="no-bullet"> | + | <div id="first-screen" class="screen" data-speed="500" data-dist="100"> |
| - | < li> <img src =" https:// static. igem. org/ mediawiki/ igem. org/ 6/ 67/ IGEMsmall.png"> </ li> | + | <span class="layer1" style="font-size:60px; top: 20%; left: 20%;">Home Page</span> |
| - | <li> Project </li> | + | <img class="layer4 spin" src=" http:// www. iconarchive. com/ download/ i74335/visualpharm/icons8-metro-style/Very-Basic-Settings. ico" style="left: 57%; height: 90%; width: 30%;"> |
| - | <li> Outreach </li> | + | <span class="layer1" style="left:20%; top: 45%">Use arrow keys to move through slider -></span> |
| - | <li> Notebook </li> | + | <span class="layer1" style="left:20%; top: 55%">I'll get mouse controls working in a bit</span> |
| - | <li> Team </li> | + | </div> |
| - | </ul> | + | <div id="second-last-screen" class="screen" data-speed="500" data-dist="100" style="left: 100%;"> |
| | + | <span class="layer1" style="left:25%; top: 45%">There's no parallax effect right now... It's giving me some trouble</span> |
| | + | <span class="layer1" style="left:25%; top: 55%">Also all the colors and images are temporary -></span> |
| | + | </div> |
| | + | <div class="screen" data-speed="500" data-dist="100" style="left: 200%;"> |
| | + | <span class="layer1" style="left:25%; top: 45%">General page layout coming soon</span> |
| | + | <span class="layer1" style="left:25%; top: 55%">...and the hprac page that I keep forgetting to work on</span> |
| | + | </div> |
| | + | </div> |
| | + | <div class="navbar" style="position: fixed; z-index: 10; bottom: -1px;"> |
| | + | <a> |
| | + | <div class="tail"> |
| | + | <span>Nickel</span> |
| | + | <img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/512/Sport-Activities-Skydiving-gear-icon.png"> |
| | + | </div> |
| | + | </a> |
| | + | <a> |
| | + | <div class="tail"> |
| | + | <span>Mercury</span> |
| | + | <img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/256/Accommodation-Jacuzzi-icon.png"> |
| | + | </div> |
| | + | </a> |
| | + | <a> |
| | + | <div class="tail"> |
| | + | <span style="margin-left: -7%">Lead</span> |
| | + | <img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/256/Sport-Activities-Fishing-icon.png"> |
| | + | </div> |
| | + | </a> |
| | + | <a> |
| | + | <div class="tail"> |
| | + | <span style="margin-left: -9%">Reporters</span> |
| | + | <img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/256/Sport-Activities-Base-jumping-icon.png"> |
| | + | </div> |
| | + | </a> |
| | </div> | | </div> |
| | </body> | | </body> |
| | </html> | | </html> |
"
Use arrow keys to move through slider ->
I'll get mouse controls working in a bit
