cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

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.

            
              <div class="container">
  <div class="jumbotron">
    <div class="row">
      <div id="app">
        <select class="form-control" v-model="sPerson" v-on:change="updateTribute">
          <option value="darwin">Charles Darwin</option>
          <option value="borlaug">Norman Borlaug</option>
        </select>
        <h1 class="text-center">{{ tribute.title }}</h1>
        <h2 class="text-center"><em>{{ tribute.subtitle }}</em></h2>
        <div class="thumbnail">
          <img v-bind:src="tribute.photo">
          <div class="caption text-center">{{ tribute.caption }}</div>
        </div>
        <div class="col-xs-8 col-xs-offset-2">
          <div id="accomplishments">
            <h3>Accomplishments</h3>
            <ul>
              <li v-for="acc in tribute.accomplishments">
                <b>{{ acc.year }}</b> - {{ acc.acc }}
              </li>
            </ul>
          </div>
          <div id="quotes">
            <br>
            <div id="quote" v-for="q in tribute.quotes">
              <blockquote>
                <p>"{{ q.quote }}"</p>
                <footer><cite>{{ q.person }}</cite></footer>
              </blockquote>
            </div>
          </div>
          <div>
            <p>Read more about <a v-bind:href="tribute.wikilink">{{ tribute.title }}</a></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
            
          
!
            
              var myData = {
  darwin: {
    title: 'Charles Darwin',
    subtitle: 'The man who revolutionized biology',
    wikilink: 'https://en.wikipedia.org/wiki/Charles_Darwin',
    photo: 'http://facstaff.cbu.edu/~seisen/homology.jpg',
    caption: 'homologous forearm structure',
    accomplishments: [
      {
        year: 1809,
        acc: 'Born in Shrewsbury, England on February 12th'
      }, {
        year: 1817,
        acc: 'Attends school in Shrewbury. His mother died.'
      }, {
        year: 1825,
        acc: 'Spent the summer as an apprentice doctor'
      }, {
        year: 1826,
        acc: 'meets Dr Robert Grant, naturalist and Lamarckian, and examines marine animals'
      },{
        year: 1827,
        acc: 'Presented on oysters'
      }, { 
        year: 1828,
        acc: 'Becomes friendly with his cousin William Darwin Fox at Christ\'s. Is a keen entomologist and collector of beetles. Attends John Stevens Henslow’s botany classes.'
      }, {
        year: 1829,
        acc: 'name appears in Stephens\' Illustrations of British Entomology'
      }, {
        year: 1831,
        acc: 'The beagle voyage began on December 27th'
      }, {
        year: 1832,
        acc: '16 January, Darwin makes his first landing on a tropical shore at St Jago, Cape Verde Islands. Field notebooks begin to be used. In December arrives in Tierra del Fuego.'
      }, {
        year: 1833,
        acc: 'March, Beagle visits Falkland Islands. From April to July around Maldonado, August to December in Rio Negro and Montevideo.'
      }, {
        year: 1834,
        acc: 'Early part of the year is spent surveying in Tierra del Fuego and another visit to the Falkland Islands. April to May Darwin and FitzRoy make an inland expedition along the River Santa Cruz. Repeated ports of call in Tierra del Fuego, eventually leaving the Straits of Magellan in June. From June 1834 to September 1835 the Beagle surveys the west coast of South America. Calls at Chiloé Island. From end of July to November Darwin resides in Valparaiso, returns to Chiloé until February 1835.'
      }, {
        year: 1835, 
        acc: 'Spends February in Valdivia and early March in Concepcion, makes long excursion northwards from March to September, calling at Copiapo, Iquique and Callao. Beagle departs Lima on 7 September for the Galapagos Archipelago. Darwin spends 16 September to 20 October exploring the archipelago, 15-26 November in Tahiti, 21-30 November in New Zealand. December Henslow prints extracts from his letters. '
      }, {
        year: 1836,
        acc: '4 October Darwin returns home to Shrewsbury. Begins to publish scientific papers.'
      }, {
        year: 1837, 
        acc: 'In July opens his first notebook on the transmutation of species.'
      }, {
        year: 1838,
        acc: '11 November proposes marriage to his cousin Emma Wedgwood'
      }, {
        year: 1839,
        acc: 'Marries Emma Wedgwood on 29 January. Publishes Journal of Researches, later known as Voyage of the Beagle. Elected a Fellow of the Royal Society. First child, a son William, is born.'
      }, {
        year: 1842,
        acc: 'On a visit to his wife’s family home, Maer in Staffordshire, makes a brief pencil sketch of his theory of \‘descent with modification\'.'
      }, {
        year: 1854,
        acc: 'Publishes concluding volumes on barnacles, A Monograph on the sub-class Cirripedia, and A Monograph on the fossil Balanidae and Verrucidae. Immediately begins full-time work on species.'
      }, {
        year: 1856,
        acc: 'On Charles Lyell’s advice begins writing up his views for a projected big book called \'Natural Selection\'.'
      }, {
        year: 1858,
        acc: 'In June receives a letter from Alfred Russel Wallace who is collecting specimens in Indonesia. Wallace encloses an essay on species and varieties that mirrors Darwin’s own theory of natural selection. \'I never saw a more striking coincidence. ..If Wallace had my MS sketch written out in 1842 he could not have made a better short abstract!\''
      }, {
        year: 1859, 
        acc: 'On the Origin of Species by means of Natural Selection, or the Preservation of Favoured Races in the Struggle for Life is published in London on 24 November by John Murray.'
      }, {
        year: 1862,
        acc: 'Meets Alfred Russel Wallace on his return from Indonesia.'
      }, {
        year: 1864, 
        acc: 'In November awarded the Copley medal of the Royal Society of London, its highest scientific honour.'
      }, {
        year: 1868,
        acc: 'Publishes The Variation of Animals and Plants Under Domestication.'
      }, {
        year: 1871,
        acc: 'Publishes The Descent of Man, and Selection in relation to Sex. Engages in dispute with St George Mivart, adds a new chapter to sixth edition of Origin of Species to rebut Mivart’s claims.'
      }, {
        year: 1882,
        acc: 'Dies 19 April, aged seventy-three. Buried in Westminster Abbey, 26 April.'
      }
    ],
    quotes: [{
      quote: 'These mysteries about how we evolved should not distract us from the indisputable fact that we did evolve.',
      person: 'Jerry A. Coyne'
    }]
  },
  borlaug: {
    title: 'Dr. Norman Borlaug',
    subtitle: 'The man who saved a billion lives',
    wikilink: 'https://en.wikipedia.org/wiki/Norman_Borlaug',
    photo: 'https://c2.staticflickr.com/4/3689/10613180113_fdf7bcd316_b.jpg',
    caption: 'Dr. Norman Borlaug, second from left, trains biologists in Mexico on how to increase yields - part of his life-long war on hunger.',
    accomplishments: [
      {
        year: 1914,
        acc: 'Born in Cresco, Iowa'
      }, {
        year: 1933,
        acc: 'Leaves his familys farm to attend the University of Minnesota to a Depression era program known as the "National Youth Administration"'
      }, {
        year: 1935,
        acc: 'Has to stop school and save up more money. Works in the Civilian Conservation Corps, helping starving Americans. "I saw how food changed them", he said. "All of this left scars on me."'
      }, {
        year: 1937,
        acc: 'Finishes university and takes job in the US Forestry Service'
      }, {
        year: 1938,
        acc: 'Marries wife of 69 years Margret Gibson. Gets laid off due to budget cuts. Inspired by Elvin Charles Stakman, he returns to school to study under Stakman, who teaches him about breeding pets-resistent plants.'
      }, {
        year: 1941,
        acc: 'Tries to enroll in the military after the Pearl Harbor attack, but is rejected. Instead, the military asked his lab to work on waterproof glue, DDT to control malaria, disenfectants, and other applied science.'
      }, {
        year: 1942,
        acc: 'Receives a Ph.D. in Genetics and Plant Pathology'
      }, {
        year: 1944,
        acc: 'Rejects a 100% salary increase from Dupont, leaves behind his pregnant wife, and flies to Mexico to head a new plant pathology program. Over the next 16 years, his team breeds 6,000 different strains of disease resistant wheat - including different varieties for each major climate on Earth.'
      }, {
        year: 1945,
        acc: 'Discovers a way to grow wheat twice each season, doubling wheat yields'
      }, {
        year: 1953,
        acc: 'Crosses a short, sturdy dwarf breed of wheat with a high-yielding American breed, creating a strain that responds well to fertalizer. It goes on to provide 95% of Mexicos wheat.'
      }, {
        year: 1962,
        acc: 'Visits Delhi and brings his high-yielding strains of wheat to the Indian subcontinent in time to help mitigate mass starvation due to a rapidly expanding population.'
      }, {
        year: 1970,
        acc: 'Receives the Nobel Peace Prize'
      }, {
        year: 1983,
        acc: 'Helps seven African countries dramatically increase their maize and sorghum yields'
      }, {
        year: 1984,
        acc: 'Becomes a distinguished professor at Texas A&M University'
      }, {
        year: 2005,
        acc: 'States "we will have to double the world food supply by 2050." Argues that genetically modified crops are the only way we can meet the demand, as we run out of arable land. Says that GM crops are not inherently dangerous becuase "weve been genetically modifying plants and animals for a long time. Long before we called it science, people were selecting the best breeds.'
      }, {
        year: 2009,
        acc: 'Dies at the age of 95'
      }
    ],
    quotes: [
      {
        quote: 'Borlaugs life and achievement are testimony to the far-reaching contribution that one mans towering intellect, persistence and scientific vision can make to human peace and progress.',
        person: 'Indian Prime Minister Manmohan Singh'
      }
    ]
  }
}

var app = new Vue({
  el: '#app',
  data: {
    sPerson: 'darwin',
    tribute: myData.darwin
  },
  methods: {
    updateTribute: function() {
      this.tribute = myData[this.sPerson];
    }
  }
});

            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console