Difference between revisions of "Template:Team:NUS Singapore/new template"

 
Line 1: Line 1:
−
<!DOCTYPE html>
+
<html>
−
<html lang="en" class="no-js">
+
−
<head>
+
−
<meta charset="UTF-8" />
+
−
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+
−
<meta name="viewport" content="width=device-width, initial-scale=1">
+
−
<title>Interactive Points | Codrops</title>
+
−
<meta name="keywords" content="opacity, background, hover, transparency, effect, css, html, javascript, template, point of interest, map" />
+
−
<meta name="author" content="Codrops" />
+
−
 
+
 
<style>
 
<style>
  
Line 96: Line 87:
  
 
</script>
 
</script>
−
 
−
<link rel="shortcut icon" href="favicon.ico">
 
−
<link rel="stylesheet" type="text/css" href="css/collapse.css" />
 
−
<link rel="stylesheet" type="text/css" href="css/googleleapis1.css" />
 
−
<link rel="stylesheet" type="text/css" href="css/googleleapis2.css" />
 
−
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
 
−
<link rel="stylesheet" type="text/css" href="css/demo.css" />
 
−
<link rel="stylesheet" type="text/css" href="css/component.css" />
 
−
<link rel="stylesheet" type="text/css" href="css/sidebar_transitions_normalize.css" />
 
−
<link rel="stylesheet" type="text/css" href="css/sidebar_transitions_demo.css" />
 
−
<link rel="stylesheet" type="text/css" href="css/sidebar_transitions_icons.css" />
 
−
<link rel="stylesheet" type="text/css" href="css/sidebar_transitions_component.css" />
 
−
<link rel="stylesheet" type="text/css" href="css/buttons.css" />
 
−
<link rel="stylesheet" type="text/css" href="css/header_component.css" />
 
−
<script src="js/modernizr.custom.js"></script>
 
−
 
−
<!--[if IE]>
 
−
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 
−
<![endif]-->
 
−
</head>
 
−
<body>
 
−
<main>
 
−
<div id="st-container" class="st-container">
 
−
<div class="st-pusher">
 
−
 
−
<!--Sidebar button-->
 
−
<div id="st-trigger-effects">
 
−
<button data-effect="st-effect-1" class="button button--rayen button--border button--round-m" data-text="More">
 
−
<span><img src="img/scroll-down-arrow.png"></span>
 
−
</button>
 
−
</div>
 
−
<!--End of Sidebar button-->
 
−
 
−
<!--Header-->
 
−
<header id="ha-header" class="ha-header ha-header-large">
 
−
<div class="ha-header-perspective">
 
−
<div class="ha-header-front" style="height: 120px">
 
−
<h1><span>IGem Default Header</span></h1>
 
−
<nav>
 
−
<a href="http://tympanus.net/Development/AnimatedBooks/">Login</a>
 
−
<a>Something</a>
 
−
<a>Anything</a>
 
−
<a href="http://tympanus.net/codrops/?p=15935">Back to the article</a>
 
−
</nav>
 
−
</div>
 
−
<div class="ha-header-bottom">
 
−
<h1 style="margin-left: 40%;">IGem Team NUS</h1>
 
−
</div>
 
−
</div>
 
−
</header>
 
−
<!--End of Header-->
 
−
 
−
<!--Side Bar-->
 
−
<nav class="st-menu st-effect-1 list-group panel" id="menu-1" style="overflow: auto;">
 
−
<h2 class="icon icon-lab">Sidebar</h2>
 
−
<ul>
 
−
<li><a class="icon icon-data" onclick="growDiv('1')" id="menu-item-1" href="#">Data Management</a>
 
−
<div class="grow" id="grow-1">
 
−
<div class='measuringWrapper'>
 
−
  <a href="#" class="list-group-item">Subitem 1</a>
 
−
  <a href="#" class="list-group-item">Subitem 2</a>
 
−
  <a href="#" class="list-group-item">Subitem 3</a>
 
−
</div>
 
−
</div>
 
−
</li>
 
−
<li><a class="icon icon-location" onclick="growDiv('2')" id="menu-item-2" href="#">Location</a>
 
−
<div class="grow" id="grow-2">
 
−
<div class='measuringWrapper'>
 
−
  <a href="#" class="list-group-item">Subitem 1</a>
 
−
  <a href="#" class="list-group-item">Subitem 2</a>
 
−
  <a href="#" class="list-group-item">Subitem 3</a>
 
−
</div>
 
−
</div>
 
−
</li>
 
−
<li><a class="icon icon-study" onclick="growDiv('3')" id="menu-item-3" href="#">Study</a>
 
−
<div class="grow" id="grow-3">
 
−
<div class='measuringWrapper'>
 
−
  <a href="#" class="list-group-item">Subitem 1</a>
 
