Difference between revisions of "Team:Elan Vital Korea"
(19 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
− | {{ | + | {{ElanVitalKoreaMWlook}} |
+ | {{ElanVitalKorea}} | ||
+ | |||
<html> | <html> | ||
+ | |||
+ | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> | ||
+ | <script> | ||
+ | $(document).ready(function(){ | ||
+ | // Cache the Window object | ||
+ | $window = $(window); | ||
+ | |||
+ | $('section[data-type="background"]').each(function(){ | ||
+ | var $bgobj = $(this); // assigning the object | ||
+ | |||
+ | $(window).scroll(function() { | ||
+ | |||
+ | // Scroll the background at var speed | ||
+ | // the yPos is a negative value because we're scrolling it UP! | ||
+ | var yPos = -($window.scrollTop() / $bgobj.data('speed')); | ||
+ | |||
+ | // Put together our final background position | ||
+ | var coords = '50% '+ yPos + 'px'; | ||
+ | |||
+ | // Move the background | ||
+ | $bgobj.css({ backgroundPosition: coords }); | ||
+ | |||
+ | }); // window scroll Ends | ||
+ | |||
+ | }); | ||
+ | |||
+ | }); | ||
+ | /* | ||
+ | * Create HTML5 elements for IE's sake | ||
+ | */ | ||
+ | |||
+ | document.createElement("article"); | ||
+ | document.createElement("section"); | ||
+ | </script> | ||
+ | <style> | ||
+ | body{ | ||
+ | margin:0; | ||
+ | padding:0; | ||
+ | } | ||
+ | |||
+ | |||
+ | #home { | ||
+ | background: url(https://static.igem.org/mediawiki/2015/archive/2/24/20150829203509!ElanVital_Bg.png) 50% 0 no-repeat fixed; | ||
+ | height: 1000px; | ||
+ | margin: 0 auto; | ||
+ | width: 100%; | ||
+ | max-width: 1920px; | ||
+ | position: relative; | ||
+ | box-shadow: 0 0 50px rgba(0,0,0,0.8); | ||
+ | } | ||
+ | #about { | ||
+ | background: url(https://static.igem.org/mediawiki/2015/2/28/Elan_Vital_solidbg.JPG) 50% 0 no-repeat fixed; | ||
+ | height: 1000px; | ||
+ | margin: 0 auto; | ||
+ | width: 100%; | ||
+ | max-width: 1920px; | ||
+ | position: relative; | ||
+ | box-shadow: 0 0 50px rgba(0,0,0,0.8); | ||
+ | } | ||
+ | |||
+ | /* Introduction */ | ||
+ | |||
+ | #home article { background: url("#") no-repeat scroll center top transparent; height: 458px; position: absolute; text-indent: -9999px; top: 291px; width: 100%; } | ||
+ | |||
+ | #about article { background: url("#") no-repeat scroll center top transparent; height: 458px; position: absolute; text-indent: -9999px; top: 291px; width: 100%; } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | .galleryItem { | ||
+ | color: #797478; | ||
+ | font: 10px/1.5 Verdana, Helvetica, sans-serif; | ||
+ | float: left; | ||
+ | width: 16%; | ||
+ | margin: 2% 2% 50px 2%; | ||
+ | } | ||
+ | .galleryItem h2 { | ||
+ | text-transform: uppercase; | ||
+ | } | ||
+ | .galleryItem img { | ||
+ | max-width: 100%; | ||
+ | -webkit-border-radius: 5px; | ||
+ | -moz-border-radius: 5px; | ||
+ | border-radius: 5px; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | .center { | ||
+ | position: absolute; | ||
+ | margin: auto; | ||
+ | top: 0; | ||
+ | right: 0; | ||
+ | bottom: 0; | ||
+ | left: 0; | ||
+ | width: 100px; | ||
+ | height: 100px; | ||
+ | border-radius: 3px; | ||
+ | } | ||
+ | |||
+ | IMG.displayed { | ||
+ | display: block; | ||
+ | margin-left: auto; | ||
+ | margin-right: auto; } | ||
+ | |||
+ | h4 { | ||
+ | color:white; | ||
+ | font-size: 24px; | ||
+ | letter-spacing:1px; | ||
+ | line-height:25px; | ||
+ | } | ||
+ | |||
+ | h5{ | ||
+ | text-decoration:none; | ||
+ | font-size: 24px; | ||
+ | letter-spacing:1px; | ||
+ | line-height:25px; | ||
+ | } | ||
+ | |||
+ | |||
+ | IMG.igem { | ||
+ | float:right; | ||
+ | width:5%; | ||
+ | margin:20px; | ||
+ | } | ||
+ | |||
+ | </style> | ||
+ | |||
+ | </head> | ||
+ | |||
<body> | <body> | ||
− | + | <!-- Section #1 --> | |
− | + | <section id="home" data-speed="10" data-type="background"> | |
− | + | <a href="#"> <img class="igem" src="https://static.igem.org/mediawiki/2015/7/70/IGEM_Logo.gif"></a> | |
− | + | ||
− | + | <br> | |
− | + | <br> | |
− | + | <br> | |
− | + | <br> | |
− | + | <br> | |
− | + | <br> | |
− | + | <br> | |
− | + | <div class="center;"> | |
− | + | <a href="https://2015.igem.org/Team:elan_vital_korea"> | |
− | + | <img class="displayed" src="https://static.igem.org/mediawiki/2015/d/d5/ElanVital_Logo.png"> | |
− | + | </a> | |
− | + | ||
− | + | <h4 style="text-align:center;"> | |
− | + | HOME <br> | |
− | + | </h4> | |
− | + | </div> | |
− | + | </div> | |
− | + | </section> | |
− | + | ||
− | + | <script> | |
− | + | $('a').click(function(){ | |
− | + | $('html, body').animate({ | |
− | + | scrollTop: $( $(this).attr('href') ).offset().top | |
− | + | }, 500); | |
− | + | return false; | |
− | + | }); | |
− | + | </script> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
</body> | </body> | ||
+ | |||
</html> | </html> |
Latest revision as of 23:10, 18 September 2015