Build a Custom Style HTML Adobe PDF Document Viewer Template Layout in HTML5 & CSS3 Full Project For Beginners

Build a Custom Style HTML Adobe PDF Document Viewer Template Layout in HTML5 & CSS3 Full Project For Beginners

 

Welcome folks today in this blog post we will be building a custom style html adobe pdf document viewer template layout in html5 and css3. All the full source code of the application is shown below.

 

 

Get Started

 

 

In order to get started you need to make an index.html file and copy paste the following code

 

index.html

 

<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>

 

READ  Authenticate your users in Node with Passport.js

 

Now create a style.css file and copy paste the following code

 

style.css

 

/*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;
}

 

 

Now open the index.html file inside the browser you will see the below screenshot

 

Leave a Reply