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>

1 comment:

  1. This is an awesome post. Really very informative and creative contents. This concept is a good way to enhance knowledge. I like it and help me to development very well. Thank you for this brief explanation and very nice information. Well, got good knowledge.
    WordPress development company in Chennai

    ReplyDelete

Thank You For Your Great Contribution

Featured Post

Asp.net And HTML Css And Web Development: How To Use Mat Table /Data Table in angular 6

Asp.net And HTML Css And Web Development: How To Use Mat Table /Data Table in angular 6 : How To Use Mat Table /Data Table in angular 6 ...

Popular Posts