layouts

Enjoy these layouts made by me! If you use these layouts as-is or as a base, please see my terms of use.

Websites in a Box

Below you'll find what I'm calling "websites in a box" which essentially means you can get a site up with just a single index.html file!

These themes are responsive and have multiple "pages" with no JavaScript, inspired by John Doe's Page.

Beachy Vibes

<!-- Beachy Vibes Theme - Layout by David V. Kimball // https://create.david.qa -->

  <!DOCTYPE html>
  <html lang="en">
  
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Beachy Vibes Theme</title>
      <style>
  
          *, *::before, *::after {
              box-sizing: border-box;
          }
  
          body, h1, h2, h3, p, ul, li, a {
              margin: 0;
              padding: 0;
              font-family: 'Arial', sans-serif;
          }
  
          body {
              background-color: #AEDFF7; /* Sky blue */
              color: #023047;  /* Deep ocean blue */
              font-size: 18px;
              line-height: 1.6;
              display: flex;
              justify-content: center;
              align-items: flex-start;
              min-height: 100vh;
          }
  
          main img {
              max-width: 100%;
          }
  
          a {
              text-decoration: none;
              color: #8E9AAF; /* Cloud color */
          }
  
          a:hover {
              text-decoration: underline;
          }
  
          /* Centering container */
          .container {
              max-width: 800px;
              width: 100%;
              display: flex;
              flex-direction: column;
              align-items: center;
          }
  
          /* Header */
          header {
              background-color: #0466C8; /* Deeper sky blue */
              color: #ffffff;  /* White for contrast */
              padding: 15px 0;
              text-align: center;
              width: 100%;
          }
  
          /* Navigation */
          nav {
              background-color: #AEDFF7; /* Sky blue */
              padding: 10px;
              text-align: center;
              width: 100%;
          }
  
          nav a {
              color: #292929;
          }
  
          nav ul {
              list-style: none;
          }
  
          nav ul li {
              display: inline;
              margin-right: 20px;
          }
  
          /* Content Wrapper */
          .content-wrapper {
              display: flex;
              justify-content: space-between;
              width: 100%;
          }
  
          /* Sidebar */
          aside {
              flex-basis: 20%;
              padding: 15px;
              background-color: #FFD166; /* Sand color */
              box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
          }
  
          /* Footer */
          footer {
              background-color: #0466C8; /* Deeper sky blue */
              color: #ffffff; /* White */
              text-align: center;
              padding: 15px 0;
              margin-top: 20px;
              width: 100%;
          }
  
          /* Blog */
          article {
              padding-bottom: 1em;
          }
          time {
              font-size: 0.6em;
          }
  
          /* Main content */
          main {
              width: 100%;
              padding: 15px;
              background-color: #fff; /* White like sea foam */
              box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
              position: relative; /* Set main as the positioning context */
              min-height: 400px; /* Ensure there's some space even when content is hidden */
          }
  
          main > section:not(#home) {
              padding: 15px 0; /* Padding for sections, excluding #home */
          }
  
  
          main img, aside img {
              max-width: 100%;
          }
  
          /* Default all sections to be hidden */
          section {
              background-color: #fff; /* Solid white background */
              opacity: 0;
              visibility: hidden;
              position: absolute; 
              top: 0;
              left: 15px; /* Adjusted to account for main's padding */
              right: 15px; /* Adjusted to account for main's padding */
              bottom: 15px; /* Adjusted to account for main's padding */
              transition: opacity 0.3s, visibility 0.3s;
              overflow: auto; /* To enable scrolling if content is too long */
              transition: none;
          }
  
          body:target section#home {
              opacity: 0;
              visibility: hidden;
          }
  
          /* Show #home by default. It remains in the flow so it doesn't overlay anything. */
          section#home {
              opacity: 1;
              visibility: visible;
              position: static;
          }
  
          /* Show targeted sections, with a higher z-index to ensure they overlay #home */
          section:target {
              opacity: 1;
              visibility: visible;
              z-index: 3;
          }
      </style>
  </head>
  
  <body>
      <div id="_" style="display: none;"></div>
      <!-- Centering Container -->
      <div class="container">
          <!-- Header -->
          <header>
              <h1>Beachy Vibes</h1>
          </header>
  
          <!-- Navigation -->
          <nav>
              <ul>
                  <li><a href="#_">Home</a></li> <!-- First item should be #_ -->
                  <li><a href="#about">About</a></li>
                  <li><a href="#blog">Blog</a></li>
                  <li><a href="#contact">Contact</a></li>
              </ul>
          </nav>
  
          <!-- Content Wrapper -->
  <div class="content-wrapper">
      <!-- Sidebar remains the same -->
  
              <!-- Sidebar -->
              <aside>
                  <h2>Sandy Spots</h2>
                  <p>Discover the finest grains, unique shells, and hidden treasures.</p>
              </aside>
      <!-- Main content -->
      <main>
          <section id="home">
              <h2>Listen to the Waves</h2>
              <p>Every beach has a story to tell. Let the waves whisper their tales to you.</p>
          </section>
  
          <section id="about">
              <h2>About</h2>
              <p>This is a sentence all about you.</p>
          </section>
  
          <section id="blog">
              <h2>Blog</h2>
              <article>
                  <h3>Publishing this site <time datetime="2004-08-13">08.13.2004</time></h3>
                  <p>Just launched! I can't wait to share it.</p>
                </article>
  
                <article>
                  <h3>Updating this site <time datetime="2004-08-18">08.18.2004</time></h3>
                  <p>I've added so much to it since launch!</p>
                </article>
          </section>
          
  
          <section id="contact">
              <h2>Contact</h2>
              <p>How people can reach you.</p>
          </section>
      </main>
  </div>
  
          <!-- Footer -->
          <footer>
              &copy; 2023 Beachy Vibes
          </footer>
      </div> <!-- End of Centering Container -->
  
  </body>
  </html>

