Home CT Projects Web Projects Making panda using HTML and CSS Making panda using HTML and CSS 2 min read MAKING PANDA USING HTML & CSS VIEW DEMO HTML CODE <html> <head> <title>Panda by Coding Taggers </title> </head> <body> <div id="all"> <div class="ear1"></div> <div class="ear2"></div> <div class="head"> <div class="eye1"></div> <div class="eye2"></div> <div class="nose"></div> <div class="mouth"> <div class="toung"> </div> </div> </div> <div class="bottom"> <div class="hand1"></div> <div class="hand2"></div> </div> </div> <div class="web"> <a href="https://www.codingtaggers.blogspot.com/"><b>CODING TAGGERS </b> </a><br /><tt>click here ↑ to visit the website</tt> </div></body> </html> CSS CODE body { background: #000000c9; } #all { position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); box-shadow: 0px 0px 10px 5px black; } .ear1 { width:80px; height:80px; background: black; border-radius: 50px; position: absolute; z-index: 1; top:-30px; left:-25px; border-top:5px solid white; border-left:5px solid white; box-shadow: inset 7px 7px 5px 0px gray; } .ear2 { width:80px; height:80px; background: black; border-radius: 50px; position: absolute; z-index: 1; top:-30px; left:150px; border-top:5px solid white; border-right:5px solid white; box-shadow: inset -7px 7px 5px 0px gray; } .head { width:200px; height: 150px; background: white; border-radius: 70px 70px 0 0; position: relative; z-index: 2; } .head:before { content: ""; position: absolute; width:220px; height: 8px; background: red; position: absolute; top:150px; left:-10px; border-radius: 10px; box-shadow: inset 0px 0px 5px gray; } .eye1 { width:50px; height: 50px; background: black; border-radius: 30px; position: absolute; top:58px; left:28px; } .eye1:before { content: ""; position: absolute; width:20px; height: 20px; background: white; border-radius: 20px; left:20px; top:15px; } .eye2 { width:60px; height: 60px; background: black; border-radius: 30px; position: absolute; top:50px; left:110px; } .eye2:before { content: ""; position: absolute; width:35px; height: 35px; background: white; border-radius: 35px; left:20px; top:15px; } .nose { width:20px; height: 20px; background: black; position: absolute; top:100px; left:85px; border-radius: 20px; } .mouth { width: 60px; height: 60px; background: linear-gradient(to bottom,transparent 0px 35px,black 35px 60px ); position: absolute; top:88px; left:70px; border-radius: 60px; overflow: hidden; } .toung { width:50px; height: 50px; background: red; border-radius: 50px; position: relative; top:45px; left:5px; } .bottom { width:200px; height:120px; background: #FFBA75; } .hand1 { width:30px; height:80px; background: white; position: relative; float:left; left:20px; top:30px; border-radius: 0px 0px 20px 20px; box-shadow:0px 10px 18px black,inset 0px 10px 15px gray; } .hand1:before { content:""; position: absolute; width:40px; height:25px; background: red; left:-5px; border-radius: 10px 10px 10px 10px; } .hand2 { width:30px; height:80px; background: white; position: relative; float:right; top:30px; right:25px; border-radius: 0px 0px 20px 20px; box-shadow:0px 10px 18px black,inset 0px 10px 15px gray; } .hand2:before { content:""; position: absolute; width:40px; height:25px; background: red; left:-5px; border-radius: 10px 10px 10px 10px; } .bottom:before { content: ""; position: absolute; width:60px; height:55px; background:linear-gradient(to right, white 0px 40px, #FFBA75 40px 60px); top:215px; left:-50px; border-radius: 60px 0 0 60px; } .bottom:after { content: ""; position: absolute; width:60px; height:55px; background:linear-gradient(to right, transparent 0px 10px ,#FFBA75 10px 20px,white 20px 60px); top:215px; left:190px; border-radius: 0 60px 60px 0; } .web { width: 80%; height: 68px; background: teal; text-align: center; font-size: 18px; border-radius: 10px; padding-top: 6px; margin-left: 10%; margin-top: 5%; position: absolute; top: 22px; } CODEPEN
Post a Comment