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

              
                <div id="main">
  <div id="title"><h1>Joseph Campbell</h1></div>
      <div id="AKA">The Hero with a Thousand Faces</div>
        <div id="img-div" align="center">
          <img id="image" src="https://www.organism.earth/library/docs/joseph-campbell/headshot.jpg" alt "portrait of Joseph Campbell">
    <div id="img-caption">A portrait of Joseph Campbell</>
          </div>
          </div>
  <div id="tribute-info">
    <div id="list" align="center">
    <ul>
      <h3 id="headline">Here's a time line of Joseph Campbell's life:</h3>
      <li><strong>1904</strong> Joseph Campbell was born in New York City on March 26.</li> 
      <li><strong>1910</strong> His lifelong interest in Native American Indians is sparked when his father takes him and his younger brother, Charlie, to see Buffalo Bill's Wild West Show at Madison Square Garden. </li>
      <li><strong>1913-18</strong> The Campbell family moves to New Rochelle, New York. His interest in Native traditions is so strong he reads through the entire collection of Indian mythology in the children's section of the Public Library. At age eleven he is admitted to the adult stacks to continue his studies. A prolonged illness when he is 14 keeps him at home where he studies natural science.</li>
      <li><strong>1919-21</strong> Campbell is enrolled at Canterbury prep school, New Milford, Connecticut where his favorite subject is biology. </li>
      <li><strong>1919</strong> Fire destroys the family home in New Rochelle, killing his grandmother and destroying his collection of Indian books and relics.</li>
      <li><strong>1921</strong> He enters Dartmouth College to study biology and mathematics. In his sophomore year, he discovers the humanities after reading Merejkowski's The Romance of Leonardo da Vinci. He transfers to Columbia University and enters the English Department. </li>
