How can I make both Img and Frameset work?

Question

I am new at coding and I have an assignment of creating a social media layout. It is similar to the Facebook layout where you have a cover picture at the top and three columns below. I can make the cover picture work with css, but once I've inputted my code for the columns (frameset), it doesn't appear. I'm sorry if this was already asked.

.image1 {
  width: 100%;
  height: auto;
  position: absolute;
  top: 0px;
  right: 0px;
  z-index: 1;
}

.image2 {
  width: 200px;
  height: auto;
  position: absolute;
  top: 107px;
  left: 655px;
  z-index: 2;
}

h1 {
  font-family: Archivo Black;
  text-align: center;
  position: absolute;
  top: 276px;
  left: 619px;
  z-index: 2;
}

<img src="sea.png" class="image1">
<img src="Profile pic 2.png" class="image2">

<h1> Name </h1>

<frameset cols="25%, 50%, 25%">
  <frame name="C1" src="Left.html">
  <frame name="C2" src="Middle.html">
  <frame name="C3" src="Right.html">
</frameset>

The frameset code works, but once the img and h1 is inputted, it doesn't work.

Answer 1

Images, like all content for display, have to go in the body element.

A frameset element replaces the body element (and uses the HTML 4.x Frameset DTD instead Strict, Transitional or the modern HTML 5 approach) when used.

You can’t mix and match.

If you want a frame in a document with other content, use an iframe.