<div class="options">
<button id="normal">Normal</button>

<label for="cars">Block ManHole</label>

<select id="manholes" onChange="create_block(this.value)">
  <option value="-1">select</option>
  <option value="0">1</option>
  <option value="1">2</option>
  <option value="2">3</option>
  <option value="3">4</option>
    <option value="4">5</option>
  <option value="5">6</option>

</select>

<button id="increaseflow">Increase Water Flow</button>
<button id="decreaseflow">Decrease Water Flow</button>
</div>
<div style="padding: 10px;">
  <div class="sewage-water">
    <br>
    <div class="sewage-cap">
      <p class="sewage-cap-part1"></p>

      <div class="sewage-cap-manhole"></div>
      <p class="sewage-cap-part2"></p>

      <div class="sewage-cap-manhole"></div>
      <p class="sewage-cap-part2"></p>

      <div class="sewage-cap-manhole"></div>
      <p class="sewage-cap-part2"></p>

      <div class="sewage-cap-manhole"></div>
      <p class="sewage-cap-part2"></p>

      <div class="sewage-cap-manhole"></div>
      <p class="sewage-cap-part2"></p>

      <div class="sewage-cap-manhole"></div>

    </div>
    <div class="sewage-cementblock">
    </div>
    <div class="sewage-section1">
      <p class="sewage-section1-part1">
      </p>
      <div class="sewage-manhole">
        <div class="sewage-manhole-bar"></div>
        <p class="sewage-manhole-region"></p>
        <div class="sewage-manhole-bar"></div>
      </div>
      <p class="sewage-section1-part2"></p>
      <div class="sewage-manhole">
        <div class="sewage-manhole-bar"></div>
        <p class="sewage-manhole-region"></p>
        <div class="sewage-manhole-bar"></div>
      </div>

      <p class="sewage-section1-part2"></p>

      <div class="sewage-manhole">
        <div class="sewage-manhole-bar"></div>
        <p class="sewage-manhole-region"></p>
        <div class="sewage-manhole-bar"></div>
      </div>

      <p class="sewage-section1-part2"></p>

      <div class="sewage-manhole">
        <div class="sewage-manhole-bar"></div>
        <p class="sewage-manhole-region"></p>
        <div class="sewage-manhole-bar"></div>
      </div>

      <p class="sewage-section1-part2"></p>

      <div class="sewage-manhole">
        <div class="sewage-manhole-bar"></div>
        <p class="sewage-manhole-region"></p>
        <div class="sewage-manhole-bar"></div>
      </div>

      <p class="sewage-section1-part2"></p>
      <div class="sewage-manhole">
        <div class="sewage-manhole-bar"></div>
        <p class="sewage-manhole-region"></p>
        <div class="sewage-manhole-bar"></div>
      </div>

      <p class="sewage-section1-part3">
      </p>
    </div>

    <div class="sewage-section2"></div>

    <div class="marquee"><span>
        <div class="firstClouds" style="width: 180px;height: 50px;">
          <svg id="svgCloud" data-name="clouder" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 348 164">

            <path class="cloud1Fill"
              d="M348,107.5a54.5,54.5,0,0,1-94.87,36.61,77.55,77.55,0,0,1-81.57-1.43A73,73,0,0,1,71,145.07,42.48,42.48,0,1,1,49.61,71.59,73,73,0,0,1,154.85,26.84,77.51,77.51,0,0,1,287.16,53.37,53,53,0,0,1,293.5,53,54.5,54.5,0,0,1,348,107.5Z" />
          </svg>
        </div>
      </span>
      <span>
        <div class="firstClouds" style="width: 160px;height: 40px;">
          <svg id="svgCloud" data-name="clouder" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 348 164">

            <path class="cloud1Fill"
              d="M348,107.5a54.5,54.5,0,0,1-94.87,36.61,77.55,77.55,0,0,1-81.57-1.43A73,73,0,0,1,71,145.07,42.48,42.48,0,1,1,49.61,71.59,73,73,0,0,1,154.85,26.84,77.51,77.51,0,0,1,287.16,53.37,53,53,0,0,1,293.5,53,54.5,54.5,0,0,1,348,107.5Z" />
          </svg>
        </div>
      </span> <span>
        <div class="firstClouds" style="width: 160px;height: 43px;">
          <svg id="svgCloud" data-name="clouder" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 348 164">

            <path class="cloud1Fill"
              d="M348,107.5a54.5,54.5,0,0,1-94.87,36.61,77.55,77.55,0,0,1-81.57-1.43A73,73,0,0,1,71,145.07,42.48,42.48,0,1,1,49.61,71.59,73,73,0,0,1,154.85,26.84,77.51,77.51,0,0,1,287.16,53.37,53,53,0,0,1,293.5,53,54.5,54.5,0,0,1,348,107.5Z" />
          </svg>
        </div>
      </span> <span>
        <div class="firstClouds" style="width: 170px;height: 42px;">
          <svg id="svgCloud" data-name="clouder" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 348 164">

            <path class="cloud1Fill"
              d="M348,107.5a54.5,54.5,0,0,1-94.87,36.61,77.55,77.55,0,0,1-81.57-1.43A73,73,0,0,1,71,145.07,42.48,42.48,0,1,1,49.61,71.59,73,73,0,0,1,154.85,26.84,77.51,77.51,0,0,1,287.16,53.37,53,53,0,0,1,293.5,53,54.5,54.5,0,0,1,348,107.5Z" />
          </svg>
        </div>
      </span> <span>
        <div class="firstClouds" style="width: 172px;height: 40px;">
          <svg id="svgCloud" data-name="clouder" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 348 164">

            <path class="cloud1Fill"
              d="M348,107.5a54.5,54.5,0,0,1-94.87,36.61,77.55,77.55,0,0,1-81.57-1.43A73,73,0,0,1,71,145.07,42.48,42.48,0,1,1,49.61,71.59,73,73,0,0,1,154.85,26.84,77.51,77.51,0,0,1,287.16,53.37,53,53,0,0,1,293.5,53,54.5,54.5,0,0,1,348,107.5Z" />
          </svg>
        </div>
      </span> <span>
        <div class="firstClouds" style="width: 150px;height: 70px;">
          <svg id="svgCloud" data-name="clouder" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 348 164">

            <path class="cloud1Fill"
              d="M348,107.5a54.5,54.5,0,0,1-94.87,36.61,77.55,77.55,0,0,1-81.57-1.43A73,73,0,0,1,71,145.07,42.48,42.48,0,1,1,49.61,71.59,73,73,0,0,1,154.85,26.84,77.51,77.51,0,0,1,287.16,53.37,53,53,0,0,1,293.5,53,54.5,54.5,0,0,1,348,107.5Z" />
          </svg>
        </div>
      </span> <span>
        <div class="firstClouds" style="width: 150px;height: 70px;">
          <svg id="svgCloud" data-name="clouder" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 348 164">

            <path class="cloud1Fill"
              d="M348,107.5a54.5,54.5,0,0,1-94.87,36.61,77.55,77.55,0,0,1-81.57-1.43A73,73,0,0,1,71,145.07,42.48,42.48,0,1,1,49.61,71.59,73,73,0,0,1,154.85,26.84,77.51,77.51,0,0,1,287.16,53.37,53,53,0,0,1,293.5,53,54.5,54.5,0,0,1,348,107.5Z" />
          </svg>
        </div>
      </span> <span>
        <div class="firstClouds" style="width: 150px;height: 30px;">
          <svg id="svgCloud" data-name="clouder" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 348 164">

            <path class="cloud1Fill"
              d="M348,107.5a54.5,54.5,0,0,1-94.87,36.61,77.55,77.55,0,0,1-81.57-1.43A73,73,0,0,1,71,145.07,42.48,42.48,0,1,1,49.61,71.59,73,73,0,0,1,154.85,26.84,77.51,77.51,0,0,1,287.16,53.37,53,53,0,0,1,293.5,53,54.5,54.5,0,0,1,348,107.5Z" />
          </svg>
        </div>
      </span>
      <span>
        <div class="firstClouds" style="width: 170px;height: 40px;">
          <svg id="svgCloud" data-name="clouder" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 348 164">

            <path class="cloud1Fill"
              d="M348,107.5a54.5,54.5,0,0,1-94.87,36.61,77.55,77.55,0,0,1-81.57-1.43A73,73,0,0,1,71,145.07,42.48,42.48,0,1,1,49.61,71.59,73,73,0,0,1,154.85,26.84,77.51,77.51,0,0,1,287.16,53.37,53,53,0,0,1,293.5,53,54.5,54.5,0,0,1,348,107.5Z" />
          </svg>
        </div>
      </span> <span>
        <div class="firstClouds" style="width: 150px;height: 20px;">
          <svg id="svgCloud" data-name="clouder" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 348 164">

            <path class="cloud1Fill"
              d="M348,107.5a54.5,54.5,0,0,1-94.87,36.61,77.55,77.55,0,0,1-81.57-1.43A73,73,0,0,1,71,145.07,42.48,42.48,0,1,1,49.61,71.59,73,73,0,0,1,154.85,26.84,77.51,77.51,0,0,1,287.16,53.37,53,53,0,0,1,293.5,53,54.5,54.5,0,0,1,348,107.5Z" />
          </svg>
        </div>
      </span>
      <span>
        <div class="firstClouds" style="width: 150px;height: 45px;">
          <svg id="svgCloud" data-name="clouder" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 348 164">

            <path class="cloud1Fill"
              d="M348,107.5a54.5,54.5,0,0,1-94.87,36.61,77.55,77.55,0,0,1-81.57-1.43A73,73,0,0,1,71,145.07,42.48,42.48,0,1,1,49.61,71.59,73,73,0,0,1,154.85,26.84,77.51,77.51,0,0,1,287.16,53.37,53,53,0,0,1,293.5,53,54.5,54.5,0,0,1,348,107.5Z" />
          </svg>
        </div>
      </span>

      <span>
        <div class="firstClouds" style="width: 90px;height: 35px;">
          <svg id="svgCloud" data-name="clouder" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 348 164">

            <path class="cloud1Fill"
              d="M348,107.5a54.5,54.5,0,0,1-94.87,36.61,77.55,77.55,0,0,1-81.57-1.43A73,73,0,0,1,71,145.07,42.48,42.48,0,1,1,49.61,71.59,73,73,0,0,1,154.85,26.84,77.51,77.51,0,0,1,287.16,53.37,53,53,0,0,1,293.5,53,54.5,54.5,0,0,1,348,107.5Z" />
          </svg>
        </div>
      </span>
      <span>
        <div class="firstClouds" style="width: 160px;height: 40px;">
          <svg id="svgCloud" data-name="clouder" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 348 164">

            <path class="cloud1Fill"
              d="M348,107.5a54.5,54.5,0,0,1-94.87,36.61,77.55,77.55,0,0,1-81.57-1.43A73,73,0,0,1,71,145.07,42.48,42.48,0,1,1,49.61,71.59,73,73,0,0,1,154.85,26.84,77.51,77.51,0,0,1,287.16,53.37,53,53,0,0,1,293.5,53,54.5,54.5,0,0,1,348,107.5Z" />
          </svg>
        </div>
      </span>
      <span>
        <div class="firstClouds" style="width: 160px;height: 43px;">
          <svg id="svgCloud" data-name="clouder" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 348 164">

            <path class="cloud1Fill"
              d="M348,107.5a54.5,54.5,0,0,1-94.87,36.61,77.55,77.55,0,0,1-81.57-1.43A73,73,0,0,1,71,145.07,42.48,42.48,0,1,1,49.61,71.59,73,73,0,0,1,154.85,26.84,77.51,77.51,0,0,1,287.16,53.37,53,53,0,0,1,293.5,53,54.5,54.5,0,0,1,348,107.5Z" />
          </svg>
        </div>
      </span>
      <span>
        <div class="firstClouds" style="width: 170px;height: 42px;">
          <svg id="svgCloud" data-name="clouder" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 348 164">

            <path class="cloud1Fill"
              d="M348,107.5a54.5,54.5,0,0,1-94.87,36.61,77.55,77.55,0,0,1-81.57-1.43A73,73,0,0,1,71,145.07,42.48,42.48,0,1,1,49.61,71.59,73,73,0,0,1,154.85,26.84,77.51,77.51,0,0,1,287.16,53.37,53,53,0,0,1,293.5,53,54.5,54.5,0,0,1,348,107.5Z" />
          </svg>
        </div>
      </span>
      <span>
        <div class="firstClouds" style="width: 172px;height: 40px;">
          <svg id="svgCloud" data-name="clouder" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 348 164">

            <path class="cloud1Fill"
              d="M348,107.5a54.5,54.5,0,0,1-94.87,36.61,77.55,77.55,0,0,1-81.57-1.43A73,73,0,0,1,71,145.07,42.48,42.48,0,1,1,49.61,71.59,73,73,0,0,1,154.85,26.84,77.51,77.51,0,0,1,287.16,53.37,53,53,0,0,1,293.5,53,54.5,54.5,0,0,1,348,107.5Z" />
          </svg>
        </div>
      </span>
      <span>
        <div class="firstClouds" style="width: 150px;height: 70px;">
          <svg id="svgCloud" data-name="clouder" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 348 164">

            <path class="cloud1Fill"
              d="M348,107.5a54.5,54.5,0,0,1-94.87,36.61,77.55,77.55,0,0,1-81.57-1.43A73,73,0,0,1,71,145.07,42.48,42.48,0,1,1,49.61,71.59,73,73,0,0,1,154.85,26.84,77.51,77.51,0,0,1,287.16,53.37,53,53,0,0,1,293.5,53,54.5,54.5,0,0,1,348,107.5Z" />
          </svg>
        </div>
      </span>
    </div>

    <div class="sewage-section3">

    </div>

    <div class="sewage-section4"></div>

  </div>

</div>
.options{
  float:right;
}
.sewage-water {
  height: 390px;
  box-shadow: 2px 2px 3px 5px rgba(170, 182, 196, 0.23);
  float: left;
  margin-top: 20px;
  width: 100%;
  overflow-x: scroll;
}
.sewage-cap {
  width: 2800px;
  height: 15px;
  float: left;
  margin-top: 20px;
}

.sewage-cap-part1 {
  width: 90px;
  height: 15px;
  float: left;
}

.sewage-cap-manhole {
  width: 250px;
  height: 15px;
  background-color: black;
  float: left;
}

.sewage-cap-part2 {
  width: 220px;
  height: 15px;
  float: left;
}
.sewage-cementblock {
  width: 2800px;
  height: 50px;
  background-color: #4b49498f;
  float: left;
}

.sewage-section1 {
  width: 2800px;
  height: 85px;
  float: left;
}
.sewage-section1-part1 {
  width: 90px;
  height: 70px;
  float: left;
  border-bottom-style: solid;
  border-bottom-width: 15px;
  margin: 0px;
  background-color: #4b49498f;
}
.sewage-manhole {
  width: 250px;
  height: 85px;
  float: left;
}
.sewage-manhole-region {
  height: 85px;
  width: 210px;
  float: left;
  background-color: white;
}
.sewage-manhole-bar {
  float: left;
  height: 85px;
  background-color: black;
  width: 20px;
}

