Hindi, asked by nikamsamarth9, 6 months ago

किस तरह कुल की____काम दे? ​

Answers

Answered by Sambhavs
26

TROPHY&lt;!DOCTYPE html&gt;</p><p></p><p>&lt;html&gt;</p><p></p><p>&lt;head&gt;</p><p></p><p>&lt;title&gt;Trophy&lt;/title&gt;</p><p></p><p>&lt;/head&gt;</p><p></p><p>&lt;body&gt;</p><p>  &lt;div class='wrapper'&gt;</p><p>      &lt;div class='glow'&gt;&lt;/div&gt;</p><p>          &lt;div class='mask'&gt;</p><p>                &lt;div class='container'&gt;</p><p>                        &lt;div class='star'&gt;&amp;#10022;&lt;/div&gt;</p><p>                                &lt;div class='main'&gt;&lt;/div&gt;</p><p>                                        &lt;div class='stem1'&gt;&lt;/div&gt;</p><p>                                                &lt;div class='stemCrease'&gt;&lt;/div&gt;</p><p>                                                        &lt;div class='stem2'&gt;&lt;/div&gt;</p><p>                                                                &lt;div class='base'&gt;&lt;/div&gt;</p><p>                                                                        &lt;div class='arms'&gt;&lt;/div&gt;</p><p>                                                                              &lt;/div&gt;</p><p>                                                                                  &lt;/div&gt;</p><p>                                                                                    &lt;/div&gt;</p><p>&lt;style&gt;</p><p></p><p>body {</p><p>  background: black;</p><p>    margin: none;</p><p>    }</p><p>    .wrapper {</p><p>      margin: none;</p><p>        background: black;</p><p>          display: flex;</p><p>            justify-content: center;</p><p>              align-items: center;</p><p>              }</p><p>              .glow {</p><p>                position: absolute;</p><p>                  width: 0px;</p><p>                    height: 0px;</p><p>                      background: transparent;</p><p>                        border-radius: 200px;</p><p>                          box-shadow: 0px 0px 400px 200px white;</p><p>                            animation: shadow 6s linear infinite;</p><p>                            }</p><p>                            .mask {</p><p>                              margin: none;</p><p>                                display: flex;</p><p>                                  justify-content: center;</p><p>                                    align-items: center;</p><p>                                      width: 100%;</p><p>                                        height: 100vh;</p><p>                                          background: gainsboro;</p><p>                                            animation-fill-mode: forwards;</p><p>                                              z-index: 100;</p><p>                                                animation: leftToRight 6s linear;</p><p>                                                }</p><p>.container {</p><p>  position: absolute;</p><p>    top: 50px;</p><p>      display: flex;</p><p>        justify-content: center;</p><p>          align-items: center;</p><p>            animation: rotate 1s linear alternate infinite;</p><p>              transform: rotate(-10deg);</p><p>              }</p><p>.main {</p><p>  height: 250px;</p><p>    width: 200px;</p><p>      background: gold;</p><p>        border-bottom-left-radius: 100px;</p><p>          border-bottom-right-radius: 100px;</p><p>          }</p><p>.stem2 {</p><p>  position: fixed;</p><p>    top: 190px;</p><p>    	border-bottom: 100px solid gold;</p><p>    		border-left: 50px solid transparent;</p><p>    			border-right: 50px solid transparent;</p><p>    				height: 0px;</p><p>    					width: 40px;</p><p>    					  border-bottom-left-radius: 200px;</p><p>    					    border-bottom-right-radius: 200px;</p><p>    					      transform: rotate(180deg);</p><p>    					      }</p><p>    					      .stem1 {</p><p>    					        position: absolute;</p><p>    					          top: 280px;</p><p>    					          	border-bottom: 100px solid gold;</p><p>    					          		border-left: 50px solid transparent;</p><p>    					          			border-right: 50px solid transparent;</p><p>    					          				height: 0;</p><p>    					          					width: 40px;</p><p>    					          					  border-top-left-radius: 200px;</p><p>    					          					    border-top-right-radius: 200px;</p><p>    					          					    }</p><p>    					          					    .base {</p><p>    					          					      position: fixed;</p><p>    					          					        width: 180px;</p><p>    					          					          border-top-left-radius: 200px;</p><p>    					          					            border-top-right-radius: 200px;</p><p>    					          					              background: black;</p><p>    					          					                height: 20px;</p><p>    					          					                  top: 380px;</p><p>    					          					                  }</p><p>    					          					                  .arms {</p><p>    					          					                    width: 300px;</p><p>    					          					                      height: 150px;</p><p>    					          					                        position: absolute;</p><p>    					          					                          background: transparent;</p><p>    					          					                            z-index: -1;</p><p>    					          					                              border: #ddba00 20px solid;</p><p>    					          					                                border-top-right-radius: 5px;</p><p>    					          					                                  border-top-left-radius: 5px;</p><p>    					          					                                    border-bottom-left-radius: 100px;</p><p>    					          					                                      border-bottom-right-radius: 100px;</p><p>}</p><p>.stemCrease {</p><p>  position: absolute;</p><p>    width: 60px;</p><p>      height: 15px;</p><p>        border-radius: 10px;</p><p>          background: #ddba00;</p><p>            top: 280px;</p><p>              z-index: 1;</p><p>              }</p><p>              .star {</p><p>                position: absolute;</p><p>                  font-size: 100px;</p><p>                    color: white;</p><p>                      top: 0px;</p><p>                        left: 100px;</p><p>                          transform-origin: center;</p><p>                            animation: shimmer .4s alternate infinite linear;</p><p>                            }</p><p>@keyframes shimmer {</p><p>  to{transform: rotate(20deg)}</p><p>  }</p><p>  @keyframes rotate {</p><p>    to{transform: rotate(10deg)}</p><p>    }</p><p>    @keyframes leftToRight{</p><p>      0% {clip-path: circle(150px at 0% 100%);}</p><p>        20% {clip-path: circle(150px at 50% 15%);}</p><p>          30% {clip-path: circle(150px at 100% 50%);}</p><p>            40% {clip-path: circle(150px at 70% 100%);}</p><p>              70% {clip-path: circle(150px at -100% -100%);}</p><p>                80% {clip-path: circle(150px at -100% 200%);}</p><p>                  85% {clip-path: circle(150px at 50% 200%);}</p><p>                    90% {clip-path: circle(100% at 50% 80%);}</p><p>                    }</p><p>                    @keyframes shadow {</p><p>                      0% {</p><p>                          left: 0%;</p><p>                              top: 100%;</p><p>                                }</p><p>                                  20% {</p><p>                                      left: 50%;</p><p>                                          top: 15%;</p><p>                                            }</p><p>                                              30% {</p><p>                                                  left: 100%;</p><p>                                                      top: 50%;</p><p>                                                        }</p><p>                                                          40% {</p><p>                                                              left: 70%;</p><p>                                                                  top: 100%;</p><p>                                                                    }</p><p>                                                                      70% {</p><p>                                                                          left: -100%;</p><p>                                                                              top: -100%;</p><p>                                                                                }</p><p>                                                                                  80% {</p><p>                                                                                      left: -100%;</p><p>                                                                                          top: 200%</p><p>                                                                                            }</p><p>                                                                                              85% {</p><p>                                                                                                  left: 500%;</p><p>                                                                                                      top: 200%;</p><p>                                                                                                        }</p><p>                                                                                                          95% {</p><p>                                                                                                              left: 50%;</p><p>                                                                                                                  top: 80%;</p><p>                                                                                                                    }</p><p>}</p><p></p><p>&lt;/style&gt;</p><p>&lt;/body&gt;</p><p>&lt;/html&gt;

Similar questions