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.

Skip to content
Website Title

Page Title (Heading 1)

This layout was generated with petrapixel's layout generator. You may remove the credit in the footer, but please leave the credit in the code. Thank you!

I will now show you how to use the most common HTML text elements: This is bold text. This is also bold text. This is italic text. This is also italic text. This is strikethrough text. This is underlined text. This is a link. This is a link that will open in a new tab. This is code (displayed in a monospace font). This is an abbreviation (Try hovering over it). This is highlighted text. This is a line break (The br stands for break.):
It's different from a paragraph because it does not add space inbetween the lines of text.

This is a paragraph. As you can see, there's a bit of space between it and the previous paragraph.

This is a blockquote. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.

Heading 2

  • Unsorted list
  • Unsorted list
  • Unsorted list

Lorem ipsum dolor sit amet.

  1. Sorted list
  2. Sorted list
  3. Sorted list

Heading 3

This is preformatted text, which means that     spaces    are preserved:
          :D

This is preformatted code:

<!DOCTYPE html>
<html>
  <body>
   <h1>My First Heading</h1>
   <p>My first paragraph.</p>
  </body>
</html>

This is a separator line / divider:

Hi! This site is in progress as I learn about HTML

Heading 4

Here are two columns:

Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

At vero eos et accusam et justo duo dolores et ea rebum.

Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

At vero eos et accusam et justo duo dolores et ea rebum.

Heading 5

This is an image:

This is a full-width image:

These are multiple images in a row:

Heading 6

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.