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="containter centered p-1 m-1">
 <div class="card text-center">
  <div class="card-image">
    <div class="card-header">
      <div class="card-title h1">Ignaz Semmelweis</div>
      <div class="card-subtitle text-gray h4">The 'Savior of Mothers'</div>
      </div>
    <img src="https://zobaczzrozum.files.wordpress.com/2016/05/ignaz_semmelweis.jpg?w=640" class="img-responsive centered">
  </div>
   <div class="card-body bg-dark">
     <h3>A little about his life</h3>
      <p>Ignaz Philipp Semmelweis was a Hungarian physician of ethnic-German ancestry, now known as an early pioneer of antiseptic procedures.<br><br> Semmelweis discovered that the incidence of puerperal fever (also known as "childbed fever") could be drastically cut by the use of hand disinfection in obstetrical clinics.<br><br>
       <em>Puerperal fever was common in mid-19th-century hospitals and often fatal.<em> <br><br>
       Semmelweis proposed the practice of washing hands with chlorinated lime solutions in 1847 while working in Vienna General Hospital's First Obstetrical Clinic, where doctors' wards had three times the mortality of midwives' wards. <br><br>
       He published a book of his findings in Etiology, Concept and Prophylaxis of Childbed Fever.</p><hr><br>
         <h4>A Timeline of his Life</h4>
     <div class="timeline">
  <div class="timeline-item" id="timeline-example-1">
    <div class="timeline-left">
      <a class="timeline-icon" href="#timeline-example-1"></a>
    </div>
    <div class="timeline-content">
      <div class="tile">
  <div class="tile-icon">
    <div class="example-tile-icon">
      <i class="icon icon-file centered"></i>
    </div>
  </div>
  <div class="tile-content">
    <p class="tile-title h5">Born in 1818</p>
    <p class="tile-subtitle text-gray">Ignaz Semmelweis was born on 1 July 1818 in Tabán, neighbourhood of Buda, Hungary, today part of Budapest. <br><br> He was the fifth child out of ten of the prosperous grocer family of József Semmelweis and Teréz Müller.</p>
  </div>
  <div class="tile-action">
    <button class="btn btn-sm"><a href="https://en.wikipedia.org/wiki/Ignaz_Semmelweis#Family_and_early_life" target='_blank'>More</a></button>
  </div>
</div>
    </div>
  </div>

  <div class="timeline-item" id="timeline-example-2">
    <div class="timeline-left">
      <a class="timeline-icon icon-lg" href="#timeline-example-2">
      </a>
    </div>
    <div class="timeline-content">
      <div class="tile">
        <div class="tile-content">
          <p class="tile-title h5">Theory of cadaverous poisoning</p>
          <p class="tile-subtitle text-gray">...The breakthrough occurred in 1847, following the death of his good friend Jakob Kolletschka, who had been accidentally poked with a student's scalpel while performing a post mortem examination. <br><br>
      Kolletschka's own autopsy showed a pathology similar to that of the women who were dying from puerperal fever. Semmelweis immediately proposed a connection between cadaveric contamination and puerperal fever. <br><br>
      He concluded that he and the medical students carried "cadaverous particles" on their hands[Note 5] from the autopsy room to the patients they examined in the First Obstetrical Clinic. <br><br>
      This explained why the student midwives in the Second Clinic, who were not engaged in autopsies and had no contact with corpses, saw a much lower mortality rate.</p>
  </div>
        <div class="tile-action">
          <button class="btn btn-sm"><a href="https://en.wikipedia.org/wiki/Ignaz_Semmelweis#Theory_of_cadaverous_poisoning" target='_blank'>More</a></button>
  </div>
</div>
    </div>
  </div>
       <div class="timeline-item" id="timeline-example-3">
    <div class="timeline-left">
      <a class="timeline-icon" href="#timeline-example-3"></a>
    </div>
    <div class="timeline-content">
      <div class="tile">
        <div class="tile-content">
          <p class="tile-title h5">Conflict with established medical opinion</p>
          <p class="tile-subtitle text-gray">Semmelweis's observations conflicted with the established scientific and medical opinions of the time. <br><br> The theory of diseases was highly influenced by ideas of an imbalance of the basic "four humours" in the body, a theory known as dyscrasia, for which the main treatment was bloodlettings.<br><br> Medical texts at the time emphasized that each case of disease was unique, the result of a personal imbalance, and the main difficulty of the medical profession was to establish precisely each patient's unique situation, case by case.</p>
  </div>
        <div class="tile-action">
          <button class="btn btn-sm"><a href="https://en.wikipedia.org/wiki/Ignaz_Semmelweis#Conflict_with_established_medical_opinion" target='_blank'>More</a></button>
  </div>
</div>
    </div>
  </div>
       <div class="timeline-item" id="timeline-example-2">
    <div class="timeline-left">
      <a class="timeline-icon icon-lg" href="#timeline-example-2">
        <i class="icon icon-check"></i>
      </a>
    </div>
    <div class="timeline-content">
      <div class="tile">
        <div class="tile-content">
          <p class="tile-title h5">Breakdown and death</p>
          <p class="tile-subtitle text-gray">In 1865, János Balassa wrote a document referring Semmelweis to a mental institution. On July 30, Ferdinand Ritter von Hebra lured him, under the pretense of visiting one of Hebra's "new Institutes", to a Viennese insane asylum located in Lazarettgasse (Landes-Irren-Anstalt in der Lazarettgasse). <br><br> Semmelweis surmised what was happening and tried to leave. He was severely beaten by several guards, secured in a straitjacket, and confined to a darkened cell. Apart from the straitjacket, treatments at the mental institution included dousing with cold water and administering castor oil, a laxative. <br><br> He died after two weeks, on August 13, 1865, aged 47, from a gangrenous wound, possibly caused by the beating. The autopsy gave the cause of death as pyemia—blood poisoning.</p>
  </div>
        <div class="tile-action">
          <button class="btn btn-sm"><a href="https://en.wikipedia.org/wiki/Ignaz_Semmelweis#Breakdown_and_death" target='_blank'>More</a></button>
  </div>
</div>
    </div>
  </div>
       <br>
  <div class="divider text-center" data-content="Thanks for reading!">
  </div>
</div>
     
  </div>
  <div class="card-footer bg-dark">
    <button class="btn btn-lg"><a href="https://en.wikipedia.org/wiki/Ignaz_Semmelweis" target='_blank'>Read his full Wikipedia page here!</a></button>
    <br><br>
  </div>
     <p class="footer-credit">Coded by <a href="https://www.github.com/jpasholk" target='_blank'>jpasholk</a> for a <a href="https://www.freecodecamp.org" target='_blank'>freeCodeCamp</a> challenge <br> with <a href="https://picturepan2.github.io/spectre/index.html" target='_blank'>Spectre.css</a> & the <a href="https://rsms.me/inter/" target='_blank'>InterUI Font</a>. <em>2017</em></p>
</div>
  </div>
            
          
!
            
              body {
  margin-top: 10px;
  font-family: 'Inter UI', sans-serif;
}

.card-body {
  border-radius: 5px 5px 0px 0px;
  margin-top: -5px
}

.btn {
  background-color: #a8a8a8;
  border-radius: 5px;
  border-color: #D3D3D3;
}

.btn a {
  color: #434343;
}

.card-header, .card {
  background-color: #D3D3D3
}

@media screen and (min-width: 1024px) {
    body {
        margin: 10px 130px 0px 130px;
    }
}

.footer-credit {
  font-size: .75em;
  margin-top: 20px;
}

.card-header, .card {
  border-radius: 5px;
}

.card {
  border-style: hidden;
}


            
          
!
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