Katniss from the Hunger Games! | Skillshare Projects

Kristan Mullane




Katniss from the Hunger Games!


I coded two additional style sheets. Fun!

(original): http://kaymullane.github.io/cartoon-hero

(background tile, alternate fonts, header shadowing, and that text-hover thing): http://kaymullane.github.io/cartoon-hero/hero-alt-1.html 

(different images and color scheme, with one big background image in the header): http://kaymullane.github.io/cartoon-hero/hero-alt-2.html

With the alt-2 site, I had to change the 2 main images in the index.html file for them to appear in chrome. Rich (or anyone), is that right way to do it, or is there a way to store those images in the css file?




Hi, Skillsharers! 

Thanks so much, Rich, for this class... helpful, fast-paced, fun! Loved it!

Here's my first completed page. I'll try to add some alternate pages in a bit.


I pulled in a google font that looked similar to the font on the Hunger Games book covers and movie posters, and played around with some effects like text-shadow and letter-spacing. 

Can't figure out how to make the profile image have rounded corners within the border. The border has nice 10px border-radius, but that doesn't seem to apply to the picture inside it. Does anyone know how to fix this?




Please sign in or sign up to comment.