Retro Web

<!-- Retro Web Theme - Layout by David V. Kimball // https://create.david.qa -->

  <!DOCTYPE html>
  <html lang="en">
  
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Retro Web</title>
      <style>
  
          body, h1, h2, p, ul, li, a, header, nav, footer {
              margin: 0;
              padding: 0;
              font-family: 'Courier New', Courier, monospace;
          }
  
          body {
              background-color: #f0e68c; /* khaki */
              color: #2f4f4f;  /* dark slate gray */
              font-size: 16px;
              line-height: 1.6;
              display: flex;
              justify-content: center;
              align-items: flex-start;
              padding: 20px 0;
          }
  
          a {
              text-decoration: none;
              color: #8b4513; /* saddle brown */
          }
  
          a:hover {
              text-decoration: underline;
          }
  
          /* Centering container */
          .container {
              max-width: 800px;
              width: 100%;
              border: 2px dashed #2f4f4f; /* dark slate gray */
              background-color: #f5deb3; /* wheat */
              padding: 15px;
          }
  
          /* Header */
          header {
              color: #2f4f4f; /* dark slate gray */
              padding: 10px;
              text-align: center;
              border-bottom: 2px dashed #2f4f4f; /* dark slate gray */
          }
  
          /* Navigation */
          nav {
              margin: 10px 0;
              text-align: center;
          }
  
          nav ul {
              list-style: none;
          }
  
          nav ul li {
              display: inline;
              margin-right: 20px;
          }
  
          /* Content Wrapper */
          .content-wrapper {
              display: flex;
              justify-content: space-between;
              margin-top: 15px;
          }
  
          /* Sidebar */
          aside {
              flex-basis: 20%;
              padding: 10px;
              border-right: 2px dashed #2f4f4f; /* dark slate gray */
          }
  
          /* Footer */
          footer {
              margin-top: 20px;
              text-align: center;
              padding: 10px;
              border-top: 2px dashed #2f4f4f; /* dark slate gray */
          }
  
          /* Main content */
          main {
              width: 100%;
              padding: 15px;
              background-color: #f5deb3; 
              position: relative; /* Set main as the positioning context */
              min-height: 400px; /* Ensure there's some space even when content is hidden */
          }
  
          main > section:not(#home) {
              padding: 15px 0; /* Padding for sections, excluding #home */
          }
  
  
          main img, aside img {
              max-width: 100%;
          }
  
          /* Default all sections to be hidden */
          section {
              background-color: #f5deb3; 
              opacity: 0;
              visibility: hidden;
              position: absolute; 
              top: 0;
              left: 15px; /* Adjusted to account for main's padding */
              right: 15px; /* Adjusted to account for main's padding */
              bottom: 15px; /* Adjusted to account for main's padding */
              transition: none;
          }
  
          body:target section#home {
              opacity: 0;
              visibility: hidden;
          }
  
          /* Show #home by default. It remains in the flow so it doesn't overlay anything. */
          section#home {
              opacity: 1;
              visibility: visible;
              position: static;
          }
  
          /* Show targeted sections, with a higher z-index to ensure they overlay #home */
          section:target {
              opacity: 1;
              visibility: visible;
              z-index: 3;
          }
      </style>
  </head>
  
  <body>
      <div id="_" style="display: none;"></div>
      <div class="container">
          <!-- Header -->
          <header>
              <h1>Retro Web</h1>
          </header>
  
          <!-- Navigation -->
          <nav>
              <ul>
                  <li><a href="#_">Home</a></li> <!-- First item should be #_ -->
                  <li><a href="#gallery">Gallery</a></li>
                  <li><a href="#chat">Chat</a></li>
                  <li><a href="#contact">Contact</a></li>
              </ul>
          </nav>
  
          <!-- Content Wrapper -->
          <div class="content-wrapper">
              <!-- Sidebar -->
              <aside>
                  <h2>Notice Board</h2>
                  <p>Latest updates and retro tips here!</p>
              </aside>
  
              <!-- Main content -->
              <main>
                  <a id="default"></a>
                  <section id="home" class="active-section">
                      <h2>Welcome back to the '90s</h2>
                      <p>Step back in time and enjoy the nostalgic vibes of the old web.</p>
                  </section>
      
                  <section id="gallery">
                      <h2>Gallery</h2>
                      <p>Display your gallery here.</p>
                  </section>
      
                  <section id="chat">
                      <h2>Chat</h2>
                      <p>Chat with your visitors here.</p>
                  </section>
      
                  <section id="contact">
                      <h2>Contact</h2>
                      <p>How people can reach you.</p>
                  </section>
              </main>
          </div>
  
          <!-- Footer -->
          <footer>
              &copy; 2023 Retro Vibes. All rights reserved.
          </footer>
      </div>
  </body>
  </html>

