Indian flag using html and css

August 14, 2020

Rahul

Hello guys today we will learn How to create Indian flag using html and css

First we need to create two files index.html and style.css then we need to do code for it.

Step:1

Add below code inside index.html

<!DOCTYPE html>
<html>
<head>
 <title>Indian flag using html and css</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="chakra_row">
	<div class="saffron"></div>
	 <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>
	<div class="green"></div>
</div>
</body>
</html>

Step:2

Then we need to add code for style.css which code i provide in below screen.

*{
	margin: 0;
	padding: 0; 										
}
body {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	width: 100vw;
}
.chakra {
    width: 96px;
    height: 96px;
    border: 4px solid #000080;
    border-radius: 50%;
    margin: 10px auto;
    animation: rotate 4s linear infinite;
}
@keyframes rotate {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

.chakra li{
	list-style: none;
	width: 94px;
	border: 1px solid #000080;
	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);
}
.saffron {
    width: 100%;
    min-width: 600px;
    height: 100%;
    min-height: 100px;
    background: #FF9933;
    display: block;
}
.green {
    width: 100%;
    min-width: 600px;
    height: 100%;
    min-height: 100px;
    background: #138808;
    display: block;
}

Output:

Leave a Comment Cancel reply