Landing Page (what i have so far)

<%= @topic_view.topic.title %>
<%= @topic_view.topic.average_rating %> <%= @topic_view.topic.posts.count { |p| !!p.custom_fields['rating'] } %>

This is the first amount of coding I’ve done for the first ever website that I am currently making- it is by no means complete but I wanted to get some in progress feedback/corrections. Is there anything I’m doing wrong so far? I’m open for any critique!

My html:

<!DOCTYPE html>
<html>
<head>
  <<title>Hannah Brown</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=0.1">
</head>

<div class="topnav">
   <a class="active"
   <a href="#home">button</a>
</div>

<div class="topnav">
   <a class="active" a href="#about">ABOUT</a>
   <a href="#work">WORK</a>
   <a href="#contact">CONTACT</a>
</div>


<body>
  <h1>Hi! My name is Hannah. I'm a <span style="color:pink">Designer</span> and <span style="color:pink">Developer.</span> </h1>
  <p title="Hannah Brown" </p>
</body>

<button onclick="window.location.href"='https://changelater.com';">View my work</button>
<br>

<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial;
}

.header {
  text-align: center;
  padding: 32px;
}

.row {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
  -ms-flex: 25%; /* IE10 */
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column {
    -ms-flex: 50%;
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }
}
</style>
<body>

<!-- Photo Grid -->
<div class="row">
  <img src=".jpg" style="width:100%">
  <img src=".jpg" style="width:100%">
  <img src=".jpg" style="width:100%">
  <img src=".jpg" style="width:100%">
  <img src=".jpg" style="width:100%">
  <img src=".jpg" style="width:100%">
  </div>
</body>

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
  position: relative;
  width:50%;
}

.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transition: translate (-50%, -50%);
  -ms-transform: translate (-50%, -50%);
  text-align: center;
}

.container: hover .image {
  opacity: 0.3;
}

.container: hover .middle {
  opacity: 1;
}

.text {
  background-color: #f4ff77;
  color: yellow;
  font-size: 20px;
  padding: 20px 20px;
}
</style>
</body>

<div class="container">
  <img src=img_fillin.png" alt="Project" class="image" style="width:100%">
  <div class="middle">
    <div class="text">Musician Logo Design</div>


</html>

There is only one html element composed of an opening and closing tag. Inside of which there is a head element followed by a body element each composed of an opening and closing tag. And in your particular case one and only one style element contained in the head element composed of an opening and closing tag. For example:

<!DOCTYPE html>
<html>
  <head>
    <style>
      /* your CSS here */
    </style>
  </head>
  <body>
    <!-- your HTML here -->
  </body>
</html>