Smol Web

<!-- Smol Web Theme - Layout by David V. Kimball // https://create.david.qa -->

  <!DOCTYPE html>
  <html lang="en">
  
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Smol Web Theme</title>
      <style>
  
          body, h1, h2, h3, p, ul, li, a {
              margin: 0;
              padding: 0;
              font-family: 'Courier New', Courier, monospace;
          }
  
          body {
              background-color: #f3f3f3;
              color: #333;
              font-size: 18px;
              line-height: 1.6;
              display: flex;
              justify-content: center;
              align-items: flex-start;
              min-height: 100vh;
          }
  
          a {
              text-decoration: none;
              color: #ff4500;
          }
  
          a:hover {
              text-decoration: underline;
          }
  
          /* Centering container */
          .container {
              max-width: 800px;
              width: 100%;
              display: flex;
              flex-direction: column;
              align-items: center;
          }
  
          /* Header */
          header {
              background-color: #ff4500;
              color: #fff;
              padding: 15px 0;
              text-align: center;
              width: 100%;
          }
  
          /* Navigation */
          nav {
              background-color: #f3f3f3;
              padding: 10px;
              text-align: center;
              width: 100%;
          }
  
  
          nav ul {
              list-style: none;
          }
  
          nav ul li {
              display: inline;
              margin-right: 20px;
          }
  
          /* Content Wrapper */
          .content-wrapper {
              display: flex;
              justify-content: space-between;
              width: 100%;
          }
  
          /* Sidebar */
          aside {
              flex-basis: 20%;
              padding: 15px;
              background-color: #e6e6e6;
              box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
          }
  
          /* Footer */
          footer {
              background-color: #333;
              color: #fff;
              text-align: center;
              padding: 15px 0;
              margin-top: 20px;
              width: 100%;
          }
  
          
          /* Blog */
          article {
              padding-bottom: 1em;
          }
          time {
              font-size: 0.6em;
          }
  
          /* Main content */
          main {
              width: 100%;
              padding: 15px;
              background-color: #fff; 
              position: relative; /* Set main as the positioning context */
              min-height: 400px; /* Ensure there's some space even when content is hidden */
          }
  
          main > section:not(#home) {
              padding: 15px 0; /* Padding for sections, excluding #home */
          }
  
  
          main img, aside img {
              max-width: 100%;
          }
  
          /* Default all sections to be hidden */
          section {
              background-color: #fff; /* Solid white background */
              opacity: 0;
              visibility: hidden;
              position: absolute; 
              top: 0;
              left: 15px; /* Adjusted to account for main's padding */
              right: 15px; /* Adjusted to account for main's padding */
              bottom: 15px; /* Adjusted to account for main's padding */
              transition: opacity 0.3s, visibility 0.3s;
              overflow: auto; /* To enable scrolling if content is too long */
              transition: none;
          }
  
          body:target section#home {
              opacity: 0;
              visibility: hidden;
          }
  
          /* Show #home by default. It remains in the flow so it doesn't overlay anything. */
          section#home {
              opacity: 1;
              visibility: visible;
              position: static;
          }
  
          /* Show targeted sections, with a higher z-index to ensure they overlay #home */
          section:target {
              opacity: 1;
              visibility: visible;
              z-index: 3;
          }
      </style>
  </head>
  
  <body>
      <div id="_" style="display: none;"></div>
      <!-- Centering Container -->
      <div class="container">
          <!-- Header -->
          <header>
              <h1>Smol Web Fans</h1>
          </header>
  
          <!-- Navigation -->
          <nav>
              <ul>
                  <li><a href="#_">Home</a></li> <!-- First item should be #_ -->
                  <li><a href="#about">About</a></li>
                  <li><a href="#blog">Blog</a></li>
                  <li><a href="#contact">Contact</a></li>
              </ul>
          </nav>
  
          <!-- Content Wrapper -->
          <div class="content-wrapper">
              <!-- Sidebar -->
              <aside>
                  <h2>Sidebar</h2>
                  <p>This is an optional sidebar. Put any content you like here.</p>
              </aside>
  
              <!-- Main content -->
              <main>
                  <a id="default"></a>
                  <section id="home" class="active-section">
                      <h2>Home</h2>
                      <p>For fans of a more simplified online experience.</p>
                  </section>
      
                  <section id="about">
                      <h2>About</h2>
                      <p>This is a sentence all about you.</p>
                  </section>
      
                  <section id="blog">
                      <h2>Blog</h2>
                      <article>
                          <h3>Publishing this site <time datetime="2004-08-13">08.13.2004</time></h3>
                          <p>Just launched! I can't wait to share it.</p>
                      </article>
  
                      <article>
                          <h3>Updating this site <time datetime="2004-08-18">08.18.2004</time></h3>
                          <p>I've added so much to it since launch!</p>
                      </article>
                  </section>
      
                  <section id="contact">
                      <h2>Contact</h2>
                      <p>How people can reach you.</p>
                  </section>
              </main>
          </div>
  
          <!-- Footer -->
          <footer>
              &copy; 2023 Smol & Old Web Fans. All Rights Reserved.
          </footer>
      </div> <!-- End of Centering Container -->
  </body>
  
  </html>

