123

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <div class="container">
<input type="button" id="btnexport-report" value="Export to PDF">
<div class="report">
   
    <div class="wrapper">
        <main>
            <header>
                <div class="top-row">
                    <div class="report-title">
                        <h2>Project 1</h2>
                    </div>
                    <div class="report-date">
                        2016-04-17
                    </div>
                </div>
                <div class="bottom-row">

                    <div class="label block">
                        Project Sponsor:
                    </div>
                    <div class="value block">
                        sponsor 1
                    </div>
                    <div class="label block">
                        Project Manager:
                    </div>
                    <div class="block">
                        Manager 1
                    </div>
                    <div class="label block">
                        Project ID:
                    </div>
                    <div class="value block">
                        ID1
                    </div>
                    <div class="label block">
                        Project Stage:
                    </div>
                    <div class="value block">
                        Design
                    </div>
                </div>
            </header>
            <section class="project-overview">
                <h3>Project overview: </h3>
                <div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Omnis totam eos possimus iusto optio sapiente cupiditate fugiat dicta. Repellendus numquam amet corrupti aperiam perspiciatis aliquid id deserunt, doloremque illo accusamus!</!lorem></div>
            </section>
            <section class="status-summary">
                <h3>
                     Status summary:
                </h3>
                <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus perspiciatis eligendi dolor veniam quisquam quis beatae corporis quam nulla. Nostrum iusto ea repudiandae aliquam amet! Adipisci animi quibusdam ducimus earum? </div>
            </section>
            <section class="key-activities-current">
                <h3>
                    Key activities this period:
                </h3>
                <div>* Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quia ducimus voluptas quisquam voluptatem veritatis veniam, illum magnam dicta officiis dolor eaque delectus nihil optio natus atque sunt suscipit tempore possimus?
                </div>
            </section>
            <section class="key-activities-next">
                <h3>
                    Key activities next period:
                </h3>
                <div>*Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo quod magni nisi tempore inventore temporibus odit neque blanditiis, non nesciunt ducimus nam itaque enim, deserunt architecto quam fugit, aliquam sapiente.</div>
            </section>
            <section class="risks">
                <div class="risks-title">
                    <h3>Risks and Issues</h3>
                </div>
                <table>
                    <tbody><tr class="table-header">
                        <th>Ref</th>
                        <th>Description</th>
                        <th>Actions and Escalation (if required)</th>
                        <th>blah</th>
                    </tr>
                    <tr>
                        <td></td>
                        <td>None currently</td>
                        <td></td>
                        <td></td>
                    </tr>
                </tbody></table>
            </section>
        </main>
        <aside>
            <div class="row">
                <div>key: </div>
                <ul>
                    <li class="color green">Green – On track</li>
                    <li class="color amber">Orange – At risk</li>
                    <li class="color red">Red – Significantly at risk / missed milestone</li>
                </ul>
            </div>
            <section class="status-period">
                <table>
                    <tbody><tr>
                        <th>RAG Status</th>
                        <th>Last Period</th>
                        <th>Current Period</th>
                    </tr>
                    <tr>
                        <td>Budget</td>
                        <td class="color bg-Amber">TBD</td>
                        <td class="color bg-Amber">Amber</td>
                    </tr>
                    <tr>
                        <td>Plan</td>
                        <td class="color bg-Amber">TBD</td>
                        <td class="color bg-Amber">Amber</td>
                    </tr>
                    <tr>
                        <td>Scope</td>
                        <td class="color bg-Green">TBD</td>
                        <td class="color bg-Green">Green</td>
                    </tr>
                    <tr>
                        <td>Resources</td>
                        <td class="color bg-Green">TBD</td>
                        <td class="color bg-Green">Green</td>
                    </tr>

                    <tr>
                        <td>Overall</td>
                        <td class="color bg-amber">Amber</td>
                        <td class="color bg-Amber">Amber</td>
                </tr></tbody></table>
            </section>
            <section class="budget">
                <h3>Budget 2017/18 </h3>
                <table>
                    <tbody><tr>
                        <th></th>
                        <th>Budget</th>
                        <th>Forecast</th>
                        <th>Actual</th>
                    </tr>
                    <tr>
                        <td>Capital</td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>Revenue</td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>Total</td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                </tbody></table>
            </section>
            <section class="milestones">
                <h3>Milestone Plan (Key Milestone Tracker)</h3>
                <table>
                    <tbody><tr>
                        <th>Milestone(end date)</th>
                        <th>Baseline</th>
                        <th>Forecast</th>
                        <th>Actual </th>
                    </tr>
                    <tr class="bg-">
                        <td>Concept – G1</td>
                        <td></td>
                        <td>2015-11-02</td>
                        <td></td>
                    </tr>
                    <tr class="bg-">
                        <td>Define - G2</td>
                        <td></td>
                        <td>2016-02-20</td>
                        <td></td>
                    </tr>
                    <tr class="bg-">
                        <td>Design - G3</td>
                        <td></td>
                        <td>2018-05-17</td>
                        <td></td>
                    </tr>
                    <tr class="bg-">
                        <td>Deliver - G4</td>
                        <td></td>
                        <td>2018-09-13</td>
                        <td></td>
                    </tr>
                    <tr class="bg-">
                        <td>Close - G5</td>
                        <td></td>
                        <td>2018-10-11</td>
                        <td></td>
                    </tr>
                </tbody></table>
            </section>
            <section class="concepts">
                <table>
                    <tbody><tr>
                        <th>Concept </th>
                        <th>Define </th>
                        <th>Design </th>
                        <th>Deliver </th>
                        <th>Close </th>
                    </tr>
                    <tr>
                        <td>Prject Mandate </td>
                        <td>PID </td>
                        <td>Low Level Design </td>
                        <td>Test Scripts </td>
                        <td>Project closure report </td>
                    </tr>
                    <tr>
                        <td>Impact Assessment </td>
                        <td>High Level Design </td>
                        <td>Service Delivery Low Level Design </td>
                        <td>Test Exist report </td>
                        <td> </td>
                    </tr>
                    <tr>
                        <td>Business Case funding approval </td>
                        <td>Service Delivery High Level Design </td>
                        <td>Disaster recovery approach </td>
                        <td>Build Handover Document </td>
                        <td> </td>
                    </tr>
                    <tr>
                        <td> </td>
                        <td>Business Requirements Document </td>
                        <td>Test Aproach </td>
                        <td>Training &amp; Support Materials </td>
                        <td> </td>
                    </tr>
                    <tr>
                        <td> </td>
                        <td>IT Delivery Plan </td>
                        <td>Test Scenarios, Conditions and results </td>
                        <td>Business Readiness Sign off </td>
                        <td> </td>
                    </tr>
                    <tr>
                        <td> </td>
                        <td>Budget Tracker </td>
                        <td> </td>
                        <td>Service Delivery Transition Document </td>
                        <td> </td>
                    </tr>
                    <tr>
                        <td> </td>
                        <td>BRD </td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                    </tr>
                    <tr>
                        <td> </td>
                        <td>RAID log </td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                    </tr>
                </tbody></table>

            </section>
            <section class="Artefacts">
                <div class="indicator key">Artefact Key: </div>
                <div class="indicator Complete">Complete</div>
                <div class="indicator Due">Due</div>
                <div class="indicator NotRequired">Not Required</div>
                <div class="indicator Missing">Missing</div>
            </section>
        </aside>
         </div>
          <hr>
    <div class="wrapper">
        <main>
            <header>
                <div class="top-row">
                    <div class="report-title">
                        <h2>project 2</h2>
                    </div>
                    <div class="report-date">
                        2017-12-01
                    </div>
                </div>
                <div class="bottom-row">

                    <div class="label block">
                        Project Sponsor:
                    </div>
                    <div class="value block">
                        sponsor 2
                    </div>
                    <div class="label block">
                        Project Manager:
                    </div>
                    <div class="block">
                        PM2
                    </div>
                    <div class="label block">
                        Project ID:
                    </div>
                    <div class="value block">
                        ID
                    </div>
                    <div class="label block">
                        Project Stage:
                    </div>
                    <div class="value block">
                        Design
                    </div>
                </div>
            </header>
            <section class="project-overview">
                <h3>Project overview: </h3>
                <div>​Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur voluptatibus nihil doloremque repellendus architecto magni molestiae amet fugiat, veniam unde atque animi autem porro asperiores dolor illo aliquid deleniti excepturi!</div>
            </section>
            <section class="status-summary">
                <h3>
                     Status summary:
                </h3>
                <div>​         </div>
            </section>
            <section class="key-activities-current">
                <h3>
                    Key activities this period:
                </h3>
                <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, accusamus? Iure dolore recusandae, at magnam nam quae error, nisi fugiat aut nihil obcaecati molestias exercitationem non iste quidem molestiae tempora. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iste quasi adipisci reiciendis dolore ex labore molestiae, dolores quis qui quae. Inventore tempore nostrum magnam, deleniti obcaecati itaque quaerat est temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, est. Cum praesentium ea et animi? Aut dicta, perspiciatis, inventore, numquam illum alias neque quasi deserunt dignissimos autem beatae similique possimus?
                </div>
            </section>
            <section class="key-activities-next">
                <h3>
                    Key activities next period:
                </h3>
                <div> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque possimus laborum magni sunt optio provident sit, nulla voluptatibus pariatur saepe asperiores doloremque ab dicta praesentium quidem cum hic porro quae! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta id eos aspernatur, dolores reiciendis, itaque beatae sed aliquid nobis aliquam labore cupiditate quod, iusto perspiciatis sint commodi veritatis deserunt molestias.</div>
            </section>
            <section class="risks">
                <div class="risks-title">
                    <h3>Risks and Issues</h3>
                </div>
                <table>
                    <tbody><tr class="table-header">
                        <th>Ref</th>
                        <th>Description</th>
                        <th>Actions and Escalation (if required)</th>
                        <th>RAG</th>
                    </tr>
                    <tr>
                        <td></td>
                        <td>None currently</td>
                        <td></td>
                        <td></td>
                    </tr>
                </tbody></table>
            </section>
        </main>
        <aside>
            <div class="row">
                <div>key: </div>
                <ul>
                    <li class="color green">Green – On track</li>
                    <li class="color amber">Orange – At risk</li>
                    <li class="color red">Red – Significantly at risk / missed milestone</li>
                </ul>
            </div>
            <section class="status-period">
                <table>
                    <tbody><tr>
                        <th>RAG Status</th>
                        <th>Last Period</th>
                        <th>Current Period</th>
                    </tr>
                    <tr>
                        <td>Budget</td>
                        <td class="color bg-">TBD</td>
                        <td class="color bg-"></td>
                    </tr>
                    <tr>
                        <td>Plan</td>
                        <td class="color bg-">TBD</td>
                        <td class="color bg-"></td>
                    </tr>
                    <tr>
                        <td>Scope</td>
                        <td class="color bg-">TBD</td>
                        <td class="color bg-"></td>
                    </tr>
                    <tr>
                        <td>Resources</td>
                        <td class="color bg-">TBD</td>
                        <td class="color bg-"></td>
                    </tr>

                    <tr>
                        <td>Overall</td>
                        <td class="color bg-amber">Amber</td>
                        <td class="color bg-Green">Green</td>
                </tr></tbody></table>
            </section>
            <section class="budget">
                <h3>Budget 2017/18 </h3>
                <table>
                    <tbody><tr>
                        <th></th>
                        <th>Budget</th>
                        <th>Forecast</th>
                        <th>Actual</th>
                    </tr>
                    <tr>
                        <td>Capital</td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>Revenue</td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>Total</td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                </tbody></table>
            </section>
            <section class="milestones">
                <h3>Milestone Plan (Key Milestone Tracker)</h3>
                <table>
                    <tbody><tr>
                        <th>Milestone(end date)</th>
                        <th>Baseline</th>
                        <th>Forecast</th>
                        <th>Actual </th>
                    </tr>
                    <tr class="bg-">
                        <td>Concept – G1</td>
                        <td></td>
                        <td>2016-01-01</td>
                        <td></td>
                    </tr>
                    <tr class="bg-">
                        <td>Define - G2</td>
                        <td></td>
                        <td>2016-01-03</td>
                        <td></td>
                    </tr>
                    <tr class="bg-">
                        <td>Design - G3</td>
                        <td></td>
                        <td>2018-03-30</td>
                        <td></td>
                    </tr>
                    <tr class="bg-">
                        <td>Deliver - G4</td>
                        <td></td>
                        <td>2018-04-29</td>
                        <td></td>
                    </tr>
                    <tr class="bg-">
                        <td>Close - G5</td>
                        <td></td>
                        <td>2018-05-30</td>
                        <td></td>
                    </tr>
                </tbody></table>
            </section>
            <section class="concepts">
                <table>
                    <tbody><tr>
                        <th>Concept </th>
                        <th>Define </th>
                        <th>Design </th>
                        <th>Deliver </th>
                        <th>Close </th>
                    </tr>
                    <tr>
                        <td>Prject Mandate </td>
                        <td>PID </td>
                        <td>Low Level Design </td>
                        <td>Test Scripts </td>
                        <td>Project closure report </td>
                    </tr>
                    <tr>
                        <td>Impact Assessment </td>
                        <td>High Level Design </td>
                        <td>Service Delivery Low Level Design </td>
                        <td>Test Exist report </td>
                        <td> </td>
                    </tr>
                    <tr>
                        <td>Business Case funding approval </td>
                        <td>Service Delivery High Level Design </td>
                        <td>Disaster recovery approach </td>
                        <td>Build Handover Document </td>
                        <td> </td>
                    </tr>
                    <tr>
                        <td> </td>
                        <td>Business Requirements Document </td>
                        <td>Test Aproach </td>
                        <td>Training &amp; Support Materials </td>
                        <td> </td>
                    </tr>
                    <tr>
                        <td> </td>
                        <td>IT Delivery Plan </td>
                        <td>Test Scenarios, Conditions and results </td>
                        <td>Business Readiness Sign off </td>
                        <td> </td>
                    </tr>
                    <tr>
                        <td> </td>
                        <td>Budget Tracker </td>
                        <td> </td>
                        <td>Service Delivery Transition Document </td>
                        <td> </td>
                    </tr>
                    <tr>
                        <td> </td>
                        <td>BRD </td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                    </tr>
                    <tr>
                        <td> </td>
                        <td>RAID log </td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                    </tr>
                </tbody></table>

            </section>
            <section class="Artefacts">
                <div class="indicator key">Artefact Key: </div>
                <div class="indicator Complete">Complete</div>
                <div class="indicator Due">Due</div>
                <div class="indicator NotRequired">Not Required</div>
                <div class="indicator Missing">Missing</div>
            </section>
        </aside>
         </div>
          <hr>
    <div class="wrapper">
        <main>
            <header>
                <div class="top-row">
                    <div class="report-title">
                        <h2>project 3</h2>
                    </div>
                    <div class="report-date">
                        2017-05-21
                    </div>
                </div>
                <div class="bottom-row">

                    <div class="label block">
                        Project Sponsor:
                    </div>
                    <div class="value block">
                        sponsor
                    </div>
                    <div class="label block">
                        Project Manager:
                    </div>
                    <div class="block">
                       PM3
                    </div>
                    <div class="label block">
                        Project ID:
                    </div>
                    <div class="value block">
                        ID
                    </div>
                    <div class="label block">
                        Project Stage:
                    </div>
                    <div class="value block">
                        Design
                    </div>
                </div>
            </header>
            <section class="project-overview">
                <h3>Project overview: </h3>
                <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsa obcaecati voluptatum suscipit facilis quibusdam repudiandae odit ad rerum dolorem, ex quasi, architecto totam? Quasi vitae recusandae quas labore ut quos?</div>
            </section>
            <section class="status-summary">
                <h3>
                    RAG Status summary:
                </h3>
                <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima debitis incidunt molestias? Excepturi assumenda expedita accusamus nihil temporibus quae, nemo eum sunt reprehenderit commodi eaque nostrum unde, rem libero inventore?      </div>
            </section>
            <section class="key-activities-current">
                <h3>
                    Key activities this period:
                </h3>
                <div>No new activites
                </div>
            </section>
            <section class="key-activities-next">
                <h3>
                    Key activities next period:
                </h3>
                <div>​Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt blanditiis nobis excepturi nulla consectetur et, quo provident! Eius non minima, commodi ea praesentium, repellat, inventore accusantium aspernatur enim recusandae molestiae.</div>
            </section>
            <section class="risks">
                <div class="risks-title">
                    <h3>Risks and Issues</h3>
                </div>
                <table>
                    <tbody><tr class="table-header">
                        <th>Ref</th>
                        <th>Description</th>
                        <th>Actions and Escalation (if required)</th>
                        <th>RAG</th>
                    </tr>
                    <tr>
                        <td></td>
                        <td>None currently</td>
                        <td></td>
                        <td></td>
                    </tr>
                </tbody></table>
            </section>
        </main>
        <aside>
            <div class="row">
                <div>key: </div>
                <ul>
                    <li class="color green">Green – On track</li>
                    <li class="color amber">Amber – At risk</li>
                    <li class="color red">Red – Significantly at risk / missed milestone</li>
                </ul>
            </div>
            <section class="status-period">
                <table>
                    <tbody><tr>
                        <th>RAG Status</th>
                        <th>Last Period</th>
                        <th>Current Period</th>
                    </tr>
                    <tr>
                        <td>Budget</td>
                        <td class="color bg-Green">TBD</td>
                        <td class="color bg-Green">Green</td>
                    </tr>
                    <tr>
                        <td>Plan</td>
                        <td class="color bg-Red">TBD</td>
                        <td class="color bg-Red">Red</td>
                    </tr>
                    <tr>
                        <td>Scope</td>
                        <td class="color bg-Green">TBD</td>
                        <td class="color bg-Green">Green</td>
                    </tr>
                    <tr>
                        <td>Resources</td>
                        <td class="color bg-Green">TBD</td>
                        <td class="color bg-Green">Green</td>
                    </tr>

                    <tr>
                        <td>Overall</td>
                        <td class="color bg-amber">Amber</td>
                        <td class="color bg-Amber">Amber</td>
                </tr></tbody></table>
            </section>
            <section class="budget">
                <h3>Budget 2017/18 </h3>
                <table>
                    <tbody><tr>
                        <th></th>
                        <th>Budget</th>
                        <th>Forecast</th>
                        <th>Actual</th>
                    </tr>
                    <tr>
                        <td>Capital</td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>Revenue</td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>Total</td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                </tbody></table>
            </section>
            <section class="milestones">
                <h3>Milestone Plan (Key Milestone Tracker)</h3>
                <table>
                    <tbody><tr>
                        <th>Milestone(end date)</th>
                        <th>Baseline</th>
                        <th>Forecast</th>
                        <th>Actual </th>
                    </tr>
                    <tr class="bg-">
                        <td>Concept – G1</td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr class="bg-">
                        <td>Define - G2</td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr class="bg-">
                        <td>Design - G3</td>
                        <td></td>
                        <td>2018-03-29</td>
                        <td></td>
                    </tr>
                    <tr class="bg-">
                        <td>Deliver - G4</td>
                        <td></td>
                        <td>2018-04-26</td>
                        <td></td>
                    </tr>
                    <tr class="bg-">
                        <td>Close - G5</td>
                        <td></td>
                        <td>2018-05-10</td>
                        <td></td>
                    </tr>
                </tbody></table>
            </section>
            <section class="concepts">
                <table>
                    <tbody><tr>
                        <th>Concept </th>
                        <th>Define </th>
                        <th>Design </th>
                        <th>Deliver </th>
                        <th>Close </th>
                    </tr>
                    <tr>
                        <td>Prject Mandate </td>
                        <td>PID </td>
                        <td>Low Level Design </td>
                        <td>Test Scripts </td>
                        <td>Project closure report </td>
                    </tr>
                    <tr>
                        <td>Impact Assessment </td>
                        <td>High Level Design </td>
                        <td>Service Delivery Low Level Design </td>
                        <td>Test Exist report </td>
                        <td> </td>
                    </tr>
                    <tr>
                        <td>Business Case funding approval </td>
                        <td>Service Delivery High Level Design </td>
                        <td>Disaster recovery approach </td>
                        <td>Build Handover Document </td>
                        <td> </td>
                    </tr>
                    <tr>
                        <td> </td>
                        <td>Business Requirements Document </td>
                        <td>Test Aproach </td>
                        <td>Training &amp; Support Materials </td>
                        <td> </td>
                    </tr>
                    <tr>
                        <td> </td>
                        <td>IT Delivery Plan </td>
                        <td>Test Scenarios, Conditions and results </td>
                        <td>Business Readiness Sign off </td>
                        <td> </td>
                    </tr>
                    <tr>
                        <td> </td>
                        <td>Budget Tracker </td>
                        <td> </td>
                        <td>Service Delivery Transition Document </td>
                        <td> </td>
                    </tr>
                    <tr>
                        <td> </td>
                        <td>BRD </td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                    </tr>
                    <tr>
                        <td> </td>
                        <td>RAID log </td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                    </tr>
                </tbody></table>

            </section>
            <section class="Artefacts">
                <div class="indicator key">Artefact Key: </div>
                <div class="indicator Complete">Complete</div>
                <div class="indicator Due">Due</div>
                <div class="indicator NotRequired">Not Required</div>
                <div class="indicator Missing">Missing</div>
            </section>
        </aside>
         </div>
          <hr>
    <div class="wrapper">
        <main>
            <header>
                <div class="top-row">
                    <div class="report-title">
                        <h2>project 4</h2>
                    </div>
                    <div class="report-date">
                        2018-01-08
                    </div>
                </div>
                <div class="bottom-row">

                    <div class="label block">
                        Project Sponsor:
                    </div>
                    <div class="value block">
                       sponsor 4
                    </div>
                    <div class="label block">
                        Project Manager:
                    </div>
                    <div class="block">
                        pm4
                    </div>
                    <div class="label block">
                        Project ID:
                    </div>
                    <div class="value block">
                       ID
                    </div>
                    <div class="label block">
                        Project Stage:
                    </div>
                    <div class="value block">
                        Design
                    </div>
                </div>
            </header>
            <section class="project-overview">
                <h3>Project overview: </h3>
                <div>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo dignissimos ab, id assumenda eos laudantium velit necessitatibus eum facilis. Minima quod odit quo? Odio reiciendis nostrum sunt impedit deleniti quasi. Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate numquam, repudiandae expedita temporibus voluptatem excepturi porro ipsam deserunt aspernatur, quasi commodi eveniet ad eaque culpa cumque, labore in nostrum reprehenderit.</div>
            </section>
            <section class="status-summary">
                <h3>
                    RAG Status summary:
                </h3>
                <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum quam nemo sit nobis obcaecati alias? Consequuntur libero quaerat officiis beatae inventore adipisci earum, totam, voluptatem sapiente architecto repellendus, id nesciunt?</div>
            </section>
            <section class="key-activities-current">
                <h3>
                    Key activities this period:
                </h3>
                <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus consequuntur voluptatem quas? Itaque numquam doloribus, ducimus voluptatem voluptatum suscipit modi at rem, dicta eligendi magnam magni provident atque repudiandae fugit. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequatur, dolorum. Error itaque earum magnam impedit vitae. Est nihil sed, laborum tenetur delectus consectetur a ratione minus nam voluptate in labore!
                </div>
            </section>
            <section class="key-activities-next">
                <h3>
                    Key activities next period:
                </h3>
                <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quisquam sunt iure optio perferendis maiores accusantium asperiores qui aliquid harum incidunt? Et est quaerat ullam eum quia cum corrupti doloremque fugit?</div>
            </section>
            <section class="risks">
                <div class="risks-title">
                    <h3>Risks and Issues</h3>
                </div>
                <table>
                    <tbody><tr class="table-header">
                        <th>Ref</th>
                        <th>Description</th>
                        <th>Actions and Escalation (if required)</th>
                        <th>RAG</th>
                    </tr>
                    <tr>
                        <td></td>
                        <td>None currently</td>
                        <td></td>
                        <td></td>
                    </tr>
                </tbody></table>
            </section>
        </main>
        <aside>
            <div class="row">
                <div>key: </div>
                <ul>
                    <li class="color green">Green – On track</li>
                    <li class="color amber">Amber – At risk</li>
                    <li class="color red">Red – Significantly at risk / missed milestone</li>
                </ul>
            </div>
            <section class="status-period">
                <table>
                    <tbody><tr>
                        <th>RAG Status</th>
                        <th>Last Period</th>
                        <th>Current Period</th>
                    </tr>
                    <tr>
                        <td>Budget</td>
                        <td class="color bg-Green">TBD</td>
                        <td class="color bg-Green">Green</td>
                    </tr>
                    <tr>
                        <td>Plan</td>
                        <td class="color bg-Green">TBD</td>
                        <td class="color bg-Green">Green</td>
                    </tr>
                    <tr>
                        <td>Scope</td>
                        <td class="color bg-Green">TBD</td>
                        <td class="color bg-Green">Green</td>
                    </tr>
                    <tr>
                        <td>Resources</td>
                        <td class="color bg-Amber">TBD</td>
                        <td class="color bg-Amber">Amber</td>
                    </tr>

                    <tr>
                        <td>Overall</td>
                        <td class="color bg-amber">Amber</td>
                        <td class="color bg-Amber">Amber</td>
                </tr></tbody></table>
            </section>
            <section class="budget">
                <h3>Budget 2017/18 </h3>
                <table>
                    <tbody><tr>
                        <th></th>
                        <th>Budget</th>
                        <th>Forecast</th>
                        <th>Actual</th>
                    </tr>
                    <tr>
                        <td>Capital</td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>Revenue</td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>Total</td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                </tbody></table>
            </section>
            <section class="milestones">
                <h3>project5</h3>
                <table>
                    <tbody><tr>
                        <th>Milestone(end date)</th>
                        <th>Baseline</th>
                        <th>Forecast</th>
                        <th>Actual </th>
                    </tr>
                    <tr class="bg-">
                        <td>Concept – G1</td>
                        <td></td>
                        <td>2018-01-09</td>
                        <td></td>
                    </tr>
                    <tr class="bg-">
                        <td>Define - G2</td>
                        <td></td>
                        <td>2018-01-26</td>
                        <td></td>
                    </tr>
                    <tr class="bg-">
                        <td>Design - G3</td>
                        <td></td>
                        <td>2018-04-12</td>
                        <td></td>
                    </tr>
                    <tr class="bg-">
                        <td>Deliver - G4</td>
                        <td></td>
                        <td>2018-09-13</td>
                        <td></td>
                    </tr>
                    <tr class="bg-">
                        <td>Close - G5</td>
                        <td></td>
                        <td>2018-10-18</td>
                        <td></td>
                    </tr>
                </tbody></table>
            </section>
            <section class="concepts">
                <table>
                    <tbody><tr>
                        <th>Concept </th>
                        <th>Define </th>
                        <th>Design </th>
                        <th>Deliver </th>
                        <th>Close </th>
                    </tr>
                    <tr>
                        <td>Prject Mandate </td>
                        <td>PID </td>
                        <td>Low Level Design </td>
                        <td>Test Scripts </td>
                        <td>Project closure report </td>
                    </tr>
                    <tr>
                        <td>Impact Assessment </td>
                        <td>High Level Design </td>
                        <td>Service Delivery Low Level Design </td>
                        <td>Test Exist report </td>
                        <td> </td>
                    </tr>
                    <tr>
                        <td>Business Case funding approval </td>
                        <td>Service Delivery High Level Design </td>
                        <td>Disaster recovery approach </td>
                        <td>Build Handover Document </td>
                        <td> </td>
                    </tr>
                    <tr>
                        <td> </td>
                        <td>Business Requirements Document </td>
                        <td>Test Aproach </td>
                        <td>Training &amp; Support Materials </td>
                        <td> </td>
                    </tr>
                    <tr>
                        <td> </td>
                        <td>IT Delivery Plan </td>
                        <td>Test Scenarios, Conditions and results </td>
                        <td>Business Readiness Sign off </td>
                        <td> </td>
                    </tr>
                    <tr>
                        <td> </td>
                        <td>Budget Tracker </td>
                        <td> </td>
                        <td>Service Delivery Transition Document </td>
                        <td> </td>
                    </tr>
                    <tr>
                        <td> </td>
                        <td>BRD </td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                    </tr>
                    <tr>
                        <td> </td>
                        <td>RAID log </td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                    </tr>
                </tbody></table>

            </section>
            <section class="Artefacts">
                <div class="indicator key">Artefact Key: </div>
                <div class="indicator Complete">Complete</div>
                <div class="indicator Due">Due</div>
                <div class="indicator NotRequired">Not Required</div>
                <div class="indicator Missing">Missing</div>
            </section>
        </aside>
         </div>
          <hr>
    <div class="wrapper">
        <main>
            <header>
                <div class="top-row">
                    <div class="report-title">
                        <h2>project5</h2>
                    </div>
                    <div class="report-date">
                        2017-11-14
                    </div>
                </div>
                <div class="bottom-row">

                    <div class="label block">
                        Project Sponsor:
                    </div>
                    <div class="value block">
                       sponsor
                    </div>
                    <div class="label block">
                        Project Manager:
                    </div>
                    <div class="block">
                       pm
                    </div>
                    <div class="label block">
                        Project ID:
                    </div>
                    <div class="value block">
                        ID
                    </div>
                    <div class="label block">
                        Project Stage:
                    </div>
                    <div class="value block">
                        Design
                    </div>
                </div>
            </header>
            <section class="project-overview">
                <h3>Project overview: </h3>
                <div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorem voluptatum quos consectetur voluptas aliquid maiores earum eligendi a consequatur. Maiores voluptatibus quibusdam quia earum sed porro ratione nemo rem exercitationem!</div>
            </section>
            <section class="status-summary">
                <h3>
                    RAG Status summary:
                </h3>
                <div>​Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero molestias consectetur magni, soluta hic neque inventore quis, deserunt impedit blanditiis fugiat cum. Labore, porro ducimus? Velit assumenda nesciunt veritatis repellat?        </div>
            </section>
            <section class="key-activities-current">
                <h3>
                    Key activities this period:
                </h3>
                <div>- Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa, praesentium ratione soluta quisquam provident natus hic? Autem excepturi voluptatum, earum facilis quam facere libero aliquam asperiores eius officia ea exercitationem.
                </div>
            </section>
            <section class="key-activities-next">
                <h3>
                    Key activities next period:
                </h3>
                <div>- Lorem ipsum, dolor sit amet consectetur adipisicing elit. Itaque, ad accusamus. Itaque assumenda asperiores alias. Mollitia quam eveniet dolor vero explicabo accusantium perferendis a fugiat accusamus, natus eius, est aliquam.</div>
            </section>
            <section class="risks">
                <div class="risks-title">
                    <h3>Risks and Issues</h3>
                </div>
                <table>
                    <tbody><tr class="table-header">
                        <th>Ref</th>
                        <th>Description</th>
                        <th>Actions and Escalation (if required)</th>
                        <th>RAG</th>
                    </tr>
                    <tr>
                        <td></td>
                        <td>None currently</td>
                        <td></td>
                        <td></td>
                    </tr>
                </tbody></table>
            </section>
        </main>
        <aside>
            <div class="row">
                <div>key: </div>
                <ul>
                    <li class="color green">Green – On track</li>
                    <li class="color amber">Amber – At risk</li>
                    <li class="color red">Red – Significantly at risk / missed milestone</li>
                </ul>
            </div>
            <section class="status-period">
                <table>
                    <tbody><tr>
                        <th>RAG Status</th>
                        <th>Last Period</th>
                        <th>Current Period</th>
                    </tr>
                    <tr>
                        <td>Budget</td>
                        <td class="color bg-Green">TBD</td>
                        <td class="color bg-Green">Green</td>
                    </tr>
                    <tr>
                        <td>Plan</td>
                        <td class="color bg-Amber">TBD</td>
                        <td class="color bg-Amber">Amber</td>
                    </tr>
                    <tr>
                        <td>Scope</td>
                        <td class="color bg-Green">TBD</td>
                        <td class="color bg-Green">Green</td>
                    </tr>
                    <tr>
                        <td>Resources</td>
                        <td class="color bg-Amber">TBD</td>
                        <td class="color bg-Amber">Amber</td>
                    </tr>

                    <tr>
                        <td>Overall</td>
                        <td class="color bg-amber">Amber</td>
                        <td class="color bg-Amber">Amber</td>
                </tr></tbody></table>
            </section>
            <section class="budget">
                <h3>Budget 2017/18 </h3>
                <table>
                    <tbody><tr>
                        <th></th>
                        <th>Budget</th>
                        <th>Forecast</th>
                        <th>Actual</th>
                    </tr>
                    <tr>
                        <td>Capital</td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>Revenue</td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>Total</td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                </tbody></table>
            </section>
            <section class="milestones">
                <h3>Milestone Plan (Key Milestone Tracker)</h3>
                <table>
                    <tbody><tr>
                        <th>Milestone(end date)</th>
                        <th>Baseline</th>
                        <th>Forecast</th>
                        <th>Actual </th>
                    </tr>
                    <tr class="bg-">
                        <td>Concept – G1</td>
                        <td></td>
                        <td>2017-11-14</td>
                        <td></td>
                    </tr>
                    <tr class="bg-">
                        <td>Define - G2</td>
                        <td></td>
                        <td>2017-11-14</td>
                        <td></td>
                    </tr>
                    <tr class="bg-">
                        <td>Design - G3</td>
                        <td></td>
                        <td>2018-05-11</td>
                        <td></td>
                    </tr>
                    <tr class="bg-">
                        <td>Deliver - G4</td>
                        <td></td>
                        <td>2018-09-29</td>
                        <td></td>
                    </tr>
                    <tr class="bg-">
                        <td>Close - G5</td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                </tbody></table>
            </section>
            <section class="concepts">
                <table>
                    <tbody><tr>
                        <th>Concept </th>
                        <th>Define </th>
                        <th>Design </th>
                        <th>Deliver </th>
                        <th>Close </th>
                    </tr>
                    <tr>
                        <td>Prject Mandate </td>
                        <td>PID </td>
                        <td>Low Level Design </td>
                        <td>Test Scripts </td>
                        <td>Project closure report </td>
                    </tr>
                    <tr>
                        <td>Impact Assessment </td>
                        <td>High Level Design </td>
                        <td>Service Delivery Low Level Design </td>
                        <td>Test Exist report </td>
                        <td> </td>
                    </tr>
                    <tr>
                        <td>Business Case funding approval </td>
                        <td>Service Delivery High Level Design </td>
                        <td>Disaster recovery approach </td>
                        <td>Build Handover Document </td>
                        <td> </td>
                    </tr>
                    <tr>
                        <td> </td>
                        <td>Business Requirements Document </td>
                        <td>Test Aproach </td>
                        <td>Training &amp; Support Materials </td>
                        <td> </td>
                    </tr>
                    <tr>
                        <td> </td>
                        <td>IT Delivery Plan </td>
                        <td>Test Scenarios, Conditions and results </td>
                        <td>Business Readiness Sign off </td>
                        <td> </td>
                    </tr>
                    <tr>
                        <td> </td>
                        <td>Budget Tracker </td>
                        <td> </td>
                        <td>Service Delivery Transition Document </td>
                        <td> </td>
                    </tr>
                    <tr>
                        <td> </td>
                        <td>BRD </td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                    </tr>
                    <tr>
                        <td> </td>
                        <td>RAID log </td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                    </tr>
                </tbody></table>

            </section>
            <section class="Artefacts">
                <div class="indicator key">Artefact Key: </div>
                <div class="indicator Complete">Complete</div>
                <div class="indicator Due">Due</div>
                <div class="indicator NotRequired">Not Required</div>
                <div class="indicator Missing">Missing</div>
            </section>
        </aside>
         </div>
          <hr>
      
    </div>
