How can I add a black box on an image with responsive design?

This is a Codecademy project, but they don't have a solution and I am trying to do it by myself. So as you can see, if you open this in a large window it appears fine. But there is one thing I am really struggling with.

Those black boxes in the top and bottom image. I used absolute position to translate them there, which probably isn't the best idea, but I didn't know how else to do it.

Any ideas on better ways to do it for a more responsive design?

html {
  font-family: Helvetica;
  font-size: 22px;
  color: seashell;
  background-color: black;
  opacity: 0.9;
  text-align: center;
}

body {
  padding: 0;
  margin: 0;
}

header {
  position: fixed;
  width: 100%;
  height: 69px;
  background-color: hsl(0, 0%, 0%);
  border-bottom: solid 1px white;
  z-index: 10;
}

header ul {
  float: right;
}

header li {
  display: inline-block;
  margin-right: 20px;
  text-decoration: underline;
}

header img {
  height: 50px;
  float: left;
  padding-left: 10px;
  margin-top: 9px;
}

.top-image img {
  max-height: 700px;
  margin-top: 69px;
  max-width: 1200px;
  height: 90%;
  width: 90%;
}

.text-center {
  position: absolute;
  top: 330px;
  background-color: black;
  width: 100%;
}

.teas {
  max-width: 1000px;
  text-align: center;
  margin: 0 auto;
}

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.col {
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
}

.image {
  max-width: 300px;
}

figcaption {
  font-weight: 700;
  padding: 10px;
}

.bottom {
  height: 500px;
  width: 1200px;
  margin: 0 auto;
  overflow: hidden;
}

.bottom-image {
  width: 100%;
  height: 100%;
  background-color: black;
  background-position: center;
  background-size: cover;
  background-image: url("https://content.codecademy.com/courses/freelance-1/unit-4/img-locations-background.jpg");
}

.bottom h2 {
  transform: translatey(100px);
}

.blackbox-1 {
  position: absolute;
  background-color: black;
  z-index: 100;
  width: 300px;
  transform: translate(110px, -350px);
}

.blackbox-2 {
  position: absolute;
  background-color: black;
  z-index: 100;
  width: 300px;
  transform: translate(450px, -350px);
}

.blackbox-3 {
  position: absolute;
  background-color: black;
  z-index: 100;
  width: 300px;
  transform: translate(790px, -350px);
}

.final {
  height: 200px;
}

footer {
  text-align: left;
  padding: 10px;
}

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Tea Cozy</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="./resources/index.css">
</head>

<body>
  <header>
    <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-tea-cozy-logo.png" />
    <ul>
      <li>Mission</li>
      <li>Featured Tea</li>
      <li>Locations</li>
    </ul>
  </header>
  <div class="top-image">
    <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg" />
  </div>
  <div class="text-center">
    <h2>Our Mission</h2>
    <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
  </div>
  <div class="teas">
    <h2>Tea of the Month</h2>
    <h4>What's Steeping at The Tea Cozy?</h4>
    <div class="container">
      <div class="col">
        <figure>
          <img class="image" src="https://content.codecademy.com/courses/freelance-1/unit-4/img-bedford-bizarre.jpg" />
          <figcaption>Bedford Bizarre Tea</figcaption>
        </figure>
        <figure>
          <img class="image" src="https://content.codecademy.com/courses/freelance-1/unit-4/img-berryblitz.jpg" />
          <figcaption>Fall berry Blitz Tea</figcaption>
        </figure>
      </div>
      <div class="col">
        <figure>
          <img class="image" src="https://content.codecademy.com/courses/freelance-1/unit-4/img-donut.jpg" />
          <figcaption>Seasonal Donuts</figcaption>
        </figure>
        <figure>
          <img class="image" src="https://content.codecademy.com/courses/freelance-1/unit-4/img-myrtle-ave.jpg" />
          <figcaption>Myrtle Ave Tea</figcaption>
        </figure>
      </div>
      <div class="col">
        <figure>
          <img class="image" src="https://content.codecademy.com/courses/freelance-1/unit-4/img-spiced-rum.jpg" />
          <figcaption>Spiced Rum Tea</figcaption>
        </figure>
      </div>
    </div>
  </div>
  <div class="bottom">
    <div class="bottom-image">
      <h2>Locations</h2>
    </div>
    <div class="blackbox-1">
      <h3>Downtown</h3>
      <h4>384 West 4th St</h4>
      <h4>Suite 108</h4>
      <h4>Portland, Maine</h4>
    </div>
    <div class="blackbox-2">
      <h3>Downtown</h3>
      <h4>384 West 4th St</h4>
      <h4>Suite 108</h4>
      <h4>Portland, Maine</h4>
    </div>
    <div class="blackbox-3">
      <h3>Downtown</h3>
      <h4>384 West 4th St</h4>
      <h4>Suite 108</h4>
      <h4>Portland, Maine</h4>
    </div>
  </div>
  <div class="final">
    <h2>The Tea Cozy</h2>
    <h5>[email protected]</h5>
    <h5>917-546-8464</h5>
  </div>
  <footer>
    <h5>copyright The Tea Cozy 2017</h5>
  </footer>
</body>

Solution

Try not to use fixed width when you want to get a responsive website. I recommend to use mostly flexbox and % widths. And only give max-width to container layout elements.

I wrote over your code to make some of the parts responsive, only some modifications and proposals, otherwise you won't learn if I do it for you.

For your blackbox on your image, there's few solutions. The one you did with absolute position. Then you need a parent element and give it the position relative, so the absolute element can adapt to the parent.

Then for the responsive side, I added @media queries that allows you to set font size for each width of devices.

