about: Add a banner to /about/ with a picture from PyCon.

This adds a PyCon banner photo of people working on sprints to the
top of the /about/ page.

static/styles/landing-page.css

@@ -1743,6 +1743,41 @@ nav ul li.active::after {
     color: #333;
 }
 
+.portico-landing.why-page .photo-description {
+    position: relative;
+    top: -40px;
+    height: 0;
+
+    font-size: 0.8em;
+    font-weight: normal;
+    color: #888;
+}
+
+.portico-landing.why-page .bg-pycon {
+    position: relative;
+
+    background-image: url(/static/images/landing-page/pycon.jpg);
+    background-size: cover;
+    background-position: center;
+}
+
+.portico-landing.why-page .bg-pycon .bg-dimmer {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+
+    background-color: rgba(15, 24, 48, 0.7);
+
+    z-index: 0;
+}
+
+.portico-landing.why-page .bg-pycon .content {
+    position: relative;
+    z-index: 1;
+}
+
 /* -- hello page styling -- */
 .portico-landing.hello .apps .screen {
     display: inline-block;

templates/zerver/about.html

@@ -19,13 +19,22 @@
 {% include 'zerver/landing_nav.html' %}
 
 <div class="portico-landing why-page no-slide">
-    <div class="hero">
+    <div class="hero bg-pycon">
+        <div class="bg-dimmer"></div>
+        <div class="content">
             <h1 class="center">About the Zulip project</h1>
             <p>Learn about the history of the Zulip project and community!</p>
         </div>
+    </div>
     <div class="main">
         <div class="padded-content">
             <div class="inner-content">
+                <div class="photo-description">
+                    Developers contributing to Zulip at the PyCon 2017
+                    sprints in Portland, Oregon.  Over 75 people
+                    sprinted on Zulip during the 4-day event!
+                </div>
+
                 <h1>About Zulip</h1>
 
                 <p>