gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

improve landing page with Mark Howard

Browse Source
This commit is contained in:
Michael Q Larson
2014-11-30 19:05:06 -08:00
parent ec5fea2eaa
commit 73deffd707
5 changed files with 166 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
public/css/main.less
View File

@ -143,16 +143,18 @@ ul {
.landing-icon { .landing-icon {
font-size: 150px; font-size: 150px;
margin-top: -20px;
margin-bottom: -20px;
} }
.responsive-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .responsive-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }
.responsive-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .responsive-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.negative-10 { .negative-10 {
margin-top: -30px; margin-top: -45px;
margin-bottom: -30px; margin-bottom: -45px;
}
.landing-p {
font-size: 18px !important;
} }
.text-success { .text-success {
@ -189,6 +191,11 @@ ul {
animation-delay: 5s; animation-delay: 5s;
} }
.delay-6 {
-webkit-animation-delay: 6s;
animation-delay: 6s;
}
.fast-animation { .fast-animation {
-webkit-animation-duration: 0.5s; -webkit-animation-duration: 0.5s;
animation-duration: 0.5s; animation-duration: 0.5s;
@ -255,6 +262,16 @@ ul {
} }
} }
.hug-top {
margin-top: -40px;
margin-bottom: -10px;
}
.big-text { .big-text {
font-size: 63px; font-size: 63px;
} }
.scroll-lock {
overflow: hidden;
height: 100%;
}

5
public/js/main.js
View File