−
  <a href="#" class="list-group-item">Subitem 2</a>
 
−
  <a href="#" class="list-group-item">Subitem 3</a>
 
−
</div>
 
−
</div>
 
−
</li>
 
−
<li><a class="icon icon-photo" onclick="growDiv('4')" id="menu-item-4" href="#">Collections</a>
 
−
<div class="grow" id="grow-4">
 
−
<div class='measuringWrapper'>
 
−
  <a href="#" class="list-group-item">Subitem 1</a>
 
−
  <a href="#" class="list-group-item">Subitem 2</a>
 
−
  <a href="#" class="list-group-item">Subitem 3</a>
 
−
</div>
 
−
</div>
 
−
</li>
 
−
<li><a class="icon icon-wallet" onclick="growDiv('5')" id="menu-item-5" href="#">Credits</a>
 
−
<div class="grow" id="grow-5">
 
−
<div class='measuringWrapper'>
 
−
  <a href="#" class="list-group-item">Subitem 1</a>
 
−
  <a href="#" class="list-group-item">Subitem 2</a>
 
−
  <a href="#" class="list-group-item">Subitem 3</a>
 
−
</div>
 
−
</div>
 
−
</li>
 
−
</ul>
 
−
</nav>
 
−
<!--End of Side Bar-->
 
−
 
−
<!--Sub header-->
 
−
<p class="message">Please view this wiki site on a larger screen.</p>
 
−
 
−
<section class="content">
 
−
<div class="content__inner">
 
−
<h2 class="content__title">Project Intro</h2>
 
−
<h3 class="content__subtitle">Sub-title</h3>
 
−
<p class="margin-paragraph"><strong>margin-paragraph</strong></p>
 
−
<p class="margin-paragraph"><strong>margin-paragraph</strong></p>
 
−
</div>
 
−
</section>
 
−
<!--End of Sub header-->
 
−
 
−
 
−
<!-- End of Map -->
 
−
<section class="interactive-points interactive-points--alter" id="interactive-2" tabindex="0">
 
−
<img class="static" src="img/map.png" alt="Map of London" />
 
−
<div class="backgrounds">
 
−
<div class="background__element" style="background-image: url(img/1.jpg)"></div>
 
−
<div class="background__element" style="background-image: url(img/2.jpg)"></div>
 
−
<div class="background__element" style="background-image: url(img/3.jpg)"></div>
 
−
<div class="background__element" style="background-image: url(img/4.jpg)"></div>
 
−
<div class="background__element" style="background-image: url(img/5.jpg)"></div>
 
−
<div class="background__element" style="background-image: url(img/6.jpg)"></div>
 
−
</div>
 
−
<svg class="points" viewBox="0 0 1885 1080" width="100%" height="100%">
 
−
<path class="point" d="M409.2,195.4L409.2,195.4c-7.1-7.1-18.6-7.1-25.7,0l0,0c-6.4,6.4-7.1,18.4-1.7,25.7l14.5,21l14.5-21C416.3,213.8,415.6,201.8,409.2,195.4z"/>
 
−
<path class="point" d="M1069.3,589.7L1069.3,589.7c-7.1-7.1-18.6-7.1-25.7,0l0,0c-6.4,6.4-7.1,18.4-1.7,25.7l14.5,21l14.5-21C1076.4,608.2,1075.7,596.1,1069.3,589.7z"/>
 
−
<path class="point" d="M1533.8,114.2L1533.8,114.2c-7.1-7.1-18.6-7.1-25.7,0l0,0c-6.4,6.4-7.1,18.4-1.7,25.7l14.5,21l14.5-21C1541,132.6,1540.2,120.6,1533.8,114.2z"/>
 
−
<path class="point" d="M878.9,247.4L878.9,247.4c-7.1-7.1-18.6-7.1-25.7,0l0,0c-6.4,6.4-7.1,18.4-1.7,25.7l14.5,21l14.5-21C886,265.8,885.3,253.8,878.9,247.4z"/>
 
−
<path class="point" d="M615.2,658.3L615.2,658.3c-7.1-7.1-18.6-7.1-25.7,0l0,0c-6.4,6.4-7.1,18.4-1.7,25.7l14.5,21l14.5-21C622.3,676.8,621.6,664.7,615.2,658.3z"/>
 
−
<path class="point" d="M183.5,524L183.5,524c-7.1-7.1-18.6-7.1-25.7,0l0,0c-6.4,6.4-7.1,18.4-1.7,25.7l14.5,21l14.5-21C190.6,542.5,189.9,530.4,183.5,524z"/>
 
−
</svg>
 
−
<div class="points-tooltips">
 
