diff --git a/public/css/styles.less b/public/css/styles.less index bb2ada36c7..27b17317c7 100644 --- a/public/css/styles.less +++ b/public/css/styles.less @@ -82,10 +82,16 @@ h1, h2, h3, h4, h5, h6, p, li { margin-top: -10px; } +/**/ + .btn-cta { font-size: 40px; } +.non-profit-cta { + font-size: 24.9px; +} + .btn { white-space: normal; -webkit-box-shadow: 2px 4px 1px rgba(0, 0, 0, 0.3); @@ -126,7 +132,7 @@ ul { } .nav-height { - height: 45px; + height: 50px; } .landing-icon { @@ -142,4 +148,31 @@ ul { margin-top: -30px; margin-bottom: -30px; } -/**/ \ No newline at end of file + +.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; +} \ No newline at end of file diff --git a/views/account/profile.jade b/views/account/profile.jade index c41469f93f..28c4382c09 100644 --- a/views/account/profile.jade +++ b/views/account/profile.jade @@ -1,42 +1,41 @@ extends ../layout block content - .page-header - h3 Profile Information + h1 Update your profile here: + .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') - 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. + h3 Danger Zone button.btn.btn-danger.confirm-deletion span.ion-trash-b - | Delete my account + | I want to delete my account script. $('.confirm-deletion').on("click", function() { $('#modal-dialog').modal('show'); }); - #modal-dialog.modal.animated.bounceInLeft + #modal-dialog.modal.animated.wobble .modal-dialog .modal-content .modal-header @@ -45,7 +44,7 @@ block content .modal-body p Pro Tip: If you tweet feedback to  a(href="https://twitter.com/intent/tweet?text=Hey%20@freecodecamp") @FreeCodeCamp - | , we will respond! + | , we'll act quickly on it! .modal-footer a.btn.btn-success.btn-block(href='#', data-dismiss='modal', aria-hidden='true') span.ion-happy diff --git a/views/challenges/partials/challenge.jade b/views/challenges/partials/challenge.jade index f92afb7a3e..626c019573 100644 --- a/views/challenges/partials/challenge.jade +++ b/views/challenges/partials/challenge.jade @@ -1,7 +1,7 @@ .panel.panel-primary .panel-heading Challenge: #{name} .panel.panel-body - .responsive-container + .responsive-container.animated.zoomIn.delay-1 iframe(src='//player.vimeo.com/video/#{video}', frameborder='0', webkitallowfullscreen='', mozallowfullscreen='', allowfullscreen='') h3 Instructions: for direction in directions @@ -17,4 +17,18 @@ ol for challenge in challenges li= challenge - a.btn.btn-primary.btn-large.btn-block(href='/curriculum') I've completed this challenge \ No newline at end of file + .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 \ No newline at end of file diff --git a/views/contact.jade b/views/contact.jade index f00becded8..2b9e076ca4 100644 --- a/views/contact.jade +++ b/views/contact.jade @@ -2,36 +2,34 @@ extends layout block content .jumbotron - h1 Hey non-profits, - h2 We want to help you get things done faster and better! - 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: - h4 - ul - li • 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. - br - li • clearly communicate your goals for the project: what will this project solve, and for whom? - br - li • 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. - br - li • don't lower your expectiations. Their goal is to produce work that's up to your standards. - h3 If you're OK with all this, great! We can help you! - h4 Fill this out and we'll get right back to you. - form.form-horizontal(role='form', method='POST') - input(type='hidden', name='_csrf', value=_csrf) - .form-group - label(class='col-sm-2 control-label', for='name') Your name - .col-sm-8 - input.form-control(type='text', name='name', id='name', autofocus=true) - .form-group - label(class='col-sm-2 control-label', for='email') Your email - .col-sm-8 - input.form-control(type='text', name='email', id='email') - .form-group - label(class='col-sm-2 control-label', for='message') Briefly describe what problem you need to solve, and for whom. - .col-sm-8 - textarea.form-control(type='text', name='message', id='message', rows='7') - .form-group - .col-sm-offset-2.col-sm-8 - button.btn.btn-primary(type='submit') - span.ion-paper-airplane - | Submit + h1.animated.lightSpeedIn.text-center Let's do things faster and better with software! + .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. + h3 In exchange, we ask only that you: + h4 + ul + li • 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 • clearly communicate your goals for the project: what will this project solve, and for whom? + li • 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 • don't lower your expectiations. Their goal is to produce work that's up to your standards. + h3 If you're OK with all this, great! We can help you! + h4 Fill this out and we'll get right back to you. + form.form-horizontal(role='form', method='POST') + input(type='hidden', name='_csrf', value=_csrf) + .form-group + label(class='col-sm-2 control-label', for='name') Your name + .col-sm-8 + input.form-control(type='text', name='name', id='name', autofocus=true) + .form-group + label(class='col-sm-2 control-label', for='email') Your email + .col-sm-8 + input.form-control(type='text', name='email', id='email') + .form-group + label(class='col-sm-2 control-label', for='message') Briefly describe what problem you need to solve, and for whom. + .col-sm-8 + textarea.form-control(type='text', name='message', id='message', rows='7') + .form-group + .col-sm-offset-2.col-sm-8 + button.btn.btn-primary(type='submit') + span.ion-paper-airplane + | Submit diff --git a/views/curriculum/curriculum.jade b/views/curriculum/curriculum.jade index e113f8934e..e5ee9b65dc 100644 --- a/views/curriculum/curriculum.jade +++ b/views/curriculum/curriculum.jade @@ -1,18 +1,22 @@ extends ../layout block content .row - .col-sm-8.col-xs-12 - .jumbotron - h1 Welcome to Free Code Camp! - p Here are a few quick tips: - ol - 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 a link to your project to @freecodecamp. - 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,  - a(href="https://twitter.com/intent/tweet?text=Hey%20@freecodecamp") tweet it to @freecodecamp. - .col-sm-4.col-xs-12 + .col-xs-12.col-sm-8 + .panel.panel-primary + .panel-heading Your Curriculum + .panel.panel-body + .responsive-container.animated.zoomIn.delay-1 + iframe(src='//player.vimeo.com/video/#{video}', frameborder='0', webkitallowfullscreen='', mozallowfullscreen='', allowfullscreen='') + h3 Instructions: + p Here are a few quick tips: + ol + 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 a link to your project to @freecodecamp. + 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,  + 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 - .col-sm-4.col-xs-12 + .col-sm-4.col-xs-12.animated.flipInY.delay-2 include ./../partials/courses \ No newline at end of file diff --git a/views/home.jade b/views/home.jade index d80c93bcac..66ee700b04 100644 --- a/views/home.jade +++ b/views/home.jade @@ -2,31 +2,33 @@ extends layout block content .jumbotron .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 - .row - .col-xs-12.col-sm-12.col-md-4 - h3 Technical Mastery - .negative-10 - span.landing-icon.ion-settings.text-primary - .negative-10 - p You'll learn to code by pair programming (where two people code together on one computer) through our coding challenges. - .col-xs-12.col-sm-12.col-md-4 - h3 Unique Portfolio Projects - .negative-10 - span.landing-icon.ion-social-github.text-primary - .negative-10 - p You'll use your new coding skills to build software solutions for non-profits. Your portfolio projects will have grateful users. - .col-xs-12.col-sm-12.col-md-4 - h3 Glowing References - .negative-10 - span.landing-icon.ion-thumbsup.text-primary - .negative-10 - 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. - a.btn.btn-cta.btn-primary(href="/login") Sign in now to get started (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 + .delay-2.animated.fadeIn + .row + .col-xs-12.col-sm-12.col-md-4 + h3 Technical Mastery + .negative-10 + span.landing-icon.ion-settings.text-primary + .negative-10 + p You'll learn to code by pair programming (where two people code together on one computer) through our coding challenges. + .col-xs-12.col-sm-12.col-md-4 + h3 Unique Portfolio Projects + .negative-10 + span.landing-icon.ion-social-github.text-primary + .negative-10 + p You'll use your new coding skills to build software solutions for non-profits. Your portfolio projects will have grateful users. + .col-xs-12.col-sm-12.col-md-4 + h3 Glowing References + .negative-10 + span.landing-icon.ion-thumbsup.text-primary + .negative-10 + 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. + a.btn.btn-cta.btn-primary(href="/login") Sign in now to start coding (it's free) + br + br + a.btn.non-profit-cta.btn-success(href="/contact") I'm with a non-profit and want free help coding something br .panel.panel-primary .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. br .text-center - a.btn.btn-cta.btn-primary(href="/login") Sign in now to get started (it's free) \ No newline at end of file + a.btn.btn-cta.btn-primary(href="/login") Sign in now to start coding (it's free) \ No newline at end of file diff --git a/views/partials/challenges.jade b/views/partials/challenges.jade index 16228e33d1..9c005e4207 100644 --- a/views/partials/challenges.jade +++ b/views/partials/challenges.jade @@ -1,4 +1,4 @@ -.panel.panel-primary +.panel.panel-primary.animated.flipInY.delay-2 .panel-heading Challenges .panel-body ol diff --git a/views/partials/courses.jade b/views/partials/courses.jade index a51699e1e9..ef6d321de3 100644 --- a/views/partials/courses.jade +++ b/views/partials/courses.jade @@ -1,4 +1,4 @@ -.panel.panel-primary +.panel.panel-primary.animated.flipInY.delay-2 .panel-heading Recommended (Free) Courses .panel-body ol