@ -1,5 +1,10 @@
$(document).ready(function() { $(document).ready(function() {
$('#chatbox').attr('src','https://gitter.im/FreeCodeCamp/FreeCodeCamp').on('load', function() {
$('html, body').removeClass('scroll-lock')
$(this).show();
});
var CSRF_HEADER = 'X-CSRF-Token'; var CSRF_HEADER = 'X-CSRF-Token';
var setCSRFToken = function(securityToken) { var setCSRFToken = function(securityToken) {

35
views/home.jade
View File

@ -1,34 +1,45 @@
script.
$('html, body').addClass('scroll-lock')
extends layout extends layout
block content block content
.jumbotron .jumbotron
.text-center .text-center
.animated.pulse .animated.pulse
h2.big-text Learn to Code h1.hug-top Code with Us
.delay-1.animated.pulse.slow-animation .delay-1.animated.pulse.slow-animation
h2 Become an Employable Software Engineer by Collaborating on Projects for Nonprofits h2 Let's learn to code by building projects for nonprofits
.row .row
.col-xs-12.col-sm-12.col-md-4 .col-xs-12.col-sm-12.col-md-3
h3.delay-3.animated.pulse Technical Mastery h3.delay-3.animated.pulse Learn JavaScript
.negative-10 .negative-10
span.landing-icon.ion-settings.text-primary(title='Learn to code') span.landing-icon.ion-settings.text-primary(title='Learn to code')
.negative-10 .negative-10
p You'll learn to code by pair programming (where two people code together on one computer) through our coding challenges. p.landing-p Code collaboratively and master Full Stack JavaScript development.
.col-xs-12.col-sm-12.col-md-4 .col-xs-12.col-sm-12.col-md-3
h3.delay-4.animated.pulse Unique Portfolio Projects h3.delay-4.animated.pulse Build your Portfolio
.negative-10 .negative-10
span.landing-icon.ion-social-github.text-primary(title='Build a portfolio of apps for nonprofits') span.landing-icon.ion-social-github.text-primary(title='Build a portfolio of apps for nonprofits')
.negative-10 .negative-10
p You'll use your new coding skills to build software solutions for nonprofits. Your portfolio projects will have grateful users. p.landing-p Build apps that solve real problems for real people.
.col-xs-12.col-sm-12.col-md-4 .col-xs-12.col-sm-12.col-md-3
h3.delay-5.animated.pulse Glowing References h3.delay-5.animated.pulse Get Connected
.negative-10 .negative-10
span.landing-icon.ion-thumbsup.text-primary(title='Get great references and connections to help you get a job') span.landing-icon.ion-network.text-primary(title='Get great references and connections to help you get a job')
.negative-10 .negative-10
p You'll gain the respect of your peers and the nonprofits you help. These types of connections are critical to your job search. p.landing-p Join a community of motivated professionals learning to code.
.col-xs-12.col-sm-12.col-md-3
h3.delay-6.animated.pulse Help Nonprofits
.negative-10
span.landing-icon.ion-ios7-people.text-primary(title='Learn to code')
.negative-10
p.landing-p Make the world a better place by empowering nonprofits with code.
a.btn.btn-cta.btn-primary(href="/login") Sign in now to start coding (it's free) a.btn.btn-cta.btn-primary(href="/login") Sign in now to start coding (it's free)
br br
br br
a.btn.nonprofit-cta.btn-success(href="/nonprofits") I'm with a nonprofit and want help coding something a.btn.nonprofit-cta.btn-success(href="/nonprofits") I'm with a nonprofit and want help coding something
br
include partials/about-us
br br
include partials/faq include partials/faq
br br

116
views/partials/about-us.jade Normal file
View File

@ -0,0 +1,116 @@
.panel.panel-primary
.panel-heading.landing-panel-heading.text-center We are Free Code Camp
.panel-body
.text-left.landing-panel-body
.col-xs-12
.embed-responsive.embed-responsive-4by3
iframe.embed-responsive-item(src='https://gitter.im/FreeCodeCamp/FreeCodeCamp')
.col-xs-12.col-md-6
blockquote.twitter-tweet(lang='en')
p
| coding made easy thanks to
a(href='https://twitter.com/FreeCodeCamp') @freecodecamp
| — Ngunjirinyaguthie (@_tess_ey)
a(href='https://twitter.com/_tess_ey/status/538468416047546368') November 28, 2014
script(async='', src='//platform.twitter.com/widgets.js', charset='utf-8')
.col-xs-12.col-md-6
blockquote.twitter-tweet(lang='en')
p
a(href='https://twitter.com/FreeCodeCamp') @FreeCodeCamp
| I'll make time to be part of this!!!!
| — Guy (@codenorris)
a(href='https://twitter.com/codenorris/status/536585762083733505') November 23, 2014
script(async='', src='//platform.twitter.com/widgets.js', charset='utf-8')
.col-xs-12.col-md-6
blockquote.twitter-tweet(lang='en')
p
a(href='https://twitter.com/FreeCodeCamp') @FreeCodeCamp
| Great idea. Great vision.
| — Dennis Ahaus (@DennisAhaus)
a(href='https://twitter.com/DennisAhaus/status/535528750977654784') November 20, 2014
script(async='', src='//platform.twitter.com/widgets.js', charset='utf-8')
.col-xs-12.col-md-6
blockquote.twitter-tweet(lang='en')
p
| Learn code for free! Your time, your pace! Sweet!
a(href='http://t.co/y6IMdPDPnH') http://t.co/y6IMdPDPnH
a(href='https://twitter.com/hashtag/code?src=hash') #code
a(href='https://twitter.com/hashtag/coding?src=hash') #coding
a(href='https://twitter.com/FreeCodeCamp') @FreeCodeCamp
a(href='https://twitter.com/ESMSchoolDist') @ESMSchoolDist
| — Rebecca Wenner (@techiepusher)
a(href='https://twitter.com/techiepusher/status/535097411619016704') November 19, 2014
script(async='', src='//platform.twitter.com/widgets.js', charset='utf-8')
.col-xs-12.col-md-6
blockquote.twitter-tweet(lang='en')
p
a(href='https://twitter.com/FreeCodeCamp') @FreeCodeCamp
| is my new favorite online learning tool right now.
a(href='http://t.co/W0kyl2q3n2') http://t.co/W0kyl2q3n2
a(href='https://twitter.com/hashtag/programming?src=hash') #programming
a(href='https://twitter.com/hashtag/computerscience?src=hash') #computerscience
a(href='https://twitter.com/hashtag/MOOCs?src=hash') #MOOCs
| — Edeline Wrigh (@EdelineWrigh)
a(href='https://twitter.com/EdelineWrigh/status/534850956127522816') November 18, 2014
script(async='', src='//platform.twitter.com/widgets.js', charset='utf-8')
.col-xs-12.col-md-6
blockquote.twitter-tweet(lang='en')
p
| Started
a(href='https://twitter.com/FreeCodeCamp') @FreeCodeCamp
| last nite. So far a good bit of review, but the overall program is pretty in-depth. From HTML thru
a(href='https://twitter.com/hashtag/git?src=hash') #git
a(href='https://twitter.com/hashtag/sql?src=hash') #sql
a(href='https://twitter.com/hashtag/agile?src=hash') #agile
| .
| — Tracie Holton (@TracieHolton)
a(href='https://twitter.com/TracieHolton/status/533272754363957248') November 14, 2014
script(async='', src='//platform.twitter.com/widgets.js', charset='utf-8')
.col-xs-12.col-md-6
blockquote.twitter-tweet(lang='en')
p
| I don't consider myself a teacher, but getting involved & collaborating through
a(href='https://twitter.com/FreeCodeCamp') @FreeCodeCamp
| is really showing me how much I like sharing.
| — Alex Martin (@ADotMartin)
a(href='https://twitter.com/ADotMartin/status/532961039181045760') November 13, 2014
script(async='', src='//platform.twitter.com/widgets.js', charset='utf-8')
.col-xs-12.col-md-6
blockquote.twitter-tweet(lang='en')
p
| A6 -
a(href='http://t.co/M6Gyw8jszd') http://t.co/M6Gyw8jszd
a(href='https://twitter.com/FreeCodeCamp') @FreeCodeCamp
| Great concept, solid lessons, and the right reasons behind it. :)
a(href='https://twitter.com/hashtag/CodeNewbie?src=hash') #CodeNewbie
| — Angel Jose (@ajose01)
a(href='https://twitter.com/ajose01/status/532729251754033152') November 13, 2014
script(async='', src='//platform.twitter.com/widgets.js', charset='utf-8')
.col-xs-12.col-md-6
blockquote.twitter-tweet(lang='en')
p
| no school today: with
a(href='https://twitter.com/BlueninjaSF') @blueninjaSF
| at
a(href='https://twitter.com/AWSloft') @awsloft
| working on
a(href='https://twitter.com/FreeCodeCamp') @freecodecamp
| - first website. check!
a(href='http://t.co/yJ8ycEti9B') pic.twitter.com/yJ8ycEti9B
| — brian ball (@brianball)
a(href='https://twitter.com/brianball/status/532243325290827777') November 11, 2014
script(async='', src='//platform.twitter.com/widgets.js', charset='utf-8')
.col-xs-12.col-md-6
blockquote.twitter-tweet(lang='en')
p
| I agree,
a(href='https://twitter.com/LeifPixel') @LeifPixel
| ...
a(href='https://twitter.com/FreeCodeCamp') @freecodecamp
| a wonderful way of learning web development while helping non-profits!
a(href='https://twitter.com/hashtag/web?src=hash') #web
a(href='https://twitter.com/hashtag/development?src=hash') #development
a(href='https://twitter.com/hashtag/nonprofit?src=hash') #nonprofit
| — Deb Simon-Heinfeld (@debBlufftonAGS)
a(href='https://twitter.com/debBlufftonAGS/status/532198725129867265') November 11, 2014
script(async='', src='//platform.twitter.com/widgets.js', charset='utf-8')

2
views/partials/faq.jade
View File

@ -1,5 +1,5 @@
.panel.panel-primary .panel.panel-primary
.panel-heading.landing-panel-heading Frequently Asked Questions .panel-heading.landing-panel-heading.text-center Frequently Asked Questions
.panel-body .panel-body
.text-left.landing-panel-body .text-left.landing-panel-body
h2 What will I learn, and in what sequence? h2 What will I learn, and in what sequence?