Add an advertising screen

readthedocs/donate/static/donate/css/advertisewithus.css

@@ -0,0 +1,155 @@
+/* Advertising Page */
+#content {
+  font-size: 120%;
+}
+section.advertisewithus-header {
+  padding-top: 0;
+  text-align: center;
+}
+#content h1, #content h2, #content h3, #content h4 {
+  margin-bottom: 20px;
+  text-align: center;
+}
+a.advertisewithus-anchor {
+  /* Make this link look like a button */
+  width: 300px;
+  font-weight: bold;
+  text-align: center;
+  display: inline-block;
+  margin: .3em 0em;
+  font-size: 1.1em;
+  color: #fff;
+  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
+  background: #e6e6e6 url(../images/gradient.png) repeat-x bottom left;
+  background-color: #8ECC4C;
+  border: 1px solid #bfbfbf;
+  border-color: #6B9939;
+  border-bottom-color: #50732B;
+  padding: 8px 15px;
+  border-radius: 3px;
+  text-decoration: none;
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
+  -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
+  -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
+}
+a.advertisewithus-anchor:hover, a.advertisewithus-anchor:active {
+  color: #fff;
+}
+section {
+  padding: 80px 0;
+}
+section.advertisewithus-stats .stat {
+  float: left;
+  width: 33.3%;
+}
+section.advertisewithus-stats .stat p, #content section.advertisewithus-stats .stat h3 {
+  text-align: center;
+  margin-bottom: 0;
+}
+section.advertisewithus-stats .stat-icon {
+  display: block;
+  height: 64px;
+  font-size: 48px;
+  text-align: center;
+  font-style: normal;
+  font-family: FontAwesome;
+}
+section.advertisewithus-stats .stat-icon.group:before {
+  content: "\f0c0";
+}
+section.advertisewithus-stats .stat-icon.book:before {
+  content: "\f02d";
+}
+section.advertisewithus-stats .stat-icon.chart:before {
+  content: "\f201";
+}
+.advertisewithus-features div.feature {
+  width: 45%;
+  margin: 0 2.5%;
+  float: left;
+}
+.advertisewithus-features div.feature img {
+  height: auto;
+  width: 100%;
+}
+.advertisewithus-features h3 {
+  text-align: left;
+}
+
+.advertisewithus-client {
+  display: inline-block;
+}
+.advertisewithus-client img {
+  width: 200px;
+  margin: 10px 95px;
+}
+div.advertisewithus-form-wrapper {
+  margin-top: 4em;
+  padding: 2em;
+  margin-bottom: 2em;
+  overflow: auto;
+
+  border: 1px solid #999;
+  border-radius: 6px;
+  -moz-border-radius: 6px;
+  -webkit-border-radius: 6px;
+  background: #e0e0e0;
+}
+form.advertisewithus-form {
+  margin-left: 50px;
+  float: right;
+}
+form.advertisewithus-form input {
+  margin-bottom: 15px;
+  width: 300px;
+}
+form.advertisewithus-form input[type="submit"] {
+  display: inline-block;
+  margin: .3em 0em;
+  font-size: 1.1em;
+  color: #fff;
+  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
+  background-color: #8ECC4C;
+  border-color: #6B9939;
+  border-bottom-color: #50732B;
+}
+section.advertisewithus-testimonial {
+  margin-top: 40px;
+}
+section.advertisewithus-testimonial blockquote:before {
+  content: "\f10d";   /* open quote */
+  display: block;
+  height: 64px;
+  font-size: 48px;
+  text-align: center;
+  font-style: normal;
+  font-family: FontAwesome;
+}
+section.advertisewithus-testimonial blockquote {
+  text-align: center;
+  font-size: 1.4em;
+  line-height: 1.1em;
+  font-style: italic;
+  margin-bottom: 10px;
+}
+section.advertisewithus-testimonial .testimonial-citation {
+  width: 340px;
+  margin: 0 auto;
+}
+section.advertisewithus-testimonial img.photo {
+  width: 80px;
+  float: left;
+  margin-right: 20px;
+  margin-left: 70px;   /* margin-left + margin-right + width == width(.testimonial-citation) */
+  border-radius: 50%;
+}
+section.advertisewithus-testimonial img.logo {
+  width: 100px;
+}
+section.advertisewithus-testimonial p {
+  margin-bottom: 0;
+}
+p.advertisewithus-footer {
+  font-size: 85%;
+  text-align: center;
+}

