freeCodeCamp : Build a Tribute Page

freecodecamp-build-a-tribute-page.markdown

freeCodeCamp : Build a Tribute Page

Forked from Free Code Camp's Pen wMQrXV.

A Pen by Razafindrakoto on CodePen.

License.

index.html

<div class="container">
  <div class="jumbotron">
    <div class="row">
      <div class="col-xs-12">
        <h1 class="text-center">Andrianampoinimerina</h1>
        <h2 class="text-center"><em>The Kingdom of Imerina</em></h2>
        <div class="thumbnail">
          <div class="i-large"></div>
	        <div class="i-medium"></div>
	        <div class="i-small"></div>
          <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/65/Andrianampoinimerina.jpg/220px-Andrianampoinimerina.jpg">
          <div class="caption text-center">Idealized portrait painted around 1905 by Ramanankirahina.</div>
        </div>
        <div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">
          <h3>Here's a time line of Andrianampoinimerina's life:</h3>
          <ul>
            <li><strong>1745</strong> - Born in Ikaloy, Madagascar</li>
            <li><strong>1787</strong> - Kingdom of Imerina</li>
            <li><strong>1810</strong> - dies at the age of 64-65.</li>      
          </ul>
          <h3>If you have time, you should read more about this incredible human being on his <a href="https://en.wikipedia.org/wiki/Andrianampoinimerina" target="_blank">Wikipedia entry</a>.</h3>
        </div>
      </div>
    </div> 
  </div>
  <footer class="text-center">
    <hr>
    <p>Written and coded by <a href="https://www.freecodecamp.com/YannickSederaAina" target="_blank">Yannick Sedera Aina</a>.</p>
  </footer>  
</div>  

style.css

body {
  margin-top: 60px;
  background-image: url("http://s1.bwallpapers.com/wallpapers/2014/05/29/madagascar-flag_121331850.jpg");
}

.i-large,
.i-medium,
.i-small {
	position : absolute;
	top: 0; right: 0; bottom: 0; left: 0;
}

.i-large {
	background: url("https://www.creativejuiz.fr/blog/doc/snow-animation-css3/particules_large.png") repeat 0px 0px;
	-webkit-animation: dropFlowParticles 2s linear infinite;
	     -o-animation: dropFlowParticles 2s linear infinite;
	        animation: dropFlowParticles 2s linear infinite;
}
.i-medium {
	background: url("https://www.creativejuiz.fr/blog/doc/snow-animation-css3/particules_medium.png") repeat 0px 0px;
	-webkit-animation: dropFlowParticles 12s linear infinite;
	     -o-animation: dropFlowParticles 12s linear infinite;
	        animation: dropFlowParticles 12s linear infinite;
}
.i-small {
	background:url("https://www.creativejuiz.fr/blog/doc/snow-animation-css3/particules_small.png") repeat 0px 0px;
	-webkit-animation: dropFlowParticles 27s linear infinite;
	     -o-animation: dropFlowParticles 27s linear infinite;
	        animation: dropFlowParticles 27s linear infinite;
}
 
@-webkit-keyframes dropFlowParticles {
	from { background-position: 0 0; }
	to { background-position: 0 413px; }
}
@keyframes dropFlowParticles {
	from { background-position: 0 0; }
	to { background-position: 0 413px; }
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />