Stylish animated onam pookkalam using html and css

Stylish animated onam pookkalam using html and css




Onam is a traditional festival celebrated in kerala. On the occasion of onam we can find onam pookkalam on front of every house. The pookkalm is built using different varieties of flowers of different kind. Then why don't we think about creating the pookkalam using html divisions. In this, I made different circles of different radius using the division tag. Here below, you can see the demo of the pookkalam as follows


Live Preview:







See how I created this pookkalam only using html and css. The division tag looks like a rectangle box but by making this rectangle to a square by making the width and height to same length. Then we got a square division. The square piece can be converted to a circle by setting the border radius of the division to 50 percentage. You can set the position of the division to absolute for making settings the divisions on top of another division.



Code:




<html>

<head>

<style>



    .box

    {

        width: 300px;

        height:300px;

        display: flex;

        justify-content: center;



      

    }

.out

{

    display: flex;

   width: 300px; 

   height: 300px;

   border-radius: 50%;

   background-color: orangered;

   border:1px solid black;

   text-align: center;

   justify-content: center;

   z-index: 3;



   

}

.first

{

   position: absolute;

   z-index: 2;

   display: flex;

   width: 270px; 

   height: 270px;

   border-radius: 50%;

   background-color: rgb(251, 255, 0);

   border:1px solid black;

   margin-top: 15px;

   justify-content: center;

  

}

.second

{

   position: absolute;

   z-index: 4;

   display: flex;

   width: 185px;

   height: 185px;

   border-radius: 50%;

   background-color: whitesmoke;

   border:1px solid black;

   margin-top: 44px;

   justify-content: center;

}



.third

{

   position: absolute;

   z-index: 6;

   display: flex;

   width: 160px; 

   height: 160px;

   border-radius: 50%;

   background-color: darkgreen;

   border:1px solid black;

   margin-top: 57px;

   justify-content: center;

animation:animate 11s linear infinite;

  

}

.fourth

{

   position: absolute;

   z-index: 8;

   display: flex;

   width: 40px; 

   height: 40px;

   border-radius: 50%;

   background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQB-1Jp-jdN5ndlCFTjQoVN7BisUy2H_TQ76YkHmtglKT_RyZJ5WCWNhJoB_5iYDEu3utojOKd7kmxFK0vJhyd0mAsTaMuiBe4RVeDvYGUfhZx4oy082BaPVlspVrhDkArzne-zYJnlzI/s320/IMG_20190828_192534.jpg");

   border:1px solid black;

   margin-top: 117px;

   justify-content: center;

  background-size: contain;

}



.test

{

    width: 60px;

    height: 268px;

    background-color: rgb(252, 1, 168);

   border:1px solid black;

   border-radius: 70%;

}

.test2

{

    width: 43px;

    height: 43px;

    background-color: rgb(252, 1, 1);

   border:1px solid black;

   border-top-right-radius:100%;

   border-bottom-left-radius:100%;

   margin-top: 40px;

}



@keyframes animate

{



0%

{

transform:rotate(360deg);

}

100%

{

transform:rotate(0deg);

}

}




@keyframes animate1

{



0%

{

transform:rotate(0deg);

}

100%

{

transform:rotate(360deg);

}

}

@keyframes animate2

{



0%

{

transform:rotate(15deg);

}

100%

{

transform:rotate(375deg);

}

}

@keyframes animate3

{



0%

{

transform:rotate(30deg);

}

100%

{

transform:rotate(390deg);

}

}

@keyframes animate4

{



0%

{

transform:rotate(45deg);

}

100%

{

transform:rotate(405deg);

}

}

@keyframes animate5

{



0%

{

transform:rotate(60deg);

}

100%

{

transform:rotate(420deg);

}

}

@keyframes animate6

{



0%

{

transform:rotate(75deg);

}

100%

{

transform:rotate(435deg);

}

}

@keyframes animate7

{



0%

{

transform:rotate(90deg);

}

100%

{

transform:rotate(450deg);

}

}

@keyframes animate8

{



0%

{

transform:rotate(105deg);

}

100%

{

transform:rotate(465deg);

}

}

@keyframes animate9

{



0%

{

transform:rotate(120deg);

}

100%

{

transform:rotate(480deg);

}

}

@keyframes animate10

{



0%

{

transform:rotate(135deg);

}

100%

{

transform:rotate(495deg);

}

}

@keyframes animate11

{



0%

{

transform:rotate(150deg);

}

100%

{

transform:rotate(510deg);

}

}

@keyframes animate12

{



0%

{

transform:rotate(165deg);

}

100%

{

transform:rotate(525deg);

}



}



</style>

</head>

<body>

    <center>



<div class="box">



    



<div class=out>




       

