0byt3m1n1
Path:
C:
/
wamp64
/
www
/
id
/
templates
/
[
Home
]
File: Mozillians-Card.html
<!doctype html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="../css/mozillians-card/front.css"> </head> <body> <div class="id-card-holder"> <div class="header"> <div> <img class="header-logo" src="images/mozillians-logo.png"> <h6 class="header1">Center For Water Resources</h6> <h6 class="header2">Development and Management</h6> <p class="header3">(An Institution of KSCSTE,Govt of Kerala)</p> </div> </div> <div class="photo"> <img src="images/"> </div> <div class="employee-data"> <h2>203601</h2> <h2>Nuhman bk</h2> <h2>Developer</h2> </div> <div class="footer footer-text"> <p class="footer1">Kunnamangalam,Kozhikode - 673571</p> <p class="footer2">Ph: 0495 2351800 | www.cwrdm.org</p> </div> </div> <div class="id-card-holder-back"> <div class="header-back"> </div> <div class="employee-details"> <table class="table-back"> <tbody> <tr> <td class="fixed-width">Division<span class="two-dot">:</span></td> <td class="table-data">ABCD</td> </tr> <tr> <td class="fixed-width">Project Code<span class="two-dot">:</span></td> <td class="table-data">QWE123</td> </tr> <tr> <td class="fixed-width">Blood Group<span class="two-dot">:</span></td> <td class="table-data">o +ve</td> </tr> <tr> <td class="fixed-width">Phone No<span class="two-dot">:</span></td> <td class="table-data">0202-220966</td> </tr> <tr> <td class="fixed-width">Mob No<span class="two-dot">:</span></td> <td class="table-data">9879876655</td> </tr> <tr> <td class="fixed-width">Valid From<span class="two-dot">:</span></td> <td class="table-data">11/11/2020</td> </tr> <tr> <td class="fixed-width">Valid To<span class="two-dot">:</span></td> <td class="table-data">11/11/2020</td> </tr> <tr> <td class="fixed-width">Address<span class="two-dot">:</span></td> <td class="table-address-data">mavayil house nellikkaparambu po mukkam 673602 pin</td> </tr> </tbody> <tfoot class="table-footer"> <tr> <td class="td1"> <img class="qr-code" src="https://www.shopify.com/growth-tools-assets/qr-code/shopify-faae7065b7b351d28495b345ed76096c03de28bac346deb1e85db632862fd0e4.png"> </td> <td class="td2">Registrar</td> <td class="td3">Seal</td> </tr> </tfoot> </table> </div> <div class="footer-back"> </div> </div> </body> </html> <style> body { background-color: #d7d6d3; font-family: "opensans", Helvetica; } .id-card-holder { background-color: #fff; width: 220px; height: 340px; position: absolute; left: 100px; top: 100px; } .header-logo { width: 34px; margin-top: 11px; margin-left: 7px; } .photo img { width: 80px; margin-top: 15px; text-align: center; } h2 { font-size: 15px; margin: 10px 0; } h3 { font-size: 12px; margin: 2.5px 0; font-weight: 300; } .photo { text-align: center; margin-top: 8px; } .employee-data { text-align: center; margin-top: 20px; font-family: "opensanslight"; line-height: 1; } .footer-text { width: 100%; height: 32px; padding-top: 4px; } .header1{ position: absolute; top: -17px; left: 54px; font-size: 11px; } .header2{ position: absolute; top: -5px; left: 45px; font-size: 11px; } .header3{ position: absolute; top: 27px; left: 51px; font-size: 8px; } .footer1{ font-size: 10px; margin: 0px; } .footer2{ font-size: 9px; margin: 0px; } </style> <style> .id-card-holder-back { background-color: #fff; width: 220px; height: 340px; position: absolute; left: 340px; top: 100px; } .header-back { background-color: #2F9CD6; height: 20px; } .footer-back { background-color: #2F9CD6; position: absolute; bottom: 0px; width: 100%; height: 20px; } .table-back{ font-size: 9px; padding-top: 15px; padding-left: 10px; padding-right: 8px; border-spacing: 6px; font-weight: 600; width: 100%; } .fixed-width{ width: 65px; vertical-align: top; } .table-address-data{ width: 80px; font-family: "opensanslight"; font-size: 8px; word-break: break-word; } .two-dot{ float: right; } .qr-code { width: 50px; } .table-footer{ position: absolute; bottom: 20px; left: 6px; } .td1{ padding-right: 22px; } .td2{ padding-right: 30px; font-size: 8px; vertical-align: bottom; } .td3{ font-size: 8px; vertical-align: bottom; } .table-data{ font-family: "opensanslight"; font-size: 8px; } /* h2 { font-size: 15px; margin: 5px 0; } h3 { font-size: 12px; margin: 2.5px 0; font-weight: 300; } */ </style>