.sewage-section1-part2 {
  width: 220px;
  height: 70px;
  float: left;
  background-color: #4b49498f;
  margin: 0px;
  border-bottom-style: solid;
  border-bottom-width: 15px;
}
.sewage-section1-part3 {
  width: 110px;
  height: 70px;
  float: left;
  background-color: #4b49498f;
  margin: 0px;
  border-bottom-style: solid;
  border-bottom-width: 15px;
}

.sewage-section2 {
  float: left;
  height: 35px;
  background-color: #fff;
  width: 2800px;
}
.sewage-section3 {
  float: left;
  height: 70px;
  background-color: #4b4b4b;
  width: 2800px;
}
.sewage-section4 {
  height: 18px;
  background-color: black;
  width: 2800px;
  float: left;
}
.dot {
  height: 27px;
  width: 27px;
  top: 2px;
  margin-top: 20px;
  float: right;
  background-color: #1ece10;
  border-radius: 40px;
  display: inline-block;
}
.marquee {
  width: 2800px;
  margin: 0 auto;
  overflow: hidden;
  white-space: nowrap;
  float: left;
  height: 18px;
  width: 2800px;
  background-color:#fff;
}
.marquee span {
  display: inline-block;
  font-size: 20px;
  position: relative;
  left: 100%;
  animation: marquee 8.8s linear infinite;
}
.marquee:hover span {
  animation-play-state: paused;
}

.cloud1Fill {
  fill: #4b4b4b;
}

.marquee span:nth-child(1) {
  animation-delay: 0.3s;
}
.marquee span:nth-child(2) {
  animation-delay: 1.3s;
}
.marquee span:nth-child(3) {
  animation-delay: 2.1s;
}
.marquee span:nth-child(4) {
  animation-delay: 3.4s;
}
.marquee span:nth-child(5) {
  animation-delay: 4.2s;
}
.marquee span:nth-child(6) {
  animation-delay: 4.4s;
}
.marquee span:nth-child(7) {
  animation-delay: 5.5s;
}
.marquee span:nth-child(8) {
  animation-delay: 5.7s;
}
.marquee span:nth-child(9) {
  animation-delay: 6s;
}
.marquee span:nth-child(10) {
  animation-delay: 6.1s;
}
.marquee span:nth-child(11) {
  animation-delay: 6.9s;
}
.marquee span:nth-child(12) {
  animation-delay: 7.2s;
}
.marquee span:nth-child(13) {
  animation-delay: 7.9s;
}
.marquee span:nth-child(14) {
  animation-delay: 8.1s;
}
.marquee span:nth-child(15) {
  animation-delay: 8.8s;
}
.marquee span:nth-child(16) {
  animation-delay: 9.8s;
}
.marquee span:nth-child(17) {
  animation-delay: 10.8s;
}
.marquee span:nth-child(18) {
  animation-delay: 11.2s;
}
@keyframes marquee {
  0% {
    left: -80%;
  }
  100% {
    left: 100%;
  }
}

