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.

            
              <div class="container-fluid">

    <div class="top-container">
      <h1>Audrey Hepburn | A Tribute Page</h1>
    </div>

    <!-- Information on Audrey Hepburn -->
  <div class="container-fluid">
  <div class="row">
    <div class="col middle-container">
      <h2>Early Life</h2>
      <ul>
        <div>
          <div id="floated-imgs">
            <img src="https://cdn.catawiki.net/assets/marketing/marketing/upload_images-files/29049-f6d29482c3b2cc835e785e37e5f9793511155169-original.jpg" height="180" width="170"></img>
          <div class="audrey-ballet">
          <img src="https://crashmacduff.files.wordpress.com/2015/05/34.jpg" height="210" width="170"></img>
        </div>
          </div>
        </div>
        <li>Audrey Hepburn was born to an English father and Dutch mother in Belgium, May 4th, 1929. Her father’s job as an insurance agent meant the family often moved between England, Holland and Belgium.</li>
    <li>In 1935, her parents divorced; one reason for this was that her father was a Nazi sympathiser. The divorce was very traumatic for six-year-old Audrey; she would later say it was the most traumatic incident of her life. After the war, despite suffering under the Nazi occupation,  Audrey later tracked down her father to Dublin and supported him financially.</li>
    <li>From 1935–38, Audrey went to boarding school in Kent; in 1939 her mother moved the family to Arnhem in the Netherlands, where she thought it would be safe from Nazi invasion.</li>
        <li> However, in 1940, the Netherlands was overrun and the country fell under Nazi occupation until liberation in 1945. During this time, Audrey went to school at the Arnhem conservatory where she also studied ballet. At one time she considered taking ballet as a career. During the occupation, it was said she would often dance in various locations, helping to raise money for the underground movement. Towards the end of the war, the occupation of Netherlands became increasingly brutal. After the D-Day landings of 1944, the Germans took most of the pitiable rations of the Dutch, leaving many to starve or freeze to death. Reprisals and shootings against the local population were common. As a young girl, Audrey saw her uncle and mother’s cousin shot in the street by the Germans. She also recalls seeing a train load of Jewish children being herded into cattle trucks for deportation.</li>
      <li> She felt a natural empathy and sympathy for children who were the victims of war and starvation. During the war Audrey suffered anaemia, respiratory problems and edema (swelling of the limbs) Audrey later noted a similarity between her wartime experience and that of Anne Frank. She read her diary in 1946, and said it “left her feeling devastated.” However, despite the ongoing horrors of the occupation, Audrey passed her time through drawing and practising ballet.</li>
      <li> After the war, Audrey went to London where she continued to practise ballet. She had great talent but her height and malnutrition during the war meant that she was unable to become a really great ballerina, and so decided to seek work as an actor.</li>
  </ul>

      <h2>Entertainment</h2>
    <ul>
      <div>
          <div id="floated-imgs">
            <div class= "audrey-gigi">
            <img src="http://cdn-wpmsa.defymedia.com/wp-content/uploads/sites/3/2015/04/Gigi-Audrey-Heburn-Poster.jpg" height="210" width="170"></img>
          <div class="audrey-breakfast">
          <img src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2013/04/02/19/pg-12-capote-1-rex.jpg" height="210" width="170"></img>
  </div>
        </div>
          </div>
        </div>
      <li> After several minor roles in films such as The Lavender Hill Mob, Audrey was scooterchosen to play Gigi, a hit West End play. She was given an award by the theatre world for best debut performance. Her first film was Secret People in 1952; a film about a prodigy ballerina, which was a natural choice for Audrey to play. It was during the filming for this that she was spotted by director William Wyler. He was producing a film “Roman Holiday” and he felt the innocence and elfin beauty of Audrey Hepburn would make a perfect choice for the English Princess, who spends a day in Rome in the company of Gregory Peck. The film was a great hit and on the advertising Audrey Hepburn was given the same billing as Gregory Peck. In many respects, Audrey outshone her more illustrious lead Gregory Peck; as Peck predicted, it was Audrey who would be given an Oscar for her performance.</li>
      <li> In 1961, Audrey played one of her most demanding roles, the extrovert Holly Golightly in Breakfast at Tiffany’s. She said of her role that it was “one of the jazziest of my career,” contrary to her introverted nature and thus quite difficult to pull off. However, her performance was one of the most iconic roles of the 1960s. The film has retained an enduring popularity to this day. In 2006, the “little black dress” from the film was sold in auction for just under half a million pounds. The proceeds were given to one of Audrey’s charities. </li>
      <li> In 1959, she stared in The Nun’s Story – quite different to her other roles, this was a challenging portrayal of a young nun, Sister Luke, who trained to be a novice nun before spending time as a missionary in the Congo. Sister Luke also faces a painful spiritual dilemma as she returns to Belgium and the Nazi occupation. With some parallels to her own life, the film showed the multifaceted acting talents of Audrey Hepburn. </li>
    </ul>
      <h2>Philanthropy</h2>
  <ul>
  <li> From 1967, after 15 years in film, Audrey acted only occasionally. She spent more time with her family and also working with UNICEF. She was appointed as a special ambassador to UNICEF and became actively involved in campaigns to improve conditions for children around the world.

  In 1988 she visited Ethiopia at a camp for children. </li>
  </ul>

    </div>

    <!-- Three links to further website -->
  <div class="col-xs-10 right-container" id="scrollingDiv">
    <p id= "take-me-away">Take Me Away</p>
    <div class="text-center" id="image">
        <a href="https://en.wikipedia.org/wiki/Audrey_Hepburn" target="_blank"><img class="img-responsive rounded-circle img-thumbnail" src="https://ae01.alicdn.com/kf/HTB10kNgKpXXXXaJXpXXq6xXFXXXq/220075481/HTB10kNgKpXXXXaJXpXXq6xXFXXXq.jpg" alt="Pop Picture" width="80" height="80"></a>
        <p>Wiki</p>
    </div>
    <div class="text-center" id="image">
      <a href="https://www.biography.com/news/audrey-hepburn-style-david-wills" target="_blank"><img class="img-responive rounded-circle img-thumbnail" src="https://images-na.ssl-images-amazon.com/images/I/41T76AJdWhL._SY300_.jpg" alt="Pop Picture Audrey" width="80" height="80"></a>
      <p>Bio</p>
    </div>
    <div class="text-center" id="image">
      <a href="http://www.audreyhepburn.com/menu/index.php?idMenu=42" target="_blank"><img class="img-responsive rounded-circle img-thumbnail" src="https://i.pinimg.com/236x/0e/87/69/0e876905332baa7509436808505fa6a1--glamour-hollywood-holly-golightly.jpg" alt="Pop Image Audrey" width="80" height="80"></a>
      <p>Charity</p>
    </div>
 </div>

            
          
