Home
Beginner to Intermediate: This tutorial is suitable for both beginners and intermediate developers who are familiar with basic HTML and CSS.

Create a Stunning Rakhi Design Using HTML and CSS – Easy Step-by-Step Guide!

Learn how to create a beautiful Rakhi design with HTML and CSS in just a few easy steps. Perfect for beginners and web developers looking to add a fes
Create a Beautiful Rakhi Design with HTML and CSS

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>
#Beginner to Intermediate: This tutorial is suitable for both beginners and intermediate developers who are familiar with basic HTML and CSS.

Post a Comment

© ‧ Uspacial ‧ All rights reserved. Developed by Fineshop
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
More Details
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.
NextGen Digital Welcome to WhatsApp chat
Howdy! How can we help you today?
Type here...