css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

Just experimenting a bit around with what you can do with webfonts and ligatures and only two font families: Playfair (Google Webfont) and Droid Serif (Google Webfont). Trying to find that one or two tweaks to make the design feel newspapery.


  1. This is beautiful! Love it!

  2. I have finally found what I have been looking for. I needed a newspaper just like this for my One Place Study website.

    Thank you so much for sharing this I could kiss you. ;)

    Take care


    PS: How can I add another weather box to the right side of the header so I have a box on either side of the header?

  3. Nice!

    Instead of

    .collumn {
      border-right: 1px solid #2f2f2f;

    You can use

    .collumn + .collumn {
      border-left: 1px solid #2f2f2f;

    to get rid of that final border :)

  4. @Jadire: thx a lot! Glad to have made you happy with it. Sorry for only seeing this now, but for a weather-forecast box on the right side, you would need to put a new html chunk right behind

    Newpost York
    . You might want to copy the existing weather box.

    You will then need to add another css class only to this second box. Then change the margins for box 1 to: margin: 20px 50px 50px 0; and the css for the second box to something like: margin-left: 40px;

    Don't forget to insert the new class in the media queries too, so that is also vanishes in smaller screens.

  5. @reverendgeneral

    thx! inserted it right away :)

  6. Hi, I hope you don't mind, but I used your design at www.newsjumble.site. I have linked to it from the front page. many thanks floatingworks

  7. This is soooo cute :)

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.