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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ 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

              
                <body>
  <header>
    <div class="bg">
      <hgroup>
    <h1>Michel Thomas (&nbsp;1914&nbsp;&mdash;&nbsp;2005&nbsp;)</h1>
      <h2>Nazi Hunter / Polyglot Linguist</h2>
      </hgroup>
    </div>
  </header>
  <article>
  <h2>Michel Thomas' remarkable life experiences fuelled his passion for teaching languages.
  </h2><p>
Michel Thomas was born Moniek Kroskof, the only son of a Jewish family who owned a textile factory in Poland in 1914. As a young boy, Michel was sent to live in  Breslau, Germany (now Wrocław, Poland) to escape the anti-Semitism directed at his family. </p>
    <p> The rise of the Nazis drove him to leave for the University of Bordeaux in France in 1933, and subsequently the Sorbonne and the University of Vienna. Living in Vienna in 1938, when the Nazis annexed Austria, Michel was rendered stateless as a Jew.
  </p><p>
When France fell to the Nazis, he lived in Nice, under the Vichy government, changing his name to Michel Thomas so he could operate in the French Resistance movement more easily. He was arrested several times, and sent to a series of Nazi concentration/slave-labour camps, finally being sent to Camp des Milles, near Aix-en-Provence. </p>
    <p> In August 1942, Thomas secured release from Les Milles using forged papers and made his way to Lyon, where his duties for the Resistance entailed recruiting Jewish refugees into the organisation. In January 1943, he was arrested and interrogated by Klaus Barbie, only being released after convincing the Gestapo officer that he was an apolitical French artist.
  </p><p>
In February 1943, after being arrested, tortured and subsequently released by the Milice, the Vichy French paramilitary militia, he joined a commando group in Grenoble, assisting the OSS, then began working for the U.S. Army Counter Intelligence Corps. When Dachau was liberated on April 29, 1945, Thomas learned the whereabouts of Emil Mahl (the "hangman of Dachau"), whom Thomas arrested two days later. Thomas, along with CIC colleague Ted Kraus, subsequently captured SS Major Gustav Knittel (wanted for his role in the Malmedy massacre). Mahl and Knittel were later convicted of war crimes. Mahl was sentenced to death and Knittel to life imprisonment, although both sentences were subsequently commuted. </p>
  <p> Thomas also engineered a post-war undercover sting operation that resulted in the arrest of several former S.S. officers. A 1950 Los Angeles Daily News article credits Thomas with the capture of 2,500 Nazi war criminals. In the final week of World War II, Thomas also played a part in the recovery of a cache of Nazi documents that had been shipped by the Nazi leadership to be pulped at a paper mill in Freimann, Germany. These included the worldwide membership card file of more than ten million members of the Nazi party. After the end of the war, Thomas learned that his parents and most of his extended family had died in Auschwitz.
  </p><p>
In 1944, Michel was nominated for the Silver Star medal for his service to the US Army's 45th Infantry Division in France. The award was finally presented to him in May 2004, sixty years later.
  </p> <hr/> <p>
His mastery of languages enabled him to adopt many identities. It was during Michel's wartime experiences, particularly his torture by the Gestapo, that he discovered his ability to block out pain and unearthed the untapped potential of the human mind. He states he only way he survived these experiences was by concentrating and placing his mind beyond the physical.
  </p>
  <blockquote>
 "I concentrated so hard, that I stopped feeling pain. I was amazed at myself."
  </blockquote>
    <p>
Fascinated by this experience, he was determined that after the war, he would devote himself to exploring this further and dedicated his life to education.
  </p>
    <blockquote>
"I contemplated the untapped reserves of the human mind. The great hidden depths of the brain. I learned from it."
  </blockquote><p>
In 1947, he moved to Los Angeles and set up the Michel Thomas Language Centers and taught languages for over fifty years in New York, Beverly Hills and London.
  </p><p>
Michel Thomas died of heart failure at his home in New York City on Saturday 8th January 2005. He was 90 years old.
<br/>
Michel remains the world's greatest language teacher and an inspiration and mentor to learners everywhere.</p>
  
    <p>Read More on <a target="_blank" href="https://en.wikipedia.org/wiki/Michel_Thomas">Wikipedia</a>.</p>
  </article>
</body>
              
            
!

CSS

              
                body, html {
  margin: 0; 
  padding: 0;
}

body {
    background: #fafafb;
    color: #1b1616;
  
  background: #1b1616;
  color: #fafafb;
  font-size: .9em;
}

article {
    font-family: 'Open Sans';
    margin: 0;
    position: relative;
    padding: 1em;
    box-sizing: border-box;
}
a {color: darkcyan; text-decoration: none;}

p {
    width: 80%;
    margin: 1em auto;
}

h2 {
  margin-top: 0;
  text-indent: .5em;
}

hgroup {
    color: #fff;
    font-family: 'Cutive Mono', monospace;
  font-family: "Open Sans", sans-serif;
    /* margin: 2em; */
    width: 100%;
    /* font-size: 1.25em; */
    margin-bottom: 5vh;
    background: rgba(0, 0, 0, 0.47);
    padding-left: 5%;
}

hgroup h1 { margin: 0; width: 90%; padding: .25em 0;}
hgroup h2 {
  font-weight: normal;
  padding-bottom: .5em;
}

blockquote {
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 50px;
  padding-left: 15px;
  border-left: 5px solid #ccc;
  font-style: italic;
  font-size: 1.1em;
  display: flex;
} 


header{
    background: #020202;
    overflow: hidden;
    width: 60vw;
    flex: 1;
    height: 100%;
    height: 100vh;
    box-sizing: border-box;
    float: left;
    shape-margin: 20px;
    shape-outside: polygon(0 0,100% 0,40% 100%,0 100%);
    clip-path: polygon(0 0,100% 0,40% 100%,0 100%);
}

.bg { 
    box-sizing: border-box;
    position: relative;
    display: block;
    height: 100%;
   /* max-width: 900px;
    max-height: 900px; */
    width: 100%;
    padding: 0;
    margin: 0;
    background-image: url(http://media.gettyimages.com/photos/so0411french1fw-file-photo-of-former-french-resistance-fighter-michel-picture-id569106163);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
}

@media (max-width: 600px) {
  blockquote{ margin: 10px; }
  h2 {
  clear: both;
    text-indent: 0
}
  hgroup h2 {
    font-size: 1.25em;
}
    hgroup h1 {
    font-size: 1.5em;
}
  
  p {
    width: 100%;
        box-sizing: border-box;
  }
  header{
    width: 100%;
    max-height: 100vw;
    shape-outside: polygon(0 0, 100% 0, 100% 75%, 0% 100%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 75%, 0% 100%);
   clip-path: polygon(0 0, 100% 0, 100% 75%, 0% 100%);
  }
}

@media (min-width: 1600px) {
  header{ width: 50vw;}
  p {width: auto;}
}
              
            
!

JS

              
                
              
            
!
999px

Console