readthedocs/donate/templates/donate/advertising-submitted.html

@@ -0,0 +1,18 @@
+{% extends "base.html" %}
+{% load i18n %}
+
+{% block title %}{% trans "Thank you for contacting us" %}{% endblock %}
+
+{% block content %}
+<section>
+  <h1>{% trans "Thank you for contacting us" %}</h1>
+  <p>{% trans "A member of our team will be getting back to you shortly." %}</p>
+
+  {% with ethical_advertising_url='http://docs.readthedocs.io/en/latest/ethical-advertising.html' whatwedo_url='https://blog.readthedocs.com/ads-on-other-themes/#what-we-re-doing-with-the-money' rtd_stats_url='https://blog.readthedocs.com/read-the-docs-2016-stats/' %}
+    {% blocktrans %}
+      <p>In the meantime, please feel free to check out <a href="{{ rtd_stats_url }}">our latest stats</a>, read about <a href="{{ ethical_advertising_url }}">our approach to advertising</a> or see <a href="{{ whatwedo_url }}">what we do with advertising money</a>.</p>
+    {% endblocktrans %}
+  {% endwith %}
+
+</section>
+{% endblock content %}

readthedocs/donate/templates/donate/advertising.html

@@ -0,0 +1,120 @@
+{% extends "base.html" %}
+{% load static i18n %}
+
+{% block title %}{% trans "Advertise with Us" %}{% endblock %}
+
+{% block extra_links %}
+  <link rel="stylesheet" href="{% static 'donate/css/advertisewithus.css' %}" />
+{% endblock %}
+
+{% block content %}
+
+<section class="advertisewithus-header">
+  <h1>{% trans "Over 7 million developers Read the Docs each month" %}</h1>
+  <a href="#advertise-cta" class="advertisewithus-anchor">{% trans "Connect with them today" %}</a>
+</section>
+
+<section class="advertisewithus-features">
+  <div class="feature">
+    <h3>{% trans "Developers read our docs" %}</h3>
+    <p>{% trans "Developers come to Read the Docs to solve their problems. Your product could be the solution they are looking for. By putting your advertisement in front of our 100% developer audience, you can connect to your target market and achieve your business goals." %}</p>
+  </div>
+
+  <div class="feature">
+    <!-- Image credit: http://techsini.com/multi-mockup/ -->
+    <img src="{% static 'donate/img/advertisewithus/docsite-screenshot.png' %}" alt="A sustainability ad on Read the Docs">
+  </div>
+
+  <div class="clearfix"></div>
+
+</section>
+
+<section class="advertisewithus-stats">
+  <div class="stat">
+    <p class="stat-icon group"></p>
+    <h3>{% trans "30 Million" %}</h3>
+    <p>{% trans "Pageviews Every Month" %}</p>
+  </div>
+
+  <div class="stat">
+    <p class="stat-icon book"></p>
+    <h3>{% trans "Over 60,000" %}</h3>
+    <p>{% trans "Documentation Microsites" %}</p>
+  </div>
+
+  <div class="stat">
+    <p class="stat-icon chart"></p>
+    <h3>{% trans "Top 1500" %}</h3>
+    <p>{% trans "Alexa Site Globally" %}</p>
+  </div>
+
+  <div class="clearfix"></div>
+
+</section>
+
+<section>
+  <h2>{% trans "Companies who drove business success with Read the Docs" %}</h2>
+  <div class="advertisewithus-client">
+    <img src="{% static 'donate/img/advertisewithus/twilio.png' %}" alt="Twilio">
+  </div>
+  <div class="advertisewithus-client">
+    <img src="{% static 'donate/img/advertisewithus/fastmail.png' %}" alt="Twilio">
+  </div>
+  <div class="advertisewithus-client">
+    <img src="{% static 'donate/img/advertisewithus/linode.png' %}" alt="Linode">
+  </div>
+  <div class="advertisewithus-client">
+    <img src="{% static 'donate/img/advertisewithus/sentry.png' %}" alt="Sentry">
+  </div>
+</section>
+
+<section class="advertisewithus-testimonial">
+  <blockquote>Read The Docs is an amazing resource and destination for developers. Supporting them, while generating awareness for Rollbar, was a total no-brainer.</blockquote>
+  <div class="testimonial-citation">
+    <img src="{% static 'donate/img/advertisewithus/rollbar-mikesmith.jpg' %}" alt="Mike Smith - Head of Growth at Rollbar" class="photo">
+    <p>
+      <strong>Mike Smith</strong><br>
+      <span>{% trans "Head of Growth" %}</span>
+    </p>
+    <div>
+      <img src="{% static 'donate/img/advertisewithus/rollbar-testimonial.png' %}" alt="Rollbar" class="logo">
+    </div>
+  </div>
+</section>
+
+<section>
+  <a name="advertise-cta"></a>
+  <div class="advertisewithus-form-wrapper">
+
+    <h2>{% trans "Advertise with us" %}</h2>
+
+    <form action="https://formspree.io/[email protected]" method="POST" class="advertisewithus-form">
+      <label>{% trans "Name" %}</label>
+      <input type="text" name="name" placeholder="{% trans 'Your Name' %}" value="{% if request.user.get_full_name %}{{ request.user.get_full_name }}{% endif %}" required>
+
+      <label>{% trans "Email" %}</label>
+      <input type="email" name="_replyto" placeholder="[email protected]" value="{% if request.user %}{{ request.user.email }}{% endif %}" required>
+
+      <label>{% trans "Your Company" %}</label>
+      <input type="text" name="company" placeholder="{% trans 'Your company or organization' %}" required>
+
+      <input name="_subject" value="Read the Docs Advertising Inquiry" type="hidden">
+      <input name="_next" value="https://readthedocs.org{% url 'advertising-submitted' %}" type="hidden">
+      <input name="_gotcha" style="display:none" type="text">
+
+      <input type="submit" class="ctas-button" value="{% trans 'Get More Information' %}">
+    </form>
+
+    <p>{% trans "When you advertise on Read the Docs you are connecting directly with professional developers reading about the latest in software." %}</p>
+
+    <p>{% trans "A member of our team will reach out to you with more information and help you to get started promoting your product or brand to millions of developers and ensure you reach your advertising goals." %}</p>
+
+  </div>
+
+  {% with ethical_advertising_url='http://docs.readthedocs.io/en/latest/ethical-advertising.html' opensource_url='http://ericholscher.com/blog/2016/aug/31/funding-oss-marketing-money/' %}
+    <p class="advertisewithus-footer">{% blocktrans %}Read the Docs supports <a href="{{ ethical_advertising_url }}">ethical advertising</a> and all of the money raised goes to <a href="{{ opensource_url }}">support open source software</a>.{% endblocktrans %}</p>
+  {% endwith %}
+
+</section>
+
+{% endblock content %}

readthedocs/donate/urls.py

@@ -2,6 +2,7 @@
 
 from __future__ import absolute_import
 from django.conf.urls import url
+from django.views.generic.base import TemplateView
 
 from .views import DonateCreateView, DonateListView, DonateSuccessView
 from .views import PayAdsView, PaySuccess, PromoDetailView
@@ -15,6 +16,12 @@
     url(r'^report/(?P<promo_slug>.+)/$', PromoDetailView.as_view(), name='donate_promo_detail'),
     url(r'^contribute/$', DonateCreateView.as_view(), name='donate_add'),
     url(r'^contribute/thanks$', DonateSuccessView.as_view(), name='donate_success'),
+    url(r'^advertising/$',
+        TemplateView.as_view(template_name='donate/advertising.html'),
+        name='advertising'),
+    url(r'^advertising-submitted/$',
+        TemplateView.as_view(template_name='donate/advertising-submitted.html'),
+        name='advertising-submitted'),
     url(r'^view/(?P<promo_id>\d+)/(?P<hash>.+)/$', view_proxy, name='donate_view_proxy'),
     url(r'^click/(?P<promo_id>\d+)/(?P<hash>.+)/$', click_proxy, name='donate_click_proxy'),
 ]