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 class="container-fluid">
  <div class="text-center">
      <h1 class="title">Captain Nemo</h1>
    <p class="tagline">Latin "No one", Greek "I give what is due"</p>
<div class="row">
  <div class="col-md-4">
    <img src="http://orig05.deviantart.net/7432/f/2010/095/c/2/captain_nemo_by_garvals.jpg" class="img-responsive nemo-image" alt="Captain Nemo">
    <p class="text-center image-source"><a href="http://garvals.deviantart.com/art/Captain-Nemo-159677084" alt="Captain Nemo Illustration on Deviantart" target="_blank">Image source</a></p>
  <div class="col-md-8">
    <p>Captain Nemo, also known as Prince Dakkar is a fictional character created by the French science fiction author Jules Verne. The son of the Indian Raja of the independent territory of Bundelkund, he is a scientific genius who roams the depths of the sea in his submarine, the Nautilus. His father sent him, when ten years of age, to Europe, in order that he might receive an education in all respects complete, and in the hopes that by his talents and knowledge he might one day take a leading part in raising his long degraded and heathen country to a level with the nations of Europe. Nemo tries to project a stern, controlled confidence, but he is driven by a thirst for vengeance and a hatred of imperialism focused on the British Empire after losing his wife and children. Alone in the world, overcome by disappointment at the destruction of all his vain hopes, a prey to profound disgust for all human beings, filled with hatred of the civilized world, he realized the wreck of his fortune, assembled some score of his most faithful companions, and one day disappeared, leaving no trace behind.
     <p class="quote text-center">"On the surface, they can still exercise their iniquitous laws, fight, devour each other, and indulge in all their earthly horrors. But thirty feet below the surface, their power ceases, their influence fades, and their dominion vanishes. Ah, monsieur, to live in the bottom of the sea! ....

          There I recognize no master! There I am free!"</p>
    <div class="skill-list">
      <p>List of Captain Nemo's skills and traits:</p>
        <li>As an extraordinary engineer, Nemo has designed and built the Nautilus, besides inventing her electric propulsion and navigation systems</li>
        <li>He has an exceptional mastery of underwater navigation, taking upon himself the most difficult submarine passages, such as those under the Isthmus of Suez and the Antarctic ice sheet</li>
        <li>He is a man of immense courage, in the forefront of every activity, from releasing the Nautilus from the Antarctic ice to fighting squid in the Caribbean; and notable for having worked consecutive eight-hour shifts without a break, with little oxygen, to free the Nautilus from the ice</li>
        <li>Has a comprehensive knowledge of marine biology. Further, he is said to have read and annotated all the books he possessed in the Nautilus's vast library</li>
        <li>He has very fine taste in art, possessing several masterpieces of both painting and sculpture, from ancient and modern European masters, all of which are housed in the Grand Salon of the Nautilus, along with his collection of pearls, corals and other such marine products, which he had gathered himself</li>
      <p>If you've enjoyed this page, you could also check the official <a href="https://en.wikipedia.org/wiki/Nautilus_(Verne)" alt="The Nautilus on Wikipedia" target="_blank">Wikipedia page of the Nautils</a>, Captain Nemo's submarine, or read more about <a href="https://en.wikipedia.org/wiki/Jules_Verne" alt="Jules Verne Wikipedia Page" target ="_blank">Jules Verne</a>, the author behind Captain Nemo and his adventures. </p>
  <footer class="footer">
    <p class="text-center">Made in Rijeka 2016.</p>
              /**----------Import google fonts----------**/
@import 'https://fonts.googleapis.com/css?family=Berkshire+Swash|Libre+Baskerville:400,400i,700&subset=latin-ext';

.container-fluid {
  max-width: 80%;

body {
  background-color: #102e2f;
  color: #649396;
  font-family: 'Libre Baskerville', serif;

p {
  font-size: 1.25em;

div {
  margin: 0 0 1em 0;

a {
  color: #649396;
  font-weight: 700;
  text-decoration: underline;

a:hover {
  color: #276075;

a:visited {
  text-decoration: underline;

.title {
  font-family: 'Berkshire Swash', cursive;
  font-size: 4.5em;
  padding: 0.1em 0 0.1em 0;

.tagline {
  font-size: 1em;
  font-style: italic;
  padding-bottom: 3em;

.image-source {
  font-size: 0.95em;
  padding: 0.75em 0 0 0;

.quote {
  font-style: italic;
  font-size: 1.65em;
  padding: 5%;

.skill-list {
  font-size: 1.25em;
  padding: 20px 80px 

.nemo-image {
  border: solid 5px #091519;
  border-radius: 0.5%;

.footer {
  margin-top: 20px;
  padding-top: 100px;
  padding-bottom: 5px;
  background-image: linear-gradient(#102e2f 10%, #081216 90%, #091519);
  font-size: 0.75em;
  font-style: italic;

🕑 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 ..................