Computer Science, asked by shresthsingh70, 9 months ago

what is the importance of <sup> and < sub> tag??​

Answers

Answered by Anonymous
1

The <sup> tag defines superscript text.

Superscript text appears half a character above the normal line, and is sometimes rendered in a smaller font.

Superscript text can be used for footnotes, like WWW. Tip: Use the <sub> tag to define subscript text.

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

Answered by dhareaveer
5

Hi Bedazzled Blue ❤️

&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;CUBE&lt;/title&gt;</p><p></p><p>&lt;/head&gt;</p><p></p><p>&lt;body&gt;</p><p></p><p>&lt;div class="container"&gt;</p><p></p><p>&lt;div id="cube"&gt;</p><p></p><p>&lt;div class="front"&gt;^_^&lt;/div&gt;</p><p></p><p>&lt;div class="back"&gt;=_=&lt;/div&gt;</p><p></p><p>&lt;div class="right"&gt;:-D&lt;/div&gt;</p><p></p><p>&lt;div class="left"&gt;B-)&lt;/div&gt;</p><p></p><p>&lt;div class="top"&gt;;-)&lt;/div&gt;</p><p></p><p>&lt;div class="bottom"&gt;:-)&lt;/div&gt;</p><p></p><p>&lt;/div&gt;</p><p></p><p>&lt;/div&gt;</p><p></p><p>&lt;style&gt;</p><p></p><p>body {</p><p></p><p>padding-left: 30%;</p><p></p><p>padding-top: 5%;</p><p></p><p>}</p><p></p><p>.container {</p><p></p><p>width: 200px;</p><p></p><p>height: 200px;</p><p></p><p>position: relative;</p><p></p><p>-webkit-perspective: 1000px;</p><p></p><p>-moz-perspective: 1000px;</p><p></p><p>}</p><p></p><p>#cube {</p><p></p><p>width: 100%;</p><p></p><p>height: 100%;</p><p></p><p>position: absolute;</p><p></p><p>-webkit-transform-style: preserve-3d;</p><p></p><p>-webkit-animation: rotatecube 10s infinite;</p><p></p><p>-moz-transform-style: preserve-3d;</p><p></p><p>-moz-animation: rotatecube 10s infinite;</p><p></p><p>}</p><p></p><p>#cube div {</p><p></p><p>width: 200px;</p><p></p><p>height: 200px;</p><p></p><p>display: block;</p><p></p><p>position: absolute;</p><p></p><p>border: none;</p><p></p><p>line-height: 200px;</p><p></p><p>text-align: center;</p><p></p><p>font-size: 50px;</p><p></p><p>font-weight: bold;</p><p></p><p>}</p><p></p><p>@-webkit-keyframes rotatecube {</p><p></p><p>0% { -webkit-transform: rotateX(0deg) rotateY(360deg) rotateZ(90deg); }</p><p></p><p>25% { -webkit-transform: rotateX(90deg) rotateY(270deg) rotateZ(180deg); }</p><p></p><p>50% { -webkit-transform: rotateX(180deg) rotateY(180deg) rotateZ(0deg); }</p><p></p><p>75% { -webkit-transform: rotateX(270deg) rotateY(90deg) rotateZ(360deg); }</p><p></p><p>100% { -webkit-transform: rotateX(360deg) rotateY(0deg) rotateZ(270deg); }</p><p></p><p>}</p><p></p><p>@-moz-keyframes rotatecube {</p><p></p><p>0% { -moz-transform: rotateX(0deg) rotateY(360deg) rotateZ(90deg); }</p><p></p><p>25% { -moz-transform: rotateX(90deg) rotateY(270deg) rotateZ(180deg); }</p><p></p><p>50% { -moz-transform: rotateX(180deg) rotateY(180deg) rotateZ(0deg); }</p><p></p><p>75% { -moz-transform: rotateX(270deg) rotateY(90deg) rotateZ(360deg); }</p><p></p><p>100% { -moz-transform: rotateX(360deg) rotateY(0deg) rotateZ(270deg); }</p><p></p><p>}</p><p></p><p>.front {</p><p></p><p>background: rgba(255,0,0,.5);</p><p></p><p>}</p><p></p><p>.back {</p><p></p><p>background: rgba(0,255,0,.5);</p><p></p><p>}</p><p></p><p>.right {</p><p></p><p>background: rgba(0,0,255,.5);</p><p></p><p>}</p><p></p><p>.left {</p><p></p><p>background: rgba(0,255,255,.5);</p><p></p><p>}</p><p></p><p>.top {</p><p></p><p>background: rgba(255,0,255,.5);</p><p></p><p>}</p><p></p><p>.bottom {</p><p></p><p>background: rgba(255,255,0,.5);</p><p></p><p>}</p><p></p><p>#cube .front {</p><p></p><p>-webkit-transform: rotateY(0deg ) translateZ( 100px );</p><p></p><p>-moz-transform: rotateY( 0deg ) translateZ( 100px );</p><p></p><p>}</p><p></p><p>#cube .back {</p><p></p><p>-webkit-transform: rotateX( 180deg ) translateZ( 100px );</p><p></p><p>-moz-transform: rotateX( 180deg ) translateZ( 100px );</p><p></p><p>}</p><p></p><p>#cube .right {</p><p></p><p>-webkit-transform: rotateY( 90deg ) translateZ( 100px );</p><p></p><p>-moz-transform: rotateY( 90deg ) translateZ( 100px );</p><p></p><p>}</p><p></p><p>#cube .left {</p><p></p><p>-webkit-transform: rotateY( -90deg ) translateZ( 100px );</p><p></p><p>-moz-transform: rotateY( -90deg ) translateZ( 100px );</p><p></p><p>}</p><p></p><p>#cube .top {</p><p></p><p>-webkit-transform: rotateX( 90deg ) translateZ( 100px );</p><p></p><p>-moz-transform: rotateX( 90deg ) translateZ( 100px );</p><p></p><p>}</p><p></p><p>#cube .bottom {</p><p></p><p>-webkit-transform: rotateX( -90deg ) translateZ( 100px );</p><p></p><p>-moz-transform: rotateX( -90deg ) translateZ( 100px );</p><p></p><p>}</p><p></p><p>&lt;/style&gt;</p><p></p><p>&lt;/body&gt;</p><p></p><p>&lt;/html&gt;

Previous Question
Next Question
Similar questions
Math, 4 months ago
tune pehle ques pe Marne ki dhamki dii hai Okk ​...
Science, 4 months ago
garlic 100 words topic ​...
Hindi, 4 months ago
please answer both the questions ​...
Science, 9 months ago
(iv) Explain the importance of reproduction in organisms?​
Math, 9 months ago
0.123bar if exposed as a rational number will be equal to ​...
English, 1 year ago
Joe root debut match score​...
English, 1 year ago
Some parents suppress the need of children. They act stubborn and curb their needs.What views can you form about such parents ?
Science, 1 year ago
an electri iron of resistance 20 ohm takes a current of 5A calculate the heat developed in 30s​...