From 8d9c0c0605697e6d067bdb59d80a61b9d84bd67d Mon Sep 17 00:00:00 2001 From: Michael Q Larson Date: Thu, 15 Jan 2015 17:21:12 -0800 Subject: [PATCH 1/3] improve landing page --- public/css/main.less | 22 ++++++++++++++ views/home.jade | 71 ++++++++++++++++++++++++++++++++++++++++---- 2 files changed, 88 insertions(+), 5 deletions(-) diff --git a/public/css/main.less b/public/css/main.less index a6e05865cb..587472c3d0 100644 --- a/public/css/main.less +++ b/public/css/main.less @@ -448,6 +448,17 @@ thead { transform: translateY(-50%); } +.landing-skill-icon { + color: #215f1e; + font-size: 40px; +} + +.black-text { + color: #333; + font-weight: 400; + font-size: 40px; +} + .background-svg { width: 220px; height: 220px; @@ -456,6 +467,17 @@ thead { background-repeat: no-repeat; background-position: center; } +.testimonial-image { + border-radius: 5px; + height: 200px; + width: 200px; +} + +.testimonial-copy { + font-size: 20px; + text-align: center; + height: 100px; +} //uncomment this to see the dimensions of all elements outlined in red //* { diff --git a/views/home.jade b/views/home.jade index 31598b476e..52d3dab0f6 100644 --- a/views/home.jade +++ b/views/home.jade @@ -1,8 +1,5 @@ extends layout block content - .hidden-xs - a(href='https://github.com/freecodecamp/freecodecamp') - img(style='position: absolute; top: 40; right: 0; border: 0; margin-top: -30px;', src='https://camo.githubusercontent.com/e7bbb0521b397edbd5fe43e7f760759336b5e05f/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677265656e5f3030373230302e706e67', alt='Fork me on GitHub', data-canonical-src='https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png') .jumbotron .text-center h1.hug-top Code with Us @@ -36,6 +33,70 @@ block content br br a.btn.nonprofit-cta.btn-success(href="/nonprofits") I'm with a nonprofit and want help coding something + .big-break + h2 Campers you'll hang out with + .row + .col-xs-12.col-sm-12.col-md-4 + img.img-responsive.testimonial-image.img-center(src="https://s3.amazonaws.com/freecodecamp/testimonial-alec.jpg", alt="@AlecMHansen's testimonial image") + .testimonial-copy My boss was impressed by the troubleshooting I learned through FreeCodeCamp and I just got a raise! Sweet! + h3 - @AlecMHansen + .col-xs-12.col-sm-12.col-md-4 + img.img-responsive.testimonial-image.img-center(src="https://s3.amazonaws.com/freecodecamp/testimonial-cynthia.jpg", alt="@cynthialanel's testimonial image") + .testimonial-copy I'm currently working through Free Code Camp to improve my JavaScript. The community is very welcoming! + h3 - @cynthialanel + .col-xs-12.col-sm-12.col-md-4 + img.img-responsive.testimonial-image.img-center(src="https://s3.amazonaws.com/freecodecamp/testimonial-tate.jpg", alt="@TateThurston's testimonial image") + .testimonial-copy Just built my company's website with skills I've learned from Free Code Camp! + h3 - @TateThurston + .big-break + h2 Skills you'll learn + .row + .col-sm-6.col-xs-3.text-right + .landing-skill-icon.ion-social-html5 + .col-sm-6.col-xs-9.text-left + .black-text HTML5 + .row + .col-sm-6.col-xs-3.text-right + .landing-skill-icon.ion-social-css3 + .col-sm-6.col-xs-9.text-left + .black-text CSS3 + .row + .col-sm-6.col-xs-3.text-right + .landing-skill-icon.ion-social-javascript + .col-sm-6.col-xs-9.text-left + .black-text JavaScript + .row + .col-sm-6.col-xs-3.text-right + i.landing-skill-icon.fa.fa-database(style="margin-top: 10px; margin-left: 10px;") + .col-sm-6.col-xs-9.text-left + .black-text Databases + .row + .col-sm-6.col-xs-3.text-right + .landing-skill-icon.ion-social-chrome + .col-sm-6.col-xs-9.text-left + .black-text DevTools + .row + .col-sm-6.col-xs-3.text-right + .landing-skill-icon.ion-social-nodejs + .col-sm-6.col-xs-9.text-left + .black-text Node.js + .row + .col-sm-6.col-xs-3.text-right + .landing-skill-icon.ion-social-angular + .col-sm-6.col-xs-9.text-left + .black-text Angular.js + .row + .col-sm-6.col-xs-3.text-right + .landing-skill-icon.ion-ios-loop-strong + .col-sm-6.col-xs-9.text-left + .black-text Agile + .big-break + h2 Fast Facts about our Community + h3.col-sm-offset-1.col-sm-offset-0 + ul.text-left + li.ion-code   100% free and open source + li.ion-code   1,000's of professionals actively learning to code + li.ion-code   10's of nonprofit partners + li.ion-code   1 goal: to boost your career with code - include partials/about - include partials/faq \ No newline at end of file + a.btn.btn-cta.signup-btn(href="/login") Start learning to code (it's free) \ No newline at end of file From a95da3307c608a35f03fc08438fe816836f85afc Mon Sep 17 00:00:00 2001 From: Michael Q Larson Date: Thu, 15 Jan 2015 19:04:24 -0800 Subject: [PATCH 2/3] update simplified landing page --- public/css/main.less | 15 +++++++++-- views/home.jade | 64 ++++++++++++++++++-------------------------- 2 files changed, 39 insertions(+), 40 deletions(-) diff --git a/public/css/main.less b/public/css/main.less index 587472c3d0..46670b6e88 100644 --- a/public/css/main.less +++ b/public/css/main.less @@ -450,7 +450,7 @@ thead { .landing-skill-icon { color: #215f1e; - font-size: 40px; + font-size: 100px; } .black-text { @@ -459,6 +459,11 @@ thead { font-size: 40px; } +.font-awesome-padding { + margin-top: 25px; + margin-bottom: 20px; +} + .background-svg { width: 220px; height: 220px; @@ -467,6 +472,7 @@ thead { background-repeat: no-repeat; background-position: center; } + .testimonial-image { border-radius: 5px; height: 200px; @@ -476,7 +482,12 @@ thead { .testimonial-copy { font-size: 20px; text-align: center; - height: 100px; + @media (min-width: 991px) and (max-width: 1199px) { + height: 120px; + } + @media (min-width: 1200px) { + height: 90px; + } } //uncomment this to see the dimensions of all elements outlined in red diff --git a/views/home.jade b/views/home.jade index 52d3dab0f6..1fe719b6d4 100644 --- a/views/home.jade +++ b/views/home.jade @@ -37,66 +37,54 @@ block content h2 Campers you'll hang out with .row .col-xs-12.col-sm-12.col-md-4 - img.img-responsive.testimonial-image.img-center(src="https://s3.amazonaws.com/freecodecamp/testimonial-alec.jpg", alt="@AlecMHansen's testimonial image") - .testimonial-copy My boss was impressed by the troubleshooting I learned through FreeCodeCamp and I just got a raise! Sweet! - h3 - @AlecMHansen - .col-xs-12.col-sm-12.col-md-4 - img.img-responsive.testimonial-image.img-center(src="https://s3.amazonaws.com/freecodecamp/testimonial-cynthia.jpg", alt="@cynthialanel's testimonial image") - .testimonial-copy I'm currently working through Free Code Camp to improve my JavaScript. The community is very welcoming! - h3 - @cynthialanel + img.img-responsive.testimonial-image.img-center(src="https://s3.amazonaws.com/freecodecamp/testimonial-jen.jpg", alt="@jenthebest's testimonial image") + .testimonial-copy Getting back on track with Free Code Camp and committing to a new career in 2015! + h3 - @jenthebest .col-xs-12.col-sm-12.col-md-4 img.img-responsive.testimonial-image.img-center(src="https://s3.amazonaws.com/freecodecamp/testimonial-tate.jpg", alt="@TateThurston's testimonial image") .testimonial-copy Just built my company's website with skills I've learned from Free Code Camp! h3 - @TateThurston + .col-xs-12.col-sm-12.col-md-4 + img.img-responsive.testimonial-image.img-center(src="https://s3.amazonaws.com/freecodecamp/testimonial-cynthia.jpg", alt="@cynthialanel's testimonial image") + .testimonial-copy I'm currently working through Free Code Camp to improve my JavaScript. The community is very welcoming! + h3 - @cynthialanel .big-break h2 Skills you'll learn - .row - .col-sm-6.col-xs-3.text-right + .text-center + .col-sm-3.col-xs-12 .landing-skill-icon.ion-social-html5 - .col-sm-6.col-xs-9.text-left .black-text HTML5 - .row - .col-sm-6.col-xs-3.text-right + .col-sm-3.col-xs-12 .landing-skill-icon.ion-social-css3 - .col-sm-6.col-xs-9.text-left .black-text CSS3 - .row - .col-sm-6.col-xs-3.text-right + .col-sm-3.col-xs-12 .landing-skill-icon.ion-social-javascript - .col-sm-6.col-xs-9.text-left .black-text JavaScript - .row - .col-sm-6.col-xs-3.text-right - i.landing-skill-icon.fa.fa-database(style="margin-top: 10px; margin-left: 10px;") - .col-sm-6.col-xs-9.text-left + .col-sm-3.col-xs-12 + .landing-skill-icon.fa.fa-database.font-awesome-padding .black-text Databases - .row - .col-sm-6.col-xs-3.text-right + .col-sm-3.col-xs-12 .landing-skill-icon.ion-social-chrome - .col-sm-6.col-xs-9.text-left .black-text DevTools - .row - .col-sm-6.col-xs-3.text-right + .col-sm-3.col-xs-12 .landing-skill-icon.ion-social-nodejs - .col-sm-6.col-xs-9.text-left .black-text Node.js - .row - .col-sm-6.col-xs-3.text-right + .col-sm-3.col-xs-12 .landing-skill-icon.ion-social-angular - .col-sm-6.col-xs-9.text-left .black-text Angular.js - .row - .col-sm-6.col-xs-3.text-right + .col-sm-3.col-xs-12 .landing-skill-icon.ion-ios-loop-strong - .col-sm-6.col-xs-9.text-left .black-text Agile .big-break - h2 Fast Facts about our Community - h3.col-sm-offset-1.col-sm-offset-0 + h2 Skills you'll learn + .big-break + h2   + h2 Fast facts about our community + h3.col-xs-offset-0.col-sm-offset-1.col-md-offset-2 ul.text-left li.ion-code   100% free and open source - li.ion-code   1,000's of professionals actively learning to code - li.ion-code   10's of nonprofit partners - li.ion-code   1 goal: to boost your career with code - + li.ion-code   Thousands of professionals actively learning to code + li.ion-code   Dozens of nonprofit partners + li.ion-code   One goal: to boost your career with code + .big-break a.btn.btn-cta.signup-btn(href="/login") Start learning to code (it's free) \ No newline at end of file From 2493f159ddc998da98fa981ddf48fd4d454a1f6f Mon Sep 17 00:00:00 2001 From: Michael Q Larson Date: Thu, 15 Jan 2015 21:39:01 -0800 Subject: [PATCH 3/3] minor improvements to landing page --- public/css/main.less | 4 ++-- views/home.jade | 32 +++++++++++++++----------------- 2 files changed, 17 insertions(+), 19 deletions(-) diff --git a/public/css/main.less b/public/css/main.less index 46670b6e88..25af249ab9 100644 --- a/public/css/main.less +++ b/public/css/main.less @@ -450,7 +450,7 @@ thead { .landing-skill-icon { color: #215f1e; - font-size: 100px; + font-size: 150px; } .black-text { @@ -460,7 +460,7 @@ thead { } .font-awesome-padding { - margin-top: 25px; + margin-top: 45px; margin-bottom: 20px; } diff --git a/views/home.jade b/views/home.jade index 1fe719b6d4..4cc9a9d8d9 100644 --- a/views/home.jade +++ b/views/home.jade @@ -34,7 +34,7 @@ block content br a.btn.nonprofit-cta.btn-success(href="/nonprofits") I'm with a nonprofit and want help coding something .big-break - h2 Campers you'll hang out with + h2 Campers you'll hang out with: .row .col-xs-12.col-sm-12.col-md-4 img.img-responsive.testimonial-image.img-center(src="https://s3.amazonaws.com/freecodecamp/testimonial-jen.jpg", alt="@jenthebest's testimonial image") @@ -49,42 +49,40 @@ block content .testimonial-copy I'm currently working through Free Code Camp to improve my JavaScript. The community is very welcoming! h3 - @cynthialanel .big-break - h2 Skills you'll learn + h2 Skills you'll learn: .text-center - .col-sm-3.col-xs-12 + .col-xs-12.col-sm-12.col-md-3 .landing-skill-icon.ion-social-html5 .black-text HTML5 - .col-sm-3.col-xs-12 + .col-xs-12.col-sm-12.col-md-3 .landing-skill-icon.ion-social-css3 .black-text CSS3 - .col-sm-3.col-xs-12 + .col-xs-12.col-sm-12.col-md-3 .landing-skill-icon.ion-social-javascript .black-text JavaScript - .col-sm-3.col-xs-12 + .col-xs-12.col-sm-12.col-md-3 .landing-skill-icon.fa.fa-database.font-awesome-padding .black-text Databases - .col-sm-3.col-xs-12 + .col-xs-12.col-sm-12.col-md-3 .landing-skill-icon.ion-social-chrome .black-text DevTools - .col-sm-3.col-xs-12 + .col-xs-12.col-sm-12.col-md-3 .landing-skill-icon.ion-social-nodejs .black-text Node.js - .col-sm-3.col-xs-12 + .col-xs-12.col-sm-12.col-md-3 .landing-skill-icon.ion-social-angular .black-text Angular.js - .col-sm-3.col-xs-12 + .col-xs-12.col-sm-12.col-md-3 .landing-skill-icon.ion-ios-loop-strong .black-text Agile .big-break - h2 Skills you'll learn - .big-break h2   - h2 Fast facts about our community + h2 Fast facts about our community: h3.col-xs-offset-0.col-sm-offset-1.col-md-offset-2 ul.text-left - li.ion-code   100% free and open source - li.ion-code   Thousands of professionals actively learning to code - li.ion-code   Dozens of nonprofit partners - li.ion-code   One goal: to boost your career with code + li.ion-code   We're 100% free and open source + li.ion-code   We're thousands of professionals who are learning to code + li.ion-code   We're building projects for dozens of nonprofits + li.ion-code   We share one goal: to boost our careers with code .big-break a.btn.btn-cta.signup-btn(href="/login") Start learning to code (it's free) \ No newline at end of file