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

add lots of fun animations

Browse Source
This commit is contained in:
Michael Q Larson
2014-10-24 18:51:32 -07:00
parent 60c4e24495
commit 121a9339e1
8 changed files with 157 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
public/css/styles.less
View File

@ -82,10 +82,16 @@ h1, h2, h3, h4, h5, h6, p, li {
margin-top: -10px; margin-top: -10px;
} }
/**/
.btn-cta { .btn-cta {
font-size: 40px; font-size: 40px;
} }
.non-profit-cta {
font-size: 24.9px;
}
.btn { .btn {
white-space: normal; white-space: normal;
-webkit-box-shadow: 2px 4px 1px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 2px 4px 1px rgba(0, 0, 0, 0.3);
@ -126,7 +132,7 @@ ul {
} }
.nav-height { .nav-height {
height: 45px; height: 50px;
} }
.landing-icon { .landing-icon {
@ -142,4 +148,31 @@ ul {
margin-top: -30px; margin-top: -30px;
margin-bottom: -30px; margin-bottom: -30px;
} }
/**/
.text-success {
color: #5cb85c;
}
.delay-1 {
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.delay-2 {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
.delay-3 {
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
.delay-5 {
-webkit-animation-delay: 5s;
animation-delay: 5s;
}
.fast-animation {
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
}

59
views/account/profile.jade
View File

@ -1,42 +1,41 @@
extends ../layout extends ../layout
block content block content
.page-header h1 Update your profile here:
h3 Profile Information .animated.flipInX
form.form-horizontal(action='/account/profile', method='POST')
input(type='hidden', name='_csrf', value=_csrf)
.form-group
label.col-sm-2.control-label(for='email') Email
.col-sm-4
input.form-control(type='email', name='email', id='email', value='#{user.email}')
.form-group
label.col-sm-2.control-label(for='name') Name
.col-sm-4
input.form-control(type='text', name='name', id='name', value='#{user.profile.name}')
.form-group
label.col-sm-2.control-label(for='location') Location
.col-sm-4
input.form-control(type='text', name='location', id='location', value='#{user.profile.location}')
.form-group
label.col-sm-2.control-label(for='website') Website
.col-sm-4
input.form-control(type='text', name='website', id='website', value='#{user.profile.website}')
.form-group
.col-sm-offset-2.col-sm-4
button.btn.btn.btn-primary(type='submit')
span.ion-edit
| Update my profile
form.form-horizontal(action='/account/profile', method='POST') h3 Danger Zone
input(type='hidden', name='_csrf', value=_csrf)
.form-group
label.col-sm-2.control-label(for='email') Email
.col-sm-4
input.form-control(type='email', name='email', id='email', value='#{user.email}')
.form-group
label.col-sm-2.control-label(for='name') Name
.col-sm-4
input.form-control(type='text', name='name', id='name', value='#{user.profile.name}')
.form-group
label.col-sm-2.control-label(for='location') Location
.col-sm-4
input.form-control(type='text', name='location', id='location', value='#{user.profile.location}')
.form-group
label.col-sm-2.control-label(for='website') Website
.col-sm-4
input.form-control(type='text', name='website', id='website', value='#{user.profile.website}')
.form-group
.col-sm-offset-2.col-sm-4
button.btn.btn.btn-primary(type='submit')
span.ion-edit
| Update Profile
p You can delete your account, but keep in mind this action is irreversible.
button.btn.btn-danger.confirm-deletion button.btn.btn-danger.confirm-deletion
span.ion-trash-b span.ion-trash-b
| Delete my account | I want to delete my account
script. script.
$('.confirm-deletion').on("click", function() { $('.confirm-deletion').on("click", function() {
$('#modal-dialog').modal('show'); $('#modal-dialog').modal('show');
}); });
#modal-dialog.modal.animated.bounceInLeft #modal-dialog.modal.animated.wobble
.modal-dialog .modal-dialog
.modal-content .modal-content
.modal-header .modal-header
@ -45,7 +44,7 @@ block content
.modal-body .modal-body
p Pro Tip: If you tweet feedback to  p Pro Tip: If you tweet feedback to 
a(href="https://twitter.com/intent/tweet?text=Hey%20@freecodecamp") @FreeCodeCamp a(href="https://twitter.com/intent/tweet?text=Hey%20@freecodecamp") @FreeCodeCamp
| , we will respond! | , we'll act quickly on it!
.modal-footer .modal-footer
a.btn.btn-success.btn-block(href='#', data-dismiss='modal', aria-hidden='true') a.btn.btn-success.btn-block(href='#', data-dismiss='modal', aria-hidden='true')
span.ion-happy span.ion-happy

18
views/challenges/partials/challenge.jade
View File

@ -1,7 +1,7 @@
.panel.panel-primary .panel.panel-primary
.panel-heading Challenge: #{name} .panel-heading Challenge: #{name}
.panel.panel-body .panel.panel-body
.responsive-container .responsive-container.animated.zoomIn.delay-1
iframe(src='//player.vimeo.com/video/#{video}', frameborder='0', webkitallowfullscreen='', mozallowfullscreen='', allowfullscreen='') iframe(src='//player.vimeo.com/video/#{video}', frameborder='0', webkitallowfullscreen='', mozallowfullscreen='', allowfullscreen='')
h3 Instructions: h3 Instructions:
for direction in directions for direction in directions
@ -17,4 +17,18 @@
ol ol
for challenge in challenges for challenge in challenges
li= challenge li= challenge
a.btn.btn-primary.btn-large.btn-block(href='/curriculum') I've completed this challenge .btn.btn-primary.btn-large.btn-block.completed-challenge I've completed this challenge
script.
$('.completed-challenge').on("click", function() {
$('#modal-dialog').modal('show');
});
#modal-dialog.modal
.modal-dialog.animated.zoomIn.fast-animation
.modal-content
.modal-header
a.close(href='#', data-dismiss='modal', aria-hidden='true') ×
.text-center
h1.animated.zoomInDown Nicely done!
.animated.zoomInUp.delay-1
span.landing-icon.ion-checkmark-circled.text-success
a.animated.fadeIn.delay-2.btn.btn-primary.btn-block(href='/curriculum', aria-hidden='true') Take me back to my curriculum

64
views/contact.jade
View File

@ -2,36 +2,34 @@ extends layout
block content block content
.jumbotron .jumbotron
h1 Hey non-profits, h1.animated.lightSpeedIn.text-center Let's do things faster and better with software!
h2 We want to help you get things done faster and better! .animated.fadeIn.delay-2.landing-panel-body
h3 Our students will help you build that donor tracking system, community message board, or whatever your organization needs, at no cost. In exchange, we ask only that you: h3 Our students will help you build that donor tracking system, community message board, or whatever your organization needs, at no cost.
h4 h3 In exchange, we ask only that you:
ul h4
li &#8226 meet with them regularly in person. If that's not possible, you can teleconference with them. This way, you can collaboratively establish and review milestones. ul
br li &#8226 meet with them regularly in person. If that's not possible, you can teleconference with them. This way, you can collaboratively establish and review milestones.
li &#8226 clearly communicate your goals for the project: what will this project solve, and for whom? li &#8226 clearly communicate your goals for the project: what will this project solve, and for whom?
br li &#8226 know that they will use cutting edge JavaScript frameworks to build your project. Please don't expect them to use Wordpress or other proprietary or old-school technologies.
li &#8226 know that they will use cutting edge JavaScript frameworks to build your project. Please don't expect them to use Wordpress or other proprietary or old-school technologies. li &#8226 don't lower your expectiations. Their goal is to produce work that's up to your standards.
br h3 If you're OK with all this, great! We can help you!
li &#8226 don't lower your expectiations. Their goal is to produce work that's up to your standards. h4 Fill this out and we'll get right back to you.
h3 If you're OK with all this, great! We can help you! form.form-horizontal(role='form', method='POST')
h4 Fill this out and we'll get right back to you. input(type='hidden', name='_csrf', value=_csrf)
form.form-horizontal(role='form', method='POST') .form-group
input(type='hidden', name='_csrf', value=_csrf) label(class='col-sm-2 control-label', for='name') Your name
.form-group .col-sm-8
label(class='col-sm-2 control-label', for='name') Your name input.form-control(type='text', name='name', id='name', autofocus=true)
.col-sm-8 .form-group
input.form-control(type='text', name='name', id='name', autofocus=true) label(class='col-sm-2 control-label', for='email') Your email
.form-group .col-sm-8
label(class='col-sm-2 control-label', for='email') Your email input.form-control(type='text', name='email', id='email')
.col-sm-8 .form-group
input.form-control(type='text', name='email', id='email') label(class='col-sm-2 control-label', for='message') Briefly describe what problem you need to solve, and for whom.
.form-group .col-sm-8
label(class='col-sm-2 control-label', for='message') Briefly describe what problem you need to solve, and for whom. textarea.form-control(type='text', name='message', id='message', rows='7')
.col-sm-8 .form-group
textarea.form-control(type='text', name='message', id='message', rows='7') .col-sm-offset-2.col-sm-8
.form-group button.btn.btn-primary(type='submit')
.col-sm-offset-2.col-sm-8 span.ion-paper-airplane
button.btn.btn-primary(type='submit') | Submit
span.ion-paper-airplane
| Submit

30
views/curriculum/curriculum.jade
View File

@ -1,18 +1,22 @@
extends ../layout extends ../layout
block content block content
.row .row
.col-sm-8.col-xs-12 .col-xs-12.col-sm-8
.jumbotron .panel.panel-primary
h1 Welcome to Free Code Camp! .panel-heading Your Curriculum
p Here are a few quick tips: .panel.panel-body
ol .responsive-container.animated.zoomIn.delay-1
li Work through our challenges in order. Many challenges are self-graded. If you want our feedback,  iframe(src='//player.vimeo.com/video/#{video}', frameborder='0', webkitallowfullscreen='', mozallowfullscreen='', allowfullscreen='')
a(href="https://twitter.com/intent/tweet?text=Hey%20@freecodecamp") tweet a link to your project to @freecodecamp. h3 Instructions:
li If you get stuck, try working through our recommended (free) courses. They're super helpful, but totally optional. You can pair program on them, too. p Here are a few quick tips:
li Challenge #2 will show you how to start a pair programming session. Pair program as much as possible. It's more fun, and you'll learn better that way. ol
p We're working to create more challenges. If you have an idea for a challenge you'd like us to implement,&nbsp li Work through our challenges in order. Many challenges are self-graded. If you want our feedback, 
a(href="https://twitter.com/intent/tweet?text=Hey%20@freecodecamp") tweet it to @freecodecamp. a(href="https://twitter.com/intent/tweet?text=Hey%20@freecodecamp") tweet a link to your project to @freecodecamp.
.col-sm-4.col-xs-12 li If you get stuck, try working through our recommended (free) courses. They're super helpful, but totally optional. You can pair program on them, too.
li Challenge #2 will show you how to start a pair programming session. Pair program as much as possible. It's more fun, and you'll learn better that way.
p We're working to create more challenges. If you have an idea for a challenge you'd like us to implement,&nbsp
a(href="https://twitter.com/intent/tweet?text=Hey%20@freecodecamp") tweet it to @freecodecamp.
.col-sm-4.col-xs-12.animated.flipInY.delay-2
include ./../partials/challenges include ./../partials/challenges
.col-sm-4.col-xs-12 .col-sm-4.col-xs-12.animated.flipInY.delay-2
include ./../partials/courses include ./../partials/courses

52
views/home.jade
View File

@ -2,31 +2,33 @@ extends layout
block content block content
.jumbotron .jumbotron
.text-center .text-center
h1 Become a Software Engineer .animated.pulse
h1 Become a Software Engineer
h2 Learn to code by collaborating on projects for non-profits h2 Learn to code by collaborating on projects for non-profits
.row .delay-2.animated.fadeIn
.col-xs-12.col-sm-12.col-md-4 .row
h3 Technical Mastery .col-xs-12.col-sm-12.col-md-4
.negative-10 h3 Technical Mastery
span.landing-icon.ion-settings.text-primary .negative-10
.negative-10 span.landing-icon.ion-settings.text-primary
p You'll learn to code by pair programming (where two people code together on one computer) through our coding challenges. .negative-10
.col-xs-12.col-sm-12.col-md-4 p You'll learn to code by pair programming (where two people code together on one computer) through our coding challenges.
h3 Unique Portfolio Projects .col-xs-12.col-sm-12.col-md-4
.negative-10 h3 Unique Portfolio Projects
span.landing-icon.ion-social-github.text-primary .negative-10
.negative-10 span.landing-icon.ion-social-github.text-primary
p You'll use your new coding skills to build software solutions for non-profits. Your portfolio projects will have grateful users. .negative-10
.col-xs-12.col-sm-12.col-md-4 p You'll use your new coding skills to build software solutions for non-profits. Your portfolio projects will have grateful users.
h3 Glowing References .col-xs-12.col-sm-12.col-md-4
.negative-10 h3 Glowing References
span.landing-icon.ion-thumbsup.text-primary .negative-10
.negative-10 span.landing-icon.ion-thumbsup.text-primary
p You'll gain the respect of your peers and the non-profits you help. These types of connections are critical to your job search. .negative-10
a.btn.btn-cta.btn-primary(href="/login") Sign in now to get started (it's free) p You'll gain the respect of your peers and the non-profits you help. These types of connections are critical to your job search.
br a.btn.btn-cta.btn-primary(href="/login") Sign in now to start coding (it's free)
br br
a.btn.btn-primary(href="/contact") I'm with a non-profit and want free help from a Software Engineer br
a.btn.non-profit-cta.btn-success(href="/contact") I'm with a non-profit and want free help coding something
br br
.panel.panel-primary .panel.panel-primary
.panel-heading.landing-panel-heading Frequently Asked Questions .panel-heading.landing-panel-heading Frequently Asked Questions
@ -101,4 +103,4 @@ block content
p Unlike most bootcamps, anyone can study at Free Code Camp. We're not going to tell you that you can't become a software engineer. We believe the only person who should be able to tell you that is you. If you perservere, and keep working through our challenges and non-profits' projects, you will become an employable software engineer. p Unlike most bootcamps, anyone can study at Free Code Camp. We're not going to tell you that you can't become a software engineer. We believe the only person who should be able to tell you that is you. If you perservere, and keep working through our challenges and non-profits' projects, you will become an employable software engineer.
br br
.text-center .text-center
a.btn.btn-cta.btn-primary(href="/login") Sign in now to get started (it's free) a.btn.btn-cta.btn-primary(href="/login") Sign in now to start coding (it's free)

2
views/partials/challenges.jade
View File

@ -1,4 +1,4 @@
.panel.panel-primary .panel.panel-primary.animated.flipInY.delay-2
.panel-heading Challenges .panel-heading Challenges
.panel-body .panel-body
ol ol

2
views/partials/courses.jade
View File

@ -1,4 +1,4 @@
.panel.panel-primary .panel.panel-primary.animated.flipInY.delay-2
.panel-heading Recommended (Free) Courses .panel-heading Recommended (Free) Courses
.panel-body .panel-body
ol ol