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


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


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.


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.


    <title>Bio Page</title>
    <section class="container main-bio">
      <h1 id="article-title">Django Reinhardt</h1>
      <h3 id="sub-heading">The Belgian/French Guitarist who gave us Gypsy Jazz</h3>
      <figure class="figure">
        <img class="img-responsive" src="" alt="Picture of Django Reinhardt showing his injured, scarred left hand to singer Edith Piaf." />
        <figcaption class="figure-caption text-center"><em>A rare pictures of Django Reinhardt showing his injured, scarred left hand to singer Edith Piaf.</em></figcaption>
        <h3 style="font-family: Limelight">A Timeline of Django's life ‒</h3>
        <ul id="timeline">
          <li><span class="year">1910</span> - born in a Gypsy Caravan somewhere on the border between Belgium and France, exact Nationality never determined. Baptized in the Catholic Church as "Jean Baptiste Reinhardt," his public name; his name amongst his gypsy clan was "Django," a rare Gypsy name as it is a verb that means: "I Awaken."</li>
          <li><span class="year">1914 - 1922</span> - he is trained by his father, Jean-Eugène, in music by rote, repeat practice on violin and other instruments, and Django lands upon Banjo-Guitar, an odd hybrid instrument with a banjo body and a guitar fret & neck.</li>
          <li><span class="year">1922 - 1928</span> - Django plays Banjo-Guitar in several french bands in the dance music of the day, <em>musette</em>, a 6/8 time fast waltz style, played in working class dance halls known as <em>bals musette</em>. Due to an influx of African American ex-servicemen into France post-WWI, Django becomes entranced & influenced heavily by <em>La Musique Diabolique</em>, the French term for Jazz at the time.</li>
          <li><span class="year">1926</span> - hears American Jazz playing outside of a restaurant in Paris' place Pigalle district, <em>l'Abbaye de Thélème</em>. He and other gypsy musician friends would sit outside on nights they were not playing — they could not afford to go in — just to hear the new music form until the restaurant closed.</li>
          <li><span class="year">1927</span> - Django elopes with his first wife, Florine "Bella" Mayer.</li>
          <li><span class="year">1928</span> - is signed to play banjo-guitar with Paul Whiteman's Jazz Orchestra in Britain; however, upon returning that night to his Gypsy Caravan in the North of Paris where his wife was asleep, he knocked over a candle which lit on fire many cellophane "roses" she had made for an event the following day. The fire immediately engulfed their Caravan, and Django threw a blanket around his wife to get her out of the inferno. She sustained burns to her scalp, he had major burns all over the right side of his body and his left fretting hand. As they were poor, he was taken to debtors hospital in North Paris.</li>
          <li><span class="year">1928</span> - upon her being released from the hospital, Django's first wife Bella leaves him, thinking he will die in the hospital from his injuries, to find someone else in the Gypsy community who could support her.</li>
          <li><span class="year">1928 - 1930</span> - Django spends time recuperating in the debtors hospital in the north of Paris. His brother, Joseph (Gypsy name: Nin-nin, "Little boy" or "Little brother") brings him a guitar to help him in recuperation. During that time in the hospital, Django re-trained himself to play with his maimed, left, fretting hand with just his first two good fingers. That is the style in which he played and recorded all his music from then on.</li>
          <li><span class="year">1930</span> - upon being released from the hospital, Naguine, who had been Django's girlfriend before Bella, was waiting for him. She became his second wife and was with him until his death.</li>
          <li><span class="year">1934</span> - at the Paris Hôtel Claridge tea party where Louis Vola had hired Django & other musicians to play, Django meets jazz violinist Stephane Grappelli backstage, over Grappelli replacing a broken string on his violin. They began improvising together, and a musical bond was formed. With Vola as upright bassist, and Django's brother Joseph "Nin-nin" and Roger Chaput, they form the unit that became "Le Quintette du Hot Club de France."</li>
          <li><span class="year">1934</span> - Le Quintette du Hot Club de France has their first recording session at the Ultraphone studio, which was formerly a pipe organ factory.</li>
          <li><span class="year">1938 - 1939</span> - Django, Stephane & Le Quintette have two tours of Great Britain to rousing success. However, toward the end of the 1939 tour, WWII starts, Grappelli is separated from the rest of the band as they flee back to France, and they are separated for the duration of the war.</li>
          <li><span class="year">1939 - 1945</span> — amazingly, Django stays to play in Paris during the Vichy regime and Nazi occupation of France, eventually co-owning a club in Pigalle, <em>La Roulette—Chez Django</em>; albeit, he could have been an easy target for the Nazis as both a Gypsy and a Jazz musician, which had been declared "Degenerate Art." The Nazis relented on Jazz and Swing as their soldiers liked it so much, and Django was helped by his German surname, albeit he had to submit all his music programs for approval first by the Propagandastaffel. When pressured to perform by the Nazi regime in Germany, he fled to the French border near Switzerland to try and ecape there with his family, but was turned away, returning to Paris to wait out the war.</li>
          <li><span class="year">1944</span> - Django & Naguine's son, Babik, is born, and Paris is librated by the Allied forces.</li>
          <li><span class="year">1945 - 1946</span> - Django & Stpehane Grappelli are re-united, first on a phone call post-war by Grappelli to the Hot Club office in Paris, then on an arranged broadcast of the Quintette in London in January of 1946. The first song they practiced when together again? The French National Anthem, <em>La Marseillaise</em>.</li>
          <li><span class="year">1946</span> - Django & Naguine's second son, Jimmy (named after clarinetist Jimmy Noone) is born, but due to complications, sadly perishes a week later in a French hospital. In grief, Django puts down his guitar and takes up painting until September of that year.</li>
          <li><span class="year">1946 - 1947</span> - Django finally tours the United States, getting to meet and play with American Jazz legends he had only known from their recordings, like Louis Armstrong, Duke Ellington and his orchestra, Dizzy Gillespie, etc., and plays as part of his tour Carnegie Hall. He returns to Paris in 1947 and continues playing and recording, now with a cited American modern Jazz influence.</li>
          <li><span class="year">1950</span> - dies suddenly at the age of 40 from a probable aneurism or stroke at his home on Samois du Seine, a small suburb of Paris on the River Seine.</li>
        <blockquote class="row justify-content-center">
          <h3>"Mon frere! Mon frere!"</h3>
          <p style:"font-weight: lighter"><em>[English translation: "My brother! My brother!"]</em></p>
          <cite style:"font-weight: lighter">‒ what Django uttered upon first hearing Louis Armstrong play.</cite>
        <iframe class="row justify-content-center border-4" width="480" height="360" src="" frameborder="0" allowfullscreen></iframe>
        <h2 style="font-family: Limelight; font-weight: lighter;">If you have time, you should read more about this incredible musician on his <a href="" alt="Link to Django Reinhardt's Wikipdia Entry" target="_blank">Wikipedia entry</a>, or just listen to his music in the YouTube sample above.</h2>
      <footer class="text-center" id="colophon">
        Written and coded by <a href= alt="The GitHub Web Page for Faddah Wolf." target="_blank">Faddah Wolf</a>.


                @import url('');

