html 致敬

Posted 2021-05-11

Tribute Page
------------
A tribute page that includes the "user story" criteria of a picture, text and a learn more link of the tribute "Ned Stark". For a bonus I included a "snow" animation over the tribute portrait.

A [Pen](https://codepen.io/MatthewCranford/pen/dZxOOr) by [Matt](https://codepen.io/MatthewCranford) on [CodePen](https://codepen.io).

[License](https://codepen.io/MatthewCranford/pen/dZxOOr/license).

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />

/* Base */

body {
  font-family: "Roboto", sans-serif;
}

h1 {
  color: SlateGrey
}

figcaption {
  background-color: white;
}

/* IDs */

#snow-container {
  position: relative;
}

/* Classes */

/* Snow CSS */

#snow:hover {
  
  animation-play-state: running;
}

#snow {
	background: none;
	font-family: Androgyne;
	background-image: url('http://www.wearewebstars.dk/codepen/img/s1.png'), url('http://www.wearewebstars.dk/codepen/img//s2.png'), url('http://www.wearewebstars.dk/codepen/img//s3.png');
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 1;
	-webkit-animation: snow 10s linear infinite;
	-moz-animation: snow 10s linear infinite;
	-ms-animation: snow 10s linear infinite;
	animation: snow 10s linear infinite;  
}
@keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-moz-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 400px 1000px, 200px 400px, 100px 300px;}
}
@-webkit-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-ms-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}	

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

<div>
  
  <!-- Card Start -->
  <div id="card-div" class="container card bg-light mt-5">
    <h1 class="mt-4 text-center">Ned Stark</h1>
    <h4 class="text-center">"Winter is Coming"</h4>
    
    <!-- Img/Caption Start -->
    <div class="container">
      <div class="row">
        <figure class="mx-auto">
          <div id="snow-container">
            <img src="http://awoiaf.westeros.org/images/1/1c/Sean_Bean_as_Eddard_Stark.png" alt="Ned Stark holding the Stark family sword "\Ice\".">   
            <div id="snow"></div>
          </div>
          <figcaption class="figure-caption text-center">"The man who passes the sentence should swing the sword." -Eddard Stark</figcaption
        </figure>
      </div>      
    </div> <!-- Img/Caption End -->

    <!-- Tribute Bio Start -->
    <div class="container mt-3 mb-4">
      <div class="row">
        <div class="col-10 mx-auto"
          <p>    
          <a href="http://gameofthrones.wikia.com/wiki/Eddard_Stark" target="_blank"> Eddard Stark</a>, also known as Ned Stark, was the head of House Stark, the Lord of Winterfell, Lord Paramount and Warden of the North, and later Hand of the King to King Robert I Baratheon. He was the older brother of Benjen, Lyanna and the younger brother of Brandon Stark. He is the father of Robb, Sansa, Arya, Bran and Rickon by his wife, Catelyn Tully, and uncle of Jon Snow, who he raised as his bastard son. He was a dedicated husband and father, a loyal friend and an honorable lord.
        </p>   
        <p> 
          Eddard's execution and revealing the illegitimacy of Cersei's children was the spark of the War of the Five Kings between Joffrey Baratheon, Robb, Renly Baratheon, Stannis Baratheon and Balon Greyjoy, being posthumously responsible for the involvement of four of the kings in this war.
        </p>
        </div>
      </div>
    </div> <!-- Tribute Bio End -->
        
  </div> <!-- Card End --> 
      
<!-- Footer Start -->
<footer class="container-fluid blue text-center mt-3">
    <p>
      Written and coded by <a href="https://www.linkedin.com/in/matthew-cranford-0809a6140/" target="_blank">Matthew Cranford</a>. 
    </p>   
</footer> <!-- Footer End -->
           
</div>