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


Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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


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.


<div class="container-fluid">

  <div id="headlines">
    <h1>Helene Fischer</h1>

    <h2>A highly talented woman who made German folk music attractive again</h2>

  <div class="row vertical-align">
    <div class="col-md-8">
      <p class="text">Helene Fischer is a 33 years old German folk singer born in Siberia and later grown up in Rhineland-Palatine, Germany.</p>

        <p class="text">After her debut in 2005 she became more and more famous in Germany and other - foremost German speaking - regions (Austria, Sitzerland) due to her talent, her sound music education at Stage & Musical School as well as her charisma.</p>

        <p class="text">While folk music became less and less important over the last decades - especially within the young music consumers group - she was able to revitalize that genre again and today she fills the largets stadiums in Germany with her concerts.</p>
    <div class="col-md-4">
        <img class="image-responsive" src="" alt="Portrait of Helene Fischer">
        <figcaption>Source: <a target="blank" href=""></a></figcaption>

  <hr />

  <h3 class="text keyfacts">Key facts about Helene Fischer and her career:</h3>

  <ul class="text keyfacts">
    <li>Born 5th of August 1984 in Krasnoyarsk, Russia</li>
    <li>In 1988 she moved to Germany with her parents</li>
    <li>From 2000 until 2003 study at the Stage & Musical School in Frankfurt</li>
    <li>14th May 2005 tv debut on stage of the show "Hochzeitsfest der Volksmusik"</li>
    <li>In 2007 she performed her first solo concert tour</li>
    <li>In 2011 she initially reached TOP1 in the German charts with her studio album "Für einen Tag"</li>
    <li>In November 2013 she released her single "Atemlos durch die Nacht" which later became hit of the year 2015</li>

  <div id="awards">
    <p class="text textsize">During her career she won several awards, which are listed below:</p>

    <div class="text white-box">
      <ul class="small-text">
        <li><b>2013</b> for <i>"Musik national"</i></li>
        <li><b>2014</b> for <i>"Entertainment"</i></li>

    <div class="text white-box">
      <ul class="small-text">
        <li><b>2009</b> for <i>"Deutschsprachiger Schlager"</i> </li>
        <li><b>2009</b> for <i>"DVD Produktion des Jahres"</i></li>
        <li><b>2010</b> for <i>"DVD Produktion national"</i></li>
        <li><b>2012</b> for <i>"Deutschsprachiger Schlager"</i></li>
        <li><b>2013</b> for <i>"DVD Produktion national"</i></li>
        <li><b>2013</b> for <i>"Deutschsprachiger Schlager"</i></li>
        <li><b>2014</b> for <i>"Album des Jahres"</i></li>
        <li><b>2014</b> for <i>"Deutschsprachiger Schlager"</i></li>
        <li><b>2015</b> for <i>"Schlager"</i></li>
        <li><b>2015</b> for <i>"Album des Jahres"</i></li>
        <li><b>2015</b> for <i>"Hit des Jahres"</i></li>
        <li><b>2015</b> for <i>"Musik-DVD/Blu-Ray national"</i></li>
        <li><b>2016</b> for <i>"Musik-DVD/Blu-Ray national"</i></li>
        <li><b>2016</b> for <i>"Album des Jahres"</i></li>
        <li><b>2016</b> for <i>"Live-Act National"</i></li>
        <li><b>2016</b> for <i>"Crossover"</i></li>

    <div class="text white-box">
      <h4>Goldene Henne</h4>
      <ul class="small-text">
        <li><b>2007</b> for <i>"Aufsteigerin des Jahres"</i></li>
        <li><b>2008</b> for <i>"Musik"</i></li>
        <li><b>2010</b> for <i>"Leserpreis Musik"</i></li>
        <li><b>2012</b> for <i>"Publikumspreis Musik"</i></li>
        <li><b>2014</b> for <i>"Musik"</i></li>
        <li><b>2014</b> <i>"Superhenne" (Special 20th Anniversary Award)</i></li>
        <li><b>2016</b> for <i>"Musik"</i></li>

    <div class="text white-box">
      <h4>Goldene Kamera</h4>
      <ul class="small-text">
        <li><b>2012</b> for <i>"Beste Musik national"</i></li>
        <li><b>2016</b> for <i>"Beliebtester deutscher Musik-Act"</i></li>

    <div class="text white-box">
      <h4>Krone der Volksmusik</h4>
      <ul class="small-text">
        <li><b>2008</b> for <i>"Erfolg des Jahres 2007"</i></li>
        <li><b>2009</b> for <i>"Erfolg des Jahres 2008"</i></li>
        <li><b>2010</b> for <i>"Erfolgreichste Sängerin 2009"</i></li>
        <li><b>2012</b> for <i>"Erfolgreichste Sängerin 2011"</i></li>

  <p class="text textsize centered">There are much more awards she won over the last years, that you can find on the <a target="blank" href="">German Wikipedia page</a>.</p>

  <p class="text textsize centered">If you are interested in more details and recent updates, please also visit her <a target="blank" href="">Fanpage</a> (German language only).</p>


<p class="footer">Written and coded by Mirko Hannig</p>


                h1{color: #9C27B0; font-family: "Times New Roman", Times, serif; font-size: 50px; font-weight: bold; text-align: center; line-height: 1em;}

h2{font-family: "Times New Roman", Times, serif; font-size: 30px; font-weight: bold; text-align: center;}

#headlines{background-color: #F3E5F5; padding: 3px; margin-bottom: 30px;}

hr{border-color: #BDBDBD;}

img{width: 75%; display: block;
    margin: auto;} 
figcaption{font-style: italic; font-size: 11px; text-align: center;}

@media only screen and (min-width: 768px) {
  .vertical-align{display: flex; align-items: center;}

h3{font-size: 20px; font-weight: bold; text-decoration: underline;}

.text{font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size: 15px;}

.keyfacts{width: 55%; margin-left: 22.5%; font-size: 16px;}

#awards{background-color: #EEEEEE; margin-top: 20px; margin-bottom: 20px; padding-left: 22.5%; padding-top: 10px; padding-bottom: 10px;}

.textsize{font-size: 16px;}

.white-box{background-color: #FFFFFF; margin-right: 29%; padding: 5px; margin-bottom: 20px;}

h4{font-size: 15px; font-weight: bold; margin-top: 7px; margin-bottom: 7px;}

.small-text{font-size: 13px;}

.centered{text-align: center;}

a{text-decoration: underline;}
a:visited{color: #9C27B0;}

.footer{font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; font-style: italic; font-size: 12px; text-align: center; background-color: #F3E5F5; padding: 10px; margin-top: 30px; display: flex; align-items: center;}