Baby on pillow

HTML
<div class="container"> <div class="al"> <div class="lado"></div> <div class="lado3"></div> <div class="al3"></div> <div class="baby"> <div class="legs9"></div> <div class="bebe"> <div class="hand"><div class="dedo"></div></div> <div class="brazo"></div> <div class="bodys"></div> <div class="legs12"></div> </div> <div class="face"> <div class="orejas"></div> <div class="cejas"></div> <div class="ojos3"></div> <div class="chu"></div> </div> </div> </div> </div> </div>
CSS
body{ background:black; } .container{ position:relative; width:400px; height:300px; background:#172b49; margin:231px auto; } .al{ position: absolute; width: 231px; height: 152px; margin: 20px 0; background: #a8cef7; border-radius: 50% / 10%; margin:75px 90px; } .al::before { content: ''; position: absolute; top: 10%; bottom: 10%; right: -5%; left: -5%; background: inherit; border-radius: 5% / 50%; } .al3{ position: absolute; width: 192px; height: 132px; margin: 20px 0; background: #7cbbff; border-radius: 50% / 10%; margin:12px 21px; } .al3::before { content: ''; position: absolute; top: 10%; bottom: 10%; right: -5%; left: -5%; background: inherit; border-radius: 5% / 50%; } .lado,.lado3{ position:absolute; width:35px; height:35px; border-radius:100%; background: #a8cef7; } .lado::before, .lado3::before{ content:""; position:absolute; width:35px; height:35px; border-radius:100%; background: #a8cef7; margin:0px 219px; } .lado{margin:-3px -12px;} .lado3{margin:121px -12px;} .baby{ position:absolute; margin:-370px -271px } .bebe{ position:absolute; margin:0 0; animation:sube 3s alternate infinite; } .face{ position:absolute; width:70px; height:70px; border-radius:100%; background:#F9DCC0; margin:400px 300px; animation:sube 3s alternate infinite; } .face::before{ content:""; position:absolute; width:80px; height:59px; border-radius:100%; background:#F9DCC0; border-bottom:3px solid #EA9960; margin:21px 0px; transform:rotate(-12deg) } .cejas{ position:absolute; width:16px; height:9px; border-radius:100%; border-top:1px solid #121212; margin:35px 12px; transform:rotate(-12deg) } .cejas::before{ content:""; position:absolute; width:16px; height:9px; border-radius:100%; border-top:1px solid #121212; margin:-3px 33px; transform:rotate(-12deg) } .ojos3{ position:absolute; width:25px; height:25px; border-radius:100%; border-bottom:3px solid #121212; margin:33px 9px; transform:rotate(-12deg) } .ojos3::before{ content:""; position:absolute; width:25px; height:25px; border-radius:100%; border-bottom:3px solid #121212; margin:-1px 33px; transform:rotate(-12deg) } .ojos3::after{ content:""; position:absolute; width:25px; height:25px; border-radius:100%; border-right:5px solid #212121; margin:-40px 7px; transform:rotate(-12deg) } .orejas{ position:absolute; width:30px; height:35px; border-radius:100%; background:#F9DCC0; border-left:5px solid #F9C695; margin:25px -7px; } .orejas::before{ content:""; position:absolute; width:30px; height:35px; border-radius:100%; background:#F9DCC0; border-right:5px solid #F9C695; margin:-12px 47px; transform:rotate(-12deg) } .chu{ position:absolute; width:21px; height:21px; border-radius:100%; background:#7021D1; margin:55px 32px; animation:ch .7s alternate infinite; } .chu::after{ content:""; position:absolute; width:9px; height:9px; border-radius:100%; background:#9462D1; margin:6px 6px } .chu::before{ content:""; position:absolute; width:14px; height:14px; border-radius:100%; border:3px solid #9260D1; margin:7px 3px } .brazo{ position:absolute; width: 70px; height: 150px; border-bottom: 21px solid #7021D1; border-left: 21px solid transparent; border-right: 21px solid transparent; border-radius: 100px / 100px; margin:335px 265px; transform:rotate(-55deg); animation:sube3 3s alternate infinite; } .bodys{ position:absolute; width: 65px; height: 80px; -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background:#7021D1; margin:400px 375px; transform:rotate(-80deg); } .hand{ position:absolute; width:17px; height:17px; border-radius:7px; background:#F9DCC0; margin:475px 340px; transform:rotate(-7deg) } .dedo{ position:absolute; width:14px; height:1px; background:#EA9960; margin:12px 0px } .dedo:before{ content:""; position:absolute; width:14px; height:1px; background:#EAB38C; margin:-3px 0px } .legs12{ position:absolute; width:35px; height:50px; border-radius:100%; background:#7021D1;; transform:rotate(60deg); margin:430px 400px; } .legs12::before{ content:""; position:absolute; width:21px; height:55px; border-radius:100%; background:#7021D1;; transform:rotate(-121deg); margin:5px 25px; } .legs12::after{ content:""; position:absolute; width:21px; height:17px; border-radius:100%; background:#7021D1; transform:rotate(21deg); margin:12px 50px; } .legs9{ position:absolute; width:35px; height:50px; border-radius:100%; background:#541C72; transform:rotate(30deg); margin:430px 412px; } .legs9::before{ content:""; position:absolute; width:21px; height:55px; border-radius:100%; background:#541C72; transform:rotate(-121deg); margin:3px 25px; } .legs9::after{ content:""; position:absolute; width:21px; height:17px; border-radius:100%; background:#541C72; transform:rotate(21deg); margin:12px 50px; } .redon{ position:absolute; width:231px; height:90px; border-radius:100%; background:#0D1826; margin:470px 312px } .circ3{ position:absolute; width:450px; height:450px; border-radius:100%; background:#0D1826; margin:12px 172px } @keyframes va{ 0%{transform:rotate(3deg)} 100%{transform:rotate(-3deg)} } @keyframes va3 { 0%{transform:translatex(-21px)} 100%{transform:translatex(12px)} } @keyframes ch { 0%{transform:translatey(0px);} 100%{transform:translatey(-3px);} } @keyframes sube { 0%{transform:translatey(0px)} 100%{transform:translatey(-5px)} }
JAVASCRIPT
Expand for more options Login