Math, asked by Thesager, 7 months ago

[tex]<!DOCTYPE html> <html lang="en"> <head> <title>Shinchan</title> </head> <body> <div class="face"> <div class="forhead"></div> <div class="cheeks"></div> <div class="ear"></div> <div class="eyebrow left"></div> <div class="eyebrow right"></div> <div class="eye left"></div> <div class="eye right"></div> <div class="mouth"></div> <div class="shy"></div> <div class="shy right"></div> </div> <style> body { background:#3e505e } .
face { height: 600px; width: 350px; position: relative; margin: auto; } .face:before { content:''; background:black; height:122px; width:95px; position:absolute; z-index:6; left:210px; top:29px; border-radius:100% 190% 100% 0%; transform: rotate(-20deg); } .
face:after { content:''; width:230px; height:180px; background:black; content:''; transform: rotate(-8deg); position:absolute; border-radius:100% 160% 100% 0%; left:70px; bottom:-14px; top:10px; z-index:5; } .forhead, .forhead:after { content: ''; width: 220px; height: 181px;
background: #fbc6a3; content: ''; transform: rotate(-3deg);
position: absolute; border-radius: 60% 120% 50% 0%; left: 67px; bottom: -14px; top: 21px; z-index: 6; } .forhead:after { width: 160px; height: 150px; border-radius: 150% 174% 159% 100%; transform: rotate(-20deg); top: 13px; left: 59px; border-top: 15px solid #fbc6a3; } .forhead:before{ background:#fbc6a3; width:60px; height:10px; content:''; position:absolute; z-index:7; left:105px; top:9px; transform: rotate(13deg); border-radius:100% } .ear { width:60px; height:50px; background:#fbc6a3; z-index:7; position:absolute; border-radius:300% 190% 200% 100%; transform: rotate(-20deg); top:110px; left:285px } .cheeks { background: #fbc6a3; width: 280px; height: 100px; border-radius: 50px 0px 50px 40px; transform: rotate(-3deg); position: relative; content: 'a'; top: 108px; left:10px } .cheeks:after { width: 297px; height: 100px; background: #fbc6a3; content: ''; transform: rotate(-3deg); position: absolute; border-radius: 100% 100% 100% 100%; left: 1px; bottom: -14px; } .eye { width:40px; height:40px; position:relative; background:black; border-radius:100%; animation: close-eye 4s none .2s infinite; } .eye:after { content:''; position:absolute; background:white; width:15px; height:15px; border-radius:100%; left:17px; top:12px; } .eye:before { content:''; position:absolute; width:70px; height:60px; border-radius:100%; border-top:2px solid black; left:-20px; margin-top:-20px; } .eye.left,.eye.right { position:absolute; top:80px; left:100px; z-index:10; } .eye.right { left:190px; top:90px; } .eyebrow { animation: eyebroani 2s linear .2s infinite; } .eyebrow,.eyebrow:after { position:absolute; width:20px; height:60px; background:black; z-index:8; border-radius:15px; transform: rotate(40deg); top:10px; left:90px; } .eyebrow:after { content:''; transform: rotate(-100deg); left:19px; margin-top:-23px; top:auto; } .eyebrow.right { left:180px; top:8px; transform: rotate(50deg); } .mouth { position:absolute; width:40px; height:40px; background:#76322f; border-radius:100%; top:180px; left:50px; z-index:8; } .shy { position:absolute; width:0px; height:0px; border-radius:100%; opacity:0; box-shadow: 0px 0px 40px 20px red; z-index:8; left:35px; top:160px; animation: shy 10s linear .2s infinite; } .shy.right { left:170px; top:180px; } @keyframes eyebroani { 0% {margin-top:auto} 10% {margin-top:-10px} 20% {margin-top:auto} 30% {margin-top:-10px} 40% {margin-top:auto} 100% {margin-top:auto} } @keyframes shy { 0% {opacity:0} 10% {opacity:0.2} 90% {opacity:0.2} 100% {opacity:0} } @keyframes close-eye { 0% { height: 40px; margin-top: auto; overflow: auto; } 5% { height: 2px; margin-top: 20px; overflow: hidden; } 5.1% { height: 40px; margin-top:0; overflow:visible; } } </style> </body> </html>[/tex]

Answers

Answered by anushkasharma8840

Step-by-step explanation:

$<!DOCTYPE html><html lang="en"><head><title>Cat in night</title></head><body><div id="wrapper"><section class="sky"><div class="moon"></div><ul><li class="cloud"></li><li class="cloud"></li><li class="cloud"></li></ul></section><section class="wall"><section class="cat"><div class="cat-head"><div class="eyes"><div class="eye"></div><div class="eye"></div></div></div><div class="cat-body"><div class="tail"></div></div></section></section></div><style>.sky {height: 300px;background: radial-gradient(#112A71, #000A31);overflow: hidden;position: relative; }.sky .moon {width: 80px;height: 80px;border-radius: 50%;background-color: #FEFF79;-webkit-box-shadow: 0 0 150px #FEFF79, inset 0 1px 20px rgba(0, 0, 0, 0.3);box-shadow: 0 0 150px #FEFF79, inset 0 1px 20px rgba(0, 0, 0, 0.3);position: absolute;top: 30px;right: 100px; }.sky .cloud {width: 80px;height: 30px;background-color: #8D8D8D;border-radius: 50px;-webkit-box-shadow: inset 0 -1px 10px rgba(0, 0, 0, 0.3);box-shadow: inset 0 -1px 10px rgba(0, 0, 0, 0.3);position: relative;top: 60px;left: 30px;-webkit-animation: shift 100s infinite linear;animation: shift 100s infinite linear; }.sky .cloud:nth-child(2) {-webkit-transform: scale(-1.5, 1.3);transform: scale(-1.5, 1.3);top: 100px;left: 250px;-webkit-animation-duration: 40s;animation-duration: 40s; }.sky .cloud:last-child {top: 150px;left: 100px;-webkit-transform: scale(2);transform: scale(2);-webkit-animation-duration: 60s;animation-duration: 60s; }.sky .cloud::before, .sky .cloud::after {content: '';display: block;width: 32px;height: 30px;background-color: inherit;border-radius: 50%;position: relative;top: -15px;left: 35px; }.sky .cloud::after {top: -40px;left: 10px; }@-webkit-keyframes shift {0% {margin-left: -500px; }100% {margin-left: 100%; } }@keyframes shift {0% {margin-left: -500px; }100% {margin-left: 100%; } }.wall {height: 250px;background: radial-gradient(ellipse at top, #000C23, #000000);position: relative;top: 0px; }.wall .cat {position: absolute;top: -105px;left: 90px; }.cat-head {width: 40px;height: 40px;background-color: #131313;border-radius: 50% 50% 100% 100%;position: relative; }.cat-head::before, .cat-head::after {width: 6px;height: 2px;content: '';background-color: inherit;border-radius: 5% 100% 0 0;border-top: 10px solid #131313;border-left: 4px solid #141414;position: absolute;-webkit-transform: rotate(-5deg);transform: rotate(-5deg);top: -6px;left: 0px;z-index: 2; }.cat-head::after {left: auto;right: 0px;-webkit-transform: scaleX(-1) rotate(-5deg);transform: scaleX(-1) rotate(-5deg);-webkit-animation: wiggle 3s ease-in infinite;animation: wiggle 3s ease-in infinite; }.cat-head .eyes {height: 30px;display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-pack: distribute;justify-content: space-around;-webkit-box-align: center;-ms-flex-align: center;align-items: center; }.cat-head .eyes .eye {width: 6px;height: 6px;background-color: #4C4C4C;border-radius: 50%;-webkit-box-shadow: 0 0 0 3px #00D382;box-shadow: 0 0 0 3px #00D382;z-index: 5;position: relative;-webkit-animation: blink 3s ease-out infinite;animation: blink 3s ease-out infinite; }.cat-head .eyes .eye::after {content: '';width: 2px;height: 2px;background-color: #FFDFDF;border-radius: 50%;position: absolute;top: 0px;left: 3px; }.cat-head .eyes .eye:last-child {-webkit-transform: scaleX(-1);transform: scaleX(-1); }.cat-head .eyes .eye:last-child::after {left: auto;right: 3px; }.cat-body {height: 80px;width: 38px;background: #131313;border-radius: 100% 100% 70% 70%;position: relative;top: -12px; }.cat-body .tail {width: 40px;height: 10px;background-color: transparent;border-radius: 50%;border: 8px solid #131313;border-left-color: transparent;border-top-color: transparent;position: absolute;bottom: 0px;left: 5px; }.cat-body .tail::after {content: '';width: 9px;height: 10px;background-color: #131313;position: absolute;right: -5px;border-radius: 50%;top: -4px;-webkit-transform: skew(44deg, -26deg);transform: skew(44deg, -26deg); }@-webkit-keyframes blink {78%, 82%, 86%, 90% {opacity: 1; }80%, 88% {opacity: 0; } }@keyframes blink {78%, 82%, 86%, 90% {opacity: 1; }80%, 88% {opacity: 0; } }@-webkit-keyframes wiggle {50%, 60% {-webkit-transform: scaleX(-1) rotate(-5deg);transform: scaleX(-1) rotate(-5deg); }55% {-webkit-transform: scaleX(-1) rotate(-30deg);transform: scaleX(-1) rotate(-30deg); } }@keyframes wiggle {50%, 60% {-webkit-transform: scaleX(-1) rotate(-5deg);transform: scaleX(-1) rotate(-5deg); }55% {-webkit-transform: scaleX(-1) rotate(-30deg);transform: scaleX(-1) rotate(-30deg); } }* {padding: 0;margin: 0; }ul {list-style-type: none; }body {background: #1e1e1e;}#wrapper {max-width: 400px;margin: 0 auto;height: 100vh; }</style></body></html>$

Answered by TheWorker

$<!DOCTYPE html> <html lang="en"> <head> <title>Shinchan</title> </head> <body> <div class="face"> <div class="forhead"></div> <div class="cheeks"></div> <div class="ear"></div> <div class="eyebrow left"></div> <div class="eyebrow right"></div> <div class="eye left"></div> <div class="eye right"></div> <div class="mouth"></div> <div class="shy"></div> <div class="shy right"></div> </div> <style> body { background:#3e505e } .face { height: 600px; width: 350px; position: relative; margin: auto; } .face:before { content:''; background:black; height:122px; width:95px; position:absolute; z-index:6; left:210px; top:29px; border-radius:100% 190% 100% 0%; transform: rotate(-20deg); } .face:after { content:''; width:230px; height:180px; background:black; content:''; transform: rotate(-8deg); position:absolute; border-radius:100% 160% 100% 0%; left:70px; bottom:-14px; top:10px; z-index:5; } .forhead, .forhead:after { content: ''; width: 220px; height: 181px; background: #fbc6a3; content: ''; transform: rotate(-3deg);position: absolute; border-radius: 60% 120% 50% 0%; left: 67px; bottom: -14px; top: 21px; z-index: 6; } .forhead:after { width: 160px; height: 150px; border-radius: 150% 174% 159% 100%; transform: rotate(-20deg); top: 13px; left: 59px; border-top: 15px solid #fbc6a3; } .forhead:before{ background:#fbc6a3; width:60px; height:10px; content:''; position:absolute; z-index:7; left:105px; top:9px; transform: rotate(13deg); border-radius:100% } .ear { width:60px; height:50px; background:#fbc6a3; z-index:7; position:absolute; border-radius:300% 190% 200% 100%; transform: rotate(-20deg); top:110px; left:285px } .cheeks { background: #fbc6a3; width: 280px; height: 100px; border-radius: 50px 0px 50px 40px; transform: rotate(-3deg); position: relative; content: 'a'; top: 108px; left:10px } .cheeks:after { width: 297px; height: 100px; background: #fbc6a3; content: ''; transform: rotate(-3deg); position: absolute; border-radius: 100% 100% 100% 100%; left: 1px; bottom: -14px; } .eye { width:40px; height:40px; position:relative; background:black; border-radius:100%; animation: close-eye 4s none .2s infinite; } .eye:after { content:''; position:absolute; background:white; width:15px; height:15px; border-radius:100%; left:17px; top:12px; } .eye:before { content:''; position:absolute; width:70px; height:60px; border-radius:100%; border-top:2px solid black; left:-20px; margin-top:-20px; } .eye.left,.eye.right { position:absolute; top:80px; left:100px; z-index:10; } .eye.right { left:190px; top:90px; } .eyebrow { animation: eyebroani 2s linear .2s infinite; } .eyebrow,.eyebrow:after { position:absolute; width:20px; height:60px; background:black; z-index:8; border-radius:15px; transform: rotate(40deg); top:10px; left:90px; } .eyebrow:after { content:''; transform: rotate(-100deg); left:19px; margin-top:-23px; top:auto; } .eyebrow.right { left:180px; top:8px; transform: rotate(50deg); } .mouth { position:absolute; width:40px; height:40px; background:#76322f; border-radius:100%; top:180px; left:50px; z-index:8; } .shy { position:absolute; width:0px; height:0px; border-radius:100%; opacity:0; box-shadow: 0px 0px 40px 20px red; z-index:8; left:35px; top:160px; animation: shy 10s linear .2s infinite; } .shy.right { left:170px; top:180px; } @keyframes eyebroani { 0% {margin-top:auto} 10% {margin-top:-10px} 20% {margin-top:auto} 30% {margin-top:-10px} 40% {margin-top:auto} 100% {margin-top:auto} } @keyframes shy { 0% {opacity:0} 10% {opacity:0.2} 90% {opacity:0.2} 100% {opacity:0} } @keyframes close-eye { 0% { height: 40px; margin-top: auto; overflow: auto; } 5% { height: 2px; margin-top: 20px; overflow: hidden; } 5.1% { height: 40px; margin-top:0; overflow:visible; } } </style> </body> </html>$

Previous Question

Next Question