css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation


Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.


<div id="minimap">
  <input id="minimap-range" type="range" max="100" value="0">
<p id="warning">The browser you're using doesn't support CSS element(), so no slider. Try Firefox.</p>
<h1>Move the slider (at right) to the point you want to navigate to on the article.</h1>
<div id="article">

    <p>Whales are a widely distributed and diverse group of fully aquatic placental marine mammals. They are an informal grouping within the infraorder Cetacea, usually excluding dolphins and porpoises. Whales, dolphins and porpoises belong to the order Cetartiodactyla with even-toed ungulates and their closest living relatives are the hippopotamuses, having diverged about 40 million years ago. The two parvorders of whales, baleen whales (Mysticeti) and toothed whales (Odontoceti), are thought to have split apart around 34 million years ago. The whales comprise eight extant families: Balaenopteridae (the rorquals), Balaenidae (right whales), Cetotheriidae (the pygmy right whale), Eschrichtiidae (the grey whale), Monodontidae (belugas and narwhals), Physeteridae (the sperm whale), Kogiidae (the dwarf and pygmy sperm whale), and Ziphiidae (the beaked whales).</p>
    <p>Whales are creatures of the open ocean; they feed, mate, give birth, suckle and raise their young at sea. So extreme is their adaptation to life underwater that they are unable to survive on land. Whales range in size from the 2.6 metres (8.5 ft) and 135 kilograms (298 lb) dwarf sperm whale to the 29.9 metres (98 ft) and 190 metric tons (210 short tons) blue whale, which is the largest creature that has ever lived. The sperm whale is the largest toothed predator on earth. Several species exhibit sexual dimorphism, in that the females are larger than males. Baleen whales have no teeth; instead they have plates of baleen, a fringe-like structure used to expel water while retaining the krill and plankton which they feed on. They use their throat pleats to expand the mouth to take in huge gulps of water. Balaenids have heads that can make up 40% of their body mass to take in water. Toothed whales, on the other hand, have conical teeth adapted to catching fish or squid. Baleen whales have a well developed sense of "smell", whereas toothed whales have well-developed hearing − their hearing, that is adapted for both air and water, is so well developed that some can survive even if they are blind. Some species, such as sperm whales, are well adapted for diving to great depths to catch squid and other favoured prey.</p>
    <p>Whales have evolved from land-living mammals. As such whales must breathe air regularly, although they can remain submerged under water for long periods of time. Some species such as the sperm whale are able to stay submerged for as much as 90 minutes. They have blowholes (modified nostrils) located on top of their heads, through which air is taken in and expelled. They are warm-blooded, and have a layer of fat, or blubber, under the skin. With streamlined fusiform bodies and two limbs that are modified into flippers, whales can travel at up to 20 knots, though they are not as flexible or agile as seals. Whales produce a great variety of vocalizations, notably the extended songs of the humpback whale. Although whales are widespread, most species prefer the colder waters of the Northern and Southern Hemispheres, and migrate to the equator to give birth. Species such as humpbacks and blue whales are capable of travelling thousands of miles without feeding. Males typically mate with multiple females every year, but females only mate every two to three years. Calves are typically born in the spring and summer months and females bear all the responsibility for raising them. Mothers of some species fast and nurse their young for one to two years.</p>
    <p>Once relentlessly hunted for their products, whales are now protected by international law. The North Atlantic right whales nearly became extinct in the twentieth century, with a population low of 450, and the North Pacific grey whale population is ranked Critically Endangered by the IUCN. Besides whaling, they also face threats from bycatch and marine pollution. The meat, blubber and baleen of whales have traditionally been used by indigenous peoples of the Arctic. Whales have been depicted in various cultures worldwide, notably by the Inuit and the coastal peoples of Vietnam and Ghana, who sometimes hold whale funerals. Whales occasionally feature in literature and film, as in the great white whale of Herman Melville's Moby Dick. Small whales, such as belugas, are sometimes kept in captivity and trained to perform tricks, but breeding success has been poor and the animals often die within a few months of capture. Whale watching has become a form of tourism around the world.</p>

