THAPA TECHNICAL

HOUSE OF WEB DEVELOPERS AND TECHNOLOGY.

Create Ashoka Chakra using HTML and CSS with Source Code [Hindi]

Bharat mat Ki Jai

Here is The Source Code for you guys on How to Create Ashoka Chakra using HTML and CSS with Source Code [Hindi], feel Free to use.


Here we will see How to Create Ashoka Chakra using HTML and CSS with Source Code [Hindi]

The Ashoka Chakra is the depiction of the “Dharmachakra”; represented with 24 spokes. The Ashok Chakra is visible in the Indian National flag, where it is rendered in a navy blue color on a white background.
Our main is to create the 24 spokes. So for this, we will use CSS property called transform and Positions.
Now here comes, the logic what we want is 24 spokes in one circle and with actual diffences between each spokes. Now for this we will use transform:rotate() property and we will take 15deg differences between each spokes.

<!DOCTYPE html>
<html>
<head>
<title></title>

<style >

*{
margin: 0;
padding: 0;
}

.chakra{
width: 96px;
height: 96px;
border:2px solid blue;
border-radius: 50%;
margin: auto;
}

.chakra li{
list-style: none;
width: 94px;
border: 1px solid blue;
position: relative;
}

li:nth-child(1){
top: 47px;
}

li:nth-child(2){
top: 45px;
transform: rotate(90deg);
}

li:nth-child(3){
top: 43px;
transform: rotate(15deg);
}

li:nth-child(4){
top: 41px;
transform: rotate(30deg);
}

li:nth-child(5){
top: 39px;
transform: rotate(45deg);
}

li:nth-child(6){
top: 37px;
transform: rotate(60deg);
}

li:nth-child(7){
top: 35px;
transform: rotate(75deg);
}

li:nth-child(8){
top: 33px;
transform: rotate(105deg);
}
li:nth-child(9){
top: 31px;
transform: rotate(120deg);
}

li:nth-child(10){
top: 29px;
transform: rotate(135deg);
}
li:nth-child(11){
top: 27px;
transform: rotate(150deg);
}

li:nth-child(12){
top: 25px;
transform: rotate(165deg);
}


</style>

</head>
<body>

<h2 style="text-align: center;"> <span style="color: orange">Ashoka</span>  <span style="color: green">Chakra</span> </h2>

<div class="chakra">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</div>

</body>
</html>


"I need your Help"
"Honestly, I have no idea how much to ask you for, but if you Donate minimum 30rs using PAYTM to support me, It's really gonna help me a lot."

Payment options is PAYTM NUMBER: 9518369954

10 comments:

  1. There are just two rulers who are supported as extraordinary sovereign throughout the entire existence of Indian Subcontinent, Mauryan Emperor Ashoka the Great and Mughal Emperor Akbar the Great. Ashoka (from 304 BCE to 232 BCE) was the third leader of the acclaimed Mauryan line, constructed probably the greatest domain at his time and turned into an impressive model of authority on the Buddhist custom. Buddhism began to thrive and spread everywhere on the world during his standard. https://www.cognitionboosters.com

    ReplyDelete
  2. if you want to get homework doer from a professional writer, you should choose a website that provides good services. Therefore, in order to find the best website, you need to check its customer feedback, credibility, and professionalism.

    ReplyDelete
  3. The most popular coats for winter 2022 are a panther print coat, false fur garment, vinyl coat, a larger than usual cape, a samaira sam dean jacket price, a curiously large midi coat, a twofold breasted coat, a belted coat, and a peacoat. Likewise, a knitted winter coat, a lilac coat, a pastel yellow coat, and a wrap coat.

    ReplyDelete
  4. HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides email verification service HTML are generally used to describe a web page's appearance/presentation (CSS) or functionality/behavior (JavaScript).

    ReplyDelete
  5. I am so happy to come across this piece of write up, very much advanced my understanding to the next top level. Great job and continue to do same. Cyborg Letterman Jacket

    ReplyDelete