Fridge

HTML
<div class="container"> <div class="dis"> <div class="cuadrado"> <div class="botones"></div> <div class="bot3"></div> <div class="agua"></div> <div class="agua3"></div> <div class="botella"> <div class="reflejo3"></div> </div> </div> <div class="line"></div> </div> </div>
CSS
body{ background:black; } .container{ position:relative; width:800px; height:600px; background:#a8caed; margin:90px auto; } .dis{ position:absolute; width:271px; height:350px; background:#eaeaea; border-left:9px solid white; border-right:9px solid white; margin:121px 261px; overflow:hidden; } .line{ position:absolute; width:7px; height:350px; background:#ccc; margin:0 112px } .line::before{ content:""; position:absolute; width:12px; height:112px; background:#ccc; border-radius:12px; margin:121px -30px } .line::after{ content:""; position:absolute; width:12px; height:112px; background:#ccc; border-radius:12px; margin:122px 17px } .cuadrado{ position:absolute; width:90px; height:90px; border-top:12px solid #ccc; border-right:6px solid #f9f9f9; border-left:6px solid #ccc; border-bottom:3px solid #ccc; margin: 112px 152px; overflow:hidden; } .botones{ position:absolute; width:21px; height:6px; background:#d0378c; border-radius:3px; margin:12px 9px; } .botones::before{ content:""; display:block; width:21px; height:6px; background:#29abe1; border-radius:3px; margin:0px 53px; } .agua{ position:absolute; width:7px; height:53px; background:#bcddff; margin:18px 69px; animation:grow 3s linear infinite; } .agua3{ position:absolute; width:25px; height:30px; background:#5db8ed; margin:85px 60px; animation:grow3 3s linear infinite; } .botella{ position:absolute; width: 25px; height:45px; background:#c9eaf8; margin:50px 60px; opacity:.7; } .reflejo3{ position:absolute; width:5px; height:30px; background:white; margin:7px 17px } @keyframes grow{ 0% {height:0;} 50% {height:60px;}} @keyframes grow3{ 0% {transform: scale(1,0);} 50% {transform: scale(1,3);} 100% {transform: scale(1,3);} }
JAVASCRIPT
Expand for more options Login