Team:CityU HK/Team/Member

From 2014.igem.org

(Difference between revisions)
(Replaced content with "{{:Team:CityU_HK/Template}} <html> <head> <link rel="stylesheet" href="https://2014.igem.org/Team:CityU_HK/team/members.css?action=raw&ctype=text/css" type="text/css" /> <s...")
Line 15: Line 15:
<hr><br><br>
<hr><br><br>
<center> <font size = "6" > <b> Team Members </b> </font> </center>
<center> <font size = "6" > <b> Team Members </b> </font> </center>
 +
 +
<section id="grid" class="grid clearfix">
 +
<a href="#" data-path-hover="m 0,0 0,47.7775 c 24.580441,3.12569 55.897012,-8.199417 90,-8.199417 34.10299,0 65.41956,11.325107 90,8.199417 L 180,0 z">
 +
<figure>
 +
<img src="img/2.png" />
 +
<svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="m 0,0 0,171.14385 c 24.580441,15.47138 55.897012,24.75772 90,24.75772 34.10299,0 65.41956,-9.28634 90,-24.75772 L 180,0 0,0 z"/></svg>
 +
<figcaption>
 +
<h2>Crystalline</h2>
 +
<p>Soko radicchio bunya nuts gram dulse.</p>
 +
<button>View</button>
 +
</figcaption>
 +
</figure>
 +
</a>
 +
<a href="#" data-path-hover="m 0,0 0,47.7775 c 24.580441,3.12569 55.897012,-8.199417 90,-8.199417 34.10299,0 65.41956,11.325107 90,8.199417 L 180,0 z">
 +
<figure>
 +
<img src="img/4.png" />
 +
<svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="m 0,0 0,171.14385 c 24.580441,15.47138 55.897012,24.75772 90,24.75772 34.10299,0 65.41956,-9.28634 90,-24.75772 L 180,0 0,0 z"/></svg>
 +
<figcaption>
 +
<h2>Cacophony</h2>
 +
<p>Two greens tigernut soybean radish artichoke.</p>
 +
<button>View</button>
 +
</figcaption>
 +
</figure>
 +
</a>
 +
<a href="#" data-path-hover="m 0,0 0,47.7775 c 24.580441,3.12569 55.897012,-8.199417 90,-8.199417 34.10299,0 65.41956,11.325107 90,8.199417 L 180,0 z">
 +
<figure>
 +
<img src="img/6.png" />
 +
<svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="m 0,0 0,171.14385 c 24.580441,15.47138 55.897012,24.75772 90,24.75772 34.10299,0 65.41956,-9.28634 90,-24.75772 L 180,0 0,0 z"/></svg>
 +
<figcaption>
 +
<h2>Languid</h2>
 +
<p>Beetroot water spinach okra water chestnut.</p>
 +
<button>View</button>
 +
</figcaption>
 +
</figure>
 +
</a>
 +
<a href="#" data-path-hover="m 0,0 0,47.7775 c 24.580441,3.12569 55.897012,-8.199417 90,-8.199417 34.10299,0 65.41956,11.325107 90,8.199417 L 180,0 z">
 +
<figure>
 +
<img src="img/8.png" />
 +
<svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="m 0,0 0,171.14385 c 24.580441,15.47138 55.897012,24.75772 90,24.75772 34.10299,0 65.41956,-9.28634 90,-24.75772 L 180,0 0,0 z"/></svg>
 +
<figcaption>
 +
<h2>Serene</h2>
 +
<p>Water spinach arugula pea tatsoi.</p>
 +
<button>View</button>
 +
</figcaption>
 +
</figure>
 +
</a>
 +
<a href="#" data-path-hover="m 0,0 0,47.7775 c 24.580441,3.12569 55.897012,-8.199417 90,-8.199417 34.10299,0 65.41956,11.325107 90,8.199417 L 180,0 z">
 +
<figure>
 +
<img src="img/1.png" />
 +
<svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="m 0,0 0,171.14385 c 24.580441,15.47138 55.897012,24.75772 90,24.75772 34.10299,0 65.41956,-9.28634 90,-24.75772 L 180,0 0,0 z"/></svg>
 +
<figcaption>
 +
<h2>Nebulous</h2>
 +
<p>Pea horseradish azuki bean lettuce.</p>
 +
<button>View</button>
 +
</figcaption>
 +
</figure>
 +
</a>
 +
<a href="#" data-path-hover="m 0,0 0,47.7775 c 24.580441,3.12569 55.897012,-8.199417 90,-8.199417 34.10299,0 65.41956,11.325107 90,8.199417 L 180,0 z">
 +
<figure>
 +
<img src="img/3.png" />
 +
<svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="m 0,0 0,171.14385 c 24.580441,15.47138 55.897012,24.75772 90,24.75772 34.10299,0 65.41956,-9.28634 90,-24.75772 L 180,0 0,0 z"/></svg>
 +
<figcaption>
 +
<h2>Iridescent</h2>
 +
<p>A grape silver beet watercress potato.</p>
 +
<button>View</button>
 +
</figcaption>
 +
</figure>
 +
</a>
 +
<a href="#" data-path-hover="m 0,0 0,47.7775 c 24.580441,3.12569 55.897012,-8.199417 90,-8.199417 34.10299,0 65.41956,11.325107 90,8.199417 L 180,0 z">
 +
<figure>
 +
<img src="img/5.png" />
 +
<svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="m 0,0 0,171.14385 c 24.580441,15.47138 55.897012,24.75772 90,24.75772 34.10299,0 65.41956,-9.28634 90,-24.75772 L 180,0 0,0 z"/></svg>
 +
<figcaption>
 +
<h2>Resonant</h2>
 +
<p>Chickweed okra pea winter purslane.</p>
 +
<button>View</button>
 +
</figcaption>
 +
</figure>
 +
</a>
 +
<a href="#" data-path-hover="m 0,0 0,47.7775 c 24.580441,3.12569 55.897012,-8.199417 90,-8.199417 34.10299,0 65.41956,11.325107 90,8.199417 L 180,0 z">
 +
<figure>
 +
<img src="img/7.png" />
 +
<svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="m 0,0 0,171.14385 c 24.580441,15.47138 55.897012,24.75772 90,24.75772 34.10299,0 65.41956,-9.28634 90,-24.75772 L 180,0 0,0 z"/></svg>
 +
<figcaption>
 +
<h2>Zenith</h2>
 +
<p>Salsify taro catsear garlic gram.</p>
 +
<button>View</button>
 +
</figcaption>
 +
</figure>
 +
</a>
 +
</section>
 +
<section class="related">
 +
<p>If you enjoyed these effects you might also like:</p>
 +
<div><a href="http://tympanus.net/Tutorials/CaptionHoverEffects/"><h4>Caption Hover Effects</h4></a></div>
 +
<div><a href="http://tympanus.net/Development/AnimatedSVGIcons/"><h4>Animated SVG Icons</h4></a></div>
 +
</section>
 +
 +
<script>
 +
(function() {
 +
 +
function init() {
 +
var speed = 330,
 +
easing = mina.backout;
 +
 +
[].slice.call ( document.querySelectorAll( '#grid > a' ) ).forEach( function( el ) {
 +
var s = Snap( el.querySelector( 'svg' ) ), path = s.select( 'path' ),
 +
pathConfig = {
 +
from : path.attr( 'd' ),
 +
to : el.getAttribute( 'data-path-hover' )
 +
};
 +
 +
el.addEventListener( 'mouseenter', function() {
 +
path.animate( { 'path' : pathConfig.to }, speed, easing );
 +
} );
 +
 +
el.addEventListener( 'mouseleave', function() {
 +
path.animate( { 'path' : pathConfig.from }, speed, easing );
 +
} );
 +
} );
 +
}
 +
 +
init();
 +
 +
})();
 +
</script>
</body>
</body>
</html>
</html>

Revision as of 16:38, 26 July 2014

Bootstrap 101 Template






Team Members

Crystalline

Soko radicchio bunya nuts gram dulse.

Cacophony

Two greens tigernut soybean radish artichoke.

Languid

Beetroot water spinach okra water chestnut.

Serene

Water spinach arugula pea tatsoi.

Nebulous

Pea horseradish azuki bean lettuce.

Iridescent

A grape silver beet watercress potato.

Resonant

Chickweed okra pea winter purslane.

Zenith

Salsify taro catsear garlic gram.

If you enjoyed these effects you might also like:

Caption Hover Effects

Animated SVG Icons

Retrieved from "http://2014.igem.org/Team:CityU_HK/Team/Member"