Fixes #7 - Updated benefits section on index page

includes/index/features.html

Index: includes/index/features.html
===================================================================
new file mode 100644
--- /dev/null
+++ b/includes/index/features.html
@@ -0,0 +1,34 @@
+<div class="container text-center">
+  <div class="row">
+    <div class="column one-third">
+      <img
+        height="90px"

[ire, 2018/02/23 09:58:17]

NIT: This size seems to big for smaller devices. 

[juliandoucette, 2018/02/23 12:41:59]

Doesn't look that way to me. I encourage you to bring this up with Jeen if you
think so. 

+        width="90px"
+        src="/img/feature-fast.png"
+        srcset="/img/feature-fast.svg 2x"
+        alt="{{ feature-faster-alt[alt text] Rocket }}">
+      <h2>{{ feature-faster-heading[heading] FASTER, MORE ENJOYABLE BROWSING }}</h2>

[ire, 2018/02/23 09:58:17]

NIT: I think the capitalisation should be applied with CSS

[juliandoucette, 2018/02/23 12:41:59]

Agreed. Done.

+      <p>{{ feature-faster-body Block ads that interrupt your browsing experience. Say goodbye to video ads, pop-ups, flashing banners and more. Blocking these annoyances means pages load faster. }}</p>

[ire, 2018/02/23 09:58:17]

TOL: It's not clear from the mockups because the headings all happen to take up
2 lines, but it seems like each piece of content (img, heading, paragraph)
should take up the same amount of space. i.e. the paragraphs should all start at
the same horizontal level.

[juliandoucette, 2018/02/23 12:41:59]

Good observation. I'd rather not set a fixed height on headings because it's a
headache to account for smaller screens and translations.

+    </div>
+    <div class="column one-third">
+      <img
+        height="90px"
+        width="90px"
+        src="/img/feature-safe.png"
+        srcset="/img/feature-safe.svg 2x"
+        alt="{{ feature-safe-alt[alt text] Padlock }}">
+      <h2>{{ feature-safe-heading[heading] KEEP YOUR DATA AND DEVICES SAFE }}</h2>
+      <p>{{ feature-safe-body With Adblock Plus avoiding tracking and malware is easy. Blocking intrusive ads reduces the risk of "malvertizing" infections. Blocking tracking stops companies following your online activity. }}</p>
+    </div>
+    <div class="column one-third">
+      <img
+        height="90px"
+        width="90px"
+        src="/img/feature-aa.png"
+        srcset="/img/feature-aa.svg 2x"
+        alt="{{ feature-aa-alt[alt text] Checkmark in an octagon }}">
+      <h2>{{ feature-aa-heading[heading] NOT ALL ADS ARE BAD }}</h2>
+      <p>{{ feature-aa-body Websites need money to stay free. Support them by allowing Acceptable Ads (enabled by default). Want to hide all ads? No problem. <a href="acceptable-ads#optout">Learn how</a> }}</p>
+    </div>
+  </div>
+</div>