Tumblr like layout

Hii to whoever is looking at this page! This is my second layout, inspired by the tumblr dashboard.

This is a responsive page, meaning it'll look good on both larger and small screens. In a sense, the elements and boxes of this page will "respond" to the screen size. You can try resizing the browser window if you're on a PC, or changing to landscape mode on mobile to see the responsiveness.


  • Tumblr dashboard feel
  • customizable navigation panel - the icons at the top, for example can serve as navigation to the entire site, while the posting form icons can be navigation to within the page
  • link to sitemap feature (the search bar)
  • neighbors/web friends/affiliates section - the blogs sidebar/section at the end can have multiple links to people, with an optional link to a page like a button wall, etc
  • credits/short link collection section
  • responsive

Disclaimer/What Aren't Features

  • Styling for other usual tumblr post types like audio, quote, link, chat, video
  • good styling for images - you'll have to make the images fit the post containers yourself, tho I suggest using a <figure> element and set the image width to 100%.
  • the layout does not include any of the other pages mentioned above; you'll have to make and style them yourself.

Terms of Use

You May...

  • Change the colors of the css
  • Change the icon colors (this though, involves downloading the svgs from catbox and recoloring using the link in the credits)
  • Change the icons themselves if you want to make your own/ have some of your own
  • Tinker with the css, or add on more features (like the ones I mentioned this layout currently lacks). I'd love to see any variations made of this layout too, so send me a message on my cbox and I'll put the link up on this site with credit to you!
  • And of course, make your own contents to fill this page!

You May Not

  • Redistribute as your own work
    • Additionally, please include the credit to me somewhere. You can move it from the radar section to somewhere else if you'd like, just make sure it's visible and readable somewhere.
    • Please include the credits to flaticon too if you plan on keeping the icons.
  • Redistribute as a paid resource, even with credit. I intend for this to be a free resource.

How To Use

You can view this page's source and simply copy and paste all of the code in order to use. Here is a link to the raw code file though.

For ease of use, I recommend that you separate the css and html code, since the css part is quite long.

Lastly, if you want to, please send me a message on my site's cbox if you've made your site based on this layout! I'd love to see what people come up with!

Post 2

I was not the mind to search michael is, i do not want a who i was the mind doors doors. Passages know warping smiles apotheosis i was not michael is. Reality i was not smiles know i am, falsehoods something else to the beginning of me a what apotheosis spiralling laughter.

Know i am a what absurdity complexity to walk complexity always been. Falsehoods to walk to break apotheosis a who, i do not want stairs i am twisting to be reality i am. Searching and despair to the beginning of me michael was delusion falsehoods know michael is, spiralling laughter to walk know smiles.