Scribd
Upload
4 views3 pages

? Simple Flower Program

The document contains two HTML and CSS flower design programs: a simple static flower and an animated rotating flower. The first program creates a flower with four petals and a center, while the second program adds animation to the flower, making it rotate continuously. Instructions for saving and opening the HTML files in a browser are also provided.

Uploaded by

satyarambaghel80
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views3 pages

? Simple Flower Program

The document contains two HTML and CSS flower design programs: a simple static flower and an animated rotating flower. The first program creates a flower with four petals and a center, while the second program adds animation to the flower, making it rotate continuously. Instructions for saving and opening the HTML files in a browser are also provided.

Uploaded by

satyarambaghel80
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

🌼 Simple Flower Program (HTML + CSS)

<!DOCTYPE html>
<html>
<head>
<title>Flower Design</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f8ff;
}

.flower {
position: relative;
width: 100px;
height: 100px;
}

.petal {
width: 50px;
height: 50px;
background-color: pink;
border-radius: 50%;
position: absolute;
}

.petal:nth-child(1) { top: 0; left: 25px; }


.petal:nth-child(2) { top: 25px; left: 50px; }
.petal:nth-child(3) { top: 50px; left: 25px; }
.petal:nth-child(4) { top: 25px; left: 0; }

.center {
width: 40px;
height: 40px;
background-color: yellow;
border-radius: 50%;
position: absolute;
top: 30px;
left: 30px;
}
</style>
</head>

<body>

<div class="flower">
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="center"></div>
</div>

</body>
</html>

1. Notepad खोलो
2. ऊपर वाला code copy करो
3. file save करो → [Link]
4. Browser में open करो (Chrome, Edge आदि)

🌹 Animated Flower Program (घूमता हुआ)


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

<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #eef;
}

/* Flower container */
.flower {
position: relative;
width: 150px;
height: 150px;
animation: rotateFlower 5s linear infinite;
}

/* Rotation animation */
@keyframes rotateFlower {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

/* Petals */
.petal {
width: 60px;
height: 60px;
background: pink;
border-radius: 50%;
position: absolute;
}

.petal:nth-child(1) { top: 0; left: 45px; }


.petal:nth-child(2) { top: 45px; left: 90px; }
.petal:nth-child(3) { top: 90px; left: 45px; }
.petal:nth-child(4) { top: 45px; left: 0; }

/* Center */
.center {
width: 50px;
height: 50px;
background: yellow;
border-radius: 50%;
position: absolute;
top: 50px;
left: 50px;
}
</style>

</head>

<body>

<div class="flower">
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="center"></div>
</div>

</body>
</html>

You might also like