<h2>Etymology and definitions</h2>
    <p>The word "whale" comes from the Old English whæl, from Proto-Germanic *hwalaz, from Proto Indo European *(s)kwal-o-, meaning "large sea fish". The Proto-Germanic *hwalaz is also the source of Old Saxon hwal, Old Norse hvalr, hvalfiskr, Swedish val, Middle Dutch wal, walvisc, Dutch walvis, Old High German wal, and German Wal. The obsolete "whalefish" has a similar derivation, indicating a time when whales were thought to be fish.[citation needed] Other archaic English forms include wal, wale, whal, whalle, whaille, wheal, etc.</p>
    <p>The term "whale" is sometimes used interchangeably with dolphins and porpoises, acting as a synonym for Cetacea. Six species of dolphins have the word "whale" in their name, collectively known as blackfish: the killer whale, the melon-headed whale, the pygmy killer whale, the false killer whale, and the two species of pilot whales, all of which are classified under the family Delphinidae (oceanic dolphins). Each species has a different reason for it, for example, the killer whale was named "Ballena asesina" by Spanish sailors, which translates directly to "whale assassin" or "whale killer", but is more often translated to "killer whale".</p>
    <p>The term "Great Whales" covers those currently regulated by the International Whaling Commission: the Odontoceti family Physeteridae (sperm whales); and the Mysticeti families Balaenidae (right and bowhead whales), Eschrichtiidae (grey whales), and some of the Balaenopteridae (Minke, Bryde's, Sei, Blue and Fin; not Eden's and Omura's whales).</p>

    <p>Whales have torpedo shaped bodies with non-flexible necks, limbs modified into flippers, non-existent external ear flaps, a large tail fin, and flat heads (with the exception of monodontids and ziphiids). Whale skulls have small eye orbits, long snouts (with the exception of monodontids and ziphiids) and eyes placed on the sides of its head. Whales range in size from the 2.6-metre (8.5 ft) and 135-kilogram (298 lb) dwarf sperm whale to the 34-metre (112 ft) and 190-metric-ton (210-short-ton) blue whale. Overall, they tend to dwarf other cetartiodactyls; the blue whale is the largest creature on earth. Several species have female-biased sexual dimorphism, with the females being larger than the males. One exception is with the sperm whale, which has males larger than the females.</p>
    <p>Odontocetes, such as the sperm whale, possess teeth with cementum cells overlying dentine cells. Unlike human teeth, which are composed mostly of enamel on the portion of the tooth outside of the gum, whale teeth have cementum outside the gum. Only in larger whales, where the cementum is worn away on the tip of the tooth, does enamel show. Mysticetes have large whalebone, as opposed to teeth, made of keratin. Mysticetes have two blowholes, whereas Odontocetes contain only one.</p>
    <p>Breathing involves expelling stale air from the blowhole, forming an upward, steamy spout, followed by inhaling fresh air into the lungs; a humpback whale's lungs can hold about 5,000 litres of air. Spout shapes differ among species, which facilitates identification.</p>
    <p>The heart of a whale weighs about 180–200 kg. It is 640 times bigger than a human heart. The heart of the blue whale is the largest of any animal, and the walls of the arteries in the heart have been described as being "as thick as an iPhone 6 Plus is long".</p>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8d/Sperm_whale_skeleton_labelled.jpg/1200px-Sperm_whale_skeleton_labelled.jpg" alt="Sperm whale skeleton labelled.jpg" width=100%>
    <p>All whales have a thick layer of blubber. In species that live near the poles, the blubber can be as thick as 11 inches. This blubber can help with buoyancy (which is helpful for a 100-ton whale), protection to some extent as predators would have a hard time getting through a thick layer of fat, and energy for fasting when migrating to the equator; the primary usage for blubber is insulation from the harsh climate. It can constitute as much as 50% of a whale's body weight. Calves are born with only a thin layer of blubber, but some species compensate for this with thick lanugos.</p>
    <p>Whales have a two- to three-chambered stomach that is similar in structure to terrestrial carnivores. Mysticetes contain a proventriculus as an extension of the oesophagus; this contains stones that grind up food. They also have fundic and pyloric chambers.</p>
    <p>Whales have two flippers on the front, and a tail fin. These flippers contain four digits. Although whales do not possess fully developed hind limbs, some, such as the sperm whale and bowhead whale, possess discrete rudimentary appendages, which may contain feet and digits. Whales are fast swimmers in comparison to seals, which typically cruise at 5–15 kn, or 9–28 kilometres per hour (5.6–17.4 mph); the fin whale, in comparison, can travel at speeds up to 47 kilometres per hour (29 mph) and the sperm whale can reach speeds of 35 kilometres per hour (22 mph). The fusing of the neck vertebrae, while increasing stability when swimming at high speeds, decreases flexibility; whales are unable to turn their heads. When swimming, whales rely on their tail fin propel them through the water. Flipper movement is continuous. Whales swim by moving their tail fin and lower body up and down, propelling themselves through vertical movement, while their flippers are mainly used for steering. Some species log out of the water, which may allow them to travel faster. Their skeletal anatomy allows them to be fast swimmers. Most species have a dorsal fin.</p>


    <p>All whales are carnivorous and predatory. Odontocetes, as a whole, mostly feed on fish and cephalopods, and then followed by crustaceans and bivalves. All species are generalist and opportunistic feeders. Mysticetes, as a whole, mostly feed on krill and plankton, followed by crustaceans and other invertebrates. A few are specialists. Examples include the blue whale, which eats almost exclusively krill, the minke whale, which eats mainly schooling fish, the sperm whale, which specialize on squid, and the grey whale which feed on bottom-dwelling invertebrates. The elaborate baleen "teeth" of filter-feeding species, mysticetes, allow them to remove water before they swallow their planktonic food by using the teeth as a sieve. Usually whales hunt solitarily, but they do sometimes hunt cooperatively in small groups. The former behaviour is typical when hunting non-schooling fish, slow-moving or immobile invertebrates or endothermic prey. When large amounts of prey are available, whales such as certain mysticetes hunt cooperatively in small groups. Some cetaceans may forage with other kinds of animals, such as other species of whales or certain species of pinnipeds.</p>
    <p>Large whales, such as mysticetes, are not usually subject to predation, but smaller whales, such as monodontids or ziphiids, are. These species are preyed on by the killer whale or orca. To subdue and kill whales, orcas continuously ram them with their heads; this can sometimes kill bowhead whales, or severely injure them. Other times they corral the narwhals or belugas before striking. They are typically hunted by groups of 10 or fewer orcas, but they are seldom attacked by an individual. Calves are more commonly taken by orcas, but adults can be targeted as well.</p>
    <p>These small whales are also targeted by terrestrial and pagophilic predators. The polar bear is well adapted for hunting Arctic whales and calves. Bears are known to use sit-and-wait tactics as well as active stalking and pursuit of prey on ice or water. Whales lessen the chance of predation by gathering in groups. This however means less room around the breathing hole as the ice slowly closes the gap. When out at sea, whales dive out of the reach of surface-hunting orcas. Polar bear attacks on belugas and narwhals are usually successful in winter, but rarely inflict any damage in summer.</p>
    <p>Upon death, whale carcasses fall to the deep ocean and provide a substantial habitat for marine life. Evidence of whale falls in present-day and fossil records shows that deep sea whale falls support a rich assemblage of creatures, with a global diversity of 407 species, comparable to other neritic biodiversity hotspots, such as cold seeps and hydrothermal vents.</p>
    <p>Deterioration of whale carcasses happens through a series of three stages. Initially, moving organisms such as sharks and hagfish, scavenge the soft tissues at a rapid rate over a period of months, and as long as two years. This is followed by the colonization of bones and surrounding sediments (which contain organic matter) by enrichment opportunists, such as crustaceans and polychaetes, throughout a period of years. Finally, sulfophilic bacteria reduce the bones releasing hydrogen sulfide enabling the growth of chemoautotrophic organisms, which in turn, support other organisms such as mussels, clams, limpets, and sea snails. This stage may last for decades and supports a rich assemblage of species, averaging 185 species per site.</p>
    <p>Considerable breeding effort has been put into disease-resistant varieties. Many cultivars are available that produce mature fruit within 100 days of planting the crop.</p>

<h2>Relationship with humans</h2>

    <p>Whaling by humans has existed since the Stone Age. Ancient whalers used harpoons to spear the bigger animals from boats out at sea. People from Norway and Japan started hunting whales around 2000 B.C. Whales are typically hunted for their meat and blubber by aboriginal groups; they used baleen for baskets or roofing, and made tools and masks out of bones. The Inuit hunted whales in the Arctic Ocean. The Basques started whaling as early as the 11th century, sailing as far as Newfoundland in the 16th century in search of right whales. 18th- and 19th-century whalers hunted whales mainly for their oil, which was used as lamp fuel and a lubricant, baleen or whalebone, which was used for items such as corsets and skirt hoops, and ambergris, which was used as a fixative for perfumes. The most successful whaling nations at this time were the Netherlands, Japan, and the United States.</p>
    <p>Commercial whaling was historically important as an industry well throughout the 17th, 18th and 19th centuries. Whaling was at that time a sizeable European industry with ships from Britain, France, Spain, Denmark, the Netherlands and Germany, sometimes collaborating to hunt whales in the Arctic, sometimes in competition leading even to war. By the early 1790s, whalers, namely the Americans and Australians, focused efforts in the South Pacific where they mainly hunted sperm whales and right whales, with catches of up to 39,000 right whales by Americans alone. By 1853, US profits reached US$11,000,000 (UK£6.5m), equivalent to US$348,000,000 (UK£230m) today, the most profitable year for the American whaling industry. Commonly exploited species included North Atlantic right whales, sperm whales, which were mainly hunted by Americans, bowhead whales, which were mainly hunted by the Dutch, common minke whales, blue whales, and grey whales. The scale of whale harvesting decreased substantially after 1982 when the International Whaling Commission (IWC) placed a moratorium which set a catch limit for each country, excluding aboriginal groups until 2004.</p>
    <img src="https://upload.wikimedia.org/wikipedia/commons/a/a3/Whale_Fishing_Fac_simile_of_a_Woodcut_in_the_Cosmographie_Universelle_of_Thevet_in_folio_Paris_1574.png" alt="Whale Fishing Fac simile of a Woodcut in the Cosmographie Universelle of Thevet in folio Paris 1574" width="100%">
    <p>Current whaling nations are Norway, Iceland, and Japan, despite their joining to the IWC, as well as the aboriginal communities of Siberia, Alaska, and northern Canada. Subsistence hunters typically use whale products for themselves and depend on them for survival. National and international authorities have given special treatment to aboriginal hunters since their methods of hunting are seen as less destructive and wasteful. This distinction is being questioned as these aboriginal groups are using more modern weaponry and mechanized transport to hunt with, and are selling whale products in the marketplace. Some anthropologists argue that the term "subsistence" should also apply to these cash-based exchanges as long as they take place within local production and consumption. In 1946, the IWC placed a moratorium, limiting the annual whale catch. Since then, yearly profits for these "subsistence" hunters have been close to US$31 million (UK£20m) per year.</p>
    <p>Whaling decreased substantially after 1946 when, in response to the steep decline in whale populations, the International Whaling Commission placed a moratorium which set a catch limit for each country; this excluded aboriginal groups up until 2004. As of 2015, aboriginal communities are allowed to take 280 bowhead whales off Alaska and two from the western coast of Greenland, 620 grey whales off Washington state, three common minke whales off the eastern coast of Greenland and 178 on their western coast, 10 fin whales from the west coast of Greenland, nine humpback whales from the west coast of Greenland and 20 off St. Vincent and the Grenadines each year. Several species that were commercially exploited have rebounded in numbers; for example, grey whales may be as numerous as they were prior to harvesting, but the North Atlantic population is functionally extinct. Conversely, the North Atlantic right whale was extirpated from much of its former range, which stretched across the North Atlantic, and only remains in small fragments along the coast of Canada, Greenland, and is considered functionally extinct along the European coastline.</p>
    <p>Whales continue to be prevalent in modern literature. For example, Herman Melville's Moby Dick features a "great white whale" as the main antagonist for Ahab, who eventually is killed by it. The whale is an albino sperm whale, considered by Melville to be the largest type of whale, and is partly based on the historically attested bull whale Mocha Dick. Rudyard Kipling's Just So Stories includes the story of "How the Whale got in his Throat". Niki Caro's film the Whale Rider has a Māori girl ride a whale in her journey to be a suitable heir to the chieftain-ship. Walt Disney's film Pinocchio features a giant whale named Monstro as the final antagonist. Alan Hovhaness' orchestra And God Created Great Whales included the recorded sounds of humpback and bowhead whales. Léo Ferré's song "Il n'y a plus rien" is an example of biomusic that begins and ends with recorded whale songs mixed with a symphonic orchestra and his voice.</p>
<p>Credits: The text and images in the article are from Wikipedia.

              #minimap {
    background: rgba(254,213,70,.1) -moz-element(#article) no-repeat center / contain;
    position: fixed; 
    right: 10px; top: 10px;
    width: 10vw;
    height: auto;
    max-height: 90vh;
    display: none;
#minimap-range {
    transform: translatey(-100%) rotate(90deg);
    transform-origin: bottom left;
    background-color: transparent; 
    opacity: 0.7; 
    transition: opacity .2s;
    margin: 0;
    padding: 0;
    max-width: 90vh; /* same as #minimap's max-height */
    height: 10vw; /* same as #minimap's width */
#minimap-range:hover {
    opacity: 1; 
#minimap-range::-moz-range-thumb {
    width: 25px; 
    height: 10vw; /* same as #minimap's width */
    background-color: dodgerblue; 
    cursor: pointer; 
	background-color: transparent;
    width: 70vw;
    padding: 5px 30px;
    border-left: 16px solid rgb(254, 231, 70);
    margin: 60px;
    font: 14px 'crimson text';
    font-size: 2.7em;
	background-color: red;
	color: white;
	font-style: 13px;
	text-indent: 10px;
	font-weight: bold;
	display: none;
              onload = () => {
	if (navigator.userAgent.includes("Firefox")) {
		const minimapRange = document.querySelector("#minimap-range");
		const minimap = document.querySelector("#minimap");
		const article = document.querySelector("#article");
		const $ = getComputedStyle.bind();
		minimap.style.display = "block";
		minimapRange.style.width = minimap.style.height = parseInt($(minimapRange).width) * parseInt($(article).height) / parseInt($(article).width) + "px";
		minimapRange.onchange = evt => scrollTo(0, parseInt($(article).height) * (evt.target.value / 100));
	else document.querySelector("#warning").style.display = 'block';

🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................