Museum of Arts

<!-- Museum Theme - Layout by David V. Kimball // https://create.david.qa -->

  <!DOCTYPE html>
  <html lang="en">
  
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Museum of Arts</title>
      <style>
  
          body, h1, h2, p, ul, li, a {
              margin: 0;
              padding: 0;
              font-family: 'Arial', sans-serif;
          }
  
          body {
              background-color: #efebe9; /* Museum beige */
              color: #5d4037;  /* Dark brown text */
              font-size: 16px;
              line-height: 1.6;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              min-height: 100vh;
              padding-bottom: 0px;
          }
  
          a {
              text-decoration: none;
              color: #5d4037; /* Dark brown link */
          }
  
          a:hover {
              text-decoration: underline;
          }
  
          /* Museum container */
          .museum-container {
          border: 2px solid #8d6e63;
          border-radius: 10px;
          overflow: hidden;
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
          display: flex; /* Add this to center the main-content */
          justify-content: center;
      }
  
          /* Art Navigation */
          .art-nav {
              position: fixed;
              bottom: 0;
              left: 0;
              right: 0;
              height: 60px;
              background: rgba(255, 255, 255, 0.9);
              display: flex;
              align-items: center;
              justify-content: space-around;
              box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
              z-index: 1000;
          }
  
          .art-nav a {
              width: 50px;
              height: 50px;
              border-radius: 50%;
              display: flex;
              align-items: center;
              justify-content: center;
              position: relative;
              line-height: 50px;         /* Adjusted to match height */
              text-decoration: none;
          }
  
          .art-nav a::before {
              content: '';
              width: 100%;
              height: 100%;
              border-radius: 50%;
              background: #d7ccc8; /* Default color */
              position: absolute;
              top: 0;
              left: 0;
              z-index: -1;
              transition: transform 0.2s;
              text-decoration: none;
          }
  
          .art-nav a:hover::before {
              transform: scale(1.1);
              text-decoration: none;
          }
  
          .art-nav a[data-section="painting"]::before {
              background: #e57373; /* color for painting */
          }
  
          .art-nav a[data-section="sculpture"]::before {
              background: #81c784; /* color for sculpture */
          }
  
          .art-nav a[data-section="photography"]::before {
              background: #64b5f6; /* color for photography */
          }
  
          .art-nav a[data-section="digital-art"]::before {
              background: #ffb74d; /* color for digital-art */
          }
  
          .art-nav a[data-section="pottery"]::before {
              background: #ba68c8; /* color for pottery */
          }
  
          /* Main content */
          .main-content {
              width: 100%;
              padding: 2rem;
              background-color: #efebe9;
              box-sizing: border-box;
              position: relative; /* Set main as the positioning context */
              min-height: 500px; /* Ensure there's some space even when content is hidden */
              max-height: calc(100vh - 60px); /* 60px is the height of .art-nav */
              overflow: auto; /* Allows scrolling within .main-content if needed */
          }
  
  
          @media (min-width: 900px) {  /* This breakpoint can be adjusted based on when you want the design to change */
              .main-content {
                  width: 800px;  /* Set a fixed width for larger screens */
                  min-width: 800px;  /* Ensure it doesn't shrink below this for larger screens */
              }
          }        
  
          .main-content > section {
              box-sizing: border-box;
          }
  
          .main-content > section:not(#home) {
              padding: 32px 15px; /* Padding for sections, excluding #home */
          }
  
          .main-content img {
              max-width: 100%;
          }
  
          /* Default all sections to be hidden */
          section {
              background-color: #efebe9; 
              opacity: 0;
              visibility: hidden;
              position: absolute; 
              top: 0;
              left: 15px; /* Adjusted to account for main's padding */
              right: 15px; /* Adjusted to account for main's padding */
              bottom: 15px; /* Adjusted to account for main's padding */
              transition: opacity 0.3s, visibility 0.3s;
              overflow: auto; /* To enable scrolling if content is too long */
              transition: none;
          }
  
          body:target section#home {
              opacity: 0;
              visibility: hidden;
          }
  
          /* Show #home by default. It remains in the flow so it doesn't overlay anything. */
          section#home {
              opacity: 1;
              visibility: visible;
              position: static;
          }
  
          /* Show targeted sections, with a higher z-index to ensure they overlay #home */
          section:target {
              opacity: 1;
              visibility: visible;
              z-index: 3;
          }
      </style>
  </head>
  
  <body>
      <div id="_" style="display: none;"></div>
      <div class="museum-container">
  
          <!-- Main Content -->
          <main class="main-content">
              <section id="home">
                  <h1>Painting</h1>
                  <p>Painting is the practice of applying paint, pigment, color or other medium to a solid surface. The medium is commonly applied to the base with a brush.</p>
              </section>
  
              <section id="sculpture">
                  <h1>Sculpture</h1>
                  <p>Sculpture is the branch of the visual arts that operates in three dimensions.</p>
              </section>
  
              <section id="photography">
                  <h1>Photography</h1>
                  <p>Photography is the art, application, and practice of creating durable images by recording light, either electronically or chemically.</p>
              </section>
  
              <section id="digital-art">
                  <h1>Digital Art</h1>
                  <p>Digital art is an artistic work or practice that uses digital technology as part of the creative or presentation process.</p>
              </section>
  
              <section id="pottery">
                  <h1>Pottery</h1>
                  <p>Pottery is the process of forming vessels and other objects with clay and other ceramic materials, which are fired at high temperatures to give them a hard, durable form.</p>
              </section>
          </main>
      </div>
  
      <!-- Art Navigation -->
      <nav class="art-nav">
          <a href="#_" data-section="painting">🎨</a> <!-- First item should be #_ -->
          <a href="#sculpture" data-section="sculpture">🧱</a>
          <a href="#photography" data-section="photography">📷</a>
          <a href="#digital-art" data-section="digital-art">💻</a>
          <a href="#pottery" data-section="pottery">🏺</a>
      </nav>
  
  </body>
  
  </html>

