In this screencast we largely deal with the orange "Photostar" the dominates the footer.

We make the star in a separate file in Photoshop, so we can make it the correct size the web needs, not what makes the most sense in the main Photoshop file. We make it bigger than it is on the web so than we can shrink it down and have it look super sharp on retina displays. Yep, perhaps a bandwidth concern in how it's sending too much data to a lot of devices that don't need it - but hey we're already doing very good with how few images are used in this design it's a net gain anyway and we can revisit how this is done at any time.

We finish up by applying some basic style to the link lists, floating half of them to the left and half of them to the right (with right text alignment).


  1. MarkV
    Permalink to comment#

    Awesome as always Chris, just a suggestion regarding your image locations etc. Why not put the path in a variable and then you can swap it out when it goes live? ie

    $image-path: ('../images/');
    .selector {
     background-image: url($image-path + "imagename.png");  // Where imagename.png is the name of you image.

    You could do this with all your file paths.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.