−
<div class="point-tooltip"><h2 class="point-tooltip__title">Rupert Street</h2><br><p class="point-tooltip__description">The connection to London Bridge that no one knew about</p></div>
 
−
<div class="point-tooltip"><h2 class="point-tooltip__title">Swiss Court</h2><br><p class="point-tooltip__description">The crazy story of a rebel</p></div>
 
−
<div class="point-tooltip"><h2 class="point-tooltip__title">Bear Street</h2><br><p class="point-tooltip__description">Hidden gems and stories</p></div>
 
−
<div class="point-tooltip"><h2 class="point-tooltip__title">Leicester Square</h2><br><p class="point-tooltip__description">A never ending love story</p></div>
 
−
<div class="point-tooltip"><h2 class="point-tooltip__title">Oxendon Street</h2><br><p class="point-tooltip__description">No need to panik, rescue is close</p></div>
 
−
<div class="point-tooltip"><h2 class="point-tooltip__title">Haymarket</h2><br><p class="point-tooltip__description">Adventures to be discovered</p></div>
 
−
</div>
 
−
<div class="points-content">
 
−
<div class="point-content">
 
−
<h3 class="point-content__title">The Rupert Connection</h3>
 
−
<p class="point-content__subtitle">24<sup>th</sup> of February, 1927</p>
 
−
<p class="point-content__text">Descended from astronomers encyclopaedia galactica from which we spring worldlets intelligent beings gathered by gravity billions.</p>
 
−
</div>
 
−
<div class="point-content">
 
−
<h3 class="point-content__title">Swiss Court, Miss</h3>
 
−
<p class="point-content__subtitle">3<sup>rd</sup> of March, 1928</p>
 
−
<p class="point-content__text">Hydrogen atoms circumnavigated Cambrian explosion, a mote of dust suspended in a sunbeam Hypatia.</p>
 
−
</div>
 
−
<div class="point-content">
 
−
<h3 class="point-content__title">Hiding in Bear Street</h3>
 
−
<p class="point-content__subtitle">19<sup>th</sup> of July, 1927</p>
 
−
<p class="point-content__text">From which we spring the ash of stellar alchemy from which we spring emerged into consciousness, great turbulent clouds rich in heavy atoms. </p>
 
−
</div>
 
−
<div class="point-content">
 
−
<h3 class="point-content__title">Leicester Square Love</h3>
 
−
<p class="point-content__subtitle">12<sup>th</sup> of August, 1930</p>
 
−
<p class="point-content__text">A mote of dust suspended in a sunbeam are creatures of the cosmos decipherment, Orion's sword corpus callosum galaxies shores of the cosmic ocean.</p>
 
−
</div>
 
−
<div class="point-content">
 
−
<h3 class="point-content__title">Oxendon of Oxes</h3>
 
−
<p class="point-content__subtitle">26<sup>th</sup> of March, 1927</p>
 
−
<p class="point-content__text">Extraplanetary concept of the number one vanquish the impossible culture trillion the sky calls to us.</p>
 
−
</div>
 
−
<div class="point-content">
 
−
<h3 class="point-content__title">Haymarket Forever</h3>
 
−
<p class="point-content__subtitle">14<sup>th</sup> of January, 1927</p>
 
−
<p class="point-content__text">Birth, are creatures of the cosmos Cambrian explosion colonies great turbulent clouds cosmos are creatures of the cosmos! Great turbulent clouds.</p>
 
−
</div>
 
−
</div>
 
−
</section>
 
−
<!-- End of Map -->
 
−
 
−
 
−
<section class="ha-waypoint" data-animate-down="ha-header-rotate" data-animate-up="ha-header-rotateBack">
 
−
<p>At the present time, eminent breeders try by methodical selection, with a distinct object in view, to make a new strain or sub-breed, superior to anything of the kind in the country. But, for our purpose, a form of selection, which may be called unconscious, and which results from every one trying to possess and breed from the best individual animals, is more important. Thus, a man who intends keeping pointers naturally tries to get as good dogs as he can, and afterwards breeds from his own best dogs, but he has no wish or expectation of permanently altering the breed. Nevertheless we may infer that this process, continued during centuries, would improve and modify any breed, in the same way as Bakewell, Collins, etc., by this very same process, only carried on more methodically, did greatly modify, even during their lifetimes, the forms and qualities of their cattle. Slow and insensible changes of this kind could never be recognised unless actual measurements or careful drawings of the breeds in question have been made long ago, which may serve for comparison. In some cases, however, unchanged, or but little changed, individuals of the same breed exist in less civilised districts, where the breed has been less improved. There is reason to believe that King Charles' spaniel has been unconsciously modified to a large extent since the time of that monarch. Some highly competent authorities are convinced that the setter is directly derived from the spaniel, and has probably been slowly altered from it. It is known that the English pointer has been greatly changed within the last century, and in this case the change has, it is believed, been chiefly effected by crosses with the foxhound; but what concerns us is, that the change has been effected unconsciously and gradually, and yet so effectually that, though the old Spanish pointer certainly came from Spain, Mr. Borrow has not seen, as I am informed by him, any native dog in Spain like our pointer.</p>
 
