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>
