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>

5 comments:

  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
  2. Pretty good post. I have just stumbled upon your blog and enjoyed reading your blog posts very much. I am looking for new posts to get more precious info. Big thanks for the useful info. Wordpress Hosting

    ReplyDelete
  3. Satisfying posting. It would appear that a lot of the stages are depending upon the originality aspect. “It’s a funny thing about life if you refuse to accept anything but the best, you very often get it.” by W. Somerset Maugham.. website design company nyc

    ReplyDelete
  4. Thanks, foг ones marvelous posting! I genuinely enjoyed reading it, you miggһt Ƅe a great author. I wiⅼl made certain to booҝmark your blog and ѡill often come back sometime soon. I want to encoᥙrage yourself to continue your great job, have a nice evening!
    Web Development Course
    best web development courses
    web development classes
    web development course near me
    Web Development Training
    training on web development
    web development training program
    web development training course
    web development summer training

    ReplyDelete

Thank You For Your Great Contribution

Featured Post

How to remove multiple item from FormArray

 How to remove multiple item from FormArray Call Method at any component :- this.removeItems(formArray, formcontrolCountryID, 2);  Meth...

Popular Posts