body {
background-color: #f2f2f2;
text-align: center;
font-family: Arial, sans-serif;
}

.shivling {
width: 200px;
height: 300px;
background-color: #5e6062;
border-radius: 50%;
position: relative;
margin: 50px auto;
}

.base {
width: 150px;
height: 100px;
background-color: #56575a;
border-radius: 50% / 10%;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}

.dot {
width: 30px;
height: 30px;
background-color: #75787b;
border-radius: 50%;
position: absolute;
bottom: 100px;
left: 50%;
transform: translateX(-15px);
}

🙏 How to make a Shivling using HTML and CSS 🤫

Happy 😊 Maha Shivratri!

In this HTML and CSS code, we have created a simple representation of a Shivling using basic shapes and styling. The main element is a circle with a dark gray color which represents the Shivling. The base of the Shivling is also represented by a rounded shape at the bottom of the circle. Additionally, a small dot is placed at the center of the Shivling to symbolize the presence of Lord Shiva.

To create this design, we used HTML for structure and CSS for styling. We defined classes for the main Shivling element, the base, and the dot using CSS properties like width, height, background-color, border-radius, position, and transformation.

Feel free to customize this code and add more details to create your own unique representation of a Shivling using HTML and CSS. Wishing you a Happy Maha Shivratri! 🙏