My Website Title

A photo of a person holding a vintage camera and peering down into its viewfinder.

About

Welcome to my brand new website! I'm learning how to do this from scratch. Editing HTML code is new and interesting...

Like this site?

Click here to see and copy the code.

<!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>My Website Title</title>
  
  <style>
    /*
,------------- THIS BIT IS SO STYLISH -------------,
| In this <style> section, the cool stuff happens! |
| Don't worry about it for now. Or have a play!    |
|   */
    :root {
      --thin-text: 300;
      --normal-text: 400;
      --bold-text: 500;
      color-scheme: light dark;
      font-family: system-ui, sans-serif;
      font-weight: var(--normal-text);
      line-height: 1.4;
    }

@media (prefers-color-scheme: dark) {
      :root {
        --normal-text: 300;
        --bold-text: 400;
      }
    }

header,
    footer {
      text-align: center;
      padding: 1em;
    }

main {
      margin-inline: 5vmin;
    }

h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      text-transform: uppercase;
      font-weight: var(--thin-text);
    }

a {
      color: inherit;
      text-underline-offset: 0.5em;
      text-decoration-color: color-mix(in srgb, Canvas 75%, CanvasText);
    }

a:hover {
      text-decoration-color: color-mix(in srgb, Canvas, CanvasText);
    }

header h1 {
      text-transform: uppercase;
      font-size: 3rem;
      font-weight: revert;
    }

#about {
      display: grid;
      grid-template-columns: auto auto;
      justify-content: center;
      gap: 5vmin;
    }

@media (max-width: 600px) {
      #about {
        grid-template-columns: auto;
      }
    }

#about div {
      max-width: 60ch;
    }

#about img {
      max-width: min(100%, 80ch);
      border-radius: 0.25rem;
    }

ul {
      list-style: none;
      padding-inline-start: 0;
      line-height: 3rem;
    }

footer {
      font-weight: var(--thin-text);
    }

/*                                             |
'------------- THIS BIT WAS SO STYLISH ------------'
    */
  </style>
</head>

<body>
  <header>
    <h1>
      
      My Name Here
      
    </h1>
  </header>
  <main>
    <section id="about">
      
      <image src="https://picsum.photos/id/91/480/600" alt="A photo of a person holding a vintage camera and peering down into its viewfinder." />
      
      <div>
        <h2>
          
          About
          
        </h2>
        <p>
          
          Welcome to my brand new website! I'm learning how to do this from scratch. Editing HTML code is new and interesting...
          
        </p>
        <ul>
          
          <li><a href="http://www.twitch.tv">My Twitch channel</a></li>
          <li><a href="http://www.smugmug.com/">My Photos on Smugmug</a></li>
          
        </ul>
      </div>
    </section>
  </main>
  
  <footer>
    Sara Joy 2024 - <a href="https://sarajoy.dev">sarajoy.dev</a>
  </footer>
  
</body>

</html>

or Download as an HTML file

You can use one of these free online
hosts to paste in or upload this code:

Got questions? Contact me.