Update demo.html

peachananr · May 7, 2020 · 7ecc5c7 · 7ecc5c7
1 parent 824abe3
commit 7ecc5c7
Showing 1 changed file with 211 additions and 2 deletions.
diff --git a/demo.html b/demo.html
@@ -170,7 +170,212 @@
     .frame img{
       width: 200px;
       margin: 2px;
-    }
+    }body .one .bsa_it_ad { background: transparent; border: none; font-family: inherit; padding: 0 15px 0 10px; margin: 0; text-align: center; }
+body .one .bsa_it_ad:hover img { -moz-box-shadow: 0 0 3px #000; -webkit-box-shadow: 0 0 3px #000; box-shadow: 0 0 3px #000; }
+body .one .bsa_it_ad .bsa_it_i { display: block; padding: 0; float: none; margin: 0 0 5px; }
+body .one .bsa_it_ad .bsa_it_i img { padding: 0; border: none; }
+body .one .bsa_it_ad .bsa_it_t { padding: 6px 0; }
+body .one .bsa_it_ad .bsa_it_d { padding: 0; font-size: 12px; color: #333; }
+body .one .bsa_it_p { display: none; }
+body #bsap_aplink, body #bsap_aplink:hover { display: block; font-size: 10px; margin: 12px 15px 0; text-align: center; }
+
+.ads {
+  position: fixed;
+  left: 10px;
+  bottom: 10px;
+  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  z-index: 99;
+  text-align: center;
+  max-width: 200px;
+}
+
+.ads a {
+  color: black;
+}
+
+.ad-header {
+  margin: 0 0 -2px 0px;
+  background: white;
+  border-radius: 3px 3px 0 0;
+  overflow: hidden;
+}
+.ad-header a {
+  float: right;
+  border-left: 1px solid #f3f3f3;
+  padding:10px;
+  line-height: 100%;
+  font-weight: bold;
+  text-transform: uppercase;
+  text-align: center;
+  color: black;
+}
+.ad-header a:hover {
+  background: #eee;
+}
+
+.ads .promo {
+  position: absolute;
+  top: -195px;
+  left: 0;
+}
+
+.message {
+  max-width: 550px;
+  margin: 50px auto 0;
+  padding: 14px;
+  background: #72EC80;
+  color: #0E530E;
+  font-weight: normal;
+  font-style: normal;
+  border-radius: 3px;
+}
+
+.success-message a{
+  color: black;
+  border-bottom: 1px dotted #000;
+}
+
+.success-message {
+  background: #72EC80;
+  color: #0E530E;
+}
+
+.error-message a{
+  color: #FFF;
+  border-bottom: 1px dotted #fff;
+}
+
+.error-message {
+  background: #EC7272;
+  color: #FFF;
+}
+
+.socials {
+  text-align: center;
+  background: rgba(255, 255, 255, 0.1);
+  width: 100%;
+  float: left;
+  padding: 9px 5px 5px;
+  margin: 0 0 60px 0;
+}
+.socials > * {
+  display: inline !important;
+}
+.socials .fb-like {
+  top: -5px;
+  min-width: 85px;
+  text-align: left;
+}
+.socials .fb-like > span {
+  vertical-align: top;
+}
+.socials .twitter-share-button {
+  width: 85px  !important;
+}
+
+#carbonads {
+  --width: 180px;
+  --font-size: 14px;
+}
+
+#carbonads {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  display: block;
+  overflow: hidden;
+  margin-bottom: 20px;
+  max-width: var(--width);
+  border-radius: 4px;
+  text-align: center;
+  box-shadow: 0 0 0 1px hsla(0, 0%, 0%, .1);
+  background-color: hsl(0, 0%, 98%);
+  font-size: var(--font-size);
+  line-height: 1.5;
+}
+
+#carbonads a {
+  color: inherit;
+  text-decoration: none;
+}
+
+#carbonads a:hover {
+  color: inherit;
+}
+
+#carbonads span {
+  position: relative;
+  display: block;
+  overflow: hidden;
+}
+
+.carbon-img {
+  display: block;
+  margin-bottom: 8px;
+  max-width: var(--width);
+  line-height: 1;
+}
+
+.carbon-img img {
+  display: block;
+  margin: 0 auto;
+  max-width: var(--width) !important;
+  width: var(--width);
+  height: auto;
+}
+
+.carbon-text {
+  display: block;
+  padding: 0 1em 8px;
+}
+
+.carbon-poweredby {
+  display: block;
+  padding: 10px var(--font-size);
+  background: repeating-linear-gradient(-45deg, transparent, transparent 5px, hsla(0, 0%, 0%, .025) 5px, hsla(0, 0%, 0%, .025) 10px) hsla(203, 11%, 95%, .4);
+  text-transform: uppercase;
+  letter-spacing: .5px;
+  font-weight: 600;
+  font-size: 9px;
+  line-height: 0;
+}
+
+@media only screen and (min-width: 320px) and (max-width: 759px) {
+  #carbonads {
+    float: none;
+    margin: 0 auto;
+    max-width: 330px;
+  }
+  #carbonads span {
+    position: relative;
+  }
+  #carbonads > span {
+    max-width: none;
+  }
+  .carbon-img {
+    float: left;
+    margin: 0;
+  }
+
+  .carbon-img img {
+    max-width: 130px !important;
+  }
+  .carbon-text {
+    float: left;
+    margin-bottom: 0;
+    padding: 8px 20px;
+    text-align: left;
+    max-width: calc(100% - 130px - 3em);
+  }
+  .carbon-poweredby {
+    left: 130px;
+    bottom: 0;
+    display: block;
+    width: 100%;
+  }}}
+
+
+
 	</style>
 	<link rel="stylesheet" type="text/css" href="loadingbar.css" />
 	<script>
@@ -190,7 +395,11 @@
 	</script>
 </head>
 <body>
-  <div class="wrapper">
+  <div class="wrapper"><!-- AdPacks.com Zone Code -->
+<div class="ads">
+<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CKYI5KJE&placement=wwwthepetedesigncom" id="_carbonads_js"></script>
+</div>
+<!-- End AdPacks.com Zone Code -->
     <h1>You<span>tube</span>-like Ajax Loading Bar</h1>
     <h2>Add an ajax loading bar like on Youtube to all your ajax links.</h2>
     <p class="credit">Created by <a href="http://www.thepetedesign.com">Pete R.</a>, Founder of <a href="http://www.bucketlistly.com" target="_blank">BucketListly</a></p>