UI implementation
I need any ideas on how I can implement the content on the picture attached
2 Replies
The first thing you should make clear is, what happens if the screen gets smaller?
After that decide if you want to double the HTML and only show one at a time, or move one sidebar with CSS.
Viewing only this design isolated, I would try
grid. (I like grid 😁 )
grid-template-column: 1fr var(--sidebar-width) 10rem var(--content-width) 10rem var(--sidebar-width) 1fr
-> both sides left of the content should be identical, so it is centered, the first and last 1fr can be omitted, if your sidebar should be at the edge.
You can then change the custom properties inside media queries. (for smaller screens (read: mobile devices) you hopefully have another design)Wolle, thank you for the suggestion. Ive already come up with the idea, and I also used grid. grid-template-column: 10rem (width of the sidebar) auto (but my main content also has max-width so it looks like it's in the middleof the screen) . And yes, for the tablet screen I will add a hamburger menu
If it's allowed to leave links, here is where my implementation https://scape-portfolio.vercel.app/