Create a Beautiful Rakhi Design with HTML and CSS
In this tutorial, I'll show you how to create a beautiful Rakhi design using just HTML and CSS. This design is simple and easy to implement, perfect for your website or project.
The Rakhi design consists of a medallion with a name, surrounded by beads, and a thread on each side. The medallion is created using a circular div with text inside, and the thread is represented by a long, thin rectangle.
You can copy the code below and use it in your project:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rakhi Design</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.rakhi-container {
position: relative;
display: flex;
align-items: center;
}
.rakhi-thread {
width: 150px;
height: 10px;
background-color: gold;
}
.rakhi-medallion {
width: 100px;
height: 100px;
background-color: green;
border: 5px solid gold;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
color: gold;
font-family: Arial, sans-serif;
font-size: 40px;
font-weight: bold;
}
.rakhi-bead {
width: 20px;
height: 20px;
background-color: blue;
border: 3px solid gold;
border-radius: 50%;
margin: 0 5px;
}
.rakhi-bead.light {
background-color: lightblue;
}
</style>
</head>
<body>
<div class="rakhi-container">
<!-- Left side thread -->
<div class="rakhi-thread"></div>
<!-- Beads on the left side -->
<div class="rakhi-bead"></div>
<div class="rakhi-bead light"></div>
<div class="rakhi-bead"></div>
<!-- Central medallion -->
<div class="rakhi-medallion">RAJ</div>
<!-- Beads on the right side -->
<div class="rakhi-bead"></div>
<div class="rakhi-bead light"></div>
<div class="rakhi-bead"></div>
<!-- Right side thread -->
<div class="rakhi-thread"></div>
</div>
</body>
</html>