karak grah

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>Kundli with 12 Houses</title>
    <style>
        .chart {
            width: 300px;
            height: 300px;
            position: relative;
            border: 2px solid orange;
            background: white;
            font-family: Arial, sans-serif;
        }

        .house {
            position: absolute;
            font-size: 10px; /* Adjust size as needed */
            font-weight: bold;
            color: black;
            text-align: center;
            width: 50px; /* Increase width to fit longer text */
            height: 50px; /* Increase height to fit longer text */
            line-height: 50px; /* Align text vertically within the box */
            white-space: nowrap; /* Prevent text from wrapping */
            overflow: visible; /* Allow overflow text to be visible */
            text-overflow: clip; /* No ellipsis; just clip text if it overflows */
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Positioning of houses */
        .house-1 { top: 30%; left: 35%; transform: translate(50%, 0); }  /* Center Top */
        .house-2 { top: -5%; left: 15%; transform: translate(15%, 50%); } /* Top Left */
        .house-3 { top: 25%; left: 10%; transform: translate(-50%, -50%); } /* Left Middle */
        .house-4 { top: 45%; left: 17%; transform: translate(50%, 0); }
        .house-5 { bottom: 10%; left: 15%; transform: translate(-50%, -50%); } /* Bottom Center */
        .house-6 { bottom: 15%; left: 15%; transform: translate(15%, 50%); } /* Bottom Right */
        .house-7 { bottom: 30%; left: 35%; transform: translate(50%, 0); }  /* Top Right */
        .house-8 { bottom: 15%; right: 20%; transform: translate(15%, 50%); } /* Top Right */
        .house-9 { bottom: 5%; right: -5%; transform: translate(-50%, -50%); } /* Center Right */
        .house-10 { top: 45%; right: 5%; transform: translate(-50%, -50%); } /* Center Center */
        .house-11 { top: 20%; right: -5%; transform: translate(-50%, -50%); } /* Bottom Center Right */
        .house-12 { top: -5%; right: 15%; transform: translate(15%, 50%); } /* Fixed Syntax for House-12 */

        .inner-square {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 70%;
            height: 70%;
            background: transparent;
            border: 2px solid blue;
            transform: translate(-50%, -50%) rotate(45deg);
        }

        .diagonal {
            position: absolute;
            background-color: #ff0000;
            height: 2px;
            z-index: 1;
        }

        .diagonal.ad {
            top: 0;
            left: 0;
            width: 141%;
            transform: rotate(45deg);
            transform-origin: top left;
        }

        .diagonal.bc {
            bottom: 0;
            left: 0;
            width: 141%;
            transform: rotate(-45deg);
            transform-origin: bottom left;
        }
    </style>
</head>
<body>
    <div class="chart">
        <!-- Houses -->
        <div class="house house-1">SU</div> <!-- Sun -->
        <div class="house house-2">MO</div> <!-- Moon -->
        <div class="house house-3">MA</div> <!-- Mars -->
        <div class="house house-4">MO ME</div> <!-- Mercury -->
        <div class="house house-5">VE</div> <!-- Venus -->
        <div class="house house-6">MA, SA</div> <!-- Jupiter -->
        <div class="house house-7">JU</div> <!-- Saturn -->
        <div class="house house-8">SA</div> <!-- Rahu -->
        <div class="house house-9">SU JU</div> <!-- Ketu -->
        <div class="house house-10">SU JU RA ME SA</div> <!-- Sun -->
        <div class="house house-11">JU</div> <!-- Moon -->
        <div class="house house-12">KE SA</div> <!-- Mars -->

        <!-- Inner Rotated Square -->
        <div class="inner-square"></div>

        <!-- Diagonals connecting the outer square corners -->
        <div class="diagonal ad"></div>
        <div class="diagonal bc"></div>
    </div>
</body>
</html>

AAAA Kundli with 12 Houses
SU
MO
MA
MO ME
VE
MA, SA
JU
SA
SU JU
SU JU RA ME SA
JU
KE SA

Comments

Post a Comment

Popular posts from this blog

astrology form with longitude and latitude code

  add in layout - add gadget- html/javascript paste and save <!-- HTML form for horoscope input with time zone, longitude, and latitude --> <form id="horoscopeForm">   <label>Date of Birth:</label>   <input type="date" id="dob" /><br />   <label>Time of Birth:</label>   <input type="time" id="tob" /><br />   <label>City:</label>   <input type="text" id="city" placeholder="Enter city" /><br />   <label>Country:</label>   <input type="text" id="country" placeholder="Enter country" /><br />   <label>Time Zone:</label>   <select id="timezone">     <option value="+00:00" />UTC (Coordinated Universal Time)     <option value="-05:00" />EST (Eastern Standard Time - US & Canada)     <option value="-08:00"...
Read more

KARKA OF HOUSE 2 WORKING GOOD

<!doctype html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta content="width=device-width, initial-scale=1.0" name="viewport">     <title>Kundli with 12 Houses</title>     <style>         .chart {             width: 300px;             height: 300px;             position: relative;             border: 2px solid orange;             background: white;             font-family: Arial, sans-serif;         }         .house {             position: absolute;             font-size: 10px;             font-weight: bold;             color: black...
Read more