My Website Title

Welcome!

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

Example Article

Here's a subheading

Woohoo! My first article on my new website!

Here's the second paragraph of my first article on my new website :)
Look, this sentence is on a new line.

This article has another heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a lacus lectus. Suspendisse vestibulum eleifend dui, ac auctor urna gravida ut. Donec nec augue urna. Mauris vitae congue metus, non efficitur dui. Ut massa est, maximus id nibh vel, faucibus commodo enim. Ut suscipit dolor velit, ut commodo mauris interdum non. Pellentesque pellentesque, nibh pharetra maximus accumsan, justo turpis laoreet nibh, vel ornare tortor neque non nunc. Nam lectus dui, tincidunt eu maximus at, blandit sit amet mi. Morbi ac tempor purus, ut consequat turpis. Cras eget ligula finibus justo aliquam feugiat eget ac felis. Duis sagittis ante sed sem posuere, ac egestas dui tincidunt. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer pharetra ultrices enim. Integer rutrum, arcu vel scelerisque sollicitudin, nisi arcu placerat tellus, quis aliquam augue tortor a urna. Sed feugiat, dui quis cursus feugiat, mauris velit pharetra nunc, nec vestibulum nulla enim vitae lorem.

Fusce diam neque, pretium vel interdum consectetur, tempor id quam. Etiam at faucibus sem, quis egestas augue. Maecenas id orci id ligula eleifend suscipit. Nullam a dictum nunc, et tempus odio. Aliquam id nisi ut ex ultrices dapibus quis pellentesque lorem. Nulla facilisis justo imperdiet rutrum aliquam. Curabitur molestie, nulla eu consectetur tincidunt, odio odio cursus enim, at finibus arcu nisi eu mi. Aenean sem ante, fermentum vel interdum vitae, pharetra at nibh. Proin ut nisi et turpis dictum tincidunt vel ut risus. Duis scelerisque mauris sit amet congue auctor.

Example Article 2

Woohoo! My second article on my new website! This one has no image, I don't always need one.

Here's the second paragraph of my second article on my new website :)
Look, this sentence is on a new line.

Like this site?

Click here to see, edit, and copy or download 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 {
      /*                                           |
| try out a different color here - hex code, hsl() |
| rgb() or even a color name like RebeccaPurple:   |
|     */
      --theme-color: RebeccaPurple;
      --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;
      }
    }

body {
      margin: 0;
    }

body>* {
      padding: 0.5rem;
    }

header,
    footer {
      text-align: center;
      padding: 1em;
      background-color: color-mix(in srgb, var(--theme-color) 25%, Canvas);
    }

main>* {
      max-width: 80ch;
      margin-inline: auto;
    }

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

#intro {
      max-width: 40ch;
      margin-inline: auto;
    }

article {
      margin-block: 2em;
    }

img {
      max-width: min(100%, 80ch);
      display: block;
      margin: 1.5em auto;
      border-radius: 0.25rem;
    }

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

<body>
  <header>
    <h1>
      
      My Website Title
      
    </h1>
    <p>
      
      The Best Website You've Ever Seen!
      
    </p>
  </header>
  <main>
    <section id="intro">
      <h2>
        
        Welcome!
        
      </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>
    </section>
    <section>
      
      <article>
        
        <h2>Example Article</h2>
        
        <image src="https://picsum.photos/id/82/400/300" alt="A pretty photograph of cherry blossom." />
        
          
        <h3>Here's a subheading</h3>
        <p>Woohoo! My first article on my new website!</p>
          
        <h3>This article has another heading</h3>
        <p>Here's the second paragraph of my first article on my new website :)
        <br>Look, this sentence is on a new line.</p>
          
        
      </article>

<article>
        <h2>
          
          Example Article 2
          
        </h2>
        
        <p>Woohoo! My second article on my new website! This one has no image, I don't always need one.</p>
        <p>Here's the second paragraph of my second article on my new website :)
          <br>Look, this sentence is on a new line.
        </p>
        
      </article>
      
    </section>
  </main>
  <footer>
    
    My Name 2024 - find me at <a href="https://example.com">example.com</a>
    
  </footer>
</body>
</html>

or Download as an HTML file

You can use free online hosts to paste in or upload this code!