Space Exploration

<!-- Space Exploration Theme - Layout by David V. Kimball // https://create.david.qa -->

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Space Exploration</title>
      <style>
          
          body, h1, h2, p, ul, li, a {
              margin: 0;
              padding: 0;
              font-family: 'Arial', sans-serif;
          }
  
          body {
              background-color: #1a1a1a; /* Deep space black */
              color: #f8f8f8;  /* Star white */
              font-size: 16px;
              line-height: 1.6;
              display: flex;
              align-items: center;
              justify-content: center;
              min-height: 100vh;
              overflow: hidden;
          }
  
          a {
              text-decoration: none;
              color: #f8f8f8;
          }
  
          a:hover {
              text-decoration: underline;
          }
  
          /* Space container */
          .space-container {
              display: flex;
              max-width: 1200px;
              height: 80vh;
              border: 3px solid #4a90e2; /* Horizon blue */
              border-radius: 20px;
              overflow: hidden;
          }
  
          /* Planet Navigation */
          .planet-nav {
              flex-basis: 20%;
              position: relative;
              background-color: #2c3e50; /* Night sky blue */
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              padding: 15px;
          }
  
          .planet-nav ul {
              list-style: none;
          }
  
          .planet-nav li {
              margin-bottom: 20px;
          }
  
          /* Main Content */
          .main-content {
          width: 800px; /* Adjusted width to fill space */
          background-color: #1a1a1a; 
          overflow: hidden;
          position: relative; /* Set as position reference for absolute positioned children */
          padding: 15px; /* Add padding here */
      }
  
          .main-content > section:not(#mercury) {
              padding: 30px 15px; /* Padding for sections, excluding #home */
          }
  
          .main-content img {
              max-width: 100%;
          }
  
          /* Spacing */
          .main-content {
              padding: 30px;  
          }
  
          /* Default all sections to be hidden */
          section {
              background-color: #1a1a1a; /* Solid background */
              opacity: 0;
              visibility: hidden;
              position: absolute; 
              top: 0;
              left: 15px; /* Adjusted to account for main's padding */
              right: 15px; /* Adjusted to account for main's padding */
              bottom: 15px; /* Adjusted to account for main's padding */
              transition: opacity 0.3s, visibility 0.3s;
              overflow: auto; /* To enable scrolling if content is too long */
              transition: none;
          }
  
          body:target section#mercury {
              opacity: 0;
              visibility: hidden;
          }
  
          /* Show #mercury by default. It remains in the flow so it doesn't overlay anything. */
          section#mercury {
              opacity: 1;
              visibility: visible;
              position: static;
          }
  
          /* Show targeted sections, with a higher z-index to ensure they overlay #home */
          section:target {
              opacity: 1;
              visibility: visible;
              z-index: 3;
          }
  
          /* Optional Space logo */
          .space-logo {
              position: absolute;
              top: 25px; /* Adjust spacing from the top */
              z-index: 4; /* Ensure it sits above other content */
              display: block;
              margin-left: auto;
              margin-right: auto;
              width: 50%;
          }
  
          .space-logo img {
              max-width: 90%; /* Adjust this to your desired size */
              margin: 0 auto;
              height: auto; /* Ensure aspect ratio is preserved */
          }
  
      </style>
  </head>
  
  <body>
      <div id="_" style="display: none;"></div>
      <div class="space-container">
          <!-- Planet Navigation -->
          <nav class="planet-nav">
              <!-- Optional Space Logo -->
              <!-- <div class="space-logo">
                  <img src="space-logo.png" alt="Space Exploration Logo">
              </div> -->
              <ul>
                  <li><a href="#_">Mercury</a></li> <!-- First item should be #_ -->
                  <li><a href="#venus">Venus</a></li>
                  <li><a href="#earth">Earth</a></li>
                  <li><a href="#mars">Mars</a></li>
                  <li><a href="#jupiter">Jupiter</a></li>
              </ul>
          </nav>
  
          <!-- Main Content -->
          <main class="main-content">
              <a id="default"></a>
              <section id="mercury">
                  <h1>Mercury</h1>
                  <p>Mercury is the smallest and innermost planet in the Solar System.</p>
              </section>
              
              <section id="venus">
                  <h1>Venus</h1>
                  <p>Venus is the second planet from the Sun.</p>
              </section>
  
              <section id="earth">
                  <h1>Earth</h1>
                  <p>Our home, Earth, is the third planet from the Sun and the only world known to support an atmosphere with free oxygen, oceans of water on its surface, and, life.</p>
              </section>
  
              <section id="mars">
                  <h1>Mars</h1>
                  <p>Mars is the fourth planet from the Sun and the second-smallest planet in the Solar System, being larger than only Mercury.</p>
              </section>
  
              <section id="jupiter">
                  <h1>Jupiter</h1>
                  <p>Jupiter is the fifth planet from the Sun and the largest in the Solar System.</p>
              </section>
          </main>
      </div>    
  </body>
  </html>

