<!DOCTYPE html>
<html lang="en">

<head>

	<!-- html2pdf CDN-->
	<script src=
"https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.2/html2pdf.bundle.js">
	</script>
   

	<style>
    
    
		.container {
			position : absolute;
			top: 20%;
			left: 28%;
			margin-top: -65px;
			margin-left: -100px;
			border-radius: 7px;
            
		}

		.card {
			box-sizing: content-box;
			width: 750px;
			height: fit-content;
			padding: 30px;
			border: 1px solid black;
			font-style: sans-serif;
			background-color: #f0f0f0;
		}

		#button {
			background-color: #4caf50;
			border-radius: 5px;
			
			margin-bottom: 5px;
			color: white;
		}
        #GHRCE{
            margin : 0px;
            text-align: center;
        }
        #auton{
            margin: 0%;
            text-align: center;
        }
        #dual{
            margin: 0%;
            text-align: center;
        }
        #crpf{
            margin: 0%;
            text-align: center;
        }
        span{
            margin-right: 15px;
        }
        #date{
            margin-left: 500px;
        }
        #clearance{
            text-align: center;
        }
        #udet{
            justify-content:space-between;
            font-weight: lighter;
            font-family:'Times New Roman', Times, serif;
            font-style: normal
            
            
        }
        .details{
            letter-spacing: 1px;
            line-height: 25px;
            text-align: center;
        }
        .tg{
            margin-left: 30px;
        }
        #sign{
            margin-left: 500px;
        }
        img{
            
            margin-left: 340px;
        }
       

	</style>
</head>

<body>
    
	<div class="container">
		<button id="button">Download PDF</button>
		<div class="card" id="makepdf">
			<div class = "heading">
                <img src="/images/logo.png" alt="LOGO">
                <h2 id = "GHRCE">G.H. RAISONI COLLEGE OF ENGINEERING</h2>
                <h5 id ="auton">(An Autonomous Institute affiliated to RashtrasantTukdojiMaharaj Nagpur University , Nagpur)</h5>
                <h5 id ="dual">Dual Accreditations NAAC "A+" Grade& NBA (Tier-1)</h5>
                <h5 id ="crpf">CRPF Fate No. 3 , Hingna Road , Digdoh Hills , Nagpur - 440016 (INDIA)</h5>
                <span>Phone : +91 9604787184 , 9689903286</span>
                <span>Email : principal.ghrce@raisoni.net</span>
                <span>Web : ghrce.raisoni.net</span>
                <hr>
            </div>

            <div class = "student">
                <span id = "date"> Date : DD / MM / YYYY</span>
                <h3 id ="clearance">STUDENT CLEARANCE CERTIFICATE</h3>
            </div>

            <div class = "details">
                <h4 id = "udet"> Mr/Ms "include name" was a student of IV "include degree" Section "include section" Roll No "include roll no" Registration Number "include reg no" Mobile Number "include mob no" and Appeared for "include summer winter and Year" examination . No Dues against him / her are as per following</h4>
            </div>
            <style type="text/css">
                .tg  {border-collapse:collapse;border-spacing:0;}
                .tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
                  overflow:hidden;padding:10px 5px;word-break:normal;}
                .tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
                  font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
                .tg .tg-0pky{border-color:inherit;text-align:left;vertical-align:top;width:50px;height:30px}
                .tg .tg-0lax{text-align:left;vertical-align:top;width :300px;height:50px}
                </style>
                <table class="tg">
                <thead>
                  <tr>
                    <th class="tg-0pky">Sr.No</th>
                    <th class="tg-0lax">Department</th>
                    <th class="tg-0lax">Signature</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td class="tg-0pky">1</td>
                    <td class="tg-0lax">Department HOD</td>
                    <td class="tg-0lax"></td>
                  </tr>
                  <tr>
                    <td class="tg-0pky"></td>
                    <td class="tg-0lax">Project Report Submitted</td>
                    <td class="tg-0lax"></td>
                  </tr>
                  <tr>
                    <td class="tg-0pky"></td>
                    <td class="tg-0lax">Internship Report Submitted</td>
                    <td class="tg-0lax"></td>
                  </tr>
                  <tr>
                    <td class="tg-0pky">2</td>
                    <td class="tg-0lax">Accounts Department</td>
                    <td class="tg-0lax"></td>
                  </tr>
                  <tr>
                    <td class="tg-0pky">3</td>
                    <td class="tg-0lax">Library Department</td>
                    <td class="tg-0lax"></td>
                  </tr>
                  <tr>
                    <td class="tg-0pky">4</td>
                    <td class="tg-0lax">Training and Placement Department</td>
                    <td class="tg-0lax"></td>
                  </tr>
                  <tr>
                    <td class="tg-0pky">5</td>
                    <td class="tg-0lax">Alumni Cell</td>
                    <td class="tg-0lax"></td>
                  </tr>
                </tbody>
                </table>
                <br>
                <br>
                <br>
                <span id = "sign">Student Signature</span>
		</div>
	</div>
</body>

<script>
	var button = document.getElementById("button");
	var makepdf = document.getElementById("makepdf");

    button.addEventListener("click", function () {
            html2pdf().from(makepdf).save();
        });


   
</script>

</html>