−
<p>By a similar process of selection, and by careful training, English race-horses have come to surpass in fleetness and size the parent Arabs, so that the latter, by the regulations for the Goodwood Races, are favoured in the weights which they carry. Lord Spencer and others have shown how the cattle of England have increased in weight and in early maturity, compared with the stock formerly kept in this country. By comparing the accounts given in various old treatises of the former and present state of carrier and tumbler pigeons in Britain, India, and Persia, we can trace the stages through which they have insensibly passed, and come to differ so greatly from the rock-pigeon.</p>
 
−
<p>Youatt gives an excellent illustration of the effects of a course of selection which may be considered as unconscious, in so far that the breeders could never have expected, or even wished, to produce the result which ensued—namely, the production of the distinct strains. The two flocks of Leicester sheep kept by Mr. Buckley and Mr. Burgess, as Mr. Youatt remarks, "Have been purely bred from the original stock of Mr. Bakewell for upwards of fifty years. There is not a suspicion existing in the mind of any one at all acquainted with the subject that the owner of either of them has deviated in any one instance from the pure blood of Mr. Bakewell's flock, and yet the difference between the sheep possessed by these two gentlemen is so great that they have the appearance of being quite different varieties."</p>
 
−
<p>If there exist savages so barbarous as never to think of the inherited character of the offspring of their domestic animals, yet any one animal particularly useful to them, for any special purpose, would be carefully preserved during famines and other accidents, to which savages are so liable, and such choice animals would thus generally leave more offspring than the inferior ones; so that in this case there would be a kind of unconscious selection going on. We see the value set on animals even by the barbarians of Tierra del Fuego, by their killing and devouring their old women, in times of dearth, as of less value than their dogs.</p>
 
−
</section>
 
−
 
−
 
−
<section class="content content--related">
 
−
<p><strong>Content Section here</strong></p>
 
−
</section>
 
−
</div><!-- /st-pusher -->
 
−
</div><!-- /st-container -->
 
−
</main>
 
−
<script src="js/lunar.js"></script>
 
−
<script src="js/imagesloaded.pkgd.min.js"></script>
 
−
<script src="js/main.js"></script>
 
−
<script>
 
−
(function() {
 
−
new PointsMap(document.querySelector('#interactive-2'), {
 
−
// Maximum opacity that the background element of a Point can have when the point is active (mouse gets closer to it).
 
−
maxOpacityOnActive : 1,
 
−
// When the mouse is [activeOn]px away from one point, its image gets opacity = point.options.maxOpacity.
 
−
activeOn : 90
 
−
});
 
−
})();
 
−
</script>
 
−
<script src="js/classie.js"></script>
 
−
<script src="js/sidebarEffects.js"></script>
 
−
<script src="js/jquery.min.js"></script>
 
−
<script src="js/waypoints.min.js"></script>
 
−
<script>
 
−
function growDiv(param) {
 
−
var id = param;
 
−
    var growDiv = document.getElementById('grow-'+id);
 
−
    if (growDiv.clientHeight) {
 
−
      growDiv.style.height = 0;
 
−
    } else {
 
−
      var wrapper = document.querySelector('.measuringWrapper');
 
−
      growDiv.style.height = wrapper.clientHeight + "px";
 
−
    }
 
−
 
−
    if(document.getElementById("menu-item-"+id).className.indexOf("focus") >= 0){
 
−
    document.getElementById("menu-item-"+id).className = document.getElementById("menu-item-"+id).className.replace("focus", "");
 
−
    }else{
 
−
    document.getElementById("menu-item-"+id).className += " focus";
 
−
    }
 
−
}
 
−
 
−
var $head = $( '#ha-header' );
 
−
$( '.ha-waypoint' ).each( function(i) {
 
−
var $el = $( this ),
 
−
animClassDown = $el.data( 'animateDown' ),
 
−
animClassUp = $el.data( 'animateUp' );
 
−
 
−
$el.waypoint( function( direction ) {
 
−
if( direction === 'down' && animClassDown ) {
 
−
$head.attr('class', 'ha-header ' + animClassDown);
 
−
}
 
−
else if( direction === 'up' && animClassUp ){
 
−
$head.attr('class', 'ha-header ' + animClassUp);
 
−
}
 
−
}, { offset: '100%' } );
 
−
} );
 
−
</script>
 
−
</body>
 
 
</html>
 
</html>

Latest revision as of 15:39, 18 September 2016