How To Design Certificate using Html css And Format for print landscape and portrait Mode page Design

How To Design Certificate using Html CSS And Format for print landscape and portrait Mode page Design

OUTPUT:-


HTML AND CSS CODE FOR DESIGN CIRTIFICATE



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Cirtificate</title>
<style type="text/css">
    .Page{

    width:800px; height:600px;background-image: url('Background.png');background-size: 100% 100%;
}
.BorderDiv{
width:759px;margin-left: 1px; height:559px; padding:20px;background-image: url('Border.png');background-size: 100% 100%;
}
.Name{
top: -368px;position: relative;font-size: 26px;left: 21px;color: #1713eadb;width: 404px;
}
.Phone{
  top: -400px; width:686px;position: relative;font-size: 26px;color: #1713eadb;left: 307px;
}
.Email{
  top: -387px;width:400px;position: relative;font-size: 20px;left: 43px;color: #1713eadb;
}
.Header{
  width: 100%;
}
.Footer{
  width: 100%;position: relative;top: -285px;
}
.LogoDivyang{
  position: relative;width: 91px;top: 5px;left: 51px;
}
.Signature{
  position: relative;width: 91px;top: 12px;left: 229px;
}
.PramanText{
  width: 100%;width: 260px;position: relative;top: -78px;
}
.Sveeplogo{
  position: relative;width: 91px;top: 33px;left: 51px;
}

.Electionlogo{
  position: relative;width: 91px;top: 33px;left: 229px;
}
.Text{
  width: 100%; position: relative;    top: -163px; 
}
</style>
<style type="text/css" media="print">
   * {
    -webkit-print-color-adjust: exact !important;   /* Chrome, Safari */
    color-adjust: exact !important;                 /*Firefox*/
}


@page {

 size:A4 portrait;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin: 0;
    width: 100%;
    -webkit-print-color-adjust: exact;
}
@media print {
.Page{
width: 100%;
height: 600px;
}
.BorderDiv{
  width: 95%;
  height: 560px;
}

.Name{
  padding-left: 5px;
left: 21px;width: 49%;
margin-top: -8px;
}
.Phone{
  padding-left: 85px;
 left: 420px;width:42%;
margin-top: -2px;
}
.Email{
  padding-left: 0px;
left: 60px;
}
.Header{
  width: 100%;
}
.Footer{
  top: -315px;
}
.LogoDivyang{
  width: 98px;top: 20px;left: 65px;
}
.Signature{
  width: 98px;top: 12px;left: 240px;
}
.PramanText{
  position: relative;top: -78px;
}
.Sveeplogo{
  top: 33px;left: 51px;
}

.Electionlogo{
  top: 33px;left: 249px;
}
.Text{
   top: -163px; 
}


 .noprint{
display: none;
 }
 }
</style>
</head>

<body>
<div style="" class="Page">
<div style=" " class="BorderDiv">
<div style="" class="Header">
     <div style="float: left;width: 50%">
        <img src="sveeplogo.png" class="Sveeplogo" style="" />
     </div>
     <div style="float: left;width: 50%">
        <img src="electionlogo.png" class="Electionlogo" style=""/>
     </div>
 </div>      
 <div style="width: 100% ;">
        <img src="heading.png" style="width: 100%" />      
</div>
<div style="width: 100% ;text-align: center">
    <img src="PramanText.png" style="" class="PramanText" />
</div>

<div style="width: 100% ;text-align: center">
    <img src="Text.png" style=""  class="Text" />
<div class="Name"><span><?php echo $result1[0]['name']?></span></div>
<div class="Phone"><span ><?php echo $result1[0]['phone'];?></span></div>
<div class="Email"><span ><?php echo $result1[0]['email'];?></span></div>   
</div>
<div style="" class="Footer">
           <div style="float: left;width: 50%;">
            <img src="LogoDivyang.png" style="" class="LogoDivyang" />
           </div>
           <div style="float: left;width: 50%">
            <img src="Signature.png" style="" class="Signature" />
           </div>
</div>    
</div>
</div>
<input type="button" name="print" value="print" onclick="print()" class="noprint" />
</body>
</html>

No comments:

Post a Comment

Thank You For Your Great Contribution

Featured Post

how to post formdata or http.context.form data from angular 6 to asp.net mvc web api or api using Token based authentication with header

how to post formdata or http.context.form data from angular 6 to asp.net mvc web api or api using Token based authentication with header  ...

Popular Posts