diff --git a/site/less/campaigns/signup-pages.less b/site/less/campaigns/signup-pages.less new file mode 100644 index 0000000..39bebdb --- /dev/null +++ b/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%); + } + } +} diff --git a/site/less/components/all.less b/site/less/components/all.less index 443fe0c..c99d794 100644 --- a/site/less/components/all.less +++ b/site/less/components/all.less @@ -1,2 +1,3 @@ @import "mixins"; @import "signup-form"; +@import "helper-classes"; diff --git a/site/less/components/helper-classes.less b/site/less/components/helper-classes.less new file mode 100644 index 0000000..c575ad8 --- /dev/null +++ b/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; +} diff --git a/site/less/pages/white.less b/site/less/pages/white.less index 64999b6..1aad6e1 100644 --- a/site/less/pages/white.less +++ b/site/less/pages/white.less @@ -177,3 +177,5 @@ } } } + +@import "../campaigns/signup-pages"; diff --git a/site/resources/img/signup/img-sign-up.jpg b/site/resources/img/signup/img-sign-up.jpg new file mode 100644 index 0000000..fd344e7 Binary files /dev/null and b/site/resources/img/signup/img-sign-up.jpg differ diff --git a/site/src/from/firefox-2014.html b/site/src/from/firefox-2014.html index f9e68bd..957ede5 100644 --- a/site/src/from/firefox-2014.html +++ b/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." --- +
+
+

What can Webmaker do for you?

@@ -58,4 +61,7 @@

What can Webmaker do for you?

No thanks, but I’d like to see what Webmaker is!

+
+
+
diff --git a/site/src/signup/mentors.html b/site/src/signup/mentors.html new file mode 100644 index 0000000..cbcf087 --- /dev/null +++ b/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.' +--- + +
+
+
+
+
+ +
+ + harshavardhankuchi + +
+
+
+
+

Sign up for Webmaker

+ +

+ Webmaker is an open source education project with + easy to use tools for showing others the fundamentals of the Web. +

+ +

+ You can teach the web today. Sign up for Webmaker: +

+ +

+ + Create your account + + + +

+
+
+

+ Triggers a popup to complete signup process. +

+
+
+
+
+

+ Webmaker is free forever, so you can use it at no cost, wherever you + are, whatever your skill-level. +

+
+
+
+
+ +
+
+
+
+ +
+
+
+
diff --git a/site/templates/white.html b/site/templates/white.html index f6ef4f6..b70a1a9 100644 --- a/site/templates/white.html +++ b/site/templates/white.html @@ -66,13 +66,7 @@ -
-
-
- {{ contents }} -
-
-
+{{ contents }}