update simplified landing page

This commit is contained in:
Michael Q Larson
2015-01-15 19:04:24 -08:00
parent 8d9c0c0605
commit a95da3307c
2 changed files with 39 additions and 40 deletions

View File

@ -450,7 +450,7 @@ thead {
.landing-skill-icon { .landing-skill-icon {
color: #215f1e; color: #215f1e;
font-size: 40px; font-size: 100px;
} }
.black-text { .black-text {
@ -459,6 +459,11 @@ thead {
font-size: 40px; font-size: 40px;
} }
.font-awesome-padding {
margin-top: 25px;
margin-bottom: 20px;
}
.background-svg { .background-svg {
width: 220px; width: 220px;
height: 220px; height: 220px;
@ -467,6 +472,7 @@ thead {
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
} }
.testimonial-image { .testimonial-image {
border-radius: 5px; border-radius: 5px;
height: 200px; height: 200px;
@ -476,7 +482,12 @@ thead {
.testimonial-copy { .testimonial-copy {
font-size: 20px; font-size: 20px;
text-align: center; 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 //uncomment this to see the dimensions of all elements outlined in red

View File

@ -37,66 +37,54 @@ block content
h2 Campers you'll hang out with h2 Campers you'll hang out with
.row .row
.col-xs-12.col-sm-12.col-md-4 .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") img.img-responsive.testimonial-image.img-center(src="https://s3.amazonaws.com/freecodecamp/testimonial-jen.jpg", alt="@jenthebest's testimonial image")
.testimonial-copy My boss was impressed by the troubleshooting I learned through FreeCodeCamp and I just got a raise! Sweet! .testimonial-copy Getting back on track with Free Code Camp and committing to a new career in 2015!
h3 - @AlecMHansen 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-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 .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") 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! .testimonial-copy Just built my company's website with skills I've learned from Free Code Camp!
h3 - @TateThurston 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 .big-break
h2 Skills you'll learn h2 Skills you'll learn
.row .text-center
.col-sm-6.col-xs-3.text-right .col-sm-3.col-xs-12
.landing-skill-icon.ion-social-html5 .landing-skill-icon.ion-social-html5
.col-sm-6.col-xs-9.text-left
.black-text HTML5 .black-text HTML5
.row .col-sm-3.col-xs-12
.col-sm-6.col-xs-3.text-right
.landing-skill-icon.ion-social-css3 .landing-skill-icon.ion-social-css3
.col-sm-6.col-xs-9.text-left
.black-text CSS3 .black-text CSS3
.row .col-sm-3.col-xs-12
.col-sm-6.col-xs-3.text-right
.landing-skill-icon.ion-social-javascript .landing-skill-icon.ion-social-javascript
.col-sm-6.col-xs-9.text-left
.black-text JavaScript .black-text JavaScript
.row .col-sm-3.col-xs-12
.col-sm-6.col-xs-3.text-right .landing-skill-icon.fa.fa-database.font-awesome-padding
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 .black-text Databases
.row .col-sm-3.col-xs-12
.col-sm-6.col-xs-3.text-right
.landing-skill-icon.ion-social-chrome .landing-skill-icon.ion-social-chrome
.col-sm-6.col-xs-9.text-left
.black-text DevTools .black-text DevTools
.row .col-sm-3.col-xs-12
.col-sm-6.col-xs-3.text-right
.landing-skill-icon.ion-social-nodejs .landing-skill-icon.ion-social-nodejs
.col-sm-6.col-xs-9.text-left
.black-text Node.js .black-text Node.js
.row .col-sm-3.col-xs-12
.col-sm-6.col-xs-3.text-right
.landing-skill-icon.ion-social-angular .landing-skill-icon.ion-social-angular
.col-sm-6.col-xs-9.text-left
.black-text Angular.js .black-text Angular.js
.row .col-sm-3.col-xs-12
.col-sm-6.col-xs-3.text-right
.landing-skill-icon.ion-ios-loop-strong .landing-skill-icon.ion-ios-loop-strong
.col-sm-6.col-xs-9.text-left
.black-text Agile .black-text Agile
.big-break .big-break
h2 Fast Facts about our Community h2 Skills you'll learn
h3.col-sm-offset-1.col-sm-offset-0 .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 ul.text-left
li.ion-code   100% free and open source li.ion-code   100% free and open source
li.ion-code   1,000's of professionals actively learning to code li.ion-code   Thousands of professionals actively learning to code
li.ion-code   10's of nonprofit partners li.ion-code   Dozens of nonprofit partners
li.ion-code   1 goal: to boost your career with code 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) a.btn.btn-cta.signup-btn(href="/login") Start learning to code (it's free)