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.

            
              <html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>Tribute Page</title>
  </head>
  <body>
    <div id="container">
      <div id="content">
        <h1>RAGNAR LOTHBROK</h1>
        <h4>The glorious Viking</h4>
        <figure>
        <img src=https://i.ytimg.com/vi/hHK3fW8_je8/maxresdefault.jpg>
          <figcaption>Ragnar Lothbrok, legendary Viking, siting on the stone.</figcaption>
        </figure>
      <div id="content2">
      <h4>Here's something about Ragnar Lothbrok:</h4>
        <ul>
          <li><strong>Name</strong> -  The early sources do not use the names Ragnar and Lothbrok in combination to refer to a single person. The first recorded instance of the names being so used is Ari Þorgilsson’s reference to Ívarr Ragnarssonr loðbrókar in his Íslendingabók, written between 1120 and 1133. As a common name used in popular culture Ragnar Lodbrok Sigurdson is used for this profile but historically there is a strong argument that Ragnar and Lodbrok were husband and wife. Indeed, if the origins of the legendary Ragnar lie with the Danish viking Reginheri there is no particular reason to accept as accurate the patronym Sigurdson.</li><br>
          <li><strong>Birth Date</strong> - With a death between 845 and 865 and at least two marriages and seven children to account for (three and nine respectively, according to Saxo) a birth date before 795 seems to be the strongest statement that can be made with a lower limit of 765, making him 80 years old as an absolute maximum if he died in 845</li><br>
          <li><strong>Birth Location</strong> - Sweden or Denmark are the two logical locations for his birth, although technically neither nation existed in the 700s.

The legendary king Ragnar of the sagas and other writings seems most closely associated with Denmark. Reginheri as a Danish viking could logically be assumed to have been born in Denmark (though by no means is this proof).</li><br>
          <li><strong>Sons</strong> - Inwære, Healfdene, Hubba, Berno and Sigifridus (Ivar, Halfdan, Ubba, Bjorn and Sigfrid) are historical vikings who can be historically argued to be sons of Reginheri and Loðbróka

The saga Ragnar’s Tale names Hvítserkr and Rögnvaldr as his sons but none of the contemporary sources mention them as such. It has been theorized that historically Rögnvaldr most likely was actually a grandson of the historical Ivar. Saxo names Ragnald, Hwitserk, and Erik as Ragnar’s sons by a woman named Swanloga. Whether Ragnald here represents the Rögnvaldr in the saga is unclear as the mothers seem to be different women, Saxo’s Erik may be the saga’s Eric / Eirik and certainly Hwitserk would seem to equate with Hvítserkr, suggesting that Swanloga might be another name for Aslaug.

The saga Ragnar’s Tale also names two other sons to Ragnar with his first wife Thora, Eric and Agnar. Saxo names these sons of Thora as Radbard and Dunwat. Contemporary sources do not mention these men, which could purely relate to the fact that their exploits, as described in the sagas, are restricted to Scandinavia.

Beyond these nine sons later sources associate various vikings with Ragnar, either by describing them as his sons or linking them as brothers to one or another of the named sons. Profiles for these sons have been merged into one : “Unconfirmed son(s) of Ragnar Lothbrok” with further details in the About section of that profile</li><br>
          <li><strong>Death Date</strong> - While later texts describe the Great Heathen Army as a revenge attack, which would imply it taking place soon after Ragnar’s death, the contemporary chronicles do not make this connection. As a latest date this would set Ragnar’s death to before 865.

Ragnar is often linked historically to Reginherus / Reginheri, a jarl at the court of Danish king Horik I who raided Paris in 845 and reportedly died not long after. As the strongest candidate for a historical Ragnar, this has been used as the lower limit for an estimated date range.</li><br>
          <li><strong>Death Location</strong> - The sagas and early English sources place Ragnar’s death in Northumbria, specifically in a snakepit. Later English sources relocate the murder to East Anglia with the murderer variously being King Edmund or a man named Berne. Reginheri death location is not specifically detailed but contemporary Frankish reports indicate that he died shortly after returning to the court of King Horik, suggesting a death location in Denmark.</li><br><br><br><br>
          
          <blockquote>Don't waste your time looking back, you're not going that way
          </blockquote> <cite> Ragnar Lothbrok</cite><br><br>
          
          <p>If you have time, you should read more about this incredible human being on his <a href="http://vikings.wikia.com/wiki/Ragnar" target="_blank" id="wiki">Wikipedia entry</a></p><br><br><br>
          
          </div>
      </div>
        
      <div id="footer">
        Written and coded by Kristijan Kelić<br>
        Find me on: <a href="https://github.com/KristijanKelic" target="_blank"><i class="fa fa-github" aria-hidden="true"></i></a> <a href="https://codepen.io/KristijanKelic" target="_blank"><i class="fa fa-codepen" aria-hidden="true"></i></a> <a href="https://www.freecodecamp.org/kristijankelic" target="_blank"><i class="fa fa-free-code-camp" aria-hidden="true"></i></a><br>
        Contact: <a href="mailto:kkelic7@gmail.com"><i class="fa fa-envelope-o" aria-hidden="true"></i></a>
        
      </div>   
    </div> 
</html>
            
          
!
            
              #container{
  padding:2%;
  padding-bottom: 0px;
  text-align: center;
}

#content{
  padding-top: 20px;
  background-color: #ddd;
  margin-bottom: 25px;
  width:100%;
}

#content2{
  width:70%;
  text-align: center;
  margin:auto;
}

h1{
  font-size: 200%;
}

h4{
  font-size: 125%;
}

img{
  width:100%;
}

figure{
  background-color: white;
  margin-bottom: 12px;
}

li{
  text-align:left;
}

blockquote{
  font-size: 125%;
  font-style: italic;
  font-weight: bold;
}

figcaption{
  padding: 15px;
}

p{
  font-size: 140%;
  text-align: left;
}

a{
  text-decoration: none;
}

#wiki{
  color:blue;
}
#wiki:hover{
  color:green;
}

a{
  color:black;
}

a:hover{
  color:green;
}

#footer{
  border-top: 1px solid #ddd;
  padding: 15px;
  text-align: center;
  background-color: gray;
}
            
          
!
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.

Console