Add copy & placeholder elements to landing page

locale/en_US/makerparty.json

@@ -1,15 +1,42 @@
 {
+  "About Webmaker": "About Webmaker",
   "Anyone can join Maker Party by hosting or attending an event.": "Anyone can join Maker Party by hosting or attending an event.",
   "Attend an Event": "Attend an Event",
   "Attend an Event Desc": "Join Maker Party by attending an event. Visit our <a href='https://events.webmaker.org'>events page</a> and see what's happening in your neighbourhood.",
+  "Contact": "Contact",
+  "Donate": "Donate",
+  "English": "English",
+  "Events": "Events",
+  "Flickr": "Flickr",
+  "Get Maker Party Updates": "Get Maker Party Updates:",
+  "Get Maker Party Updates Desc": "Sign up for our mailing list to receive updates on the latest Maker Party news.",
   "Get Support": "Get Support",
   "Get Support Desc": "Throwing an event? We’ll support you the entire way with free training and planning resources, ideas for activities, great Mozilla gear like t-shirts and stickers, plus access to a wonderful community and one-on-one support.",
+  "Google+": "Google+",
+  "Have fun with our tools": "Have fun with our tools",
+  "Have fun with our tools Desc": "Mozilla Webmaker has fun, easy-to-use, free <a href='https://webmaker.org/tools'>tools</a> to teach the web. See the inner working of a webpage with <b>X-Ray Goggles</b>. Learn HTML and CSS using <b>Thimble</b>. Remix video, audio and images from the web with <b>Popcorn Maker</b>.",
+  "History": "History",
   "Home Banner Desc": "Maker Party is Mozilla's global campaign to teach the web. Through thousands of community-run events around the world,  Maker Party unites educators, organizations and enthusiastic web users with hands-on learning and making.",
   "Host an Event": "Host an Event",
   "Host an Event Desc": "Anyone can host an event in their city or town. Together, thousands of events teaching the culture, mechanics and citizenship of the web make up a global, two-month party.",
   "How does Maker Party work?": "How does Maker Party work?",
+  "Learn by teaching": "Learn by teaching",
+  "Learn by teaching Desc": "The best way to learn the web is to teach it. Hosting a Maker Party is not only personally rewarding, it contributes to the greater goal of increasing web literacy for everyone, everywhere in the world.",
+  "Learn more about us": "Learn more about us.",
+  "Learn more about us Desc": "======= FIXME: missing text? ========",
+  "Maker Party": "Maker Party",
   "Maker Party 2014 runs from July 15 to September 15.": "Maker Party 2014 runs from July 15 to September 15.",
+  "Maker Party History": "Maker Party History",
+  "Maker Party History Desc": "Check out the highlights from Maker Party 2013 and see more photos in our <a href='http://www.flickr.com/search/?w=faves-47833020@N03&q=makerparty'>Flickr gallery</a>.",
+  "Our Sponsorship Partners": "Our Sponsorship Partners:",
+  "Partners": "Partners",
+  "Resources": "Resources",
+  "See what people are saying about Maker Party": "See what people are saying about Maker Party.",
+  "See what people are saying about Maker Party Desc": "Technology can be an extraordinary tool for empowerment. That’s why the YWCA Toronto Girls’ Council leadership program hosted “Maker Parties” run by Mozilla’s Hive Toronto network. As makers-in-training, they learned how to use Mozilla’s free suite of webmaking tools to create their own websites and videos. They also learned the freedom and confidence that comes from knowing how to not only enjoy content on the internet, but create it themselves.",
   "Teach, Learn & Make": "Teach, Learn & Make",
   "testing": "hello, this is the testing string",
-  "We want people to throw or attend an event.": "We want people to throw or attend an event."
+  "Twitter": "Twitter",
+  "We want people to throw or attend an event.": "We want people to throw or attend an event.",
+  "Why Mozilla throws an annual Maker Party": "Why Mozilla throws an annual Maker Party:",
+  "Why Mozilla throws an annual Maker Party Desc": "Mozilla believes the web is a global public resource that’s integral to modern life; it shapes how we learn, how we connect and how we communicate. But many of us don't understand its basic mechanics or what it means to be a citizen of the web. That’s why we’re so passionate about teaching web literacy through hands-on learning and making. Our goal is to help people move beyond simply consuming the web to understanding and creating it, so it remains open, accessible and ours."
 }

