feat: update style

bendersej · bendersej · commit bc6fd645bdbe · 2023-08-17T21:46:18.000+03:00
diff --git a/index.html b/index.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet" />
     <link rel="shortcut icon" type="image/png" href="favicon-32x32.png" />
     <link rel="stylesheet" href="./styles.css" />
     <title>SimplePDF Embed examples</title>
@@ -28,22 +28,52 @@ <h1>SimplePDF Embed</h1>
       <h2>Embed a PDF editor & annotator in your website</h2>
     </div>
     <div class="content">
-      <a href="https://simplePDF.eu/embed" target="_blank">🔗 Learn more about SimplePDF Embed</a>
       <div class="links-group">
-        <a href="https://github.com/SimplePDF/simplepdf-embed/blob/main/react/README.md" target="_blank">⚛️ React</a>
+        <a href="https://github.com/SimplePDF/simplepdf-embed/blob/main/react/README.md" target="_blank">React</a>
         |
-        <a href="https://github.com/SimplePDF/simplepdf-embed/tree/main/web" target="_blank">🚀 Script</a>
+        <a href="https://github.com/SimplePDF/simplepdf-embed/tree/main/web" target="_blank">Script</a>
         |
         <a href="https://github.com/SimplePDF/simplepdf-embed/blob/main/documentation/IFRAME.md" target="_blank"
-          >🛠 Iframe</a
+          >Iframe</a
         >
       </div>
+      <a href="https://simplePDF.eu/embed#ghio" target="_blank">Learn more about SimplePDF Embed<i>🔗</i></a>
+      <div class="offerings">
+        <p>
+          <a href="https://github.com/SimplePDF/simplepdf-embed/"><b>Free</b></a> without any limits and
+          <b>no account needed</b>
+        </p>
+        <a href="http://rto.nstu.ca/FillableForm.html" target="_blank" class="rto-link"
+          >That's what they did (click on any PDF link on their website)</a
+        >
+        <p class="or" o>or</p>
+        <p>
+          <a href="https://simplepdf.eu/pricing#ghio"><b>Get an account</b></a>
+        </p>
+        <div class="bullet-points">
+          <ul>
+            <li><a href="https://simplepdf.eu/portal#ghio" target="_blank">any PDF becomes a web form</a></li>
+            <li><a href="https://simplepdf.eu/embed#ghio" target="_blank">...with your own branding</a></li>
+            <li>
+              <a href="https://simplepdf.eu/help/how-to/configure-webhooks-pdf-form-submissions#ghio" target="_blank"
+                >...stored in your own storage</a
+              >
+            </li>
+            <li>
+              <a href="https://simplepdf.eu/help/how-to/configure-webhooks-pdf-form-submissions#ghio"
+                >...with webhooks notifications</a
+              >
+            </li>
+          </ul>
+        </div>
+      </div>
     </div>
+
     <iframe
       src="https://embed.simplePDF.eu/editor?open=https://www.africau.edu/images/default/sample.pdf"
       frameborder="0"
       width="100%"
-      height="820px"
+      height="1024px"
       style="border: 1px solid #efefef"
     ></iframe>
   </body>
diff --git a/styles.css b/styles.css
@@ -9,13 +9,28 @@ h1 {
   font-size: 32px;
 }
 
+i {
+  font-style: normal;
+  font-size: 12px;
+  margin-left: 8px;
+}
+
 h1,
 h4 {
   font-weight: 500;
   line-height: 1.4;
   text-align: center;
 }
 
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
 .github-star-container {
   display: flex;
   justify-content: flex-end;
@@ -45,17 +60,36 @@ h4 {
   padding-bottom: 60px;
 }
 
+.offerings {
+  text-align: center;
+  padding-top: 40px;
+}
+
+.offerings p {
+  margin: 0;
+}
+
+.rto-link {
+  font-size: 12px;
+  color: #737373;
+}
+
+.or {
+  padding: 20px 0;
+}
+
 .content > a {
   padding: 12px 0;
 }
 
-.content > a,
-.links-group > a {
-  color: inherit;
-  text-decoration: none;
+.links-group {
+  font-size: 14px;
 }
 
-.content > a:hover,
-.links-group > a:hover {
-  text-decoration: underline;
+.bullet-points {
+  text-align: left;
+  display: flex;
+  justify-content: center;
+
+  font-size: 14px;
 }
