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">
  <div class="jumbotron">
    <div class="row">
      <div class="col-xs-12">
        <h1 class="display-1 text-center">Siddhartha Gautama</h1>
        <h2 class="text-center"><em>The First Buddha</em></h2>
        <div class="thumbnail">
          <img src="http://i50.photobucket.com/albums/f347/emjeannelson/buddha_zpsyg9kfesf.jpg" title="Gautama Buddha" alt="Painting of a seated Buddha surrounded by glowing light">
         <div class="caption text-center">Painting of Gautama Buddha sitting under the Bodhi tree after achieving enlightenment. His hand gesture represents communication of the Dharma and great compassion.</div>
    <div class="row">
       <div class="col-md-8 col-md-push-2">
         <p class="lead">Here's a timeline of Gautama Buddha's life:<p>
            <li><strong>563 BC -</strong> Siddharta Gautama is born to a royal family in Lumbini, near the Indian-Nepalese border. Seers predict that Siddharta will either become a great king or a great religious teacher.</li>
            <li><strong>563-547 BC -</strong> Siddharta spends his childhood in his father's palace, practicing both martial skills and spiritual discipline.</li>
            <li><strong>547 BC -</strong> Siddharta marries his beautifu cousin, Princess Yasodhara </li>
            <li><strong>547-533 BC -</strong> The Buddha spends 13 more years living with his parents. The king has numerous lavish dwellings built for Siddhartha, and tries to shield him from the harsh realities of life.</li>
            <li><strong>533 BC -</strong> Even though Siddharta lives a life of ease and luxury, he yearns to know more about the world. One day he leaves the palace grounds and encounters a decrepit old man, a diseased person, a corpse being cremated, and a holy man. Siddhartha realizes that all beings experience old age, sickness, and death, and that we ultimately have little control over our lives. Known as the Four Sights, this is the event that inspires Siddharta to seek spiritual development.</li>
            <li><strong>533-528 BC -</strong> On the night of his 29th birthday, Siddhartha sneaks out of the palace while everyone is asleep. He renounces the royal life and becomes a penniless, homeless wanderer. He lives as an ascetic. At first he becomes a disciple of several famous Brahman teachers, and later attracts his own disciples.</li>
            <li><strong>528 BC -</strong> After becoming disillusioned with the Hindu caste system and asceticism, Siddhartha continues to search for spiritual truth through meditation. In April or May of 528 BC, he experiences the Great Enlightenment, which shows him the path to salvation from suffering, while meditating under the Bodhi tree. He spends seven weeks meditating in the vicinty and becomes a Buddha.</li>
            <li><strong>528 BC -</strong> Gautama Buddha finds five of his former disciples in Benares and teaches him what will become the foundational principles of Buddhism. This is the beginning of Buddhist teaching and his disciples become the first five members of the sangha (Buddhist order).</li>
            <li><strong>528-483 BC -</strong> Gautama Buddha travels far and wide teaching about the path to freedom from suffering and enlightenement. He first returns to his father's palace to convert the royal family and later travels around Northern India, attracting hundreds of thousands of followers from all walks of life.</li>
            <li><strong>483 BC -</strong> Gautama Buddha passes into Nirvana after reaching his goal of spreading his teachings to as many people as possible. He dies at age 80 as a result of food poisoning. His last words were a message to his beloved disciples:</li>
           <blockquote class="blockquote">
             <p>"All compounded things are ephemeral; work diligently on your   salvation."</p>
             <footer>Gautama Buddha</footer>
           <h3><strong>Read more about this exalted spiritual leader and his enduring teachings on his <a href="https://en.wikipedia.org/wiki/Gautama_Buddha" target="_blank" class="coral">Wikipedia entry</a>.</strong></h3>  
    <footer class="text-center">
      Written and coded by <a href="http://www.emilynelson.us/" target="_blank" class="coral">Emily Nelson</a>

              .jumbotron {
  margin-top: 3em;

.coral {
  color: #f47836;
🕑 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 ..................