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.

            
              <html lang="en">

<head>
  <meta charset="utf-8">
  <title>Tribute Page: Viktor Frankl</title>
  <link href="https://fonts.googleapis.com/css?family=Lato:400,400i,900" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Kalam" rel="stylesheet">
</head>

<body>
  <wrapper>
    <!-- header -->
    <header class="container-full">
      <div class="row theme-bright">
        <h1 class="col-sm-4 text-left" id="header">Viktor E. Frankl</h1>
          <nav class="col-sm-8 text-right">
          <a class="btn btn-primary" href="#timeline">Timeline</a>
          <a class="btn btn-primary" href="#awards">Decorations & Awards</a>
          <a class="btn btn-primary" href="#bibliography">Bibliography</a>
        </nav>
      </div>
    </header>
    <!-- end header -->

    <!-- quote 1 -->
    <div class="container-full">
      <div class="row theme-dark">
        <div class="row">
            <img src='https://s31.postimg.cc/a1qkr5b6j/Viktor_Frankl_-_Photo.png' border='0' alt='Viktor_Frankl_-_Photo'/>
              <h2 class="slogan col-sm-7 text-left">“Everything can be taken from a man but one thing: the last of the human freedoms – to choose one’s attitude in any given set of circumstances, to choose one’s own way.”<br><br><em>- Viktor E. Frankl</em></h2>
        </div>
      </div>
    </div>
    <!-- end quote 1 -->

    <!-- timeline -->
    <section class="container-full theme-bright">
      <div class="row text-center">
        <h3 class="col-sm-12" id="timeline"><strong>Here's a time line of Viktor Frankl's life</strong></h3>
      </div>
      <section class="container">
        <div class="row">
          <ul>
            <h4 class="col-sm-12"><em><strong>Life before 1945</strong></em></h4>
            <li class="col-sm-12"><strong>1905</strong> - Born in 26 March, Leopoldstadt, Vienna, Austria</li>
            <li class="col-sm-12"><strong>1923</strong> - Graduates from Gymnasium, continues studying medicine at the University of Vienna and later specialized in neurology and psychiatry.</li>
            <hr>
            <h4 class="col-sm-12"><em><strong>Physician, therapist</strong></em></h4>
            <li class="col-sm-12"><strong>1924</strong> - He became the president of the 'Sozialistische Mittelschüler Österreich', a Social Democratic youth movement for high school students throughout Austria.</li>
            <li class="col-sm-12"><strong>1928 - 1930</strong> - While still a medical student, he organized and offered a special program to counsel high school students free of charge.</li>
            <li class="col-sm-12"><strong>1931</strong> - not a single Viennese student committed suicide.</li>
            <li class="col-sm-12"><strong>1933 - 1937</strong> - Frankl completed his residency in neurology and psychiatry at the Steinhof Psychiatric Hospital in Vienna.</li>
            <li class="col-sm-12"><strong>1937</strong> - He established an independent private practice in neurology and psychiatry at Alser Strasse 32/12 in Vienna.</li>
            <li class="col-sm-12"><strong>1940</strong> - He started working at the Rothschild Hospital, where he headed its neurological department. This hospital was the only one in Vienna to which Jews were still admitted.</li>
            <li class="col-sm-12"><strong>1941</strong> - December, he married Tilly Grosser.</li>
            <hr>
              <h4 class="col-sm-12"><em><strong>Prisoner, therapist</strong></em></h4>
            <li class="col-sm-12"><strong>1942</strong> - September, Frankl, his wife, and his parents were deported to the Nazi Theresienstadt Ghetto. There Frankl worked as a general practitioner in a clinic.</li>
            <li class="col-sm-12"><strong>1943</strong> - 29 July, Frankl organized a closed event for the Scientific Society at Theresienstadt.</li>
            <li class="col-sm-12"><strong>1944</strong> - 19 October, Frankl and his wife Tilly were transported to the Auschwitz concentration camp, where he was processed.</li>
            <li class="col-sm-12"><strong>1945</strong> - March, he was offered a move to the so-called rest camp, Türkheim, also affiliated with Dachau, where he worked as a physician.</li>
            <li class="col-sm-12"><strong>1945</strong> - 27 April, when the camp was liberated by American soldiers.</li>
            <hr class="col-sm-12">
            <h4 class="col-sm-12"><em><strong>Life after 1945</strong></em></h4>
            <li class="col-sm-12"><strong>1946</strong> - He was appointed to run the Vienna Polyclinic of Neurology. He remained there until 1971.</li>
            <li class="col-sm-12"><strong>1947</strong> - He married his second wife Eleonore Katharina Schwindt.</li>
            <li class="col-sm-12"><strong>1948</strong> - Frankl earned a Ph.D. in philosophy. His dissertation, The Unconscious God, is an examination of the relation of psychology and religion.</li>
            <li class="col-sm-12"><strong>1955</strong> - He was awarded a professorship of neurology and psychiatry at the University of Vienna.</li>
            <li class="col-sm-12 last"><strong>1997</strong> - 2 September, Dies of heart failure.</li>
          </ul>
        </div>
      </section>
    </section>
    <!-- end time line -->

    <!-- quote 2 -->
    <section class="container-fluid">
      <div class="row text-center theme-dark">
        <h2 class="col-sm-12 quote">"Challenging the meaning of life is the truest expression of the state of being human."<br>
          <br><em>- Viktor E. Frankl</em></h2>
      </div>
    </section>
    <!-- end quote 2 -->

    <!-- decorations & awards -->
    <section class="container-full theme-bright">
      <div class="row text-center">
        <h3 class="col-sm-12" id="awards"><strong>Decorations and awards</strong></h3>
      </div>
      <section class="container">
        <div class="row">
          <ul>
            <li class="col-sm-12"><strong>1956</strong>: Promotion Award for Public Education of the Federal Ministry of Education, Arts and Culture, Austria</li>
            <li class="col-sm-12"><strong>1962</strong>: Cardinal Innitzer Prize, Austria</li>
            <li class="col-sm-12"><strong>1969</strong>: Austrian Cross of Honour for Science and Art, 1st class</li>
            <li class="col-sm-12"><strong>1976</strong>: Prize of the Danubia Foundation</li>
            <li class="col-sm-12"><strong>1980</strong>: Honorary Ring of Vienna, Austria</li>
            <li class="col-sm-12"><strong>1981</strong>: Austrian Decoration for Science and Art</li>
            <li class="col-sm-12"><strong>1985</strong>: Oskar Pfister Award, USA</li>
            <li class="col-sm-12"><strong>1986</strong>: Honorary doctorate from the University of Vienna, Austria</li>
            <li class="col-sm-12"><strong>1988</strong>: Great Silver Medal with Star for Services to the Republic of Austria</li>
            <li class="col-sm-12"><strong>1995</strong>: Hans Prinzhorn Medal</li>
            <li class="col-sm-12"><strong>1995</strong>: Honorary Citizen of the City of Vienna</li>
            <li class="col-sm-12"><strong>1995</strong>: Great Gold Medal with Star for Services to the Republic of Austria</li>
            <li class="col-sm-12"><strong>1995</strong>: Grand Decoration of the Austrian Chamber of Physicians</li>
            <li class="col-sm-12 last">Grand Merit Cross with Star of the Federal Republic of Germany (Großes Verdienstkreuz mit Stern)</li>
          </ul>
        </div>
      </section>
    </section>
    <!-- end decorations & awards -->

    <!-- quote 3 -->
    <section class="container-fluid">
      <div class="row text-center theme-dark">
        <h2 class="col-sm-12 quote">"When we are no longer able to change a situation - we are challenged to change ourselves"<br>
          <br><em>- Viktor E. Frankl</em></h2>
      </div>
    </section>
    <!-- end quote 3 -->

    <!-- bibliography -->
    <section class="container-full theme-bright">
      <div class="row text-center">
        <h3 class="col-sm-12" id="bibliography"><strong>Bibliography</strong></h3>
      </div>

      <section class="container">
        <div class="row">
          <ul>
            <h4 class="col-sm-12">His books in English are:</h4>
            <li class="col-sm-12"><strong>Man's Search for Meaning</strong>. An Introduction to Logotherapy, Beacon Press, Boston, MA, 2006. (Originally published in 1946).</li>
            <li class="col-sm-12"><strong>The Doctor and the Soul</strong>, (originally titled Ärztliche Seelsorge), Random House, 1955.</li>
            <li class="col-sm-12"><strong>On the Theory and Therapy of Mental Disorders</strong>. An Introduction to Logotherapy and Existential Analysis, Translated by James M. DuBois. Brunner-Routledge, London-New York, 2004.</li>
            <li class="col-sm-12"><strong>Psychotherapy and Existentialism</strong>. Selected Papers on Logotherapy, Simon & Schuster,New York, 1967.</li>
            <li class="col-sm-12"><strong>The Will to Meaning</strong>. Foundations and Applications of Logotherapy, New American Library, New York, 1988</li>
            <li class="col-sm-12"><strong>The Unheard Cry for Meaning</strong>. Psychotherapy and Humanism, Simon & Schuster, New York, 2011</li>
            <li class="col-sm-12"><strong>Viktor Frankl Recollections: An Autobiography</strong>.; Basic Books, Cambridge, MA 2000.</li>
            <li class="col-sm-12"><strong>Man's Search for Ultimate Meaning</strong>. (A revised and extended edition of The Unconscious God; with a Foreword by Swanee Hunt). </li>
          </ul>
        </div>
      </section>
    </section>
    <!-- end bibliography -->

    <!-- wikipedia -->
    <section class="container-fluid">
      <div class="row text-center theme-bright">
          <hr class="col-sm-12">
          <h3 class="col-sm-12">If you have time, you should read more about his incredible autobioghraphy on his <a href="https://en.wikipedia.org/wiki/Viktor_Frankl" target="_blank">Wikipedia entry</a>.</h3>
      </div>
    </section>
    <!-- end wikipedia -->

    <!-- back to top / written by -->
    <section class="container-fluid">
      <div class="row text-center theme-bright">
        <div class="col-sm-12">
          <a class="btn btn-primary back-up border2 " href="#header">Back up</a>
        </div>
      </div>

      <div class="row text-center theme-dark">
          <h6 class="col-sm-12">Written and coded by <a href="#">Oliver Janhunen</a>.</h6>
      </div>
    </section>
    <!-- end back to top / written by -->
  </wrapper>
