409.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>चौथी-409</title>
        <link href="https://fonts.googleapis.com/css2?family=Amita:wght@700&family=Gotu&display=swap" rel="stylesheet">
    </head>


<body>
    <div class="container">
        <div id="box2" class="box"><a href="https://zpnilgavhan.github.io/edu/index.html">HOME</a>
        </div>
    </div>
    <div class="bx">
        <div id="wrapper">
            <div class="biodata">
                <h1 class="redt">निकालपत्रक</h1>
                <h2 class="redt">जि.प.शाळा निळगव्हाण<h4>(27020206701)</h4></h2>
                <h2 class="redt">इयत्ता - चौथी</h2>
                <h2 class="bluet">दीपक हेमंत भवरे</h2>
            </div>
            <table id="keywords" cellspacing="0" cellpadding="0">
              <thead>
                <tr>
                  <th><span>विषय</span></th>
                  <th><span>प्रथम-सत्र</span></th>
                  <th><span>व्दितीय-सत्र</span></th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>मराठी</td>
                  <td class="shera">अ-2</td>
                  <td class="shera">अ-2</td>
                </tr>
                <tr>
                  <td>इंग्रजी</td>
                  <td class="shera">ब-1</td>
                  <td class="shera">ब-1</td>
                </tr>
                <tr>
                  <td>गणित</td>
                  <td class="shera">अ-2</td>
                  <td class="shera">अ-2</td>
                </tr>
                <tr>
                    <td>परिसर अभ्यास</td>
                    <td class="shera">अ-2</td>
                  <td class="shera">अ-2</td>
                  </tr>
                <tr>
                  <td>कला</td>
                  <td class="shera">अ-2</td>
                  <td class="shera">अ-2</td>
                </tr>
                <tr>
                  <td>कार्यानुभव</td>
                  <td class="shera">अ-2</td>
                  <td class="shera">अ-2</td>
                </tr>
                <tr>
                  <td>शारीरिक शिक्षण</td>
                  <td class="shera">अ-2</td>
                  <td class="shera">अ-2</td>
                </tr>
              </tbody>
            </table>
            <div class="shera">
                <h4>शेरा- सर्व विषयांत पास होऊन पुढील वर्गात जाण्यास पात्र</h4>
             </div>
           </div>
           
    </div>
</body>

</html>

<style> 
            html{
                font-size: small;
                font-family: 'Gotu', sans-serif,'Amita', cursive;
            }
            body {
                /* Set a background color that will be displayed
                    while the background image is loading */
                background-image: url("https://images.unsplash.com/photo-1587826080692-f439cd0b70da?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60");
                background-color: #464646;
                
            }
            .container{
                background-color: black;
                border: solid 2px purple;
                display: flex;
                flex-wrap: wrap;
                width: 95%;
                height: auto;
                margin: auto;
                padding-top: 1rem;
                padding-bottom: 1rem;
                border-radius: 25px;
                justify-content: center;
                justify-content: space-around;
                align-items: center;
                
            }
            .box{
                 /* border: solid 2px whitesmoke;  */
                margin: auto;
                text-align: center;
            }
            a{
                text-decoration: none;
                color: whitesmoke ;
            }
            a:hover{
                color: rgb(62, 236, 9);
                zoom: 110%;
            }
            span:hover{
                color: rgb(62, 236, 9);
            }
            .ima1{
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
            }
            .recent{
                margin: auto;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                border: solid 2px violet;
                width: max-content;
                position: relative;
                top: 20vh;
                background-color: rgb(12, 78, 56);
            }
           .task{
               display: inline-flexbox;
               text-align: center;
               padding: 2vh;
               
           }
           .task:hover{
                color: rgb(62, 236, 9);
           }
           .xen{
                /* float: right; */
                position: fixed;
                bottom: 0;
                right: 0;
                zoom: 1;
                border: solid 2px whitesmoke;
                border-radius: 10%;
                background-color: blueviolet;
                padding: 1%;
            }
        #wrapper{
        display: block;
        width: 98%;
        background: #fff;
        margin: 0 0;
        border: solid 1vh  royalblue;
        border-radius: 25px;
        /* padding: 10px 17px;
        -webkit-box-shadow: 2px 2px 3px -1px rgba(0,0,0,0.35); */
        }

        h1{
            text-align: center;
            display: inline-block;
        }

        h2{
            display: inline-block;
            text-align: center;
        }

        .biodata{
            display: flex;
            flex-direction: column;
        }

        #keywords {
        margin: 0 auto;
        font-size: 1.2em;
        margin-bottom: 15px;
        border: solid 0.75vh slateblue;
        border-radius: 25px;
        padding: 1vh;
        text-align: center;
        }


        #keywords thead {
        cursor: pointer;
        background: #c9dff0;
        padding: 1.5vh;
        }
        #keywords thead tr th {
        font-weight: bold;
        padding: 2vh 1.5vh;
        padding-left: 1vh;
        border-radius: 25px;
        
        }
        #keywords thead tr th span { 
        padding-right: 0vh;
        background-repeat: no-repeat;
        background-position: 100% 100%;
        text-align: center;
        
        }

        #keywords thead tr th.headerSortUp, #keywords thead tr th.headerSortDown {
        background: #acc8dd;
        }

        #keywords tbody tr { 
        color: rgb(247, 12, 12);
        font-weight: bold;
        }
        #keywords tbody tr td {
        text-align: center;
        padding: 1vh 2vh;
        }
        .shera{
            color: rgb(9, 179, 80);
        }
        .redt{
            color: rgb(105, 11, 77);
        }
        .bluet{
            color:  rgb(241, 167, 7);;
        }
        .bx{
                text-align: center;
            }
</style>