Preview Zoom: You may need to scroll horizontally. Generated Code If you need more detailed help please read the "How to Use" section. Experiencing issues? Read the "Common Issues" section. Make sure to empty your cache after making any changes on your site! (Don't know how?) ...or copy-paste the codes below manually. HTML: (index.html, about.html, ...) TITLE 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:

Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

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.

This is your base for any page on your website. Paste the code into all of your page files (e.g. index.html, about.html, ...) and change the content however you want. Keep in mind that you will have to change the paths to the CSS (and JS) file if your html file is in a subfolder, e.g. href="./style.css" to href="../style.css" I highly recommend using an Online HTML Formatter if your editor doesn't format your code by default. CSS: (style.css) /* -------------------------------------------------------- */ /* VARIABLES */ /* -------------------------------------------------------- */ /* Variables are used like this: var(--text-color) */ :root { /* Background Colors: */ --background-color: #000000; --content-background-color: #000000; --sidebar-background-color: #000000; /* Text Colors: */ --text-color: #e8e3fd; --sidebar-text-color: #9bafdd; --link-color: #988df3; --link-color-hover: #9e48ec; /* Text: */ --font: Lucida Console, monospace; --heading-font: Verdana, sans-serif; --font-size: 12px; /* Other Settings: */ --margin: 40px; --padding: 24px; --border: 5px solid #ffffff; --round-borders: 6px; --sidebar-width: 300px; } /* -------------------------------------------------------- */ /* BASICS */ /* -------------------------------------------------------- */ * { box-sizing: border-box; } body { display: flex; align-items: flex-start; justify-content: center; min-height: 100vh; font-size: var(--font-size); margin: 0; padding: var(--margin); color: var(--text-color); font-family: var(--font); line-height: 1.2; background: var(--background-color); background-image: url("https://sadhost.neocities.org/images/tiles/stars5.gif"); } ::selection { /* (Text highlighted by the user) */ background: rgba(0, 0, 0, 0.2); } mark { /* Text highlighted by using the element */ text-shadow: 1px 1px 4px var(--link-color); background-color: inherit; color: var(--text-color); } /* Links: */ a { text-decoration: underline; } a, a:visited { color: var(--link-color); } a:hover, a:focus { color: var(--link-color-hover); text-decoration: none; } /* -------------------------------------------------------- */ /* LAYOUT */ /* -------------------------------------------------------- */ .layout { width: 100%; display: grid; grid-gap: var(--margin); grid-template: "header header header" auto "leftSidebar main rightSidebar" auto "footer footer footer" auto / var(--sidebar-width) auto var(--sidebar-width); /* Confused by the grid? Check out my tutorial: https://petrapixel.neocities.org/coding/positioning-tutorial#grid */ } main { grid-area: main; overflow-y: auto; padding: var(--padding); background: var(--content-background-color); border: var(--border); border-radius: var(--round-borders); } /* -------------------------------------------------------- */ /* HEADER */ /* -------------------------------------------------------- */ header { grid-area: header; font-size: 1.2em; border: var(--border); border-radius: var(--round-borders); background: var(--content-background-color); } .header-content { padding: var(--padding); } .header-title { font-family: var(--heading-font); font-size: 1.5em; font-weight: bold; } .header-image img { width: 100%; height: auto; } /* -------------------------------------------------------- */ /* SIDEBARS */ /* -------------------------------------------------------- */ aside { grid-area: aside; border: var(--border); border-radius: var(--round-borders); overflow: hidden; background: var(--sidebar-background-color); padding: var(--padding); color: var(--sidebar-text-color); } .left-sidebar { grid-area: leftSidebar; } .right-sidebar { grid-area: rightSidebar; } .sidebar-title { font-weight: bold; font-size: 1.2em; font-family: var(--heading-font); } .sidebar-section:not(:last-child) { margin-bottom: 3em; } .sidebar-section ul, .sidebar-section ol { padding-left: 1.5em; } .sidebar-section > *:not(p):not(ul):not(ol):not(blockquote) { margin-top: 10px; } /* Sidebar Blockquote: */ .sidebar-section blockquote { background: rgba(0, 0, 0, 0.1); padding: 15px; margin: 1em 0; border-radius: 10px; overflow: hidden; } .sidebar-section blockquote > *:first-child { margin-top: 0; } .sidebar-section blockquote > *:last-child { margin-bottom: 0; } /* Site Button: */ .site-button { display: flex; flex-direction: column; align-items: center; } .site-button textarea { font-family: monospace; font-size: 0.7em; } /* -------------------------------------------------------- */ /* FOOTER */ /* -------------------------------------------------------- */ footer { grid-area: footer; border: var(--border); border-radius: var(--round-borders); overflow: hidden; font-size: 0.75em; padding: 15px; background: var(--content-background-color); display: flex; justify-content: center; } footer a, footer a:visited { color: var(--link-color); } footer a:hover, footer a:focus { color: var(--link-color-hover); } /* -------------------------------------------------------- */ /* NAVIGATION */ /* -------------------------------------------------------- */ nav { margin-bottom: 3em; } nav .sidebar-title { margin-bottom: 0.5em; } nav ul { margin: 0 -5px; padding: 0; list-style: none; user-select: none; } nav ul li { margin-bottom: 0; } nav > ul li > a, nav > ul li > strong { display: inline-block; } nav > ul li > a, nav > ul li > details summary, nav > ul li > strong { padding: 5px 10px; } nav > ul li > a.active, nav > ul li > details.active summary { font-weight: bold; } nav ul summary { cursor: pointer; } nav ul ul li > a { padding-left: 30px; } /* -------------------------------------------------------- */ /* CONTENT */ /* -------------------------------------------------------- */ main { line-height: 1.5; } main a, main a:visited { color: var(--link-color); } main a:hover, main a:focus { color: var(--link-color-hover); text-decoration-style: wavy; } main p, main .image, main .full-width-image, main .two-columns { margin: 0.75em 0; } main ol, main ul { margin: 0.5em 0; padding-left: 1.5em; } main ol li, main ul li { margin-bottom: 0.2em; line-height: 1.3; } main ol { padding-left: 2em; } main blockquote { background: rgba(0, 0, 0, 0.1); padding: 15px; margin: 1em 0; border-radius: 10px; } main pre { margin: 1em 0 1.5em; } main code { text-transform: none; } main center { margin: 1em 0; padding: 0 1em; } main hr { border: 0; border-top: var(--border); margin: 1.5em 0; } /* HEADINGS: */ main h1, main h2, main h3, main h4, main h5, main h6 { font-family: var(--heading-font); margin-bottom: 0; line-height: 1.5; } main h1:first-child, main h2:first-child, main h3:first-child, main h4:first-child, main h5:first-child, main h6:first-child { margin-top: 0; } main h1 { font-size: 1.5em; } main h2 { font-size: 1.4em; } main h3 { font-size: 1.3em; } main h4 { font-size: 1.2em; } main h5 { font-size: 1.1em; } main h6 { font-size: 1em; } /* COLUMNS: */ .two-columns { display: flex; } .two-columns > * { flex: 1 1 0; margin: 0; } .two-columns > *:first-child { padding-right: 0.75em; } .two-columns > *:last-child { padding-left: 0.75em; } /* -------------------------------------------------------- */ /* CONTENT IMAGES */ /* -------------------------------------------------------- */ .image { display: block; width: auto; height: auto; max-width: 100%; } .full-width-image { display: block; width: 100%; height: auto; } .images { display: flex; width: calc(100% + 5px + 5px); margin-left: -5px; margin-right: -5px; } .images img { width: 100%; height: auto; padding: 5px; margin: 0; overflow: hidden; } /* -------------------------------------------------------- */ /* ACCESSIBILITY */ /* -------------------------------------------------------- */ /* please do not remove this. */ #skip-to-content-link { position: fixed; top: 0; left: 0; display: inline-block; padding: 0.375rem 0.75rem; line-height: 1; font-size: 1.25rem; background-color: var(--content-background-color); color: var(--text-color); transform: translateY(-3rem); transition: transform 0.1s ease-in; z-index: 99999999999; } #skip-to-content-link:focus, #skip-to-content-link:focus-within { transform: translateY(0); } /* -------------------------------------------------------- */ /* MOBILE RESPONSIVE */ /* -------------------------------------------------------- */ /* CSS Code for devices < 800px */ @media (max-width: 800px) { body { font-size: 14px; } .layout { width: 100%; grid-template: "header" auto "rightSidebar" auto "main" auto "footer" auto / 1fr; /* Confused by the grid? Check out my tutorial: https://petrapixel.neocities.org/coding/positioning-tutorial#grid */ } .left-sidebar { display: none; } aside { border-bottom: 1px solid; padding: 9px; font-size: 0.9em; } nav { padding: 0; } nav > ul { padding-top: 0.5em; } nav > ul li > a, nav > ul li > details summary, nav > ul li > strong { padding: 0.5em; } main { max-height: none; padding: 15px; } .images { flex-wrap: wrap; } .images img { width: 100%; } #skip-to-content-link { font-size: 1rem; } } Copy this into your style.css. That CSS file will be loaded on every page. I highly recommend using an Autoprefixer for this code for better browser compatibility, ensuring that people who use older browsers also see your website correctly. JavaScript: Your selected settings do not require any JavaScript code. If you ever change your mind about loading your layout per JavaScript, you can follow this tutorial of mine to achieve it. Skip to content Website Title Section Title Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessit atibus perferendis inventore tempore vel optio similique blanditiis quasi quam? Section Title Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessit atibus perferendis inventore tempore vel optio similique blanditiis quasi quam? Section Title List List List List Section Title petrapixel petrapixel petrapixel petrapixel Section Title Section Title petrapixel petrapixel Navigation Section Title Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessit atibus perferendis inventore tempore vel optio similique blanditiis quasi quam? Section Title Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessit atibus perferendis inventore tempore vel optio similique blanditiis quasi quam? Section Title List List List List Section Title petrapixel petrapixel petrapixel petrapixel Section Title Section Title petrapixel petrapixel 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. Sorted list Sorted list Sorted list Heading 3 This is preformatted text, which means that spaces are preserved: :D This is preformatted code:

My First Heading

My first paragraph.

This is a separator line / divider: Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 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. Footer Text. Link. Template generated with petrapixel's layout generator.