Pen Settings

HTML

CSS

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

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<div class="content">
  <h1>Sticky Footer</h1>
  <button id="paragraph">Add Text</button>
  
</div>
<footer class="footer">
  Footer 
</footer>
</body>
</html>
              
            
!

CSS

              
                	body{

    margin: 0 auto;
    }
		.content {
	
  min-height: calc(100vh - 70px);
  padding: 40px 40px 0 40px;
}
.footer {
     height: 50px;
    background-color: #0cbf85b3;
    color: aliceblue;
    font-size: 19px;
  font-weight: bold;
    text-align: center;
}
              
            
!

JS

              
                $("#paragraph").on("click", function() {
  $("<p>Owls are birds from the order Strigiformes, which includes about 200 species of mostly solitary and nocturnal birds of prey typified by an upright stance, a large, broad head, binocular vision, binaural hearing, sharp talons, and feathers adapted for silent flight. Exceptions include the diurnal northern hawk-owl and the gregarious burrowing owl.Owls hunt mostly small mammals, insects, and other birds, although a few species specialize in hunting fish. They are found in all regions of the Earth except Antarctica and some remote islands.Owls possess large, forward-facing eyes and ear-holes, a hawk-like beak, a flat face, and usually a conspicuous circle of feathers, a facial disc, around each eye. The feathers making up this disc can be adjusted to sharply focus sounds from varying distances onto the owls' asymmetrically placed ear cavities. Most birds of prey have eyes on the sides of their heads, but the stereoscopic nature of the owl's forward-facing eyes permits the greater sense of depth perception necessary for low-light hunting. Although owls have binocular vision, their large eyes are fixed in their sockets—as are those of most other birds—so they must turn their entire heads to change views. As owls are farsighted, they are unable to clearly see anything within a few centimeters of their eyes. Caught prey can be felt by owls with the use of filoplumes—hairlike feathers on the beak and feet that act as feelers. Their far vision, particularly in low light, is exceptionally good.Owls can rotate their heads and necks as much as 270°. Owls have 14 neck vertebrae compared to seven in humans, which makes their necks more flexible. They also have adaptations to their circulatory systems, permitting rotation without cutting off blood to the brain: the foramina in their vertebrae through which the vertebral arteries pass are about 10 times the diameter of the artery, instead of about the same size as the artery as in humans; the vertebral arteries enter the cervical vertebrae higher than in other birds, giving the vessels some slack, and the carotid arteries unite in a very large anastomosis or junction, the largest of any bird's, preventing blood supply from being cut off while they rotate their necks. Other anastomoses between the carotid and vertebral arteries support this effect.The smallest owl—weighing as little as 31 g (1 oz) and measuring some 13.5 cm (5 in)—is the elf owl (Micrathene whitneyi). Around the same diminutive length, although slightly heavier, are the lesser known long-whiskered owlet (Xenoglaux loweryi) and Tamaulipas pygmy owl (Glaucidium sanchezi).[3] The largest owls are two similarly sized eagle owls; the Eurasian eagle-owl (Bubo bubo) and Blakiston's fish owl (Bubo blakistoni). The largest females of these species are 71 cm (28 in) long, have 54 cm (21 in) long wings, and weigh 4.2 kg (9.3 lb)Different species of owls produce different sounds; this distribution of calls aids owls in finding mates or announcing their presence to potential competitors, and also aids ornithologists and birders in locating these birds and distinguishing species. As noted above, their facial discs help owls to funnel the sound of prey to their ears. In many species, these discs are placed asymmetrically, for better directional location.Owl plumage is generally cryptic, although several species have facial and head markings, including face masks, ear tufts, and brightly coloured irises. These markings are generally more common in species inhabiting open habitats, and are thought to be used in signaling with other owls in low-light conditions.</p>").appendTo(".content");
});
              
            
!
999px

Console