A Pen by Oliver Janhunen on CodePen.
Created
March 14, 2018 08:16
-
-
Save anonymous/4df27823c6d406c9d031e2994cbdd8ce to your computer and use it in GitHub Desktop.
Tribute Page: Viktor Frankl
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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"> | |
</head> | |
<body> | |
<wrapper> | |
<!-- header --> | |
<header class="container-full"> | |
<div class="row theme-bright"> | |
<h1 class="col-sm-4" 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"> | |
<div class="col-sm-6"> | |
<img src="https://i.imgur.com/EUA9XHb.png"> | |
</div> | |
<div class="col-sm-6"> | |
<section class="container"> | |
<h2 class="slogan">“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> | |
</section> | |
</div> | |
</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><em><strong>Life before 1945</strong></em></h4> | |
<li><strong>1905</strong> - Born in 26 March, Leopoldstadt, Vienna, Austria</li> | |
<li><strong>1923</strong> - Graduates from Gymnasium, continues studying medicine at the University of Vienna and later specialized in neurology and psychiatry.</li> | |
<hr> | |
<h4><em><strong>Physician, therapist</strong></em></h4> | |
<li><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><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><strong>1931</strong> - not a single Viennese student committed suicide.</li> | |
<li><strong>1933 - 1937</strong> - Frankl completed his residency in neurology and psychiatry at the Steinhof Psychiatric Hospital in Vienna.</li> | |
<li><strong>1937</strong> - He established an independent private practice in neurology and psychiatry at Alser Strasse 32/12 in Vienna.</li> | |
<li><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><strong>1941</strong> - December, he married Tilly Grosser.</li> | |
<hr> | |
<h4><em><strong>Prisoner, therapist</strong></em>em></h4> | |
<li><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><strong>1943</strong> - 29 July, Frankl organized a closed event for the Scientific Society at Theresienstadt.</li> | |
<li><strong>1944</strong> - 19 October, Frankl and his wife Tilly were transported to the Auschwitz concentration camp, where he was processed.</li> | |
<li><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><strong>1945</strong> - 27 April, when the camp was liberated by American soldiers.</li> | |
<hr> | |
<h4><em><strong>Life after 1945</strong></em></h4> | |
<li><strong>1946</strong> - He was appointed to run the Vienna Polyclinic of Neurology. He remained there until 1971.</li> | |
<li><strong>1947</strong> - He married his second wife Eleonore Katharina Schwindt.</li> | |
<li><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><strong>1955</strong> - He was awarded a professorship of neurology and psychiatry at the University of Vienna.</li> | |
<li class="last"><strong>1997</strong> - 2 September, Dies of heart failure.</li> | |
</ul> | |
</div> | |
</section> | |
</section> | |
<!-- end time line --> | |
<!-- quote 2 --> | |
<section class="container-full"> | |
<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><strong>1956</strong>: Promotion Award for Public Education of the Federal Ministry of Education, Arts and Culture, Austria</li> | |
<li><strong>1962</strong>: Cardinal Innitzer Prize, Austria</li> | |
<li><strong>1969</strong>: Austrian Cross of Honour for Science and Art, 1st class</li> | |
<li><strong>1976</strong>: Prize of the Danubia Foundation</li> | |
<li><strong>1980</strong>: Honorary Ring of Vienna, Austria</li> | |
<li><strong>1981</strong>: Austrian Decoration for Science and Art</li> | |
<li><strong>1985</strong>: Oskar Pfister Award, USA</li> | |
<li><strong>1986</strong>: Honorary doctorate from the University of Vienna, Austria</li> | |
<li><strong>1988</strong>: Great Silver Medal with Star for Services to the Republic of Austria</li> | |
<li><strong>1995</strong>: Hans Prinzhorn Medal</li> | |
<li><strong>1995</strong>: Honorary Citizen of the City of Vienna</li> | |
<li><strong>1995</strong>: Great Gold Medal with Star for Services to the Republic of Austria</li> | |
<li><strong>1995</strong>: Grand Decoration of the Austrian Chamber of Physicians</li> | |
<li class="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-full"> | |
<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>His books in English are:</h4> | |
<li><strong>Man's Search for Meaning</strong>. An Introduction to Logotherapy, Beacon Press, Boston, MA, 2006. (Originally published in 1946).</li> | |
<li><strong>The Doctor and the Soul</strong>, (originally titled Ärztliche Seelsorge), Random House, 1955.</li> | |
<li><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><strong>Psychotherapy and Existentialism</strong>. Selected Papers on Logotherapy, Simon & Schuster,New York, 1967.</li> | |
<li><strong>The Will to Meaning</strong>. Foundations and Applications of Logotherapy, New American Library, New York, 1988</li> | |
<li><strong>The Unheard Cry for Meaning</strong>. Psychotherapy and Humanism, Simon & Schuster, New York, 2011</li> | |
<li><strong>Viktor Frankl Recollections: An Autobiography</strong>.; Basic Books, Cambridge, MA 2000.</li> | |
<li><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-full"> | |
<div class="row text-center theme-bright"> | |
<div class="col-sm-12"> | |
<hr> | |
<h3>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> | |
</div> | |
</section> | |
<!-- end wikipedia --> | |
<!-- back to top / written by --> | |
<section class="container-full"> | |
<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"> | |
<div class="col-sm-12"> | |
<h6>Written and coded by <a href="#">Oliver Janhunen</a>.</h6> | |
</div> | |
</div> | |
</section> | |
<!-- end back to top / written by --> | |
</wrapper> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body { | |
font-family: 'Lato', sans-serif; | |
overflow: hide; | |
background-color: #DFE2DB; | |
} | |
.theme-bright { | |
background-color: #DFE2DB; | |
} | |
img { | |
} | |
.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%; | |
} | |
.header { | |
height: 100vh; | |
} | |
.quote { | |
padding: 10%; | |
} | |
.slogan { | |
padding-top: 20%; | |
padding-bottom: 20%; | |
} | |
#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; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment