<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.