Convert Simple Sidebar Layout Image / Design to HTML + CSS
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

I have this design that we'd like to use as the sidebar of a website that I'm having a hard time completing - the main issue being the rotated text that I'm struggling with! We need this completed by Friday, March 10.

It should be responsive ( work on Mobile, will be tested on recent iPhones ) and function cross browser ( Safari, Chrome, recent IE ). It should always take up 100% width vertically and take up enough width for all of the content to appear as it does in the image ( nothing should be cropped / change position ).

Edit: As someone mentioned below, we need this image emulated as HTML / CSS so that it is presented as semantic HTML, *not*this image placed on a page

Additionally, feel free to use any approximate font from google fonts or just Helvetica in the solution!

Thank you very much for your time!

Design Sample:


Link to Examples of How it Should Appear on a page:
Mobile Sample

Desktop Sample 1

Desktop Sample 2

hey gristleism I'll work on this and submit something for you
LDubya 1 year ago
Oh god... How do you expect users to click on a navigation item that's less than 10px wide? Or read the bottom text without turning their head?
slang800 1 year ago
awarded to farolanf

Crowdsource coding tasks.

2 Solutions

Winning solution
Amazing, thank you so much!
gristleism 1 year ago

I'm not going to bother with a solution, because @farolanf's is just about perfect. But I am curious... Ask your designer if they can tell the difference between these two images:

Why do you ask this? They are the same...
georgefountain 1 year ago
Not quite - it's the alignment of the text of the section titles (shown by the red) line that's off in the second image. I showed this to a few other people and got varying results, but for me it's obvious & unsettling to see them not aligned in the right image.
slang800 1 year ago
I never noticed until you wrote it. Even with your red lines.
georgefountain 1 year ago
View Timeline