CBSE BOARD X, asked by kachhapv391, 9 months ago

please help me........... I need it..............​

Attachments:

Answers

Answered by adityaraj7671
0

Explanation:

&lt;!DOCTYPE html&gt;</p><p></p><p>&lt;html lang="en"&gt;</p><p></p><p>&lt;head&gt;</p><p></p><p>&lt;title&gt;Pikachu&lt;/title&gt;</p><p></p><p>&lt;/head&gt;</p><p></p><p>&lt;body&gt;</p><p></p><p>&lt;div class="pikachu"&gt; &lt;div class="ear ear-left"&gt;&lt;/div&gt; &lt;div class="ear ear-right"&gt;&lt;/div&gt; &lt;div class="head"&gt; &lt;div class="eye eye-left"&gt;&lt;/div&gt; &lt;div class="eye eye-right"&gt;&lt;/div&gt; &lt;div class="nose"&gt;&lt;/div&gt; &lt;div class="mouth"&gt;&lt;/div&gt; &lt;div class="cheek-left"&gt; &lt;div class="cheek-inner"&gt;&lt;/div&gt; &lt;/div&gt; &lt;div class="cheek-right"&gt; &lt;div class="cheek-inner"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;</p><p></p><p>&lt;style&gt;</p><p></p><p>:root { --bg-yellow: #fad61d; --bg-black: black; --bg-white: white; --bg-orange: #f62d14; } .pikachu * { position: absolute; } .pikachu { height: 500px; width: 500px; transform: translate(50%, 50%); } .ear { height: 40%; width: 12%; background-color: var(--bg-yellow); border: 2px solid var(--bg-black); border-bottom-color: var(--bg-yellow); border-radius: 100% 100% 50% 50%; z-index: 1; box-shadow: inset 0 45px 0px black; } .ear-left { left: 13%; top: -27%; transform: rotate(-45deg); } .ear-right { right: 13%; top: -27%; transform: rotate(45deg); } .head { height: 55%; width: 55%; background-color: var(--bg-yellow); border: 2px solid var(--bg-black); left: 50%; transform: translateX(-50%); border-radius: 120px; } .eye { height: 18%; width: 18%; background-color: var(--bg-black); border-radius: 50%; top: 45%; transform: translateY(-50%); } .eye::before { content: ''; position: absolute; display: block; height: 50%; width: 50%; background-color: var(--bg-white); border-radius: 50%; top: 35%; transform: translateY(-50%); } .eye-left { left: 15%; } .eye-left::before { right: 15%; } .eye-right { right: 15%; } .eye-right::before { left: 15%; } .nose { height: 2%; width: 5%; background-color: var(--bg-black); top: 50%; left: 50%; transform: translateX(-50%); border-radius: 10px 10px 50px 50px; } .mouth { height: 7%; width: 13%; border: 2px solid var(--bg-yellow); border-left-color: var(--bg-black); border-bottom-color: var(--bg-black); border-bottom-left-radius: 100px 50px; top: 58%; left: 41%; transform: translateX(-50%) rotate(-25deg); z-index: 1; } .mouth::before { content: ''; position: absolute; display: block; height: 100%; width: 100%; border: 2px solid var(--bg-yellow); border-left-color: var(--bg-black); border-bottom-color: var(--bg-black); border-bottom-left-radius: 100px 50px; transform: rotate(50deg) scaleX(-1); top: 90%; right: -120%; } .cheek-left { height: 35%; width: 50%; background-color: var(--bg-yellow); left: -6%; bottom: 5%; border: 2px solid var(--bg-yellow); border-left-color: var(--bg-black); border-bottom-color: var(--bg-black); border-radius: 0 0 0 80%; transform: rotate(15deg); overflow: hidden; } .cheek-left .cheek-inner { height: 65%; width: 50%; background-color: var(--bg-orange); border: 2px solid var(--bg-black); border-radius: 50%; top: 20%; left: -5%; } .cheek-right { height: 35%; width: 50%; background-color: var(--bg-yellow); right: -6%; bottom: 5%; border: 2px solid var(--bg-yellow); border-left-color: var(--bg-black); border-bottom-color: var(--bg-black); border-radius: 0 0 0 80%; transform: rotate(-15deg) scaleX(-1); overflow: hidden; } .cheek-right .cheek-inner { height: 65%; width: 50%; background-color: var(--bg-orange); border: 2px solid var(--bg-black); border-radius: 50%; top: 20%; left: 0%; }</p><p></p><p>&lt;/style&gt;</p><p></p><p>&lt;/body&gt;</p><p></p><p>&lt;/html&gt;

Similar questions