Tribute Page

In this example below you will see how to do a Tribute Page with some HTML / CSS and Javascript

Build a Tribute Page freeCodeCamp objective!

Thumbnail
This awesome code was written by THEK7, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright THEK7 ©

Technologies

  • HTML
  • CSS
  • JavaScript
    <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://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-199594.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/THEK7" target="_blank"><i class="fa fa-github" aria-hidden="true"></i></a> <a href="https://codepen.io/THEK7" target="_blank"><i class="fa fa-codepen" aria-hidden="true"></i></a> <a href="https://www.freecodecamp.org/thek7" 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>

/*Downloaded from https://www.codeseek.co/THEK7/tribute-page-RjaqXp */
    #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;
}


/*Downloaded from https://www.codeseek.co/THEK7/tribute-page-RjaqXp */
    

Comments