document.addEventListener("DOMContentLoaded", function() {
  document.getElementById("normal").addEventListener("click", normal);

  document
    .getElementById("increaseflow")
    .addEventListener("click", increaseflow);

  document
    .getElementById("decreaseflow")
    .addEventListener("click", decreaseflow);
});

function normal() {
  
  const elem = document.getElementsByClassName("sewage-manhole-region");
  for (let i = 0; i < elem.length; i++) {
    document.getElementsByClassName("sewage-manhole-region")[
      i
    ].style.backgroundColor = "#fff";
  }
  document.getElementsByClassName("sewage-section3")[0].style.height = "70px";
  document.getElementsByClassName("sewage-section2")[0].style.height = "35px";
  document.getElementsByClassName("sewage-section3")[0].style.backgroundColor =
    "#4b4b4b";
  document.getElementsByClassName("sewage-section2")[0].style.backgroundColor =
    "#fff";
  document.getElementsByClassName("marquee")[0].style.backgroundColor = "#fff";
}
function decreaseflow() {
  normal();
  document.getElementsByClassName("sewage-section3")[0].style.height = "20px";
  document.getElementsByClassName("sewage-section2")[0].style.height = "65px";
}
function increaseflow() {
  normal();
  document.getElementsByClassName("sewage-section3")[0].style.height = "100px";
  document.getElementsByClassName("sewage-section2")[0].style.height = "5px";
}

function create_block(manhole_no) {
  normal();
  if (manhole_no > -1) {
    document.getElementsByClassName(
      "sewage-section3"
    )[0].style.backgroundColor = "#4b4b4b";
    document.getElementsByClassName(
      "sewage-section2"
    )[0].style.backgroundColor = "#4b4b4b";
    document.getElementsByClassName("marquee")[0].style.backgroundColor =
      "#4b4b4b";
    document.getElementsByClassName("sewage-manhole-region")[
      manhole_no
    ].style.backgroundColor = "#4b4b4b";
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.