From 559822485d46baa1aaeaf8c90af5b5af27a4a2ff Mon Sep 17 00:00:00 2001 From: Quincy Larson Date: Tue, 3 Nov 2015 17:37:58 -0800 Subject: [PATCH] update landing page --- client/less/main.less | 16 ++++--- server/views/home.jade | 95 +++++++++++++++++++++++------------------- 2 files changed, 59 insertions(+), 52 deletions(-) diff --git a/client/less/main.less b/client/less/main.less index 59adf6fb44..8d3ceb2ad1 100644 --- a/client/less/main.less +++ b/client/less/main.less @@ -833,6 +833,10 @@ iframe.iphone { margin-top: -5px; } +.landing-heading { + font-size: 50px !important; +} + .mobile-story-headline { font-size: 20px; } @@ -847,15 +851,9 @@ iframe.iphone { } hr { - -moz-border-bottom-colors: none; - -moz-border-image: none; - -moz-border-left-colors: none; - -moz-border-right-colors: none; - -moz-border-top-colors: none; - border-color: @gray; - border-style: solid none; - border-width: 1px 0; - margin: 18px 0; + border: 0; + height: 1px; + background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)); } .big-spacer { diff --git a/server/views/home.jade b/server/views/home.jade index 9efdc7029d..4f19e3d4ad 100644 --- a/server/views/home.jade +++ b/server/views/home.jade @@ -2,23 +2,23 @@ extends layout block content .jumbotron .text-center - h1.hug-top Code with Us - h2 Let's learn to code and build projects for nonprofits + h1.landing-heading Learn to code and help nonprofits. + .spacer .row .col-xs-12.col-sm-12.col-md-3 - h3.nowrap Get Connected + h3.nowrap Get connected img.img-responsive.landing-icon.img-center(src= 'https://s3.amazonaws.com/freecodecamp/landingIcons_connect.svg.gz', alt='Get great references and connections to start your software engineer career') - p.landing-p Join a community of busy, motivated people. + p.landing-p Join a community of 100,000+ motivated people. .col-xs-12.col-sm-12.col-md-3 h3.nowrap Learn JavaScript img.img-responsive.landing-icon.img-center(src= 'https://s3.amazonaws.com/freecodecamp/landingIcons_learn.svg.gz', alt='Learn to code and learn full stack JavaScript') p.landing-p Work together on Full Stack JavaScript coding challenges. .col-xs-12.col-sm-12.col-md-3 - h3.nowrap Build your Portfolio + h3.nowrap Build your portfolio img.img-responsive.landing-icon.img-center(src= 'https://s3.amazonaws.com/freecodecamp/landingIcons_portfolio.svg.gz', alt='Build a portfolio of apps for nonprofits') p.landing-p Build apps that solve real problems for real people. .col-xs-12.col-sm-12.col-md-3 - h3.nowrap Help Nonprofits + h3.nowrap Help nonprofits img.img-responsive.landing-icon.img-center(src= 'https://s3.amazonaws.com/freecodecamp/landingIcons_nonprofits.svg.gz', alt='Help empower nonprofits with code') p.landing-p Give nonprofits a boost by empowering them with code. .big-break @@ -26,59 +26,68 @@ block content .col-xs-12.col-sm-8.col-sm-offset-2 a.btn.btn-cta.signup-btn.btn-block(href="/signin") Start learning to code (it's free) .button-spacer - a.btn.btn-cta.btn-success.btn-block(href="/nonprofits") My nonprofit needs coding help + a.btn.btn-lg.btn-primary.btn-primary-ghost.btn-block(href="/nonprofits") My nonprofit needs coding help + .spacer h2 As featured in: img.img-center.img-responsive(src='https://s3.amazonaws.com/freecodecamp/as-seen-on.png') .spacer - h2 Campers you'll hang out with: + hr + .spacer + h2 Launch your career as a software engineer: + .spacer .row .col-xs-12.col-sm-12.col-md-4 - img.img-responsive.testimonial-image.img-center(src="http://i.imgur.com/xzDoJef.jpg", alt="'s testimonial image") + img.img-responsive.testimonial-image.img-center(src="http://i.imgur.com/xzDoJef.jpg", alt="Ashley's testimonial image") p.testimonial-copy Free Code Camp helped me get my first engineering job. This amazing community made my career switch a lot easier and more fun. h3 - Ashley Drake .col-xs-12.col-sm-12.col-md-4 - img.img-responsive.testimonial-image.img-center(src="http://i.imgur.com/wjlDigg.jpg", alt="Maxim Orlov's LinkedIn photo") + img.img-responsive.testimonial-image.img-center(src="http://i.imgur.com/wjlDigg.jpg", alt="Maxim Orlov's testimonial image") p.testimonial-copy I started Free Code Camp with zero knowledge of web development. 6 months later, I landed my first job as a back end engineer. h3 - Maxim Orlov .col-xs-12.col-sm-12.col-md-4 - img.img-responsive.testimonial-image.img-center(src="http://i.imgur.com/dE2Di78.jpg", alt="'s testimonial image") - p.testimonial-copy Free Code Camp gives me more confidence at work. Code doesn’t look as foreign anymore. - h3 - Qing Huang + img.img-responsive.testimonial-image.img-center(src="http://i.imgur.com/58XvKfe.jpg", alt="Meta's testimonial image") + p.testimonial-copy Through Free Code Camp, I built a robust and highly functional web app for a nonprofit. This led me to getting a fantastic job. + h3 - Meta Hirschl .spacer .row .col-xs-12.col-sm-8.col-sm-offset-2 a.btn.btn-lg.btn-primary.btn-primary-ghost.btn-block(href='/stories') Hear from more of our campers - .big-break + .spacer + .spacer + hr + .spacer h2 Skills you'll learn: - .text-center.negative-35 - .col-xs-12.col-sm-12.col-md-3 - .landing-skill-icon.ion-social-html5 - h2.black-text HTML5 - .col-xs-12.col-sm-12.col-md-3 - .landing-skill-icon.ion-social-css3 - h2.black-text CSS3 - .col-xs-12.col-sm-12.col-md-3 - .landing-skill-icon.ion-social-javascript - h2.black-text JavaScript - .col-xs-12.col-sm-12.col-md-3 - .landing-skill-icon.fa.fa-database.font-awesome-padding - h2.black-text Databases - .col-xs-12.col-sm-12.col-md-3 - .landing-skill-icon.ion-social-github - h2.black-text Git - .col-xs-12.col-sm-12.col-md-3 - .landing-skill-icon.ion-social-nodejs - h2.black-text Node.js - .col-xs-12.col-sm-12.col-md-3 - .landing-skill-icon.ion-social-angular - h2.black-text Angular.js - .col-xs-12.col-sm-12.col-md-3 - .landing-skill-icon.ion-ios-loop-strong - h2.black-text Agile - br - br - .big-break - h2 Why you should join our open source community right now: + .spacer + .row + .text-center.negative-35 + .col-xs-12.col-sm-12.col-md-3 + .landing-skill-icon.ion-social-html5 + h2.black-text HTML5 + .col-xs-12.col-sm-12.col-md-3 + .landing-skill-icon.ion-social-css3 + h2.black-text CSS3 + .col-xs-12.col-sm-12.col-md-3 + .landing-skill-icon.ion-social-javascript + h2.black-text JavaScript + .col-xs-12.col-sm-12.col-md-3 + .landing-skill-icon.fa.fa-database.font-awesome-padding + h2.black-text Databases + .col-xs-12.col-sm-12.col-md-3 + .landing-skill-icon.ion-social-github + h2.black-text Git + .col-xs-12.col-sm-12.col-md-3 + .landing-skill-icon.ion-social-nodejs + h2.black-text Node.js + .col-xs-12.col-sm-12.col-md-3 + .landing-skill-icon.ion-social-angular + h2.black-text Angular.js + .col-xs-12.col-sm-12.col-md-3 + .landing-skill-icon.ion-ios-loop-strong + h2.black-text Agile + .spacer + hr + .spacer + h2 Here's why you should join our open source community right now: h3.col-xs-offset-0.col-sm-offset-1 ul.text-left li.ion-code   You'll get help in real time from our community chat rooms.