Skip to main content

Featured

Bulb ON/OFF Animation in html and css

<!DOCTYPE html > <html> <style>   *,   *::after,   *::before {     box-sizing: border-box;   }     body {     background: #001933;   }     .container {     width: 75px;     height: 275px;     animation: bulb-swing 3s infinite ease-in-out;     transform-origin: top center;     position: absolute;     top: 0;     left: calc(50% - (75px/2));   }     .container.paused {     animation-play-state: paused;   }     .bulb {     z-index: 10;     display: block;     width: 75px;     height: 75px;     border-radius: 50%;     position: absolute;     top: 200px;     left: calc(50% - (75px/2));   ...
Post a Comment
Read more

Indian Flag in HTML and CSS 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Page title</title>
    
    <style id="compiled-css" type="text/css"> .foo {
     
     width:200px;
      height: 50px;     
        border: 1px solid rgba(0, 0, 0, .2);
         }
          .ore{
          
           background: orange;
            }
             .white{
             float: left;
              background: white;
              
               } 
               .green {
                background: green;
                height:90px;
                 } 
                 .chakra{
                                                           background-color:darkblue ;
                     width: 50px;
                     height: 50px;
                     border-radius: 50%;
                     position: relative;
                     left: 80px;
                     
                 }
                 .stand{
                     background-color:brown;
                     width:7px;
                     height:400px;
                 }
                 h1{
                  position:relative;
                  left:50px;
                  bottom:300px;   
                 }
                 </style> 
    </head>
    
    <body> <br><div class="foo ore"></div>
           <div class="foo white"><div class="chakra"></div></div><br>
           <div class="foo green"></div>
           <div class="stand"></div>
            <h1>HAPPY INDEPENDENCE DAY</h1>
    </body>
    </html>


Output:



Watch on YouTube



Comments

Post a Comment

Popular Posts