Science, asked by ashithaashitha730, 8 months ago

Mention the sources
والا​

Answers

Answered by rohin111bhattacharya
1

Answer:

&lt;!DOCTYPE html&gt;</p><p>&lt;html lang="en"&gt;</p><p>&lt;head&gt;</p><p>&lt;title&gt;Bulb&lt;/title&gt;</p><p>&lt;/head&gt;</p><p>&lt;body&gt;</p><p>&lt;main&gt;</p><p>&lt;input class="l" type="checkbox"&gt;</p><p>&lt;/main&gt;</p><p>&lt;style&gt;</p><p>*, *:before, *:after {</p><p>box-sizing: border-box;</p><p>margin: 0;</p><p>padding: 0;</p><p>}</p><p>:root {</p><p>/* minFontSize + (maxFontSize - minFontSize) * (100vw - minVWidth)/(maxVWidth - minVWidth) */</p><p>font-size: calc(64px + (80 - 64) * (100vw - 320px)/(960 - 320));</p><p>}</p><p>body, input {</p><p>font-size: 1em;</p><p>line-height: 1.5;</p><p>}</p><p>body {</p><p>background: #bbb;</p><p>}</p><p>input {</p><p>display: block;</p><p>margin-bottom: 1.5em;</p><p>}</p><p>main {</p><p>padding: 1.5em 0 0 0;</p><p>text-align: center;</p><p>}</p><p>.l {</p><p>background-color: rgba(0,0,0,0.7);</p><p>border-radius: 0.75em;</p><p>box-shadow: 0.125em 0.125em 0 0.125em rgba(0,0,0,0.3) inset;</p><p>color: #fdea7b;</p><p>display: inline-flex;</p><p>align-items: center;</p><p>margin: auto;</p><p>padding: 0.15em;</p><p>width: 3em;</p><p>height: 1.5em;</p><p>transition: background-color 0.1s 0.3s ease-out, box-shadow 0.1s 0.3s ease-out;</p><p>-webkit-appearance: none;</p><p>-moz-appearance: none;</p><p>appearance: none;</p><p>}</p><p>.l:before, .l:after {</p><p>content: "";</p><p>display: block;</p><p>}</p><p>.l:before {</p><p>background-color: #d7d7d7;</p><p>border-radius: 50%;</p><p>width: 1.2em;</p><p>height: 1.2em;</p><p>transition: background-color 0.1s 0.3s ease-out, transform 0.3s ease-out;</p><p>z-index: 1;</p><p>}</p><p>.l:after {</p><p>background:</p><p>linear-gradient(transparent 50%, rgba(0,0,0,0.15) 0) 0 50% / 50% 100%,</p><p>repeating-linear-gradient(90deg,#bbb 0,#bbb,#bbb 20%,#999 20%,#999 40%) 0 50% / 50% 100%,</p><p>radial-gradient(circle at 50% 50%,#888 25%, transparent 26%);</p><p>background-repeat: no-repeat;</p><p>border: 0.25em solid transparent;</p><p>border-left: 0.4em solid #d8d8d8;</p><p>border-right: 0 solid transparent;</p><p>transition: border-left-color 0.1s 0.3s ease-out, transform 0.3s ease-out;</p><p>transform: translateX(-22.5%);</p><p>transform-origin: 25% 50%;</p><p>width: 1.2em;</p><p>height: 1em;</p><p>}</p><p>/* Checked */</p><p>.l:checked {</p><p>background-color: rgba(0,0,0,0.45);</p><p>box-shadow: 0.125em 0.125em 0 0.125em rgba(0,0,0,0.1) inset;</p><p>}</p><p>.l:checked:before {</p><p>background-color: currentColor;</p><p>transform: translateX(125%)</p><p>}</p><p>.l:checked:after {</p><p>border-left-color: currentColor;</p><p>transform: translateX(-2.5%) rotateY(180deg);</p><p>}</p><p>/* Other States */</p><p>.l:focus {</p><p>/* Usually an anti-A11Y practice but set to remove an annoyance just for this demo */</p><p>outline: 0;</p><p>}</p><p>&lt;/style&gt;</p><p>&lt;/body&gt;</p><p>&lt;/html&gt;

Similar questions