Welcome to my Layout Maker!
Please read this first!
This tool generates a layout that is responsive, which means it looks great on phones! Use dropdowns above to customize your layout's general features. Click the button to generate your HTML and CSS, and paste it into a file on Neocities.
Then you can replace all of the text with your own. For more customization, the CSS code has comments to explain what each part changes. Please read through the code - even if you have no idea what it means.
If you're feeling up for a challenge, I put together a guide which goes over the structure of how this layout is built, along with some specific tips on how to edit it in certain ways.
Check the links in the sidebar for more resources to build your own website!
- Cat Ipsum -
Rub my belly hiss swipe at owner's legs sniff catnip and act crazy growl at dogs in my sleep sit on the laptop for hiss at vacuum cleaner i like to spend my days sleeping and eating fishes that my human fished for me.
Head nudges eat my own ears. Hey! you there, with the hands why can't i catch that stupid red dot, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff, or roll over and sun my belly curl up and sleep on the freshly laundered towels.
Responsive Image Gallery
Resize the browser window to see the effect!
Here we use media queries to re-arrange the images on different screen sizes:
- If screen is larger than 768px wide - show four images side by side
- If screen is smaller than 768px - show two images side by side
- If screens is smaller than 480px - stack the images vertically (100%)
Tip: You will learn more about media queries later in our CSS Tutorial.