!
            
              body {
    background-color: #FDFEFE;
}

.top-container {
  background-color: #51758C;
  padding: 150px 50px 5px 10px;
  margin: 20px;
  margin-right: 220px;
  border-radius: 20px;
  font-family: 'PT Sans Narrow', sans-serif;
  color: #F7EEF6;
  text-align: left;
}

.middle-container {
  background-color: #34495E;
  margin: 20px;
  margin-right: 220px;
  border-radius: 20px;
  padding: 20px;
  font-family: 'PT Sans Narrow', sans-serif;
  color: #F7EEF6;
  text-align: justify;
  font-size: 15pt;
}

.right-container {
  background-color: #85929E;
  margin: 20px;
  padding: 10px;
  border-radius: 20px;
  color: #F7EEF6;
  font-family: 'PT Sans Narrow', sans-serif;
  min-width: 160px;
  min-height: 400px;
  position: absolute;
  top: 10px;
  right: 20px;
}


#floated-imgs { float: right; }
#floated-imgs img {display: block;
  padding: 10px;
}

.audrey-ballet {
  padding-top: 50px;
}

.audrey-breakfast {
  padding-top: 45px;
}

#take-me-away {
  text-align: center;
  font-family: 'PT Sans Narrow', sans-serif;
  color: #F7EEF6;

}

#image {
  padding-top: 5px;
}

.rounded-circle:hover {
  opacity: 0.3;
}

            
          
!
            
              $().ready(function() {
		var $scrollingDiv = $("#scrollingDiv");

		$(window).scroll(function(){
			$scrollingDiv
				.stop()
				.animate({"marginTop": ($(window).scrollTop() + 10) + "px"}, "slow" );
		});
	});

            
          
!
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