Pen Settings

HTML

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there that can affect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

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.

Powered by Algolia
About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

You can also link to another Pen here (use the .css URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

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.

Powered by Algolia
About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ 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.

Powered by Algolia
About Packages

Using packages here is powered by Skypack, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ES6 import usage.

All packages are different, so refer to their docs for how they work.

If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.

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 

              
                <!-- I like to add a button to switch from english to spanish, when i learn how to link 2 pages in openpen -->
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

<main id="main">
  <h1 id="title"> Dr. Mario Augusto Bunge</h1>
  <p id="undertitle"><strong> The Last Scholar</strong> </p>

  <figure id="img-div">
    <img id="image" src="https://images.clarin.com/2019/09/14/mario-bunge-afp___pji9FAzyo_1256x620__2.jpg" alt="Dr. Mario Bunge seen standing infront of his library" />
    <figcaption id="img-caption">Dr. Mario Bunge and his ever-growing library.
    </figcaption>
  </figure>

  <section id="tribute-info">
    <h2 class="headline"> Biography </h2>
    <p> Bunge was born on September 21, 1919, in Buenos Aires (Argentina). His mother, Marie Herminie Müser, was a German nurse who left Germany just before the beginning of World War I. His father, Augusto Bunge, also of some German descent, was an Argentinian physician and socialist legislator. Mario, who was the couple's only child, was raised without any religious education, and enjoyed a happy and stimulating childhood in the outskirts of Buenos Aires.</p>
    <p>He had four children: Carlos F. and Mario A. J. (with ex-wife Julia), and Eric R. and Silvia A., with his wife of over 60 years, the Argentinian mathematician Marta Cavallo.Mario lived with Marta in Montreal since 1966, with one-year sabbaticals in other countries.</p>
    <p>He studied physics and mathematics at the National University of La Plata and received a doctorate in Physics and Mathematics Sciences in 1952. Interested in the new physics, he specialized in fundamentals of physics and epistemology. Co-founder in 1944 of the prestigious Argentine Physical Association, he saw his university career truncated because of his ethical and political commitments. At the fall of Perón, he was reinstated at the University of Buenos Aires and appointed Professor of Theoretical Physics and Philosophy of Science. He left his country in 1963 and went through American and German universities. In 1966 he joined the McGill University of Montreal, where he held the Frothingham Chair. He was also a visiting professor at other prestigious universities around the world.</p>
    <p>He became a centenarian in September 2019 and died in Montreal, Canada, in February 2020 at the age of 100.</p>

    <h2 class="headline"> Work </h2>
    <p>Bunge was a prolific intellectual, having written more than 400 papers and 80 books, notably his monumental Treatise on Basic Philosophy in eight volumes (1974–1989), a comprehensive and rigorous study of those philosophical aspects Bunge takes to be the core of modern philosophy: semantics, ontology, epistemology, philosophy of science and ethics. In his Treatise, Bunge developed a comprehensive scientific outlook which he then applied to the various natural and social sciences.</p>

    <div>
      <img id="div-thumb-right" src="https://pbs.twimg.com/media/ERomEc9WkAEOOuC.jpg" alt="Pentagon figure with the five philosophical views: systemism, emergentism, rationalism, scientific realism and materialism">
    </div>

    <p>His thinking embodies global <strong>systemism, emergentism, rationalism, scientific realism and materialism</strong>. Bunge repeatedly and explicitly denied being a logical positivist, and wrote on metaphysics.</p>

    <p>An inspection of his work allows one to identify a variety of scientists and philosophers who have influenced his thought in one way or another. Among those thinkers, Bunge explicitly acknowledged the direct influence of his own father, the Argentine physician Augusto Bunge, the Czech physicist Guido Beck, the Argentine mathematician Alberto González Domínguez, the Argentine mathematician, physicist and computer scientist Manuel Sadosky, the Italian sociologist and psychologist Gino Germani, the American sociologist Robert King Merton, and the French-Polish epistemologist Émile Meyerson.</p>

    <p>In the political arena, Bunge defined himself as a left-wing liberal and democratic socialist, in the tradition of John Stuart Mill and José Ingenieros. He was also a supporter of the Campaign for the Establishment of a United Nations Parliamentary Assembly, an organisation which advocates for democratic reform in the United Nations, and the creation of a more accountable international political system.</p>

    <p>Popularly, he is known for his remarks considering psychoanalysis as an example of pseudoscience. He also freely criticized the ideas of well known scientists and philosophers such as Karl Popper (his well known friend), Richard Dawkins, Stephen Jay Gould, and Daniel Dennett.</p>

    <p>In his review of Between Two Worlds: Memoirs of a Philosopher-Scientist, James Alcock saw in Bunge "a man of exceedingly high confidence who has lived his life guided by strong principles about truth, science, and justice" and one who is "[impatient] with muddy thinking".</p>

    <h2 class="headline"> Honors and awards </h2>
    <p>Mario Bunge was distinguished with twenty-one honorary doctorates and four honorary professorships by universities from both the Americas and Europe. Bunge was a fellow of the American Association for the Advancement of Science (AAAS) (1984–) and of the Royal Society of Canada (1992–), and he is in the Science Hall of Fame of the AAAS. In 1982 he was awarded the Premio Príncipe de Asturias (Prince of Asturias Award), in 2009 the Guggenheim Fellowship,and in 2014 the Ludwig von Bertalanffy Award in Complexity Thinking.</p>

    <h2 class="headline"> Bibliography (selection) </h2>

    <ul id="list">
      <li> <strong>1959.</strong> <em>Causality: The Place of the Causal Principle in Modern Science.</em> Cambridge: Harvard University Press. (Fourth edition, New Brunswick: Transaction Publishers, 2009.)</li>
      <li><strong>1960.</strong> <em>La ciencia, su método y su filosofía.</em> Buenos Aires: Eudeba. (In French: La science, sa méthode et sa philosophie. Paris: Vigdor, 2001, ISBN 2-910243-90-7.)</li>
      <li><strong>1962.</strong> <em>Intuition and Science.</em> Prentice-Hall. (In French: Intuition et raison. Paris: Vigdor, 2001, ISBN 2-910243-89-3.)</li>
      <li><strong>1967.</strong> <em>Scientific Research: Strategy and Philosophy.</em> Berlin, New York: Springer-Verlag. Revised and reprinted as Philosophy of Science (1998).</li>
      <li><strong>1967.</strong> <em>Foundations of Physics.</em> Berlin, Heidelberg, New York: Springer-Verlag.</li>
      <li><strong>1973.</strong> <em>Philosophy of Physics.</em> Dordrecht: Reidel.</li>
      <li><strong>1980.</strong> <em>The Mind-Body Problem.</em> Oxford: Pergamon.</li>
      <li><strong>1984.</strong> <em>"What is Pseudoscience?"</em> The Skeptical Inquirer. Volume 9: 36–46.</li>
      <li><strong>1987.</strong> <em>Philosophy of Psychology (with Rubén Ardila).</em> New York: Springer.</li>
      <li><strong>1987.</strong> <em>"Why Parapsychology Cannot Become a Science"</em>, Behavioral and Brain Sciences 10: 576–577.</li>
      <li><strong>1988.</strong> <em>Ciencia y desarrollo. Buenos Aires: Siglo Veinte.</em></li>
      <li><strong>1974–89.</strong> <em>Treatise on Basic Philosophy:</em>[20] 8 volumes in 9 parts:

        <ul>
          <li><strong>I:</strong> <em>Semantics II: Interpretation and Truth.</em> Dordrecht: Reidel, 1974.</li>
          <li><strong>III:</strong> <em>Ontology I: The Furniture of the World.</em> Dordrecht: Reidel, 1977.</li>
          <li><strong>IV:</strong> <em>Ontology II: A World of Systems.</em> Dordrecht: Reidel, 1979.</li>
          <li><strong>V:</strong> <em>Epistemology and Methodology I: Exploring the World.</em> Dordrecht: Reidel, 1983.</li>
          <li><strong>VI:</strong> <em>Epistemology and Methodology II: Understanding the World.</em> Dordrecht: Reidel, 1983.</li>
          <li><strong>VII:</strong> <em>Epistemology and Methodology III: Philosophy of Science and Technology:</em>
            <ul>
              <li><strong>Part I.</strong> <em>Formal and Physical Sciences.</em> Dordrecht: Reidel, 1985.</li>
              <li><strong>Part II.</strong> <em>Life Science, Social Science and Technology.</em> Dordrecht: Reidel, 1985.</li>
            </ul></li>
          <li><strong>VIII:</strong> <em>Ethics: the Good and the Right.</em> Dordrecht: D. Reidel, 1989.</li>

        </ul>
      </li>
      <li><strong>1996.</strong> <em>Finding Philosophy in Social Science.</em> New Haven: Yale University Press.</li>
      <li><strong>1997.</strong> <em>Foundations of Biophilosophy (with Martin Mahner).</em> New York: Springer.</li>
      <li><strong>1998.</strong> <em>Dictionary of Philosophy.</em> Amherst, NY: Prometheus Books.</li>
      <li><strong>1998.</strong> <em>Philosophy of Science</em>, 2 Vols. New Brunswick, NJ: Transaction.</li>
      <li><strong>1998.</strong> <em>Social Science under Debate: A Philosophical Perspective.</em> Toronto: University of Toronto Press.</li>
      <li><strong>1999.</strong> <em>The Sociology–Philosophy Connection.</em> New Brunswick, NJ: Transaction.</li>
      <li><strong>2001.</strong> <em>Scientific Realism: Selected Essays of Mario Bunge.</em> Edited by Martin Mahner. Amherst, NY: Prometheus Books.</li>
      <li><strong>2001.</strong> <em>Philosophy in Crisis.</em> Amherst, NY: Prometheus Books.</li>
      <li><strong>2003.</strong> <em>Emergence and Convergence: Qualitative Novelty and the Unity of Knowledge.</em> Toronto: University of Toronto Press.</li>
      <li><strong>2004.</strong> <em>Über die Natur der Dinge. Materialismus und Wissenschaft (with Martin Mahner).</em> Stuttgart: S. Hirzel Verlag.</li>
      <li><strong>2006.</strong> <em>Chasing Reality: Strife over Realism.</em> Toronto: University of Toronto Press.</li>
      <li><strong>2009.</strong> <em>Political Philosophy: Fact, Fiction, and Vision.</em> New Brunswick, NJ: Transaction.</li>
      <li><strong>2010.</strong> <em>Matter and Mind: A Philosophical Inquiry.</em> New York: Springer.</li>
      <li><strong>2012.</strong> <em>Evaluating Philosophies.</em> New York: Springer.</li>
      <li><strong>2012.</strong> <em>"Does Quantum Physics Refute Realism, Materialism and Determinism?", Science & Education 21(10)</em>: 1601–1610.</li>
      <li><strong>2013.</strong> <em>Medical Philosophy: Conceptual Issues in Medicine.</em> New Jersey: World Scientific Publishing Company.</li>
      <li><strong>2016.</strong> <em>Between Two Worlds: Memoirs of a Philosopher-Scientist.</em> New York: Springer.</li>
      <li><strong>2017.</strong> <em>Doing Science: In the Light of Philosophy.</em> Singapore: World Scientific Publishing Company.</li>
      <li><strong>2018.</strong> <em>From a Scientific Point of View: Reasoning and Evidence Beat Improvisation across Fields.</em> Cambridge: Cambridge Scholars.</li>
    </ul>

    <blockquote>
      <p>"The world of contemporary man is based on the results of science: the data replaces the myth, the theory replaces the fantasy and the prediction replaces the prophecy."</p>
      <cite> <strong> Mario Augusto Bunge </strong> </cite>
    </blockquote>
    <h3>
      If you like to learn more about Dr. Bunge and his philosophy, please check out his <a id="tribute-link" href="https://es.wikipedia.org/wiki/Mario_Bunge" target="_blank" title="Mario Bunge Wikipedia page (in spanish)">wikipedia page (in spanish)</a> and his<a href="https://es.wikipedia.org/wiki/Anexo:Bibliograf%C3%ADa_de_Mario_Bunge" target="_blank" title="Complete bibliography"> complete bibliography</a>.
    </h3>
  </section>
</main>
!

CSS 

              
                * {
  margin: 0;
  padding: 0;
}

html {
  font-size: 10px;
}
body {
  font-family: Tahoma, Geneva, sans-serif;
  line-height: 1.4;
  color: #111;
  margin: 0;
  background-color: #111;
}

h1 {
  font-size: 4rem;
  line-height: 1;
  color: #333;
  text-align: center;
}

@media (max-width: 460px) {
  h1 {
    font-size: 2.3rem;
    line-height: 1;
  }
}

#undertitle {
  font-size: 1.8rem;
  line-height: 1;
  text-align: center;
  margin-top:1rem;
}

