Build a Custom Style HTML Adobe PDF Document Viewer Template Layout in HTML5 & CSS3

Build a Custom Style HTML Adobe PDF Document Viewer Template Layout in HTML5 & CSS3 The article is a lively article because it contains interesting information and your favorite.   

Build a Custom Style HTML Adobe PDF Document Viewer Template Layout in HTML5 & CSS3

Build a Custom Style HTML Adobe PDF Document Viewer Template Layout in HTML5 & CSS3

<div class="page">
    <header style="padding: 100px 0 0 110px;">
        The PDF... That's actually an HTML page.
    </header>
    <div class="banner">
        <h2>Prints with the individual pages seprate </h2>
    </div>

    <div style="float: right;width: 650px;" class="infoDiv">
        <p style="margin-bottom: 5px;">Note:</p>
        <h2 style="font-size: 28px;margin-top: 0;">This doesn't work if it's trying to print in an iframe. (Like in the editor...)</h2>
        <br>
      <p style="margin: 45px 0 280px;">Valid Through: 
        <span style="font-size: 40px; display: inline-block; margin-bottom: -35px;">∞</span>
      </p>
        <p>Submitted by:</p>
        <h2 style="margin-top: 0; font-size: 28px; font-weight: normal;">Pixel|Acorn</h2>
        <br>
    </div>
    
    <div class="blueStripe">
    </div>

    <hr style="border: none;   border-top: 4px solid #E0E0E0; margin: 50px 0; height: 0; width: 100%" />

    <div class="page_footer">This has no copyright what-so-ever | Use at will</div>
</div>
<div class="page">
  <h1>Put as many as you want on here...</h1>
</div>

<div class="page">
  <h1>Printing will always separate them...</h1>
</div>

<div class="page">
  <h1>Every single one...</h1>
</div>
/*Stuff neccesary to make PDF viewer work*/
html{
  background-color:#525659;
}
body{
  width: 815px;
  margin: auto;
}
.page {
  background-color: white;
  box-shadow: 0 1px 3px 2px #383a3c;
  height: 1054px;
  box-sizing: border-box;
  padding: 1px 0;
  margin: 5px 0 12px;
  page-break-after: always;
  page-break-inside:avoid;
  position: relative;
}
@media print {
  .page {
    box-shadow: none;
    margin: 0;
  }
  html{
    background-color: white !important;
  }
}


/*Stuff for show...*/
body{
    font-family: 'Open Sans', sans-serif;
}

header{
  color: #000044;
  font: bold 30px 'Open Sans', sans-serif;
  
}
.banner{
  background-color: #DDDDDD;
  color: black;
  width: 90%;
  margin: 20px 0 50px;
  padding: 16px 0;
}
.banner h2{
  padding-left: 110px;
  margin: 0;
  font-size: 23px;
}

.blueStripe{
  width: 20px;
  height: 600px;
  background-color: #c3ccf2;
  margin-left: 110px;
}

.infoDiv {
  color: #3D3D3D;
  font-size: 18px;
}


.page_footer {
  text-align: center;
  position: absolute;
  color: #424242;
  bottom: 0;
  left: 0;
  width: 815px;
  padding: 45px 0;
  font-size: 11px;
}
.page_header, .page_header p{
  text-align: right;
  color: #747474;
  margin-top: 10px;
  font-size: 14px;
}

Read Also: Build a Live Coronavirus Covid-19 World Map Cases Tracker Animation in Browser Using HTML5 CSS3 and Javascript

Final Words

I hope you find the article Build a Custom Style HTML Adobe PDF Document Viewer Template Layout in HTML5 & CSS3 uses. The reason is that we have told you all the information through this article in a way that you can understand. And if you have any doubts, you can express your doubts through the comment box. We also ask that you help share this article with your friends.

Hi, I'm Selva a full-time Blogger, YouTuber, Affiliate Marketer, & founder of Coding Deekshi. Here, I post about programming to help developers.

Share on:

Leave a Comment