freecodecamp tribute page

freecodecamp-tribute-page.markdown

freecodecamp tribute page

A Pen by Dainius on CodePen.

License.

index.html

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

<main id="main">
  <h2 id="title">Short History of Lithuania</h2>
  <h3>1000 years of Lithuania</h3>
  
 <div id="img-div">
   <figure><img src="https://upload.wikimedia.org/wikipedia/commons/7/79/Lithuanian_state_in_13-15th_centuries.png" alt="Grand Duchy of Lithuania 13th-15th centuries" id="image">
     <figcaption id="img-caption">Grand Duchy of Lithuania in the 13–15th centuries <a href="https://simple.wikipedia.org/wiki/Grand_Duchy_of_Lithuania">from WikiMedia Commons</a></figcaption>
   </figure>
  </div>
   <div id="tribute-info">
     <ul>
       <li><strong>1009</strong> The first known record of the name of Lithuania (Lithuanian: Lietuva) is in a 9 March 1009 story of Saint Bruno recorded in the Quedlinburg Chronicle</li>
       <li><strong>12th century</strong> formation of early statehood, from which the Grand Duchy of Lithuania developed</li>
       <li><strong>1236</strong> Grand Duchy of Lithuania founded</li>
       <li><strong>1253</strong> Coronation of Mindaugas, first king of Lithuania</li>
       <li><strong>1263 to 1269</strong> Rise of the Gediminigs</li>
       <li><strong>1387</strong> Lithuania Christianized</li>
        <li><strong>1392-1430</strong> Reign of Garnd Duke Vytautas, teritorial expansions</li>
       <li><strong>1569</strong> Lublin Union - established Lithuanian-Polish Commonwealth (Rzceczpospolita)</li>
       <li><strong>1772</strong> First partiton of Commonwealth</li>
       <li><strong>1790</strong> Second partiton of Commonwealth</li>
       <li><strong>3 May 1791</strong> Constitution (first in Europe, 2nd in the World)</li>
       <li><strong>1795</strong> Third partiton of Commonwealth</li>
       <li><strong>1830-31</strong> November Uprising</li>
       <li><strong>1863</strong> January Uprising</li>
       <li><strong>1864</strong> Lithuanian language and Latin alphabet banned</li>
       <li><strong>1904</strong> Language ban ended</li>
       <li><strong>16 February 1918</strong> Declaration od Independence</li>
       <li><strong>14 June 1940</strong> First Soviet occupation</li>
       <li><strong>22 June 1941</strong> Nazi Germany occupation</li>
       <li><strong>13 July 1944</strong> Second Soviet occupation</li>
       <li><strong>11 March 1990</strong> Independence retored</li>
       <li><strong>2004</strong> Lithuania becomes member of EU and NATO</li>
     </ul>
   </div>
   <div id="tribute-infos">
    <a href="https://en.wikipedia.org/wiki/History_of_Lithuania" id="tribute-link" target="_blank">History of Lithuania<a/><br />
      <a href="https://en.wikipedia.org/wiki/Grand_Duchy_of_Lithuania" id="tribute-link" target="_blank">Grand Duchy of Lithuania<a/><br />
   </div>
  </div>
   
</main>

script.babel

// !! IMPORTANT README:

// You may add additional external JS and CSS as needed to complete the project, however the current external resource MUST remain in place for the tests to work. BABEL must also be left in place. 

/***********
INSTRUCTIONS:
  - Select the project you would 
    like to complete from the dropdown 
    menu.
  - Click the "RUN TESTS" button to
    run the tests against the blank 
    pen.
  - Click the "TESTS" button to see 
    the individual test cases. 
    (should all be failing at first)
  - Start coding! As you fulfill each
    test case, you will see them go   
    from red to green.
  - As you start to build out your 
    project, when tests are failing, 
    you should get helpful errors 
    along the way!
    ************/

// PLEASE NOTE: Adding global style rules using the * selector, or by adding rules to body {..} or html {..}, or to all elements within body or html, i.e. h1 {..}, has the potential to pollute the test suite's CSS. Try adding: * { color: red }, for a quick example!

// Once you have read the above messages, you can delete all comments. 

style.css

#main {
  max-width: 960px;
}

h2, h3, #img-caption {
  text-align: center;
}

#img-div {
  max-width: 90%;
}

#tribute-info {
  max-width: 90%;
}
#image {
  width: 80%;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

Responsive Web Design Projects - Tribute page