@media (max-width: 460px) {
  #undertitle {
    font-size: 1.2rem;
    line-height: 0.7;
  }
}

h2 {
  font-size: 3rem;
  text-align: left;
  margin: 1.7rem 0 0 0;
}

@media (max-width: 460px) {
  h2 {
    font-size: 2rem;
  }
}

blockquote {
  font-size: 2rem;
  font-style: italic;
  max-width: 500px;
  margin: 50px auto 50px auto;
  padding: 1rem;
  border: 1px solid;
  border-radius: 5px;
  border-color: #555;
  background-color: #999;
  box-shadow: 5px 10px 5px 5px;
}
@media (max-width: 460px) {
  blockquote {
    max-width: 200px;
  }
}

cite {
  margin-left: 1rem;
}

#div-thumb-right {
  float: left;
  width: 40%;
  height: auto;
  margin: 1rem;
  border: 2px solid;
  border-color: #111;
}

p {
  font-size: 1.4rem;
  text-align: justify;
  margin: 0 0 1.5rem 0;
}

@media (max-width: 460px) {
  p {
    font-size: 1rem;
  }
}

#list {
  font-size: 1.3rem;
  margin: auto;
  text-align: left;
  font-weight: normal;
  line-height: 1.7;
}
@media (max-width: 460px) {
  #list {
    font-size: 1rem;
  }
}

h3 {
  text-align: center;
  font-size: 1.4rem;
  margin: auto;
}

a {
  color: #477ca7;
}

a:visited {
  color: #74638f;
}

#main {
  margin: 30px 15px;
  padding: 10px;
  border-radius: 5px;
  background: silver;
}

@media (max-width: 460px) {
  #main {
    margin: 0;
  }
}

#image {
  max-width: 100%;
  display: block;
  height: auto;
  margin: 0 auto;
}

#img-div {
  background: gray;
  padding: 10px;
  margin: 0;
}

#img-caption {
  margin: 0.5rem auto 0.7rem auto;
  font-size: 1.5rem;
  text-align: center;
}

@media (max-width: 460px) {
  #img-caption {
    font-size: 1rem;
  }
}

#headline {
  margin: 5rem 0;
  text-align: left;
}
!

JS
!
999px

Console