Bug #17880: Donation banner on home page

css/layout.css

@@ -1310,3 +1310,36 @@ p.blogDate {
 }
 /* End hide from IE-mac */
 
+#donation-banner {
+  display: block;
+  height: 200px;
+  margin: auto;
+  margin-bottom: 5px;
+  position: relative;
+  width: 700px;
+}
+
+#donation-banner > a {
+  display: block;
+}
+
+#donation-banner > img {
+  display: block;
+}
+
+#donate-button {
+  background-color: green;
+  border-radius: 5px;
+  bottom: 15px;
+  color: white;
+  font-family: sans-serif;
+  font-size: 20px;
+  padding: 14px 14px;
+  position: absolute;
+  right: 15px;
+  text-align: center;
+}
+
+#donate-button:hover {
+  filter: brightness(1.2);
+}

en/index.wml

@@ -2,6 +2,30 @@
 # Revision: $Revision$
 # Translation-Priority: 1-high
 
+<!-- Donation banner for fundraising campaign. -->
+<div id="donation-banner">
+  <a href="donate/donate-hpbanner.html.en">
+    <noscript>
+      <!-- We don't have JavaScript, so show our default champion. -->
+      <img id="donation-banner-image-noscript" src="images/homepage-banner-ss.jpg" />
+    </noscript>
+    <!-- Placeholder for the champion banner image that will be added
+         by JavaScript. -->
+    <img id="donation-banner-image"" />
+   </a>
+  <a href="donate/donate-hpbanner.html.en">
+     <div id="donate-button">Please Donate!</div>
+  </a>
+</div>
+
+<script>
+  <!-- Show a different champion at random. -->
+  var alternates = ["cd", "lp", "rd", "rr", "ss"];
+  var alternate = alternates[Math.floor(Math.random() * alternates.length)];
+  var image = document.getElementById("donation-banner-image");
+  image.src = "images/homepage-banner-" + alternate + ".jpg";
+</script>
+
 #include "head.wmi" TITLE="Tor Project: Anonymity Online" CHARSET="UTF-8"
 
 <div id="home">