body {
  font-family: Arial, sans-serif;
  background: -moz-linear-gradient(top,darkgreen,darkslategray);
  background: -webkit-linear-gradient(top,darkgreen,darkslategray);
  background: -ms-linear-gradient(top,darkgreen,darkslategray);
  background: -o-linear-gradient(top,darkgreen,darkslategray);
  background: linear-gradient(top,darkgreen,darkslategray);
  color: #000;

h1, h3 {
  font-weight: bold;

img {
  border: 6px solid white;
  box-shadow: 4px 4px 6px #969696;

ul {
  padding: 0% 4% 1% 4%;
  font-size: 16px;

figcaption {
  height: 40px;
  margin: 0 5%;
  padding: 7% -25%;
  background-color: #fff;

blockquote {
  font-family: Limelight;
  font-size: 24px;
  box-shadow: 0px 4px 6px #eee;

iframe {
  border: double darkslategray;
  box-shadow: 3px 3px 5px #444;

.main-bio {
  z-index: 1;
  width: 70%;
  margin: 7% 15%;
  padding: 5% 10%;
  background-color: cornsilk;
  border-radius: 10px;
  box-shadow: 5px 5px 7px #ddd;

#article-title {
  font-family: Limelight;
  font-size: 60px;
  padding: 5% 10%;

#sub-heading {
  font-family: Limelight;
  font-style: italic;
  font-size: 36px;

.year {
  font-weight: 600;

#colophon {
  margin-bottom: 4%;
  color: cornsilk;


                $(document).ready(function() {
  $("img").addClass("img-responsive center-block");
  $("p").css("font-size", "14px");
  $("cite").css("font-size", "14px");