My Blog (HTML/CSS)

<!DOCTYPE html>
<head>
  <link href="/normalize.css" rel="stylesheet">
  <style>
    header {
      text-align: center;
      background: url("images/sky.jpg");
      background-size: cover;
      color: #DAE2DE;
    }
    body {
      background: #1D1B22;
      color: #DAE2DE;
      font-family: sans-serif;
    }
    a {
      color: white;
      text-decoration: none;
      -webkit-transition: color .3s;
      transition: color .3s;
    }
    a:hover {
      color: #A1A1BE;
    }
    h1 {
      font-size: 70px;
      text-shadow: 5px 5px 5px black
    }
    h2 {
      letter-spacing: 1px;
      text-shadow: 5px 5px 5px black
    }
    p {
      letter-spacing: 2px;
      text-align: justify;
      text-indent: 50px;
    }
    img {
      margin: 40px 0px 0px 0px;
      border: 7px solid white;
      border-radius: 20px;
      -webkit-transition: opacity .3s;
      transition: opacity .3s;
    }
    img:hover {
      opacity: .7;
    }
    ul {
      padding: 10px;
      background: rgba(0,0,0,0.5);
    }
    li {
      display: inline;
      padding: 0px 10px 0px 10px;
    }
    article {
      max-width: 500px;
      padding: 15px;
      margin: 0 auto;
      border: 2px solid white;
      border-radius: 25px;
      background: #242331
      -webkit-transition: background .5s;
      transition: background .5s;
    }
    article:hover {
      background: #2B2938;
    }
    div {
      padding: 10px;
    }
    @media (max-width: 500px) {
      h1 {
        font-size: 36px;
        padding: 5px;
      }
      li {
        padding: 5px;
        display: block;
      }
    }
  </style>
</head>
<body>
  <header>
    <img src="images/profilepic.jpg" alt="profilepic" width="150" height="150">
    <h1><a href="#">Karine's Blog</a></h1>
    <ul>
      <li><a href="#">About Me</a></li>
      <li><a href="#">Good Poems</a></li>
      <li><a href="#">Better Poems</a></li>
    </ul>
  </header>
  <div>
  <article>
    <h2><a href="#">About Me</a></h2>
    <p>My name is Karine Shaver. I'm a Junior this year, and last year I was the second baseman on the school's softball team. I'm taking this class because coding interests me, and I hope to learn more about making original websites this year.</p>
    <p>Some of my hobbies include playing music, playing video games (Dragon Age), writing, and watching anime.</p>
    <p><a href="#">#about me</a> <a href="#">#CIS111</a>
      <a href="#">#blog</a></p>
    <button onclick="myFunction()">Like</button>
  </article>
  </div>
  <div>
  <article>
    <h2><a href="#">Sartorial synth Echo Park, roof party</a></h2>
    <p>chambray you probably haven't heard of them pour-over viral selvage umami skateboard VHS post-ironic selfies. Wes Anderson gentrify fanny pack twee, bicycle rights bitters blog keffiyeh plaid flannel. Tonx irony cliche sustainable mlkshk bitters. Four loko leggings chambray Vice.</p>
    <p><a href="#">#tag1</a> <a href="#">#tag2</a>
      <a href="#">#tag3</a></p>
    <button onclick="myFunction()">Like</button>
  </article>
  </div>
  <div>
  <article>
    <h2><a href="#">Forage food truck keytar master cleanse</a></h2>
    <p>ethical thundercats sustainable locavore quinoa Neutra. Aesthetic Cosby sweater single-origin coffee, bicycle rights organic lo-fi street art american apparel ennui four loko ethnic Brooklyn small batch. Forage YOLO polaroid</p>
    <p><a href="#">#tag1</a> <a href="#">#tag2</a>
      <a href="#">#tag3</a></p>
    <button onclick="myFunction()">Like</button>
  </article>
  </div>
  <script>
    function myFunction() {
    alert("Liked!");
  }
  </script>
</body>