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 is required to process package imports. If you need a different preprocessor remove all packages first.

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

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

              
                <html>
<style>
  body {

    margin: 60px;
  }

  .black-text {
    color: #000000;
  }

  .darkgrey-text {
    color: #808080;
  }

  .creme-background {
    background-color: #FFFACD;
  }

  .thick-black-border {
    border-color: black;
    border-width: 10px;
    border-style: solid;
  }

  .silver-background {
    background-color: silver;
    padding: 5px;
    background-size: contain;
    border-radius: 15px;
  }

  .bigger-image {
    width: 850px;
  }

  .center {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  

  .date {
    font-weight: bold;
  }

  h1 {
    font-size: 100px;
    font-family: Arial;
  }

  h2 {
    font-size: 50px;
    font-family: Arial;
    font-style: italic;
  }

  img {
    border-radius: 15px;
  }

  h3 {
    font-size: 20px;
    font-family: Arial;
    margin: 30px;
  }

  p {
    margin: 10px;
  }

  li {
    margin: 15px
  }

  date {
    font-weight: bold;
  }

  f1 {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
</style>

<body class="creme-background">

  <h1 class="black-text text-center">Victor Hugo</h1>

  <h2 class="darkgrey-text text-center">The French literary and political genius</h2>

  <div>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e6/Victor_Hugo_by_%C3%89tienne_Carjat_1876_-_full.jpg/800px-Victor_Hugo_by_%C3%89tienne_Carjat_1876_-_full.jpg" alt="Portrait of Victor Hugo by Etienne Carjat " align="middle" class="responsive-image thick-black-border center">
  </div>
  <div class="text-center">For over half a century Victor Hugo defined romantic poetry, drama and literature. During that time, he was the liberal conscious of France, his ideals and his work live today as vividly as they did when he created them.
  </div>
  </div>

  <div>
    <h3>Here is a timeline of Victor Hugo's life</h3>
    <ul>
      <li>
        <date>1802</date>
        February 26: Hugo is born in Besancon, France.</li>

      <li>
        <date>1815 - 1818</date>
        Attends the Lycée Louis-Le Grand in Paris.</li>

      <li>
        <date>1817</date>
        Honoured by the French Academy for a poem he wrote and wins first place in a national poetry competition. Hugo was an excellent student who excelled in mathematics, physics and philosophy.</li>

      <li>
        <date>1821</date>
        Hugo's mother dies.</li>

      <li><span class="date">1822 </span> His first book, Odes et Poésies Diverses (Miscellaneous Odes and Verses) is published.

        <p>Wins a pension of 1,000 Francs a year from Louis XVIII.</p>

        <p>Marries Adele Foucher who becomes the mother of his children; Leopold-Victor, Charles- Victor, Francois-Victor, Adele and Leopoldine.</p>
      </li>

      <li>
        <date>1823</date>
        His first novel, Han d'Islande (Han of Iceland) is published.</li>

      <li>
        <date>1824</date>
        Bug-Jargal is published.</li>

      <li>
        <date>1826</date>
        Odes et Ballades (Odes and Ballads) is published.</li>

      <li>
        <date>1827</date>
        Cromwell, Hugo's play is published and in the foreword, he wrote about gaining freedom from the classical restrictions. This started the debate between French Classicism and Romanticism.</li>

      <li>
        <date>1830</date>
        Hugo became one of the leaders of a group of Romantic rebels who were trying to loosen the hold of classical literature in France.

        <p>His play Hernani is published in this same year, took a large step towards a more realistic theatre and made him a rich man.</p>
      </li>

      <li>
        <date>1831</date>
        Hugo's next book, Notre-Dame de Paris (The Hunchback of Notre Dame) is published. This book, not only increased his popularity and reputation as the greatest writer in France, but also brought about his election to the French Academy in 1841.</li>

      <li>
        <date>1833</date>
        Actress Juliette Drouet became his mistress and supported by a small pension, she became his unpaid secretary and travelling companion for the next fifty years.</li>

      <li>
        <date>1843</date>
        In this year Hugo's daughter Léopoldine was drowned, along with her husband and his play Les Burgraves was a failure.

        <p>For the next few years, Hugo decided to focus on the growing social problems in France and did not write at all.</p>
      </li>

      <li>
        <date>1845</date>
        As his father had been a Napoleonic General, he had become a Royalist as a young man. In this year, he was made a peer of France by King Louis Philippe.</li>

      <li>
        <date>1848</date>
        The year of the French Revolution. By now, Hugo was a Republican and had been elected with the new formation of the Second Republic, to the French Constitutional Assembly and to the French Legislative Assembly. Here Hugo was an avid advocate of social
        injustice.</li>

      <li>
        <date>1851</date>
        After the unsuccessful revolt against President Louis Napoleon (later Emperor Napoleon III), when Hugo risked execution by trying to rally the workers of Paris against the new Emperor, he fled to Brussels.</li>

      <li>
        <date>1852</date>
        It was clear, however that as a close neighbour of France, the Belgian authorities were concerned that Hugo's political statements would strain relationships between the two countries so during this year Hugo moved to Jersey.

        <p>Napoléon Le Petit (The Little Napoleon) is published.</p>
      </li>

      <li>
        <date>1853</date>
        Hugo's best known works of poetry, Les Chatiments (The Punishments) is published.</li>

      <li>
        <date>1855</date>
        Queen Victoria's visit to Paris caused a highly satirical article to be published by French exiles in a London newspaper and the contents of the article were repeated by some of Hugo's fellow proscribed in the newspaper they had found in Jersey.

        <p>This led to three of them being expelled.</p>

        <p>Declaring his own solidarity with them led subsequently to the expulsion of Hugo himself and he arrived in Guernsey at the end of October.</p>
      </li>

      <li>
        <date>1856</date>
        Les Contemplations is published.

        <p>This book of poetry was an immediate success and with the proceeds, he bought 38 Hauteville in St Peter Port, now more commonly known as Hautevillle House.</p>
      </li>

      <li>
        <date>1862</date>
        Les Misérables, his longest and most famous work is published. This novel is about the social injustice of 19th century France in which the main character, Jean Valjean, is sentenced to prison for 19 years for stealing a loaf of bread.</li>

      <li>
        <date>1870</date>
        After the Franco-Prussian War and the fall of the Empire, Hugo made a triumphant return to Paris.

        <p>Here he resumed his role in politics and was elected to the National Assembly.</p>
      </li>

      <li>
        <date>1876</date>
        Hugo is elected to the Senate, but poor health meant that he returned to Guernsey.</li>

      <li>
        <date>1885</date>
        May 22: At the age of eighty-three, Victor Hugo died in Paris</li>

      <li>
        <date>1885 June 1</date>: He was given a national funeral attended by over two million people.

        <p>His body was laid in state under the L'Arc de Triomphe and he was later borne on a pauper's hearse, in accordance with his wishes, to be buried in the Panthéon, the burial place of many great French people.</p>
      </li>
    </ul>
  </div>
  <div>
    <p style="font-size:160%;"><i><em>He who opens a school door, closes a prison.<i><em> --Victor Hugo</p>
  </div>
      
      <p>If you have time, you should read more about this incredible human being on his <a href="https://en.wikipedia.org/wiki/Victor_Hugo" target="blank">Wikipedia Entry</a>.</p>
</body>

</html>
              
            
!

CSS

              
                

              
            
!

JS

              
                
              
            
!
999px

Console