adding html and css to a individual page

Hi, I'm trying to add custom HTML and CSS code to a specific page. This is the code I'm trying to add:

HTML

<div class="container">
  <img src="https://ninfuscs.com/wp-content/uploads/2019/02/Diseño-Creativo.png" alt="" />
  <p class="title">diseño gráfico</p>
  <div class="overlay"></div>
  
</div>

CSS

.container {
  position: relative;
  margin-top: 50px;
  width: 500px;
  height: 300px;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
  transition: background 0.5s ease;
}

.container:hover .overlay {
  display: block;
  background: rgba(0, 0, 0, .3);
}

img {
  position: absolute;
  width: 500px;
  height: 300px;
  left: 0;
}

.title {
  position: absolute;
  width: 500px;
  left: 0;
  top: 120px;
  font-weight: 700;
  font-size: 30px;
  text-align: center;
  text-transform: uppercase;
  color: white;
  z-index: 1;
  transition: top .5s ease;
}

.container:hover .title {
  top: 90px;
}

.button {
  position: absolute;
  width: 500px;
  left:0;
  top: 180px;
  text-align: center;
  opacity: 0;
  transition: opacity .35s ease;
}

.button a {
  width: 200px;
  padding: 12px 48px;
  text-align: center;
  color: white;
  border: solid 2px white;
  z-index: 1;
}

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

The problem is that adding this code affects the appearance of the whole site.

What could be the solution to add the code without damaging the rest of the site?

This is the page: https://ninfuscs.com/services-test/