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>

17 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
    Replies
    1. Great Article Image Processing Projects Deep Learning Projects for Final Year JavaScript Training in Chennai JavaScript Training in Chennai The Angular Training covers a wide range of topics including Components, Angular Directives, Angular Services, Pipes, security fundamentals, Routing, and Angular programmability. The new Angular TRaining will lay the foundation you need to specialise in Single Page Application developer. Angular Training Project Centers in Chennai

      Delete
  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
    Replies
    1. The writer has outdone himself this time. It is not at all enough; the website is also utmost perfect. I will never forget to visit your site again and again.

      Delete
  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
  5. What a really awesome post this is. Truly, one of the best posts I've ever witnessed to see in my whole life. Wow, just keep it up. Posicionamiento web

    ReplyDelete
  6. The writer has outdone himself this time. It is not at all enough; the website is also utmost perfect. I will never forget to visit your site again and again. dotcomsecrets

    ReplyDelete
  7. Are you searching for Best Website development services Web Design Company Toronto. Our main aim is to provide incredible and world-class services as well as enhance client's business growth in cut-throat market.

    ReplyDelete
  8. I wish for the great of success in all of our destiny endeavors web design agencies in new york

    ReplyDelete
  9. I wish for the great of success in all of our destiny endeavors web design agencies in new york

    ReplyDelete
  10. Custom SEO services that fit your unique business needs. Get an analysis, strategy, forecast, project plan, key performance indicators and a timeline for free before signing up

    ReplyDelete
  11. Custom SEO services that fit your unique business needs. Get an analysis, strategy, forecast, project plan, key performance indicators and a timeline for free before signing up

    ReplyDelete
  12. The writer has outdone himself this time. It is not at all enough; the website is also utmost perfect. I will never forget to visit your site again and again.

    ReplyDelete
  13. Thanks for sharing this is a fantastic article. Thanks Again. Will read on...
    Digital Agency London

    ReplyDelete
  14. A portion of the hosting are truly reasonable and some even free contingent upon your application decision. https://onohosting.com/

    ReplyDelete

Thank You For Your Great Contribution

Featured Post

How to integrate okta with react / Implementing Okta authentication in a React app

 How to integrate okta with react /  Implementing Okta authentication in a React app for demo please follow  my git repo 1).Before starting ...

Popular Posts