About this layout
This is a simple, light-weight, annotated, manga-inspired, masonry-style layout template.
I am a huge fan of semantic html, so of course I used it to build the bones of the layout. Then, I inserted divs inside the main element to create each panel-like section.
I declared variables for the color palette in the :root pseudo-element, for ease of editing.
The only @media query involved is for the breakaway point of when the navbar should shift from horizontal to vertical (when a screen is smaller than 600px).
Placeholder images are from Sadako-san and Sadako-chan (貞子さんとさだこちゃん) by Aya Tsutsumi.
How to use
Step 1: view-source on this webpage.
You can do that by right-clicking and selecting "view source code." You can also do it by typing view-source right before the https:// on the address bar and refreshing the page.
Step 2: copy the whole thing and paste it into your editor of choice (I use Notepad++).
Step 3: delete all the placeholder text and the paths to the placeholder images. Then, add whatever you want instead.
You can add whatever you want to the footer, but please keep the link back to the template so others can find and use it too.
Difficulty and troubleshooting
If you know absolutely nothing about coding a website, I recommend HTML Dog for a place to start learning before or along editing this template. I did my best to label everything clearly but this is probably more on the "intermediate beginner" end of the difficulty scale.
[About the website/about you/etc.]
Donec commodo at sem rutrum vulputate. Curabitur elementum augue non augue porta, ac maximus leo euismod. Nunc id enim sed odio sollicitudin vehicula et eu tellus. Nam sit amet quam in urna interdum condimentum. Fusce in faucibus dolor. Vivamus tincidunt non justo ut porttitor. Nunc malesuada, nunc pharetra lacinia hendrerit, enim elit lobortis tellus, ut pharetra lectus metus vitae metus. Nam ex massa, porttitor a sollicitudin ac, euismod id orci.
[Fanlistings, Webrings, links to your socials, etc.]
In congue venenatis ligula ac malesuada. Vestibulum eu dapibus metus. Cras sed lectus vehicula, dapibus quam non, semper turpis. Nullam aliquam mattis mauris, consectetur ullamcorper leo lobortis non. Mauris ultrices, orci id condimentum pulvinar, magna nisi mattis ipsum, a luctus lacus quam quis libero. Phasellus vitae quam efficitur, condimentum erat eget, cursus est. Curabitur ac finibus felis, quis scelerisque neque. Curabitur at ipsum leo.
[Site log and to-do, etc.]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet erat vitae metus eleifend interdum. Sed ultrices purus sed vestibulum fermentum. Quisque leo lorem, volutpat sit amet aliquam ut, rutrum eget magna. Proin ullamcorper dignissim feugiat. Sed non ornare mauris. Suspendisse tincidunt convallis dui, ac egestas lorem vehicula suscipit. Duis ut nisl ullamcorper, dignissim erat vitae, sodales urna. Integer at sapien dictum, dictum libero sit amet, rutrum tellus. Nullam in pretium dui. Praesent in erat ornare, elementum orci sed, faucibus massa. Ut viverra ex sapien, at interdum lorem dictum a. Duis laoreet leo vel porttitor pharetra. Sed molestie in lectus sagittis consectetur. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce suscipit sapien nec aliquet rutrum.
More about this layout
By now you have probably figured out that this layout looks boring and empty unless there are a lot of div panels with stuff in them. This is my cunning plan to encourage you to put lots of stuff on your webpage!
[What your experience with the web has been like throughout your life/Why you wanted to make a website/etc.]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet erat vitae metus eleifend interdum. Sed ultrices purus sed vestibulum fermentum. Quisque leo lorem, volutpat sit amet aliquam ut, rutrum eget magna. Proin ullamcorper dignissim feugiat. Sed non ornare mauris. Suspendisse tincidunt convallis dui, ac egestas lorem vehicula suscipit. Duis ut nisl ullamcorper, dignissim erat vitae, sodales urna. Integer at sapien dictum, dictum libero sit amet, rutrum tellus. Nullam in pretium dui. Praesent in erat ornare, elementum orci sed, faucibus massa.
[Web neighbors/button wall, etc. You can add more panels as needed just by copypasting the div.]
Mauris massa neque, egestas in lacus eu, ultricies tristique ligula. Donec vel metus dolor. Nullam a lacus consequat, luctus dui nec, venenatis ex. Maecenas ultrices accumsan felis, at elementum diam. Pellentesque vel arcu odio. Vestibulum dui sem, tempor vel maximus eget, dapibus vel metus. Cras sed tellus metus. Quisque vitae dapibus ligula. Maecenas semper blandit interdum. Cras dignissim mi eu tortor dapibus volutpat.
