Initial commit

mihajlija · Jul 8, 2017 · 1c60338 · 1c60338
commit 1c60338
Show file tree

Hide file tree

Showing 8 changed files with 384 additions and 0 deletions.
diff --git a/ad.html b/ad.html
diff --git a/evil_ad_hero@1x.png b/evil_ad_hero@1x.png
diff --git a/evil_ad_money.svg b/evil_ad_money.svg
diff --git a/evil_ad_virus.svg b/evil_ad_virus.svg
diff --git a/evilad.html b/evilad.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
+    <title>Evil Ad</title>
+    <meta name="description" content="Iframes from hell">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="https://unpkg.com/tachyons@4.7.0/css/tachyons.min.css"/>
+    <link rel="stylesheet" href="style.css">
+
+  </head>
+  <body>
+      <header class="mw9 center tc">
+          <object type="image/svg+xml" data="evil_ad_virus.svg" class="ad">
+  Kiwi Logo <!-- fallback image in CSS -->
+</object>
+      </header>
+        <main class="mw8 center ph3 ph4-ns">
+            <article class="">
+              <header>
+                <h1 class="f1 f-subheadline-ns lh-title helvetica black-90">Why you should hate ads even more (and what to do about it)</h1>
+              </header>
+              <section class="w-80 lf">
+                <p class="f2 measure lh-copy georgia black-80">We all hate ads: they’re either completely irrelevant or stalker-level creepy, they often take up more space than the actual content…</p>
+
+                <p class="f4 measure lh-copy georgia black-80">It’s no wonder lots of people are using ad blockers to be able to get around the web without going blind or insane. But as soon as you turn on your ad blocker, the websites will start begging you to turn it off because you’re the only thing keeping them from closing their (very expensive) doors.</p>
+
+                <p class="f4 measure lh-copy georgia black-80">So let’s say you have a big heart and decide to turn off your ad blocker out of pity (or annoyance from seeing ads for ads — welcome to late capitalism!) You’ll just ignore them and read the article. But as you scroll down, you notice everything is slowing down. Your mouse is not responding. It doesn’t matter if you’re on your gaming rig or the newest Macbook Pro, it won’t make a difference.</p>
+
+                <p class="f4 measure lh-copy georgia black-80">What’s happening is this: the website is using iframes to show the ads. Iframes are like tiny web pages inside your web page — and the entire ecosystem the webpage brings along. And due to the recursive nature of those embeded iframes, if something wrong happens with that iframe, the entire web page will stop working until the problem is resolved. So you could be reading an article on a Very Very Respectable Website With Beautiful Code, but if they’re serving you an ad from Dumpster-fire Website With Garbage Code (and that happens more often than you think), you’re in trouble.</p>
+
+                <p class="f4 measure lh-copy georgia black-80">As you’ve probably noticed by now, this is exactly what’s going on on this page.</p>
+              </section>
+              <aside>
+        </aside>
+            </article>
+        </main>
+  </body>
diff --git a/index.html b/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
+    <title>Evil Ad</title>
+    <meta name="description" content="Iframes from hell">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="https://unpkg.com/tachyons@4.7.0/css/tachyons.min.css"/>
+    <link rel="stylesheet" href="style.css">
+
+  </head>
+  <body>
+      <div class="wrapper">
+        <iframe class="ad" scrolling="no" sandbox="allow-scripts" src="ad.html"></iframe>
+      </div>
+      <header class="mw9 center tc">
+      <img class="" src="evil_ad_hero@1x.png"/>
+      </header>
+        <main class="mw8 center ph3 ph4-ns">
+            <article class="">
+              <header>
+                <h1 class="f1 f-subheadline-ns lh-title helvetica black-90">Why you should hate ads even more (and what to do about it)</h1>
+              </header>
+              <section class="w-80 lf">
+                <p class="f2 measure lh-copy georgia black-80">We all hate ads: they’re either completely irrelevant or stalker-level creepy, they often take up more space than the actual content…</p>
+
+                <p class="f4 measure lh-copy georgia black-80">It’s no wonder lots of people are using ad blockers to be able to get around the web without going blind or insane. But as soon as you turn on your ad blocker, the websites will start begging you to turn it off because you’re the only thing keeping them from closing their (very expensive) doors.</p>
+
+                <p class="f4 measure lh-copy georgia black-80">So let’s say you have a big heart and decide to turn off your ad blocker out of pity (or annoyance from seeing ads for ads — welcome to late capitalism!) You’ll just ignore them and read the article. But as you scroll down, you notice everything is slowing down. Your mouse is not responding. It doesn’t matter if you’re on your gaming rig or the newest Macbook Pro, it won’t make a difference.</p>
+
+                <p class="f4 measure lh-copy georgia black-80">What’s happening is this: the website is using iframes to show the ads. Iframes are like tiny web pages inside your web page — and the entire ecosystem the webpage brings along. And due to the recursive nature of those embeded iframes, if something wrong happens with that iframe, the entire web page will stop working until the problem is resolved. So you could be reading an article on a Very Very Respectable Website With Beautiful Code, but if they’re serving you an ad from Dumpster-fire Website With Garbage Code (and that happens more often than you think), you’re in trouble.</p>
+
+                <p class="f4 measure lh-copy georgia black-80">As you’ve probably noticed by now, this is exactly what’s going on on this page.</p>
+              </section>
+              <aside>
+        </aside>
+            </article>
+        </main>
+        <script type="text/javascript">
+  window.addEventListener('load', function (event) {
+    document.querySelector('#ad').style.bottom = 0;
+  });
+</script>
+
+  </body>
diff --git a/style.css b/style.css
@@ -0,0 +1,21 @@
+ .ad {
+    display:block;
+    margin: 0 auto;
+    border: 1px solid #444;
+    bottom: -20px;
+    position: fixed;
+    transition: bottom 2000ms ease-out;
+    height: 384px;
+    width: 1002px;
+    z-index: 777;
+  }
+
+.wrapper {
+    display: block;
+    text-align: center;
+}
+.hero {
+    background: url('evil_ad_hero@1x.png');
+    background-size: cover;
+    background-repeat: no-repeat;
+}
diff --git a/virus.png b/virus.png