<li><strong>1924-26</strong> As a member of the track team he sets the Columbia and New York City records for the half-mile. He plays saxophone in jazz bands for college and fraternity dances. On an ocean voyage to Europe he befriends Jiddu Krishnamurti, who introduces him to Oriental philosophy. </li>
<li><strong>1925</strong> He earns a Bachelor of Arts degree from Columbia University and runs with the New York Athletic Club track team in the AAU championships in San Francisco. He visits Hawaii and attends the Indian Rodeo in Yakima, Washington.</li> 
<li><strong>1926</strong> Returns to Columbia in order to run with the track team and study medieval literature. He completes his Masters thesis, The Dolorous Stroke which is about the Grail legend. </li>
<li><strong>1927-28</strong> A Proudfit Traveling Fellowship enables him to study Romance philology, Old French, and Provençal at the University of Paris under Joseph Bedier, translator of Tristan and Iseult. He encounters modern art (Picasso, Brancusi, and Braque) and modern literature (Yeats, Eliot and most notably Joyce) for the first time. His friend Angela Gregory sculpts his portrait in the studio of master sculptor Antoine Bourdelle who instructs him in aesthetics. He transfers to the University of Munich to study Sanskrit literature and Indo-European philology and there discovers the works of Freud, Jung, Thomas Mann, and Goethe. </li>
<li><strong>1929</strong> He returns to the United States two weeks before the stock market crash. He quits work on his doctorate and retires to Woodstock with his sister, Alice renting a cabin for $20 a year. There he pursues the line of study he began in Paris, reading extensively. </li>
<li><strong>1931-32</strong> He drives alone across the country in his mother's Model T Ford to think out his future. He stops in San Jose, California, to see his old friend nutritionist Adelle Davis. She introduces him to John and Carol Steinbeck, and their neighbor, biologist Ed Ricketts. With Ricketts, he travels up the coast of British Columbia to Alaska, collecting inter-tidal fauna, an experience which reconfirms his belief in the relationship between mythology and biology. </li>
<li><strong>1933</strong> After applying to 85 colleges and universities, he accepts a job offer from his old headmaster at Canterbury prep school where he teaches history, English, French, German, while studying Spengler, Mann, Jung, Joyce. He resigns at the end of the year, and returns to Woodstock to read and write. </li>
<li><strong>1934</strong> He is invited to teach at the recently founded Sarah Lawrence College. He immediately accepts, remaining in the Literature department for 38 years. </li>
<li><strong>1938</strong> Campbell marries Jean Erdman, his former student and a member of the Martha Graham Dance Company. </li>
<li><strong>1941</strong> He meets Indologist Heinrich Zimmer, who recommends him to Paul and Mary Mellon, the founders of the Bollingen Series, to produce the premier volume in their series and his first publication: the Commentary to Where the Two Came to Their Father: A Navaho War Ceremonial, text by Jeff King and paintings by Maud Oakes. </li>
<li><strong>1942</strong> He works with Swami Nikhilananda on the translation and editing of The Gospel of Sri Ramakrishna and the Upanishads for the next three years.</li> 
<li><strong>1943</strong> Zimmer suddenly dies of pneumonia and his widow asks Campbell to edit Zimmer's posthumous writings, to which he devotes twelve years. 1946: Myths and Symbols in Indian Art and Civilization, 1948: The King and the Corpse, 1951: Philosophies of India, 1955: The Art of Indian Asia. </li>
<li><strong>1944 </strong>A Skeleton Key to Finnegans Wake, written with Henry Morton Robinson is published. He writes the commentary to an edition of Grimm's Fairy Tales and joins the editorial staff of The Dance Observer. He begins work on The Hero with a Thousand Faces. </li>
<li><strong>1949 </strong>After much revision and rejection by two publishers, The Hero with a Thousand Faces is published in the Bollingen Series. It is given an award by the National Institute of Arts and Letters. </li>
<li><strong>1951</strong> He is named the general editor of the series Myth and Man, which includes Alan Watt's Myth and Ritual in Christianity. </li>
<li><strong>1953</strong> Campbell is appointed President of the Creative Film Foundation, and editor of the series Papers from the Eranos Yearbooks which consist of papers given over a twenty year period at the Eranos conferences in Ascona, Switzerland. He meets Carl Jung, Mircea Eliade, and D.T. Suzuki in Switzerland. </li>
<li><strong>1954</strong> On sabbatical leave, he travels in India, Ceylon, Thailand, Burma, Hong Kong, and Japan. </li>
<li><strong>1956</strong> Campbell begins serving as a lecturer at the Foreign Service Institute, State Department, Washington, D.C. </li>
<li><strong>1957</strong> Presents his first paper at an Eranos Conference, "The Symbol Without Meaning" </li>
<li><strong>1959</strong> He presents "Renewal Myths and Rites of the Primitive Hunters and Planters" at the Eranos Conference and publishes the first volume of the series, The Masks of God. </li>
<li><strong>1967</strong> Campbell is named to the Board of Directors of the Society for the Arts, Religion, and Contemporary Culture. </li>
<li><strong>1968</strong> He presents the first of many seminars for Esalen Institute in Big Sur, California. </li>
<li><strong>1969</strong> The Flight of the Wild Gander: Explorations in the Mythological Dimension is published. </li>
<li><strong>1972</strong> He publishes Myths to Live By, a collection of lectures delivered at the Cooper Union in New York City. Campbell retires from Sarah Lawrence College and is named President of the Society for the Study of Religion. He travels to Iceland and Turkey. With Jean Erdman he founds the Theater of the Open Eye in New York City. </li>
<li><strong>1974</strong> The Mythic Image is published. </li>
<li><strong>1976</strong> He receives the Melcher Award for Contributions to Religious Liberalism and leads tours to Egypt and Greece. </li>
<li><strong>1978</strong> Campbell receives an honorary doctorate from Pratt Institute in Brooklyn, New York. </li>
<li><strong>1982</strong> Joseph Campbell moves to Hawaii </li>
<li><strong>1983</strong> The Historical Atlas of World Mythology: Vol. I, The Way of the Animal Powers is published. He is befriended by filmmaker George Lucas and is invited to Skywalker Ranch to see the Star Wars trilogy, which was greatly influenced by his work. </li>
<li><strong>1984</strong> Campbell's 80th birthday celebration at the Palace of Fine Arts, San Francisco is attended by 1,000 people, with Sam Keen, Chungliang Al Huang, Stanley Keleman, Barbara Myerhoff, Marija Gimbutas, and Robert Bly in attendance. </li>
<li><strong>1985</strong> He is awarded the Medal of Honor for Literature by the National Arts Club of New York for The Way of the Animal Powers. </li>
<li><strong>1986</strong> The Inner Reaches of Outer Space: Myth as Metaphor and Religion is published. He participates in a seminar entitled, From Ritual to Rapture, with psychiatrist John Perry and the band, The Grateful Dead. </li>
<li><strong>1987</strong> The New Director's/New Films Festival at the Museum of Modern Art, New York hosts the premier of The Hero's Journey: The World of Joseph Campbell. On October 30, Joseph Campbell dies in Honolulu, Hawaii. </li>
<li><strong>1987</strong> The PBS series, The Power of Myth with Bill Moyers airs in December. </li>
<li><strong>1988</strong> The Joseph Campbell Chair of Comparative Mythology is established at Sarah Lawrence College. </li>
 
    </ul>
    </div>
    <center><blockquote>
      <p>"Life is without meaning. You bring the meaning to it. The meaning of life is whatever you ascribe it to be. Being alive is the meaning."</p>
      <div>- Joseph Campbell</div>
      </blockquote></center>
    <center><blockquote>
      <p>"It is by going down into the abyss that we recover the treasures of life. Where you stumble, there lies your treasure."</p>
      <div>- Joseph Campbell</div>
      </blockquote></center>
    
    <h3 id="hook">If you have time, you should read more about this incredible human being on his <a id="tribute-link" href="https://en.wikipedia.org/wiki/Joseph_Campbell" target="_blank">Wikipedia entry</a>.</h3>
  </div>
</div>
              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css?family=Merriweather Sans');
@import url('https://fonts.googleapis.com/css?family=Alegreya|Alegreya+Sans|Merriweather|Merriweather+Sans|Nunito|Nunito+Sans|Quattrocento|Quattrocento+Sans|Roboto|Roboto+Mono|Roboto+Slab');

html,body{
  font-family:"Quattrocento Sans", Helvetica, sans-serif;
  text-align:center;
  min-width:320px;
  color:#fff;
  
}
a {
  color: red;
}
#main{
  margin:0px auto;
  padding:15px;
  border:0px solid;
  border-radius:30px;
  background-size: cover;
  background-position: center;
  background-image: linear-gradient(to bottom, rgba(123,155,166,.50), rgba(35,54,86,.9)); 
 }
#title {
  font-family: Quattrocento;
  font-size: 2em;
  color: white;
  text-shadow: 2px 2px 8px #000;
  margin-top: 5%;
  margin-bottom: 5%;
  background-color: rgba(35,54,86,.5);
  border-radius: 30px;
  max-width: 100%;
  height: 200px;
  text-align: center;
  padding-top: 80px;
  padding-bottom: 80px;

}
#AKA {
  font-family: Quattrocento Sans;
  font-size: xx-large;
  color: white;
  text-shadow: 2px 2px 6px #000;
  margin: 10%;
}
img{
  max-width: 100%; 
  display: block; 
  height: auto;
  margin: auto;
  border-radius: 30px;
  margin: 5%;
}
#img-div{
  margin:-5px;
  margin-top:20px;
  width:100%;
  border:20px;
  border-color: red;
  
}
#img-caption{
  display:flex;
  font-size: large;
  justify-content: center;
  color: white;
  text-shadow: 2px 2px 8px #000;
  font-style: italic;
  margin-bottom: 5%;
  max-width: 800px;
}
#headline{
  margin-top:50px;
  text-align:left;
  display:flex;
  font-size: x-large;
  justify-content: center;
  color: #f7ce6f;
  text-shadow: 2px 2px 8px #000;
  margin-top: 5%;
  margin-bottom: 5%;
}
#list {
  max-width:800px;
  margin:0 auto;
  text-align:left;
  background-color: rgba(166,145,123, .70);
  border-radius: 30px;
  padding: 10px;
  font-size: 1.25em;
}
ul{
}
strong {
  color: rgb(166,145,123);
}
li{
  margin: 10px;
  color: white;
  text-shadow: 2px 2px 8px #000;
  line-height: 1.15em;  
}
blockquote{
  font-size: large;
  justify-content: center;
  align-items: center;
  color: white;
  text-shadow: 2px 2px 8px #000;
  font-style: italic;
  margin-top: 5%;
  max-width: 800px;
  text-align: center;
  
 
}
#hook {
  margin: 5%;
  color: white;
  text-shadow: 2px 2px 8px #000;
}
              
            
!

JS

              
                
              
            
!
999px

Console