Keep Calm and Carry On Poster

Keep Calm and Carry On

Today we will create a website based upon the “Keep Calm and Carry On” motivational poster.

  1. Log into codeanywhere.com
  2. Create a directory (folder) named “poster” in your root directory. Your root directory will be web
  3. Using Codeanywhere.com, create a new file in your “poster” folder; calm.html
  4. Open the calm.html file and type the following code.

    Type this code into your calm.html file.
  5. Preview your page in the browser.
  6. Create a footer below the closing div.
    <footer>
    
    <small> &copy; Copyright 2018 by FirstName LastName</small>
    
    </footer>
  7. Create a new file in the poster directory named “calm.css”.
  8. Open the calm.css file and type in the following code.

    calm.css
    Type this text into calm.css
  9. Download the crown image.
    Click here to download
  10. Extract the folder and upload the image to the poster folder.
  11. Preview your site in the browser.
  12. Align the footer to be centered using the “text-align” css attribute.
  13. Make the body of the page black.
  14. Change the color of the footer text to white.
  15. Create a nav bar above the div.
    <nav>
    <a href="index.html">Home</a> | 
    <a href="calm.html">Calm</a> | 
    <a href="courage.html">Courage</a> | 
    <a href="freedom.html">Freedom</a>
    </nav>
  16. Create files index.html, courage.html, and freedom.html
  17. Recreate the courage poster and the freedom poster.