<div class="bottle">
    <div class="holeOver1"></div>
    <div class="holeOver2"></div>
  <div class="rectangle">
    <div class="reflect"></div>
  </div>
  <h1>WATER</h1>
  <div class="top">
    <div class="empty">
      <div class="cap">
        <div class="lines">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
    </div>
    <div class="hole"></div>
  </div>
  <div class="bottom">
    <div class="hole"></div>
    <div class="foot"></div>
  </div>
</div>
* {
  margin: 0;
}

body {
  width: 100%;
  height: 100vh;
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  background: #273c75;
  overflow: hidden;
}

.rectangle {
  width: 100%;
  position: absolute;
  bottom: -23vw;
  background: transparent;
  display: flex;
  align-items: center;
  overflow: hidden;
  height: 56vw;
  z-index: 88;
}

.bottle {
  width: 20vw;
  height: 15vw;
  background: #54b9e5;
  position: relative;
  transform: scale(0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.reflect {
  position: absolute;
  width: 50vw;
  height: 65vw;
  border-radius: 50%;
  left: -32vw;
  background: rgba(255, 255, 255, 0.15);
  z-index: 3;
}

.bottle h1 {
  color: #fff;
  font-size: 4vw;
  font-family: Arial;
  letter-spacing: 0.4vw;
}

.bottle::before,
.bottle::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2.5vw;
  background: #54b9e5;
}

.bottle::before {
  top: -3vw;
}

.bottle::after {
  bottom: -3vw;
}

.top {
  position: absolute;
  width: 100%;
  height: 15vw;
  background: #cde9f5;
  top: -18vw;
}

.hole {
  background: #96d6f0;
  width: 100%;
  height: 2.5vw;
  position: absolute;
}

.hole::after,
.holeOver1,
.holeOver2 {
  position: absolute;
  width: 2.5vw;
  height: 2.5vw;
  background: #273c75;
  border-radius: 50%;
}

.holeOver1,
.holeOver2 {
  left: -1.25vw;
  z-index: 999;
}

.holeOver1 {
  top: -8vw;
}

.holeOver2 {
  top: 20.5vw;
}

.hole::after {
  content: "";
  right: -1.25vw;
}

.top .hole {
  bottom: 2.5vw;
}

.bottom .hole {
  top: 2.5vw;
}

.bottom {
  position: absolute;
  width: 100%;
  height: 20vw;
  background: #cde9f5;
  bottom: -23vw;
}

.foot,
.foot::before,
.foot::after {
  background: #cde9f5;
  border-radius: 0 0 2.5vw 2.5vw;
  position: absolute;
}

.foot {
  width: 33.33%;
  height: 3vw;
  bottom: -2.5vw;
  left: 50%;
  transform: translateX(-50%);
}

.foot::before,
.foot::after {
  content: "";
  width: 100%;
  height: 100%;
}

.foot::before {
  left: -100%;
}

.foot::after {
  left: 100%;
}

.empty {
  position: absolute;
  top: -5vw;
  left: 0;
  width: 100%;
  height: 5.1vw;
  background: #eef6f8;
  border-radius: 10vw 10vw 0 0;
  display: flex;
  justify-content: center;
}

.empty::before {
  content: "";
  position: absolute;
  background: #eef6f8;
  width: 8vw;
  height: 4vw;
  top: -3vw;
}

.cap {
  width: 9vw;
  border-radius: 1vw;
  height: 1vw;
  background: #4ebbe9;
  position: absolute;
  top: -4vw;
}

.cap::before {
  content: "";
  position: absolute;
  width: 8vw;
  height: 3.5vw;
  background: #4ebbe9;
  top: -3.5vw;
  left: 0.5vw;
  border-radius: 0.8vw 0.8vw 0 0;
}

.lines {
  position: absolute;
  top: -3vw;
  left: 0.5vw;
  height: 3vw;
  width: 8vw;
  display: flex;
  justify-content: space-around;
}

.lines div {
  width: 0.2vw;
  border-radius: 0.2vw;
  height: 100%;
  background: #0b7cb8;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.