Code Camp Tribute

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

Tribute page for Free Code Camp.

Thumbnail
This awesome code was written by r3b311i0n, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright r3b311i0n ©
  • HTML
  • CSS
  • JavaScript
    <div class="container">
  <div class="jumbotron">
    <div class="row">
      <div class="col-sm-12">
        <h1 class="text-center">Queen Elizabeth I</h1>
        <h3 id="emphasis" class="text-center"><em>The Virgin Queen</em></h4>
  
    <div class="thumbnail"><img src="https://upload.wikimedia.org/wikipedia/commons/e/eb/Elizabeth_I_in_coronation_robes.jpg" alt="person"/></div>    
    <div class="caption text-center">Elizabeth I in her coronation robes, patterned with Tudor roses and trimmed with ermine.
</div>
      
      <h3 id="lTitle">Here's a timeline of Her Majesty's life:</h3>
        <!--         curtesy of http://www.datesandevents.org/ -->
        <ul class="tline">
          <li>
            <strong>1533</strong> -<br>7 September: Elizabeth is born at Greenwich, England.
          </li>
          <li>
            <strong>1536</strong> -<br>May 15: Her mother, Anne Boleyn tried for treason, adultery and incest.<br> May 19: Anne Boleyn executed on Tower Hill, London.<br> May 30: King Henry VIII and Jane Seymour are married.
          </li>
          <li>
            <strong>1537</strong> -<br>12 October: Jane Seymour dies following the premature birth of her son, the future King Edward VI.<br> Princess Elizabeth is declared a bastard.<br> Elizabeth leaves court for Hatfield House, Hertfordshire where
            she spends her childhood.
          </li>
          <li>
            <strong>1540</strong> -<br>King Henry VIII marries Anne of Cleves but the marriage is quickly annulled.<br> July 28: 49 year old King Henry marries 19 year old Catherine Howard ( who was a cousin of Anne Boleyn).
          </li>
          <li>
            <strong>1542</strong> -<br> February 13: Catherine Howard is executed for adultery, greatly distressing the nine-year-old Elizabeth.<br> December 8 - Mary Stuart is born at Linlithgow Palace the daughter of the son of James V of Scotland and
            Mary of Guise. Her grandmother was Margaret Tudor (sister of King Henry VIII).
          </li>
          <li>
            <strong>1543</strong> -<br>July 12 - King Henry marries Katherine Parr his sixth and last wife.
          </li>
          <li>
            <strong>1547</strong> -<br>January 28: The death of King Henry VIII the father of Queen Elizabeth I.<br> Edward VI (Henry's son by Jane Seymour) becomes King of England<br> Princess Elizabeth lives with her stepmother Katherine Parr and her
            new husband Thomas Seymour.
          </li>
          <li>
            <strong>1548</strong> -<br>Elizabeth leaves Katherine Parr's household under questionable circumstances because of rumors of an affair with Thomas Seymour.<br> Katherine Parr dies during childbirth.
          </li>
          <li>
            <strong>1551</strong> -<br> Princess Elizabeth returns to the court of her half-brother, the young king.
          </li>
          <li>
            <strong>1553</strong> -<br>July 6: The young King Edward VI dies of tuberculosis leaving the throne to 'the Lady Jane and her heirs male' breaking English Law (Act of Succession) and going against the wishes of his dead father.<br> July 10:
            Lady Jane Grey is proclaimed Queen of England.<br> July 19: Queen Jane deposed as Queen.<br> July 6: - Mary, the daughter of Henry VIII and Catherine of Aragon, and half-sister of Elizabeth is proclaimed Queen Mary I of England.
          </li>
          <li>
            <strong>1554</strong> -<br>February 12: Lady Jane Grey and her husband Guildford Dudley executed at the Tower of London.<br> Queen Mary marries Philip II of Spain.<br> Protestant rebellion, led by Sir Thomas Wyatt the Younger<br> Mar 18: Mary
            has Elizabeth imprisoned in the Tower of London for eight weeks on false charges.<br> May 19: Princess Elizabeth released from the Tower of London and moves to Woodstock.
          </li>
          <li>
            <strong>1555</strong> -<br>England returns to Roman Catholicism and Protestants are persecuted and 300 are burnt at the stake leads to Queen Mary I being called Bloody Mary.<br> Philip II returns to Spain after the phantom pregnancy of Mary
            his wife.
          </li>
          <li>
            <strong>1558</strong> -<br>November 17: Death of Queen Mary I.<br> November 17: Elizabeth succeeds her Catholic sister Mary I as Queen of England and re-establishes the Protestant Anglican Church.
          </li>
          <li>
            <strong>1559</strong> -<br>Jan 13: She is crowned Queen of England.
          </li>
          <li>
            <strong>1560</strong> -<br>Jul. 6: Treaty of Edinburgh between England, France, and Scotland.<br> Sep 8: Amy Robsart, the wife of Robert Dudley (the great favorite of the Queen), is found dead at the foot of the stairs in her home, Cumnor
            Place, Oxford. Dudley is suspected of murder.
          </li>
          <li>
            <strong>1561</strong> -<br>August 19: Return of Mary Stuart (Mary Queen of Scots) to Scotland.<br> September 20: Treaty signed at Hampton Court, Elizabeth pledges support of the French Huguenots.
          </li>
          <li>
            <strong>1562</strong> -<br>Queen Elizabeth almost dies of Smallpox.
          </li>
          <li>
            <strong>1563</strong> -<br>Establishment of the Anglican Church.<br> Outbreak of the Black Death (Bubonic Plague).
          </li>
          <li>
            <strong>1564</strong> -<br>The Queen takes share of profit from John Hawkins slave trade.
          </li>
          <li>
            <strong>1565</strong> -<br>Mary Queen of Scots marries her 19-year-old cousin Henry Stewart, Lord Darnley; aged 22.
          </li>
          <li>
            <strong>1566</strong> -<br>March 9: The Murder of David Rizzio, secretary of Mary Queen of Scots.<br> June 19: Mary Queen of Scots only child is born (James who would later become king of Scotland and England).
          </li>
          <li>
            <strong>1567</strong> -<br>February 10: Murder of Lord Darnley, husband of Mary Queen of Scots.<br> Mary Queen of Scots marries the Earl of Bothwell causing a rebellion in Scotland.<br> July 24: Mary of Scots abdicates and her baby son, James,
            becomes King James VI, King of Scotland.
          </li>
          <li>
            <strong>1568</strong> -<br>The Catholic Mary Queen of Scots flees to England and is imprisoned by Elizabeth I at Fotheringay Castle as a Catholic threat to her throne.
          </li>
          <li>
            <strong>1569</strong> -<br>The Nevilles of Durham and Percys of Northumberland plot to overthrow Elizabeth and reinstate Roman Catholicism in “The Rising of the North” but she exonerates Mary Queen of Scots from the charges made against her.<br>            Pope Pius V backs the Catholic rebels increasing distrust of Catholics.
          </li>
          <li>
            <strong>1570</strong> -<br>The excommunication of Queen Elizabeth I by the Catholic Church.
          </li>
          <li>
            <strong>1571</strong> -<br> January 2: Marriage negotiations between Elizabeth and Henry, Duke of Anjou, which eventually fail.<br> February 25: Sir William Cecil is created Lord Burghley.
          </li>
          <li>
            <strong>1572</strong> -<br>August 24: St Bartholomew's Day massacre where French Protestants were massacred by French Catholics in Paris cause panic in England with fears of a Catholic invasion.
          </li>
          <li>
            <strong>1573</strong> -<br>Sir Francis Drake captures a shipment of silver destined for Spain.<br> December 21: Sir Francis Walsingham appointed Secretary of State and becomes chief spy master in England.
          </li>
          <li>
            <strong>1575</strong> -<br> November 14: The Queen of England declines to accept the sovereignty of the Netherlands.
          </li>
          <li>
            <strong>1577</strong> -<br>Alliance between England and Netherlands and Francis Drake sets sails for his round the world voyage.
          </li>
          <li>
            <strong>1578</strong> -<br>September 21: Robert Dudley secretly marries Lady Lettice Knollys and is banished from court.
          </li>
          <li>
            <strong>1579</strong> -<br>June 17: Sir Francis Drake claims England’s sovereignty over New Albion (California).<br> October 7: The Privy Council fail to support Queen Elizabeth in the marriage treaty with the Duke of Anjou.
          </li>
          <li>
            <strong>1580</strong> -<br>September 26: Francis Drake returns to England in triumph.
          </li>
          <li>
            <strong>1581</strong> -<br>March 18: English Parliament passes strict legislation against Roman Catholics with heavy fines for hearing Mass.<br> May 4: Francis Drake is knighted.<br> November 7: A marriage treaty between Queen Elizabeth and
            the Duke of Anjou is signed.
          </li>
          <li>
            <strong>1584</strong> -<br>William of Orange is murdered and England sends aid to the Netherlands.<br> March 25: Sir Walter Raleigh receives the patent to explore and settle in North America.<br> June 4: Virginia colony of Roanoke Island established
            by Sir Walter Raleigh.<br> June 15: Francis, Duke of Anjou dies.
          </li>
          <li>
            <strong>1585</strong> -<br>August 14: Queen Elizabeth declines offers by the Dutch commission for sovereignty of the Low Countries but issues a declaration taking the Netherlands under her protection.<br> December 8: Lord Robert Dudley leads
            the English army to fight the Spanish forces who are occupying the Netherlands.
          </li>
          <li>
            <strong>1586</strong> -<br>The Babbington Plot, a conspiracy against Elizabeth I involving Mary Queen of Scots. The leader of the plot was Anthony Babbington.<br> July 1: Treaty of Berwick - Queen Elizabeth and King James VI of Scotland form
            a league of amity.<br> October 25: Mary Queen of Scots is convicted of involvement in the Babbington plot.
          </li>
          <li>
            <strong>1587</strong> -<br>February 8: Execution of Mary Queen of Scots.<br> War with Spain which continues until 1603.<br> April 19: Sir Francis Drake destroys the Spanish fleet at Cadiz.<br> June 18: Queen Elizabeth appoints Robert Devereux,
            Earl of Essex, as her Master of the Horse.
          </li>
          <li>
            <strong>1588</strong> -<br> August 8: The Spanish Armada of 132 ships is defeated by the English fleet of 34 ships and 163 armed merchant vessels led by Lord Howard of Effingham, Sir Francis Drake, and Sir John Hawkins.<br> September 4: Lord
            Robert Dudley dies.
          </li>
          <li>
            <strong>1593</strong> -<br>London Theatres, including the Globe, closed due to the Bubonic Plague (The Black Death).<br> Penalties are proposed for people who refuse to attend Church of England services and to make it a crime to attend Catholic
            services.
          </li>
          <li>
            <strong>1596</strong> -<br> English fleet under the Earl of Essex and Lord Howard of Effingham capture Spanish Cadiz.
          </li>
          <li>
            <strong>1597</strong> -<br>Irish rebellion under Hugh O'Neill, Earl of Tyrone (finally put down 1601).<br> King Philip II of Spain sends a second armada against England but a storm scatters his ships.
          </li>
          <li>
            <strong>1599</strong> -<br>The Queen's favourite Robert, Earl of Essex was placed in charge of a large English army to suppress Irish rebels but Essex signs an unauthorized truce with the Earl of Tyrone. He is then deprived of his titles and
            arrested.
          </li>
          <li>
            <strong>1600</strong> -<br>Queen Elizabeth I grants charter to East India Company.
          </li>
          <li>
            <strong>1601</strong> -<br>Elizabethan Poor Law charges the parishes with providing for the needy.<br> Robert, Earl of Essex attempts rebellion which fails.<br> February 25: Robert Devereux (1566-1601), Earl of Essex is executed on Tower Green,
            the Queen never gets over his treachery and death.
          </li>
          <li>
            <strong>1603</strong> -<br>Queen Elizabeth dies on 24 March 1603 of blood poisoning. She is succeeded by James I of England, James VI of Scotland, (great-grandson of Henry VIII).
          </li>

        </ul>

        <blockquote class="text-center">
          <p class="quote">
            "A clear and innocent conscience fears nothing."
          </p>
          <footer>
            <cite class="quote">
             Queen Elizabeth I
           </cite>
          </footer>
        </blockquote>

        <h4>
         For further details, visit <a href="https://en.wikipedia.org/wiki/Elizabeth_I_of_England" target="_blank">Wikipedia</a>.
       </h4>

        <footer class="text-center">
          <hr/>
          <p><small>
            Written and coded by <a href="https://www.freecodecamp.com/r3b311i0n" target="_blank">Amal Karunarathna</a>.
            </small></p>
        </footer>
      </div>
    </div>
  </div>
</div>

/*Downloaded from https://www.codeseek.co/r3b311i0n/code-camp-tribute-ORPjJJ */
    .tline {
  opacity: 0;
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  -MS-animation-delay: 1s;
  font-size: 1.2em;
  padding-top: 1%;
}

#lTitle {
  padding-top: 3%;
  opacity: 0;
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  -MS-animation-delay: 1s;
}

.quote {
  opacity: 0;
  padding-top: 10px;
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  -MS-animation-delay: 1s;
}

li {
  margin: 1em;
}


/*Downloaded from https://www.codeseek.co/r3b311i0n/code-camp-tribute-ORPjJJ */
    var main = function() {
  $("img").addClass("animated fadeIn");
  $("h1").addClass("animated bounceInDown");
  $("#emphasis").addClass("animated fadeIn");

  $("img").one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", timeline);
};

var timeline = function() {
  $(document).scroll(function() {
    $("#lTitle").addClass("animated bounceInRight");
    $("#lTitle").css("opacity", "100");
    $(".tline").addClass("animated bounceInLeft");
    $(".tline").css("opacity", "100");
    $(".quote").addClass("animated bounceInUp");
    $(".quote").css("opacity", "100");
  });
};

$(document).ready(main);

Comments