123

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.

            
              
<style>
  
body, html {
    height: 120%;
    margin: 0;
    font-family: 'Poppins', sans-serif; 
}

.atlas-image {
  background-image: url("http://res.cloudinary.com/dqww6uode/image/upload/v1516242405/Screen_Shot_2018-01-17_at_9.26.01_PM_jsngxt.png");
  height: 70%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.atlas-text {
  text-align: left;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 74%;
  left: 22%;
  color: white;
  font-size: 90px;
  padding-bottom: 100px;
  padding-top: 0px;
  font-family: 'Poppins', sans-serif; 
  text-shadow: 0 2px 3px rgba(0,0,0,.4);
}

  p {
    font-size: 30px;  
    position: relative;
    top: 115px; 
    left: 15px;
    line-height: 0;  
  }

   .img2 { 
    border-radius: 50%; 
    position: relative;
    top: 60px;  
}
  /* This code centers the rounded img in the middle of page. */ 
  .center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
 }    

  .sub-header {
    text-align: center;
    position: relative; 
    top: -19px;
    width: 40%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    border-bottom-style: solid; 
    border-width: 1px;
    border-color: silver;     
  }
 
  
  h6 {
    border-top-style: solid; 
    border-width: 1px; 
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 12px; 
    border-color: silver; 
    text-align: center;
    background-color: white; 
    position: relative; 
    margin-bottom: -20px;
    bottom: -65px;   
  }
  
  .time-line {
    position: relative; 
    top: 0px;
    margin-bottom: 50px;
    margin-left: 60px;
    margin-right: 60px; 
    margin-top: 50px;
  }
 
  .title {
    line-height: 1
  }
  
 .quote p {
    font-size: 30px;
    height: 15%; 
    width: 80%; 
    text-align: center;
    margin-top: 100px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.2; 
    left: 0px; 
    top: 5px;
    font-style: italic;
  }
  
  
  #link {
    text-align: center; 
    font-style: italic; 
  }
    
  @media screen and (max-width: 400px) {
    .quote p {
    font-size: 20px;
  }
    .time-line {
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px; 
    margin-top: 0px;
    font-size: 15px;   
    }
    
    .img2 {
      height: 200px;
      width: 200px; 
    }
    .atlas-text {
      font-size: 50px;
      margin-left: 50px;
      bottom: -280px;
    }
    
    p {
      font-size: 20px; 
      top: 50px;
    }
    .atlas-image {
      height: 50%; 
    }
}
  
  
</style>

<link href="https://fonts.googleapis.com/css?family=Poppins:200" rel="stylesheet"> 

<body>

<div class="atlas-image">
  <div class="atlas-text">
    <p>The Life of</p>
    <h1 class="title">Ayn<br>Rand</h1>
  </div>
</div>
  
 <img src="http://res.cloudinary.com/dqww6uode/image/upload/v1516231910/pic_Ayn_Rand_test_ladpge.png" class="img2 center-block" alt="Ayn Rand"> 
 
  <div class="quote">
    <p>"Throughout the centuries there were men who took first steps, down new roads, armed with nothing but their own vision."</p>
  </div>
  
 <div class="sub-header"   
 <h3>Here's a Time Line of Ayn Rand's Life:</h3>
</div>
  
  <div class="time-line">
   <ul>
    <li>1905 -  Born in Saint Petersburg, Russia.</li>
    <li>1911 -	Teaches self to read</li>
    <li>1912 -	Family moves to an apartment on Nevsky Prospekt at Znamenskaya Square</li>
    <li>1914 -	Reads first romantic fiction, The Mysterious Valley; decides to become a writer</li>
    <li>1917 -	Witnesses first shots of February revolution</li>
    <li>1918 -	Discovers writings of Victor Hugo
To escape civil war, family moves to Ukraine and then Yevpatoria, Crimea</li>
    <li>1920 -	Discovers Aristotle’s works in high school</li>
    <li>1921 -	Graduates from Yevpatoria High School #4
Family returns to Petrograd
Enrolls in Petrograd State University 
Discovers the works of Nietzsche</li>
    <li>1924 - Discovers Viennese operettas
Graduates from Leningrad State University
Enrolls in State Technicum for Screen Arts</li>
    <li>1925 - Receives permission to leave USSR</li>
    <li>1926 - Departs Leningrad and sails for America on the De Grasse Arrives in Manhattan. Hired as movie extra by Cecil B. DeMille
Meets Frank O’Connor on set of The King of Kings</li>
    <li>1927 -	Hired by DeMille as junior screen writer</li>
    <li>1929 -	Marries Frank O’Connor</li>
    <li>1931 -	Becomes U.S. citizen</li>
    <li>1935 -	Night of January 16th (formerly, Woman on Trial) opens on Broadway</li>
    <li>1936 -	We the Living published</li>
    <li>1938 -	Anthem published in England</li>
    <li>1939 -	Receives last communication from parents in USSR</li>
    <li>1940 -	Works for the Wendell Willkie presidential campaign
The Unconquered (We the Living adaptation) opens on Broadway</li>
    <li>1943 -  The Fountainhead published</li>
    <li>1946 -	First U.S. edition of Anthem published</li>
    <li>1949 -	The Fountainhead film opens</li>
    <li>1951 -	Moves back to New York City</li>
    <li>1957 -	Atlas Shrugged published</li>
    <li>1958 -	Begins teaching fiction writing class and presents first campus talk, at Queens College</li>
    <li>1960 -	Delivers first major campus talk, “Faith and Force: Destroyers of the Modern World,” at Yale University</li>
    <li>1961 -	For the New Intellectual published and presents first Ford Hall Forum talk, “The Intellectual Bankruptcy of Our Age”</li>
    <li>1962 -	First issue of The Objectivist Newsletter published</li>
    <li>1963 -	Receives honorary doctorate from Lewis and Clark University</li>
    <li>1964 -	The Virtue of Selfishness published</li>
    <li>1966 -	First installment of “Introduction to Objectivist Epistemology” published in The Objectivist</li>
    <li>1967 -	Makes first appearance on the Tonight Show Starring Johnny Carson</li>
    <li>1969 -	Begins teaching nonfiction writing course and presents first epistemology workshop</li>
    <li>1974 -	Presents “Philosophy: Who Needs It” talk at West Point and attends White House dinner for Alan Greenspan swearing-in</li>
    <li>1976 -	Publishes last article in The Ayn Rand Letter</li>
    <li>1979 -	Introduction to Objectivist Epistemology published by New American Library and Frank O’Connor dies</li>
    <li>1981 -	Delivers last Ford Hall Forum lecture, “The Age of Mediocrity” and delivers last public lecture, “The Sanction of the Victims,” in New Orleans</li>
    <li>1982 -	Writes her last page of “Atlas Shrugged” teleplay and dies in New York City</li>
  </ul>
  </div>

<h4 id="link">To Learn More About Ayn Rand's Life and her Work <a href="http://aynrandlexicon.com/about-ayn-rand/timeline.html" target="_blank">Click Here</a>.</h4>   
  
<h6>Written and coded by Carl Leduc</h6>   

</html>
            
          
!
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.

Console