</body>

</html>
            
          
!
            
              body {
  font-family: 'Lato', sans-serif;
  overflow: hide;
  background-color: #DFE2DB;
}

.theme-bright {
  background-color: #DFE2DB;
}

.theme-dark {
  background-color: #191919;
  color: #DFE2DB;
}

.btn-primary {
  background-color: #191919;
  border: #191919;
  color: white !important;
}

.btn-primary:hover {
  background-color: grey;
  border: grey;
}

header .btn {
  margin: 1%;
  
}
.quote {
  padding: 10%;
}

.slogan {
  padding-top: 10%;
  padding-bottom: 10%;
}

#header {
  padding-left: 2%;
  padding-top: 0.25%;
}

h3 {
  padding-top: 1%;
  padding-left: 2%;
  padding-right: 2%;
}

.blocker {
  display: inline-block;
}

ul {
  padding-bottom: 2%;
  padding-left: 2%;
  padding-right: 2%;
  line-height: 1.6;
}

li {
  font-size: 20px;  
}

h4 {
  padding-left: 2%;
  padding-right: 2%;
  padding-top: 1.5%;
}

h6 {
  padding: 1%;
}

.back-up {
  margin: 2%;
}

hr {
  color: white;
}

#timeline {
  padding-top: 5%;
}

#awards {
  padding-top:5%;
}

#bibliography {
  padding-top: 5%;
}

.last {
  padding-bottom: 5% !important;
}
            
          
!
999px
🕑 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 ..................

Console