Friday, March 18, 2016

HTML5 and CSS3 - Art History Project - Day 3 - Part 2

Now that we have a gallery and you are proficient at Pixlr and uploading images to Cloud 9 we will now add an image to our <header></header> which will be to the left of our <nav></nav>.


  1. Go to http://www.flamingtext.com/ we will now create a header logo. You will use the name of your artist. 
  2. First find a font that you like. I am going to scroll to the bottom of the page and click on page 5 and select Style. 
  3. Once you select a font enter in the name of your artist, and change the font size to 60
  1. Click on the Logo tab and change the colors of your font and the inner and outer stroke size if applicable. 
  1. Click on the background tab and set this to transparent
  1. Finally click on the Next button and then click download.  


  1. Upload your image into Pixlr. You may have to adjust the height of your logo. Go to Image > Image size and set the height to 60px. 
  2. Go to File > Save and save as logo.png
  3. Now we need to upload this to Cloud 9 into the images folder. Click on File > Upload Local Images ...
  4. The last thing we need to do is edit our html on index.html, gallery.html, and works-cited.html. We will add our logo between the <header> and <nav> tags.

<body>
        <header>
          <div id="logo"><img src="/images/logo.png" ></div>
            <nav>
  1. Now press Ctrl + S and then refresh your web page. You should now have your logo in the header just to the left of the navigation. 
We are almost there! On the index page you will edit the <article></article> tags with five facts about your artist, and then add your sources to the works-cited.html page and we will be done! 

Happy Coding!!!!