public/less/style.less

@@ -16,6 +16,12 @@
 @mp-yellow: #FFE600;
 @mp-green: #00B0B7;
 
+.placeholder-image {
+  background: #EDEDED;
+  text-align: center;
+  color: #67912F;
+}
+
 .navbar {
   border: none;
 }
@@ -61,6 +67,24 @@ footer {
   color: #fff;
   padding: 30px 0;
   margin-top: 40px;
+
+  img {
+    width: 100%;
+    height: 100%;
+    opacity: .6;
+  }
+
+  .footer-links {
+    ul {
+      list-style-type: none;
+      padding-left: 0;
+
+      i.fa {
+        margin-right: 10px;
+      }
+    }
+  }
+
 }
 
 .banner {
@@ -75,3 +99,19 @@ footer {
   background: @lightgrey;
   color: @brand-secondary;
 }
+
+.get-mp-updates {
+  background: @lightgrey;
+}
+
+.testimonials {
+  background: @lightgrey;
+  .avatar-pic{
+    margin: 0 auto;
+    background: #EDEDED;
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+    border: 8px solid #fff;
+  }
+}

views/history.html

@@ -3,11 +3,11 @@
 
 {% block navItems %}
 <ul class="nav navbar-nav">
-  <li><a href="/">Maker Party</a></li>
-  <li><a href="https://events.webmaker.org">Events</a></li>
-  <li><a href="/partners">Partners</a></li>
-  <li><a href="/resources">Resources</a></li>
-  <li class="active"><a href="/history">History</a></li>
+  <li><a href="/">{{ gettext("Maker Party") }}</a></li>
+  <li><a href="https://events.webmaker.org">{{ gettext("Events") }}</a></li>
+  <li><a href="/partners">{{ gettext("Partners") }}</a></li>
+  <li><a href="/resources">{{ gettext("Resources") }}</a></li>
+  <li class="active"><a href="/history">{{ gettext("History") }}</a></li>
 </ul>
 {% endblock %}
 

views/home.html

@@ -3,15 +3,14 @@
 
 {% block navItems %}
 <ul class="nav navbar-nav">
-  <li class="active"><a href="#">Maker Party</a></li>
-  <li><a href="https://events.webmaker.org">Events</a></li>
-  <li><a href="/partners">Partners</a></li>
-  <li><a href="/resources">Resources</a></li>
-  <li><a href="/history">History</a></li>
+  <li class="active"><a href="/">{{ gettext("Maker Party") }}</a></li>
+  <li><a href="https://events.webmaker.org">{{ gettext("Events") }}</a></li>
+  <li><a href="/partners">{{ gettext("Partners") }}</a></li>
+  <li><a href="/resources">{{ gettext("Resources") }}</a></li>
+  <li><a href="/history">{{ gettext("History") }}</a></li>
 </ul>
 {% endblock %}
 
-
 {% block mainContent %}
   <div class="container banner">
     <div class="row">
@@ -30,6 +29,7 @@
       </div>
     </div>
   </div>
+
   <div class="call-out">
     <div class="container">
       <div class="row">
@@ -40,6 +40,7 @@
       </div>
     </div>
   </div>
+
   <div class="container">
     <div class="row">
       <div class="col-md-12 text-center">
@@ -48,20 +49,93 @@
     </div>
     <div class="row">
       <div class="col-md-4">
+        <div class="placeholder-image" style="height: 100px">image placeholder</div>
         <h3>{{ gettext("Host an Event") }}</h3>
         <p>{{ gettext("Host an Event Desc") }}</p>
       </div>
       <div class="col-md-4">
+        <div class="placeholder-image" style="height: 100px">image placeholder</div>
         <h3>{{ gettext("Attend an Event") }}</h3>
         <p>{{ gettext("Attend an Event Desc") | safe }}</p>
       </div>
       <div class="col-md-4">
+        <div class="placeholder-image" style="height: 100px">image placeholder</div>
         <h3>{{ gettext("Get Support") }}</h3>
         <p>{{ gettext("Get Support Desc") }}</p>
       </div>
     </div>
   </div>
+
   <div class="container">
+    <div class="row">
+      <div class="col-md-6">
+        <h3>{{ gettext("Have fun with our tools") }}</h3>
+        <p>{{ gettext("Have fun with our tools Desc") | safe }}</p>
+      </div>
+      <div class="col-md-6">
+        <h3>{{ gettext("Learn by teaching") }}</h3>
+        <p>{{ gettext("Learn by teaching Desc") | safe }}</p>
+      </div>
+    </div>
+  </div>
+
+  <div class="container">
+    <div class="row">
+      <div class="col-md-12">
+        <h3>{{ gettext("Maker Party History") }}</h3>
+        <p>{{ gettext("Maker Party History Desc") | safe }}</p>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-md-12">
+        <div class="placeholder-image" style="height: 300px">image placeholder</div>
+      </div>
+    </div>
+  </div>
+
+  <div class="container">
+    <div class="row">
+      <div class="col-md-4">
+        <div class="placeholder-image" style="height: 300px">image placeholder</div>
+      </div>
+      <div class="col-md-8">
+        <div class="row">
+          <div class="col-md-12">
+            <h3>{{ gettext("Why Mozilla throws an annual Maker Party") }}</h3>
+            <p>{{ gettext("Why Mozilla throws an annual Maker Party Desc") }}</p>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-md-12">
+            <h3>{{ gettext("Learn more about us") }}</h3>
+            <p>{{ gettext("Learn more about us Desc") | safe }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="testimonials">
+    <div class="container">
+      <div class="row">
+        <div class="col-md-8">
+          <h3>{{ gettext("See what people are saying about Maker Party") }}</h3>
+          <p><i>{{ gettext("See what people are saying about Maker Party Desc") }}</i></p>
+        </div>
+        <div class="col-md-4 text-center">
+          <div class="row">
+            <div class="col-md-12">
+              <div class="avatar-pic"></div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-md-12">
+              <p>YWCA Toronto Girls’ Council (FIXME: add a link?)</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 {% endblock %}
 

views/layout.html

@@ -26,11 +26,11 @@
         <div class="navbar-collapse" collapse="isCollapsed">
           {% block navItems %}
           <ul class="nav navbar-nav">
-            <li class="active"><a href="#">Maker Party</a></li>
-            <li><a href="https://events.webmaker.org">Events</a></li>
-            <li><a href="/partners">Partners</a></li>
-            <li><a href="/resources">Resources</a></li>
-            <li><a href="/history">History</a></li>
+            <li class="active"><a href="/">{{ gettext("Maker Party") }}</a></li>
+            <li><a href="https://events.webmaker.org">{{ gettext("Events") }}</a></li>
+            <li><a href="/partners">{{ gettext("Partners") }}</a></li>
+            <li><a href="/resources">{{ gettext("Resources") }}</a></li>
+            <li><a href="/history">{{ gettext("History") }}</a></li>
           </ul>
           {% endblock %}
         </div>
@@ -39,14 +39,72 @@
     </nav>
   </div>
 
-  <div class="view-animate" role="main" ng-view>
+  <div class="view-animate" role="main">
   {% block mainContent %}
   {% endblock %}
   </div>
 
+  <div class="container sponsorship-partners">
+    <div class="row">
+      <div class="col-md-12">
+        <h3>{{ gettext("Our Sponsorship Partners") }}</h3>
+        <div class="row">
+          <div class="col-md-4">
+            <div class="placeholder-image" style="height: 100px">MacArthur logo & link placeholder</div>
+          </div>
+          <div class="col-md-4">
+            <div class="placeholder-image" style="height: 100px">Mozilla logo & link placeholder</div>
+          </div>
+          <div class="col-md-4">
+            <div class="placeholder-image" style="height: 100px">NWP logo & link placeholder</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="get-mp-updates">
+    <div class="container">
+      <div class="row">
+        <div class="col-md-8">
+          <h3>{{ gettext("Get Maker Party Updates") }}</h3>
+          <p>{{ gettext("Get Maker Party Updates Desc") }}</p>
+        </div>
+        <div class="col-md-4">
+          <input type="e-mail" />
+        </div>
+      </div>
+    </div>
+  </div>
+
   <footer>
     <div class="container">
-      I'm the footer
+      <div class="row">
+        <div class="col-md-2">
+          <img src="img/makerparty_footerwordmark.png" />
+        </div>
+        <div class="col-md-3">
+          <img src="img/webmaker_footerwordmark.png" />
+        </div>
+        <div class="col-md-3">
+        </div>
+        <div class="col-md-2 footer-links">
+          <ul>
+            <li><i class="fa fa-globe"></i>{{ gettext("English") }}</li>
+            <li><i class="fa fa-twitter"></i><a href="https://twitter.com/search?q=%23MakerParty&src=typd ">{{ gettext("Twitter") }}</a></li>
+            <li><i class="fa fa-flickr"></i><a href="http://www.flickr.com/search/?w=faves-47833020@N03&q=makerparty">{{ gettext("Flickr") }}</a></li>
+            <li><i class="fa fa-google-plus"></i><a href="https://plus.google.com/communities/106022863174952221205">{{ gettext("Google+") }}</a></li>
+          </ul>
+        </div>
+        <div class="col-md-2 footer-links">
+          <ul>
+            <li>&nbsp;</li>
+            <li>{{ gettext("About Webmaker") }}</li>
+            <li><a href="mailto:makerparty@mozilla.org">{{ gettext("Contact") }}</li>
+            <li>{{ gettext("Donate") }}</li>
+          </ul>
+        </div>
+      </div>
     </div>
   </footer>
 

views/partners.html

@@ -3,15 +3,14 @@
 
 {% block navItems %}
 <ul class="nav navbar-nav">
-  <li><a href="/">Maker Party</a></li>
-  <li><a href="https://events.webmaker.org">Events</a></li>
-  <li class="active"><a href="/partners">Partners</a></li>
-  <li><a href="/resources">Resources</a></li>
-  <li><a href="/history">History</a></li>
+  <li><a href="/">{{ gettext("Maker Party") }}</a></li>
+  <li><a href="https://events.webmaker.org">{{ gettext("Events") }}</a></li>
+  <li class="active"><a href="/partners">{{ gettext("Partners") }}</a></li>
+  <li><a href="/resources">{{ gettext("Resources") }}</a></li>
+  <li><a href="/history">{{ gettext("History") }}</a></li>
 </ul>
 {% endblock %}
 
-
 {% block mainContent %}
   <div class="container">
     Partners Page

views/resources.html

@@ -3,11 +3,11 @@
 
 {% block navItems %}
 <ul class="nav navbar-nav">
-  <li><a href="/">Maker Party</a></li>
-  <li><a href="https://events.webmaker.org">Events</a></li>
-  <li><a href="/partners">Partners</a></li>
-  <li class="active"><a href="/resources">Resources</a></li>
-  <li><a href="/history">History</a></li>
+  <li><a href="/">{{ gettext("Maker Party") }}</a></li>
+  <li><a href="https://events.webmaker.org">{{ gettext("Events") }}</a></li>
+  <li><a href="/partners">{{ gettext("Partners") }}</a></li>
+  <li class="active"><a href="/resources">{{ gettext("Resources") }}</a></li>
+  <li><a href="/history">{{ gettext("History") }}</a></li>
 </ul>
 {% endblock %}