</div>


    <script type="text/javascript" src="https://rawgit.com/MrRio/jsPDF/master/dist/jspdf.debug.js">
</script>
    <script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.min.js">
    </script>

            
          
!
            
              .green{color: green} .red{color: red} .amber{color: orange;}
.bg-Green{background: green} .bg-Red{background: red;} .bg-Amber{background: orange;}
.bg-Grey{background: rgb(217,217,217)} .bg-Pink{background: rgb(255, 204, 204)}
.wrapper{
    display: flex; 
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
p{
    font-size: 14px;
}
.wrapper td, .wrapper th{
    font-size: 12px;
}
.wrapper main{
    padding-right: 20px;
    width: 65%;
    display: block;
}
.wrapper main p{
    white-space: normal; word-break: break-all;
    display: inline-block;
    width: 100%;
}
.wrapper aside{
    width: 30%;
}


h1, h2, h3, h4, h5, h6{
    font-weight: bold;
    color: red !important
}


.wrapper main header{
    background-color: red;
    padding-left: 10px;
    padding-bottom: 10px;
    padding-top: 10px;
    color: white ;
}

main header h2{ 
    color: white !important;
}

main header .top-row, main header .bottom-row{
    display: flex; 
    flex-wrap: wrap;
}

.top-row{
    margin-bottom: 10px;
}

.report-title{
    width: 75%;
}

.report-date{
    width: 20%;
    padding-top: 5px;
}

main header .bottom-row .block{
    width: 23%;
    border: 0.5px solid white;
    padding: 3px;
}

.label.block{
    font-weight: bold;
}

.project-overview{
    background-color: rgb(242, 242,242);
    padding: 5px;
    border-bottom: 0.5px solid red; 
}


.status-summary, .key-activities-current, .key-activities-next{
    padding: 5px;
    border-right: 0.5px solid red; 
    border-left: 0.5px solid red; 
    border-bottom: 0.5px solid red; 

}

.risks-title , .risks .table-header{
    background: rgb(242, 242,242);
    border: 0.5px solid black;
    padding: 5px;
}

.risks table{
    width: 100%;
}

.risks table tr th, .risks table tr td{
    border: 0.5px solid black;
    padding: 5px;
}

aside > .row{
    display: flex;
}
aside > .row ul{
    margin: 0px !important;
    list-style-type: none;
}

.status-period table{
    width: 100%;
    border: 0.5px solid red; 
}

.status-period table tr th{
    color: red; 
}
.status-period table tr th, .status-period table tr td {
    border: 0.5px solid red;
    padding: 5px;
}

.status-period table .color{
    color: white;
}

aside .budget{
    border: 0.5px solid red;
    margin-top: 5px;
    
}

.budget table{
    border: 0.5px solid grey;
    width: 100%;
}

.budget table th , .budget table td {
    border: 0.5px solid grey;
    padding: 5px;
}
aside .budget h3, aside .milestones h3{
    margin-left: 5px;
}
aside .milestones{
    border: 0.5px solid red;
    margin-top: 5px;
}

aside .milestones table{
    width: 100%;
    border: 0.5px solid grey;
}

aside .milestones table th , aside .milestones table td {
    border: 0.5px solid grey;
    padding: 5px;
}

aside .concepts{
    margin-top: 5px;
    1opacity: 0.1;
}

aside .concepts table{
    width: 100%;
}

aside .concepts table th, aside .concepts table td{
    border: 0.5px solid grey;
    padding: 5px;    
}

aside .concepts table th{
    background: red; 
    color: white;
}

.Artefacts{
    display: flex; 
    width: 100%;
    margin-top: 5px;
}

.Artefacts .indicator{
    border: 0.5px grey solid;
    padding: 5px;
    flex: 1;
}
.indicator.key{
    flex: 2;
}
.indicator.Complete{
    background: rgb(0, 176, 240);
    color: white;
}
.indicator.Due{
    background: orange;
    color: white;
    
}
.indicator.NotRequired{
    background: grey;
    color: white;
    flex: 2;
    
}
.indicator.Missing{
    background: red;
    color: white;
    
}

.container input#btnexport-report{
	
	background: red; 
	color: white; 
	width: 100%;
	margin-left: 0px; 
	margin-bottom: 10px;
	
	cursor:pointer;
	
}


            
          
