Skip to main content
Guide Jar PDF Example 2

Pasted html from Guide Jar

Updated this week

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Guide Jar PDF Example</title>

<link rel="preconnect" href="https://fonts.googleapis.com" />

<link

rel="preconnect"

crossOrigin="anonymous"

/>

<link

rel="stylesheet"

/>

<style>

:root{

font-size:16px

}

body{

display:flex;

justify-content:center;

align-items:center;

padding:2rem;

font-family:'Dm Sans';

background:white;

}

.gj_hidden{

display:none

}

@media (min-width: 640px) {

.gj_sm_flex{

display:flex!important

}

}

.gj_link:hover{

opacity:.8

}

.gj_shadow{

box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1);

-webkit-box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1);

-moz-box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1);

}

.gj_flexcenter{

display:flex;

justify-content:center;

align-items:center;

}

.gj_markdown{

white-space:pre-wrap;

overflow-wrap:anywhere;

overflow:hidden

}

@keyframes ping{

75%, 100% {

transform: scale(2);

opacity: 0;

}

}

</style>

</head>

<body>

<div style="display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:75vw;margin-horizontal:auto;padding-top:3rem"><div style="display:flex;align-items:center;justify-content:center;width:100%;height:100%"><div class="gj_shadow gj_hidden gj_sm_flex" style="width:3rem;height:3rem;border-radius:100%;border:1px solid rgb(0,0,0,0.1);background-color:white;padding:0.5rem;flex-shrink:0;flex-grow:0;align-items:center;justify-content:center"><img src="https://jordan.whizzimo.com/favicon.png" alt="" style="width:1.5rem;object-fit:cover"/></div><div style="width:100%;margin-left:1rem"><h1 style="font-size:2.25rem;font-weight:bold;margin:0">Guide Jar PDF Example</h1><span style="font-size:.85rem;margin-top:1rem;color:rgb(0,0,0,0.6)">This guide provides a simple solution to fix issues with PDF backgrounds, ensuring your PDFs are displayed correctly and consistently. The guide outlines an easy-to-follow process, empowering users to customize their PDF viewing experience.</span></div></div><div style="display:flex;flex-direction:column;width:100%;margin-top:3rem"><div class="gj_shadow" style="display:flex;flex-direction:column;justify-content:center;margin-top:30px;margin-bottom:30px;border:1px solid rgb(0,0,0,0.1);border-radius:6px"><div style="display:flex;flex-direction:row;column-gap:1rem;align-items:center;padding:1rem"><div style="display:flex;justify-content:center;align-items:center;border-radius:100%;width:2.5rem;height:2.5rem;flex-shrink:0;background-color:#866dff33"><b style="color:#866dff;font-size:1rem">1</b></div><div style="width:100%;min-width:unset"><div class="gj_markdown"><p>Click on <strong>Settings</strong></p></div></div></div><div style="position:relative;width:74.75vw;height:41.444722222222225vw;margin:auto;overflow:hidden;border-top:1px solid rgb(0,0,0,0.1)"><img src="https://assets.guidejar.com/uploads/92667ee9-01bb-423a-96ad-746981e978d7/DyDCtG8CL6gCcB7t2fNkYSkfUsB3/ac9fd320-ebe9-446e-9bcc-8d0e51f03047/1734302618411.jpeg" style="width:74.75vw;height:41.444722222222225vw;border-bottom-left-radius:5px;border-bottom-right-radius:5px;max-width:none;transform-origin:6.433631921824105vw 22.220732446615997vw;transform:scale(1)" alt="Click on **Settings**"/><div style="position:absolute;left:4.933631921824105vw;top:20.720732446615997vw;width:3vw;height:3vw;z-index:50;border-radius:100%;border:1.5px solid #866dff;background-color:#866dff99"><div style="width:100%;height:100%;border-radius:100%;animation:ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;background-color:#866dff99"></div></div></div></div><div class="gj_shadow" style="display:flex;flex-direction:column;justify-content:center;margin-top:30px;margin-bottom:30px;border:1px solid rgb(0,0,0,0.1);border-radius:6px"><div style="display:flex;flex-direction:row;column-gap:1rem;align-items:center;padding:1rem"><div style="display:flex;justify-content:center;align-items:center;border-radius:100%;width:2.5rem;height:2.5rem;flex-shrink:0;background-color:#866dff33"><b style="color:#866dff;font-size:1rem">2</b></div><div style="width:100%;min-width:unset"><div class="gj_markdown"><p>Click on <strong>PDF Viewer</strong></p></div></div></div><div style="position:relative;width:74.75vw;height:41.444722222222225vw;margin:auto;overflow:hidden;border-top:1px solid rgb(0,0,0,0.1)"><img src="https://assets.guidejar.com/uploads/92667ee9-01bb-423a-96ad-746981e978d7/DyDCtG8CL6gCcB7t2fNkYSkfUsB3/d7689833-f0d7-49a2-bb46-7a469211776c/1734302620785.jpeg" style="width:74.75vw;height:41.444722222222225vw;border-bottom-left-radius:5px;border-bottom-right-radius:5px;max-width:none;transform-origin:7.2577361563517915vw 36.530178700687664vw;transform:scale(1)" alt="Click on **PDF Viewer**"/><div style="position:absolute;left:5.7577361563517915vw;top:35.030178700687664vw;width:3vw;height:3vw;z-index:50;border-radius:100%;border:1.5px solid #866dff;background-color:#866dff99"><div style="width:100%;height:100%;border-radius:100%;animation:ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;background-color:#866dff99"></div></div></div></div><div class="gj_shadow" style="display:flex;flex-direction:column;justify-content:center;margin-top:30px;margin-bottom:30px;border:1px solid rgb(0,0,0,0.1);border-radius:6px"><div style="display:flex;flex-direction:row;column-gap:1rem;align-items:center;padding:1rem"><div style="display:flex;justify-content:center;align-items:center;border-radius:100%;width:2.5rem;height:2.5rem;flex-shrink:0;background-color:#866dff33"><b style="color:#866dff;font-size:1rem">3</b></div><div style="width:100%;min-width:unset"><div class="gj_markdown"><p>Select a Background Color and your PDFs should be fixed</p></div></div></div><div style="position:relative;width:74.75vw;height:41.444722222222225vw;margin:auto;overflow:hidden;border-top:1px solid rgb(0,0,0,0.1)"><img src="https://assets.guidejar.com/uploads/92667ee9-01bb-423a-96ad-746981e978d7/DyDCtG8CL6gCcB7t2fNkYSkfUsB3/0285d1c9-a97a-4e8c-8a47-c7b2d69f62c4/1734302625964.jpeg" style="width:74.75vw;height:41.444722222222225vw;border-bottom-left-radius:5px;border-bottom-right-radius:5px;max-width:none;transform-origin:48.01343648208469vw 11.582295964531305vw;transform:scale(1)" alt="Select a Background Color and your PDFs should be fixed"/><div style="position:absolute;left:46.51343648208469vw;top:10.082295964531305vw;width:3vw;height:3vw;z-index:50;border-radius:100%;border:1.5px solid #866dff;background-color:#866dff99"><div style="width:100%;height:100%;border-radius:100%;animation:ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;background-color:#866dff99"></div></div></div></div></div></div>

</body>

</html>

Did this answer your question?