html{
    font-family: Helvetica;
    color:seashell;
    background-color: black;
    opacity: 0.9;
    text-align: center;
}
body{
    padding: 0;
    margin: 0;
}

header{
  height: 69px;
  margin-bottom: 2rem;
}

header .header-wrapper {
    position: fixed;
    width: 100%;
    height: 69px;
    background-color: hsl(0, 0%, 0%);
    border-bottom: solid 1px white;
    z-index: 10;
}

header ul{
    float: right;
}

header li{
    display: inline-block;
    margin-right: 20px;
    text-decoration: underline;
}
header img{
    height: 50px;
    float: left;
    padding-left: 10px;
    margin-top: 9px;
}

.image-wrapper {
  position: relative;
}

.top-image img{
    max-height: 700px;
    max-width: 1200px;
    height: 90%;
    width: 90%;

}
.text-center{
    position: absolute;
    background-color: black;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
}

.text-center h2 {
  font-size: 1rem;
}

.text-center h4 {
  font-size: 1rem;
}

.teas{
    max-width: 1000px;
    text-align: center;
    margin: 0 auto;
}

.container{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.col{
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
    max-width: 300px;
}

.image {
  width: 100%;
}

figcaption{
    font-weight: 700;
    padding: 10px;
}

.bottom{
    height: auto;
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden;
    background-image: url("https://content.codecademy.com/courses/freelance-1/unit-4/img-locations-background.jpg");
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4rem 0;
}

.bottom-title {
  margin: 0;
  margin-bottom: 1rem;
}

.wrapper-content {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1rem;
}

@media screen and (min-width: 768px){
  .text-center h4 {
    font-size: 22px;
  }
  
  .wrapper-content {
  grid-template-columns: repeat(2, minmax(0, 1fr));
    
  }
}

@media screen and (min-width: 992px){
  .wrapper-content {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.bottom-image{
    width: 100%;
    height: 100%;
    background-color: black;
    background-position: center;
    background-size: cover;
    background-image: url("https://content.codecademy.com/courses/freelance-1/unit-4/img-locations-background.jpg");
}

.blackbox{
    background-color: black;
    z-index: 100;
  width: 240px;

}
.blackbox-2{
    position: absolute;
    background-color: black;
    z-index: 100;
    width: 300px;
    transform: translate(450px, -350px);
}
.blackbox-3{
    background-color: black;
    z-index: 100;
    width: 300px;
    transform: translate(790px, -350px);
}

.final{
    height: 200px;
}

footer{
    text-align: left;
    padding: 10px;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Tea Cozy</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="./resources/index.css">
    </head>
    <body>
              <header>
          <div class="header-wrapper">
            <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-tea-cozy-logo.png"/>
            <ul>
                <li>Mission</li>
                <li>Featured Tea</li>
                <li>Locations</li>
            </ul>
          </div>
        </header>
        <div class="image-wrapper">
          <div class="top-image">
            <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg"/>
          </div>
          <div class="text-center">
              <h2>Our Mission</h2>
              <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, 
                  Small Batch, Fair Trade, Organic Tea</h4>
          </div>
        </div>
        <div class="teas">
            <h2>Tea of the Month</h2>
            <h4>What's Steeping at The Tea Cozy?</h4>
            <div class="container">
                <div class="col">
                    <figure>
                        <img class="image" src="https://content.codecademy.com/courses/freelance-1/unit-4/img-bedford-bizarre.jpg"/>
                        <figcaption>Bedford Bizarre Tea</figcaption>
                    </figure>
                    <figure>
                        <img class="image" src="https://content.codecademy.com/courses/freelance-1/unit-4/img-berryblitz.jpg"/>
                        <figcaption>Fall berry Blitz Tea</figcaption>
                    </figure>
                </div>
                <div class="col">
                    <figure>
                        <img class="image"                                            src="https://content.codecademy.com/courses/freelance-1/unit-4/img-donut.jpg"/>
                        <figcaption>Seasonal Donuts</figcaption>
                    </figure>
                    <figure>
                        <img class="image" src="https://content.codecademy.com/courses/freelance-1/unit-4/img-myrtle-ave.jpg"/>
                        <figcaption>Myrtle Ave Tea</figcaption>
                    </figure>
                </div>
                <div class="col">
                    <figure>
                        <img class="image" src="https://content.codecademy.com/courses/freelance-1/unit-4/img-spiced-rum.jpg"/>
                        <figcaption>Spiced Rum Tea</figcaption>
                    </figure>
                </div>
            </div>
        </div>
        <div class="bottom">
          <div class="bottom-container">            
                <h2 class="bottom-title">Locations</h2>
          <div class="wrapper-content">           
            <div class="blackbox">
                <h3>Downtown</h3>
                <h4>384 West 4th St</h4>
                <h4>Suite 108</h4>
                <h4>Portland, Maine</h4>
            </div>
            <div class="blackbox">
                <h3>Downtown</h3>
                <h4>384 West 4th St</h4>
                <h4>Suite 108</h4>
                <h4>Portland, Maine</h4>
            </div>
            <div class="blackbox">
                <h3>Downtown</h3>
                <h4>384 West 4th St</h4>
                <h4>Suite 108</h4>
                <h4>Portland, Maine</h4>
            </div>
          </div>
          </div>
        </div>
        <div class="final">
            <h2>The Tea Cozy</h2>
            <h5>[email protected]</h5>
            <h5>917-546-8464</h5>
        </div>
        <footer>
            <h5>copyright The Tea Cozy 2017</h5>
        </footer>
    </body>
</html>

I hope it helps you :)