<div class=first>

   <div class="test" style="transform: rotate(15deg);position: absolute;animation: animate1 11s linear infinite; "></div>

   <div class="test" style="transform: rotate(30deg);position: absolute;animation: animate2 11s linear infinite; "></div>

   <div class="test" style="transform: rotate(45deg);position: absolute;animation: animate3 11s linear infinite;  "></div>

   <div class="test" style="transform: rotate(60deg);position: absolute;animation: animate4 11s linear infinite; "></div>

   <div class="test" style="transform: rotate(75deg);position: absolute;animation: animate5 11s linear infinite;  "></div>

   <div class="test" style="transform: rotate(90deg);position: absolute; animation: animate6 11s linear infinite;  "></div>

   <div class="test" style="transform: rotate(105deg);position: absolute;animation: animate7 11s linear infinite;   "></div>

   <div class="test" style="transform: rotate(120deg);position: absolute;animation: animate8 11s linear infinite;  "></div>

   <div class="test" style="transform: rotate(135deg);position: absolute;animation: animate9 11s linear infinite;   "></div>

   <div class="test" style="transform: rotate(150deg);position: absolute;animation: animate10 11s linear infinite;  "></div>

   <div class="test" style="transform: rotate(165deg);position: absolute; animation: animate11 11s linear infinite;  "></div>

   <div class="test" style="transform: rotate(180deg);position: absolute;animation: animate12 11s linear infinite; "></div>

<div class="second"></div>

<div class="third">

  

   <div class="test2" style="transform: rotate(45deg);position: absolute; margin-top: 8px;margin-left: 0px;"></div>

    <div class="test2" style="transform: rotate(45deg);position: absolute; margin-left: 0px;margin-top: 107px;"></div>

    <div class="test2" style="transform: rotate(135deg);position: absolute; margin-left: 49px;margin-top: 58px;"></div>

    <div class="test2" style="transform: rotate(135deg);position: absolute; margin-left: -49px;margin-top: 58px;"></div>



    <div class="test2" style="transform: rotate(90deg);position: absolute; margin-left: 35px;margin-top: 22px;"></div>

    <div class="test2" style="transform: rotate(180deg);position: absolute; margin-left: -35px;margin-top: 22px;"></div>

    

    <div class="test2" style="transform: rotate(180deg);position: absolute; margin-left: 35px;margin-top: 92px;"></div>

    <div class="test2" style="transform: rotate(90deg);position: absolute; margin-left: -35px;margin-top: 92px;"></div>

</div>



<div class="fourth"></div>

<div class="fifth"></div>

</div>



</div>  

    </div> 







</center> 



</body>

</html>

Comments

Post a Comment

Popular posts from this blog

Node.js Cheat Sheet

Image
To start a new node project, type  C:\Users\jinoy\OneDrive\Desktop\MERN>npm init -y      The basic syntax of calling a function in node.js with express is : const   functionname  = ()  =>  { console . log ( "hello world" ); } functionname (); To call a function after every 5 seconds : setInterval (()  =>  {      console . log ( "hello" ); }, 5000  ); To call a function only once after 4 second : setTimeout (() => { console . log ( "test" ); }, 4000 ); To run a script.js file on terminal, type : C:\Users\jinoy\OneDrive\Desktop\MERN>node script.js  OR C:\Users\jinoy\OneDrive\Desktop\MERN>node script To stop a function that is executing on every interval( time to call function again) : const   interval  =  setInterval (()  =>  {      console . log ( "hello" ); }, 1000  ); setTimeout (() => {      clearInterval ( interval );      console . log ( "stopped" ); }, 6000 ); The above function will work continously untill
Read more

Codeigniter ! Simple But Powerful

Image
CodeIgniter is a powerful PHP framework with a very small footprint, built for developers who need a simple and elegant toolkit to create full-featured web applications. It is the second largest php framework for website development (first-Laravel). Due to its simplicity, it is the most used framework ever than laravel. Actually these frameworks are only used for developing large scale website. The important thing about this framework is that it is using MVC principle . A MVC or Model View Control framework has a controller that controls all the pages in the website. There can be any number of controller created in codeigniter. The orginal webpages or the contents are placed in the folder named view .  Note : Don't touch the forder named system because it is the soul of the codeigniter Next ⇒
Read more

Introducing Cloudflare Pages ⚡

Image
https://github.com/Jinoy-Varghese/Jain-Lab After a long time cloudflare introduce new feature ' cloudflare pages ' allowing jamstack developers to host their website as free in cloudflare page. This new feature allow developers to use unlimited bandwidth and unlimited websites as a free user. You can host your repo directly to cloudflare servers using github.Websites are built through collaboration between designers, engineers, writers, and more. Cloudflare Pages makes it effortless to satisfy each group, so you can iterate quickly, and save time on coordination. You don't need to worry about the ssl certificate, since cloudflare provides ssl free certificate too.  Note: This pages are only for front end developers, it didn't have a database and did not support php.
Read more