Space Exploration Alt

<!-- Space Exploration Alt Theme - Layout by David V. Kimball // https://create.david.qa -->

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Galactic Explorations</title>
      <style>
          
          body, h1, h2, p, ul, li, a {
              margin: 0;
              padding: 0;
              font-family: 'Arial', sans-serif;
          }
  
          body {
              background-color: #1a1a1a; /* Deep space black */
              color: #f8f8f8;  /* Star white */
              font-size: 16px;
              line-height: 1.6;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              min-height: 100vh;
              overflow: hidden;
          }
  
          a {
              text-decoration: none;
              color: #f8f8f8;
          }
  
          a:hover {
              text-decoration: underline;
          }
  
          h1 {
              margin-bottom: 20px;
              font-size: 2.5em;
          }
  
          /* Navigation bar */
          .planet-nav {
              display: flex;
              justify-content: center;
              margin-bottom: 20px;
          }
  
          .planet-nav a {
              margin: 0 10px;
          }
  
          /* Main Content */
          .main-content {
              max-width: 100%;  /* Default to full width for mobile */
              margin: 0 auto; /* centers the main content */
              background-color: #1a1a1a; 
              position: relative;
              height: 60vh;
              overflow-y: auto;
              padding: 20px;
              border: 3px solid #4a90e2; /* Horizon blue */
              border-radius: 20px;
              box-sizing: border-box;  
          }
  
          @media (min-width: 900px) {  /* This breakpoint can be adjusted based on when you want the design to change */
              .main-content {
                  width: 800px;  /* Set a fixed width for larger screens */
                  min-width: 800px;  /* Ensure it doesn't shrink below this for larger screens */
              }
          }
  
          .main-content > section:not(#mercury) {
              padding: 20px 20px; /* Padding for sections, excluding #home */
          }
  
          .main-content img {
              max-width: 100%;
          }
  
          /* Default all sections to be hidden */
          section {
              background-color: #1a1a1a; /* Solid background */
              opacity: 0;
              visibility: hidden;
              position: absolute; 
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              transition: none;
              overflow: auto; /* To enable scrolling if content is too long */
          }
  
          body:target section#mercury {
              opacity: 0;
              visibility: hidden;
          }
  
          /* Show #mercury by default. It remains in the flow so it doesn't overlay anything. */
          section#mercury {
              opacity: 1;
              visibility: visible;
              position: static;
          }
  
          /* Hide mercury when any other section is targeted */
          section:target ~ #mercury {
              opacity: 0;
              visibility: hidden;
              position: absolute; /* Remove it from the flow */
          }
  
          /* Show targeted sections, with a higher z-index to ensure they overlay #home */
          section:target {
              opacity: 1;
              visibility: visible;
              z-index: 3;
              position: absolute; /* Ensure they are taken out of the flow */
          }
  
  
      </style>
  </head>
  <body>
      <div id="_" style="display: none;"></div>
      <h1>Galactic Explorations</h1>
      <!-- Planet Navigation -->
      <nav class="planet-nav">
          <a href="#_">Mercury</a> <!-- First item should be #_ -->
          <a href="#venus">Venus</a>
          <a href="#earth">Earth</a>
          <a href="#mars">Mars</a>
          <a href="#jupiter">Jupiter</a>
      </nav>
      <!-- Main Content -->
      <main class="main-content">
          <a id="default"></a>
          <section id="mercury" class="active-section">
              <h2>Mercury</h2>
              <p>Mercury is the smallest and innermost planet in the Solar System.</p>
          </section>
          
          <section id="venus">
              <h2>Venus</h2>
              <p>Venus is the second planet from the Sun.</p>
          </section>
  
          <section id="earth">
              <h2>Earth</h2>
              <p>Our home, Earth, is the third planet from the Sun and the only world known to support an atmosphere with free oxygen, oceans of water on its surface, and, life.</p>
          </section>
  
          <section id="mars">
              <h2>Mars</h2>
              <p>Mars is the fourth planet from the Sun and the second-smallest planet in the Solar System, being larger than only Mercury.</p>
          </section>
  
          <section id="jupiter">
              <h2>Jupiter</h2>
              <p>Jupiter is the fifth planet from the Sun and the largest in the Solar System.</p>
          </section>
      </main>
  </div>
  </body>
  </html>

Terms of Use

Please link back to this site in some capacity if you use one of my themes.

One way you can link to me is by using this button!

<a href="https://create.david.qa/"><img src="https://create.david.qa/images/davidqa.gif" alt="create.david.qa"></a>

More Layouts

Check out the links page to find more cool free layouts.