<!doctype html>
<html lang="en">
<head>
<!--
Species endangered by Homo sapiens
Demo by Ildar Sagdejev ( http://twitter.com/tknomad )
-->
<meta charset="UTF-8">
<title>Endangered species</title>
<link rel="stylesheet" href="css/common.css">
<style>
body {
background: url(images/species/bg.jpg) no-repeat center top fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
a {
color: #e5e616;
}
a:hover {
color: #88a7f7;
}
.wrap > h1 {
color: rgb(221, 142, 22);
margin: 14px auto 0;
}
#showcase {
height: 570px;
overflow: visible !important;
}
.card {
width: 260px;
padding: 12px;
text-align: center;
background-color: rgba(61, 9, 9, 0.8);
border: 2px white dotted;
border-radius: 12px;
}
.card h2 {
margin: 0 0 7px 0;
}
.card a {
font-size: 18px;
display: block;
}
.card p {
font-size: 15px;
}
.nav {
width: 64px;
height: 134px;
color: #ccc;
font: bold 3em "Lucida Grande";
text-align: center;
text-shadow: 0px 1px 0px #f5f5f5;
background: rgba(150, 150, 150, 0.5);
border: solid 2px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 0 0 9px 1px rgba(0, 0, 0, 0.45);
-moz-box-shadow: 0 0 9px 1px rgba(0, 0, 0, 0.45);
box-shadow: 0 0 9px 1px rgba(0, 0, 0, 0.45);
cursor: pointer;
position: absolute;
top: 33%;
}
.nav:active,
.nav.down {
background: rgba(120, 120, 120, 0.5);
border: solid 2px rgba(0, 0, 0, 0.55);
}
.nav.left {
left: -43px;
-webkit-border-radius: 12px 5px 5px 12px;
-moz-border-radius: 12px 5px 5px 12px;
border-radius: 12px 5px 5px 12px;
}
.nav.right {
right: -43px;
-webkit-border-radius: 5px 12px 12px 5px;
-moz-border-radius: 5px 12px 12px 5px;
border-radius: 5px 12px 12px 5px;
}
footer hr {
width: 6px;
}
#share {
top: -84px;
}
#credits {
top: -78px;
}
#photo-credits {
text-align: center;
}
#photo-credits h1 {
font-size: 1em;
margin-top: 0;
margin-bottom: 6px;
}
#photo-credits > ul {
list-style: none;
padding: 0;
margin-top: 0;
}
</style>
</head>
<body>
<!-- GitHub ribbon: http://codepo8.github.io/css-fork-on-github-ribbon/ -->
<style>#forkongithub a{background:#dd0d0d;color:#fff;text-decoration:none;font-family:arial,sans-serif;text-align:center;font-weight:bold;padding:5px 40px;font-size:1rem;line-height:2rem;position:relative;transition:0.5s;}#forkongithub a:hover{background:rgba(0,0,0,0.8);color:#ddd;}#forkongithub a::before,#forkongithub a::after{content:"";width:100%;display:block;position:absolute;top:1px;left:0;height:1px;background:#fff;}#forkongithub a::after{bottom:1px;top:auto;}@media screen and (min-width:800px){#forkongithub{position:absolute;display:block;top:0;right:0;width:200px;overflow:hidden;height:200px;z-index:9999;}#forkongithub a{width:200px;position:absolute;top:60px;right:-60px;transform:rotate(45deg);-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);box-shadow:4px 4px 10px rgba(0,0,0,0.8);}}</style><span id="forkongithub"><a href="https://github.com/specious/cloud9carousel">Fork me on GitHub</a></span>
<div class="wrap">
<h1>Endangered Species</h1>
</div>
<div class="wrap">
<div id="showcase" class="noselect">
<div class="card">
<h2>Bengal Tiger</h2>
<img src="images/species/tiger.jpg">
<p>
Over the past century tiger numbers have fallen dramatically, with a decreasing population trend. None of the Tiger Conservation Landscapes within the Bengal tiger range is large enough to support an effective population size of 250 individuals. Habitat losses and the extremely large-scale incidences of poaching are serious threats to the species' survival.
</p>
<a href="http://en.wikipedia.org/wiki/Bengal_tiger">Learn more...</a>
</div>
<div class="card">
<h2>Giant Panda</h2>
<img src="images/species/panda.jpg">
<p>
The giant panda is an endangered species, threatened by continued habitat loss and by a very low birthrate, both in the wild and in captivity. Its range is currently confined to a small portion on the western edge of its historical range, which stretched through southern and eastern China, northern Myanmar, and northern Vietnam.
</p>
<a href="http://en.wikipedia.org/wiki/Giant_panda">Learn more...</a>
</div>
<div class="card">
<h2>Asian Elephant</h2>
<img src="images/species/elephant.jpg">
<p>
The pre-eminent threats to Asian elephants today are loss, degradation and fragmentation of habitat, leading in turn to increasing conflicts between humans and elephants. They are poached for ivory and a variety of other products including meat and leather.
</p>
<a href="http://en.wikipedia.org/wiki/Asian_elephant">Learn more...</a>
</div>
<div class="card">
<h2>Bornean Orangutan</h2>
<img src="images/species/orangutan.jpg">
<p>
Orangutan are becoming increasingly endangered due to habitat destruction and the bushmeat trade, and young orangutans are captured to be sold as pets, usually entailing the killing of their mothers.
</p>
<a href="http://en.wikipedia.org/wiki/Bornean_orangutan">Learn more...</a>
</div>
<div class="card">
<h2>Common Chimpanzee</h2>
<img src="images/species/chimp.jpg">
<p>
The biggest threats to the common chimpanzee are habitat destruction, poaching and disease. Chimpanzee habitats have been limited by deforestation in both West and Central Africa. Road building has caused habitat degradation and fragmentation of chimpanzee populations and may allow poachers more access to areas that have not been seriously impacted by humans.
</p>
<a href="http://en.wikipedia.org/wiki/Common_chimpanzee">Learn more...</a>
</div>
<div class="card">
<h2>Rothschild's Giraffe</h2>
<img src="images/species/giraffe.jpg">
<p>
While giraffes in general are classified as Least Concern, Rothschild's giraffe is at particular risk of hybridisation, as the population is so limited in numbers. Very few locations are left where Rothschild's giraffe can be seen in the wild, with notable spots being Lake Nakuru National Park in Kenya and Murchison Falls National Park in northern Uganda.
</p>
<a href="http://en.wikipedia.org/wiki/Rothschild%27s_giraffe">Learn more...</a>
</div>
</div>
<button class="nav noselect left">
<
</button>
<button class="nav noselect right">
>
</button>
</div>
<div class="wrap">
<footer>
<div id="get">
<a id="download" href="http://github.com/specious/cloud9carousel">Download from GitHub</a>
<p id="license">MIT License</p>
</div>
<div id="share">
<iframe src="http://ghbtns.com/github-btn.html?user=specious&repo=cloud9carousel&type=watch&count=true"
allowtransparency="true" frameborder="0" scrolling="0" width="86" height="20"></iframe>
<div class="fb-like" data-href="http://specious.github.io/cloud9carousel/" data-layout="button_count" data-show-faces="true" data-font="arial"></div>
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://specious.github.io/cloud9carousel/" data-count="horizontal"></a>
<div class="g-plusone" data-href="http://specious.github.io/cloud9carousel/" data-size="medium" data-annotation="bubble" data-expandto="bottom"></div>
</div>
<div id="credits">
卡片旋转木马效果.zip
需积分: 0 21 浏览量
2022-01-05
10:37:39
上传
评论
收藏 1.63MB ZIP 举报
旋转.zip （24个子文件） 
cloud9carousel-gh-pages images species 
tiger.jpg 24KB giraffe.jpg 24KB orangutan.jpg 27KB panda.jpg 11KB elephant.jpg 27KB bg.jpg 354KB chimp.jpg 32KB browsers 
opera.png 50KB iexplore.png 66KB chrome.png 61KB wyzo.png 76KB firefox.png 101KB safari.png 94KB screenshots demo-browsers.png 131KB julemagne.png 164KB demo-species.png 352KB demo-flat-topdown.png 48KB js 
social.js 1KB lib jquery.reflection.js 3KB jquery.js 82KB jquery.cloud9carousel.js 12KB css common.css 1KB
species.html 11KB index.html 7KB
评论0