/news-stories

An interface for publishing news stories.

Primary LanguageHTML

In-Class Project

To complete

  • Ensure the content in the .news stories is all left-aligned
  • Add padding to the stories such that the image will still touch the edges of the .news item, but the text will have 1em on the left and right sides
  • Change the overall font to give all headings a sans-serif Google font (your choice), give the remaining text a serif Google font
  • Give the .news box a 50% transparent black box-shadow (research)
  • Round the corners (0.5em) of the .news elements (research)
  • For each .story, add a link to a page named story.html (doesn't exists yet) under the last paragraph. Style it to look like a full width "button" (but should remain an anchor)
  • At the bottom of the <main>, build a custom "pagination" component to look like:
    <last 1 2 3 4 next>
    
    Each number should be independently clickable to link to another page (page2.html, etc). Show "1" to appear "active" (ie, you are currently viewing page 1)

Also think about

Execute if you have time:

  • Crop the height of the images using CSS (so they don't grow to be too tall as the page grows in width)