Merge pull request #43 from gesa/1047526/mentors-signup

Fixes Bug 1047526 - Build on alternate Webmaker signup page for *Mentors*

site/less/campaigns/signup-pages.less

@@ -0,0 +1,72 @@
+#signup-page-info {
+  background: @brand-info;
+  color: @white;
+  font-weight: 200;
+  padding: 2.5rem 0;
+  text-align: center;
+  @media (min-width: @screen-sm-min) {
+    padding: 5rem 0;
+    text-align: left;
+  }
+  a {
+    color: @white;
+    text-decoration: none;
+  }
+  b {
+    font-weight: 400;
+  }
+  h1 {
+    line-height: 1;
+    @media (min-width: @screen-sm-min) {
+      font-size: 6rem;
+    }
+  }
+  p {
+    margin: 2rem 0;
+  }
+  .btn {
+    font-size: 1.8rem;
+    padding: 1.8rem 6.5rem;
+    width: 100%;
+    @media screen and (min-width: @screen-xs-min) {
+      margin-right: 4rem;
+      width: auto;
+    }
+  }
+  .log-in-link {
+    display: inline-block;
+    padding-top: 2rem;
+    @media screen and (min-width: @screen-xs-min) {
+      padding-top: 0;
+    }
+  }
+}
+
+.signup-list {
+  h1 {
+    @media (max-width: @screen-sm-min) {
+      font-size: 2.5rem;
+    }
+  }
+  .list-info-header {
+    padding-bottom: 1.5rem;
+    text-align: left;
+  }
+  ul {
+    padding-left: 0;
+  }
+  li {
+    list-style: none;
+    margin-bottom: 0;
+    padding: 1.5rem;
+    text-align: left;
+    .fa {
+      font-size: 2.6rem;
+    }
+    &:nth-child(odd) {
+      background: darken(@white, 2%);
+      border-bottom: 0.1rem solid darken(@white, 11%);
+      border-top: 0.1rem solid darken(@white, 11%);
+    }
+  }
+}

site/less/components/all.less

@@ -1,2 +1,3 @@
 @import "mixins";
 @import "signup-form";
+@import "helper-classes";

site/less/components/helper-classes.less

@@ -0,0 +1,19 @@
+.highlight-text {
+  font-weight: 600;
+}
+
+.img-page-info {
+  width: 275px;
+}
+
+.fa-smaller {
+  font-size: 80%;
+}
+
+.caption {
+  font-size: 1.2rem;
+  font-weight: 500;
+  margin: 1rem 0 0;
+  position: relative;
+  text-align: center;
+}

site/less/pages/white.less

@@ -177,3 +177,5 @@
     }
   }
 }
+
+@import "../campaigns/signup-pages";

site/src/from/firefox-2014.html

@@ -3,6 +3,9 @@
 title: "Teach and learn the web with Mozilla"
 description: "Webmaker can help you teach and learn how to code, design and create on the web."
 ---
+<div class="firefox-2014 container">
+<div class="row">
+<div class="col-xs-12 col-sm-10 col-sm-offset-1">
 <header>
   <h1>What can Webmaker do for you?</h1>
 
@@ -58,4 +61,7 @@ <h1>What can Webmaker do for you?</h1>
     No thanks, but I’d like to see what Webmaker is!
   </a>
 </p>
+</div>
+</div>
+</div>
 

site/src/signup/mentors.html

@@ -0,0 +1,103 @@
+---
+template: white.html
+title: 'Webmaker | Sign Up'
+description: 'Sign up for Webmaker, an open source education project with easy to use tools for showing others the fundamentals of the Web.'
+---
+
+<section id="signup-page-info">
+  <div class="container">
+    <div class="row">
+      <div class="col-sm-3">
+        <figure>
+          <img src="/resources/img/signup/img-sign-up.jpg" class="img-circle img-page-info"/>
+          <figcaption class="caption">
+            <a href="https://secure.flickr.com/photos/123150788@N08/14219051289/in/faves-mozilladrumbeat/">
+              <span class="fa fa-camera"></span> harshavardhankuchi
+            </a>
+          </figcaption>
+        </figure>
+      </div>
+      <div class="col-md-9 col-lg-7">
+        <h1>Sign up for Webmaker</h1>
+
+        <p>
+          <strong>Webmaker is an open source education project</strong> with
+          easy to use tools for showing others the fundamentals of the Web.
+        </p>
+
+        <p>
+          You can teach the web today. Sign up for Webmaker:
+        </p>
+
+        <p>
+          <a class="btn btn-secondary btn-page-info" href="https://webmaker.org/signup/new-account">
+            Create your account
+            <span class="fa fa-chevron-right fa-smaller"></span>
+          </a>
+          <a class="log-in-link" href="https://webmaker.org/signup/login">
+            Log in <span class="fa fa-chevron-right fa-smaller"></span>
+          </a>
+        </p>
+      </div>
+      <div class="col-xs-12 col-md-9 col-md-offset-3 col-lg-7">
+        <p>
+          <small><i>Triggers a popup to complete signup process.</i></small>
+        </p>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-10 col-lg-8">
+        <p>
+          Webmaker is free forever, so you can use it at no cost, wherever you
+          are, whatever your skill-level.
+        </p>
+      </div>
+    </div>
+  </div>
+</section>
+
+<section id="signup-bullet-points">
+  <div class="container text-center">
+    <div class="row">
+      <div class="col-sm-12">
+        <div class="signup-list">
+          <h1 class="list-info-header">What does Webmaker offer you?</h1>
+          <ul class="list-item-signup">
+            <li>
+              <span class="fa fa-fw fa-check text-primary"></span>
+              Use Webmaker’s online tools to create your own content
+            </li>
+            <li>
+              <span class="fa fa-fw fa-check text-primary"></span>
+              Find and attend events near you
+            </li>
+            <li>
+              <span class="fa fa-fw fa-check text-primary"></span>
+              Use Webmaker-vetted teaching resources and templates
+            </li>
+            <li>
+              <span class="fa fa-fw fa-star-o text-primary"></span>
+              Earn badges for your web literacy skills
+              <small class="text-primary"><strong>Needs a Webmaker account</strong></small>
+            </li>
+            <li>
+              <span class="fa fa-fw fa-star-o text-primary"></span>
+              Save and publish with Webmaker tools
+              <small class="text-primary"><strong>Needs a Webmaker account</strong></small>
+            </li>
+            <li>
+              <span class="fa fa-fw fa-star-o text-primary"></span>
+              Create and publish an event
+              <small class="text-primary"><strong>Needs a Webmaker account</strong></small>
+            </li>
+            <li>
+              <span class="fa fa-fw fa-star-o text-primary"></span>
+              Create your profile and get your own custom URL
+              <small class="text-primary"><strong>Needs a Webmaker account</strong></small>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>

site/templates/white.html

@@ -66,13 +66,7 @@
     </figure>
   </div>
 </nav>
-<div class="container">
-  <div class="row">
-    <div class="col-xs-12 col-sm-10 col-sm-offset-1">
-      {{ contents }}
-    </div>
-  </div>
-</div>
+{{ contents }}
 
 <!-- build:js /resources/js/white.min.js -->
 <script type="text/javascript" src="/resources/vendors/jquery/dist/jquery.min.js"></script>