!
            
              

$(function () {
    
    $("#btnexport-report").on("click", function (e) {
        makePDF();
    });

  
  
    function makePDF() {
 		 html2canvas($(".report")[0], {})
            .then(function(canvas) {         
                var imgData = canvas.toDataURL(
                    'image/png');              
                var doc = new jsPDF('p', 'mm');
                doc.addImage(imgData, 'PNG', 10, 10, undefined, undefined, 400, 400);
                doc.save('sample-file.pdf');
            });
        };
        
  
    // this one isn't working either
    function createPDF(selector) {
        form = $(selector);
        getCanvas().then(function (canvas) {
            var cache_width = form.width();

            var img = canvas.toDataURL("image/png"),
                doc = new jsPDF({
                orientation: 'landscape',
                unit: 'px',
                format: 'letter'
            });
            doc.addImage(img, 'JPEG', 20, 20);
            doc.save('Report.pdf');
            form.width(cache_width);
        });
    }

    // create canvas object
    function getCanvas() {

        // form.width((a4[0] * 1.33333) - 80).css('max-width', 'none');
        return html2canvas(form, {
            imageTimeout: 500,
            removeContainer: true
        });
    }

        
        
       /* var form = document.querySelector('.report');
        html2canvas(form, {
            imageTimeout: 500,
            removeContainer: true
        }).then(function (canvas) {
           			var pdf = new jsPDF({
		                orientation: 'l',
		                unit: 'px',
		                format: 'letter'
		            });
					var i = 0;
		            for (var i = 0; i <= form.clientHeight / 980; i++) {
		                //! This is all just html2canvas stuff
		                var srcImg = canvas;
		                var sX = 0;
		                var sY = 0; // start 980 pixels down for every new page
		                var sWidth = 2000;
		                var sHeight =  980;
		                var dX = 0;
		                var dY = 0;
		                var dWidth = 1500;
		                var dHeight = 1080;
		
		                window.onePageCanvas = document.createElement("canvas");
		                onePageCanvas.setAttribute('width', 1200);
		                onePageCanvas.setAttribute('height', 1500);
		                var ctx = onePageCanvas.getContext('2d');
		                
		                ctx.drawImage(srcImg, sX , sY , sWidth , sHeight , dX , dY , dWidth, dHeight  );
						
		               
		                var canvasDataURL = onePageCanvas.toDataURL("image/png", 1.0);
		
		                var width = onePageCanvas.width;
		                var height = onePageCanvas.clientHeight;
		
		                
		                if (i > 0) {
		                    pdf.addPage(600, 400); //this controls the width and height of second to n pages of the white area in pdf
		                }
		                
		                pdf.setPage(i + 1);
		                //! now we add content to that page!
		                pdf.addImage(canvasDataURL, 'PNG', 10, 10, 500,  200, undefined, 'FAST');
		            }
		          
		            pdf.save('Test.pdf');
        });*/
});
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console