make pages look better by putting them into panels

This commit is contained in:
Michael Q Larson
2014-11-07 14:46:17 -08:00
parent 9739f9b43d
commit f6229ef94b
5 changed files with 33 additions and 23 deletions

View File

@ -7,6 +7,7 @@
// Scaffolding
// -------------------------
html {
position: relative;
min-height: 100%;
@ -157,7 +158,7 @@ ul {
}
.text-success {
color: #5cb85c;
color: @brand-success;
}
.delay-half {
@ -238,4 +239,8 @@ ul {
.dropdown-toggle {
margin-top: -5px;
}
.btn-social {
width: 250px;
}

View File

@ -1,14 +1,17 @@
extends ../layout
block content
.page-header
h3 Sign in to Free Code Camp with any of these social network accounts:
a.btn.btn-block.btn-linkedin.btn-social(href='/auth/linkedin')
i.fa.fa-linkedin
| Sign in with LinkedIn
a.btn.btn-block.btn-twitter.btn-social(href='/auth/twitter')
i.fa.fa-twitter
| Sign in with Twitter
// a.btn.btn-block.btn-facebook.btn-social(href='/auth/facebook')
// i.fa.fa-facebook
// | Sign in with Facebook
.panel
.text-center
h3 Sign in to Free Code Camp with any of these social network accounts:
a.btn.btn-lg.btn-linkedin.btn-social(href='/auth/linkedin')
i.fa.fa-linkedin
| Sign in with LinkedIn
.ten-pixel-break
a.btn.btn-lg.btn-twitter.btn-social(href='/auth/twitter')
i.fa.fa-twitter
| Sign in with Twitter
br
br
// a.btn.btn-block.btn-facebook.btn-social(href='/auth/facebook')
// i.fa.fa-facebook
// | Sign in with Facebook

View File

@ -9,7 +9,7 @@ block content
h3.text-center
span.ion-android-clock
span Takes about #{time}
.btn.btn-success.btn-large.btn-block.start-challenge Start the challenge
.btn.btn-primary.btn-large.btn-block.start-challenge Start the challenge
.challenge-content.hidden-element
.responsive-container
iframe(src='//player.vimeo.com/video/#{video}', frameborder='0', webkitallowfullscreen='', mozallowfullscreen='', allowfullscreen='')
@ -18,9 +18,9 @@ block content
ol
for step in steps
li!= step
.btn.btn-success.btn-large.btn-block.completed-challenge I've completed this challenge
.btn.btn-primary.btn-large.btn-block.completed-challenge I've completed this challenge
.ten-pixel-break
.btn.btn-primary.btn-large.btn-block.skip-challenge I want to skip this challenge for now
.btn.btn-success.btn-large.btn-block.skip-challenge I want to skip this challenge for now
.panel-footer.text-center
span Need a break?  
a(href="http://blog.freecodecamp.com", target="_blank") Check out our blog
@ -35,8 +35,8 @@ block content
.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.next-button(name='_csrf', value=_csrf, aria-hidden='true') Take me to my next challenge
span.landing-icon.ion-checkmark-circled.text-primary
a.animated.fadeIn.delay-2.btn.btn-lg.btn-primary.btn-block.next-button(name='_csrf', value=_csrf, aria-hidden='true') Take me to my next challenge
#skip-dialog.modal
.modal-dialog.animated.zoomIn.fast-animation
.modal-content
@ -46,7 +46,7 @@ block content
h1.animated.zoomInDown No problem.
h2.animated.zoomInDown You can retry this challenge any time.
.animated.zoomInUp.delay-1
span.landing-icon.ion-skip-forward.text-primary
a.animated.fadeIn.delay-2.btn.btn-primary.btn-block.next-button(aria-hidden='true') Take me to my next challenge
span.landing-icon.ion-skip-forward.text-success
a.animated.fadeIn.delay-2.btn.btn-lg.btn-primary.btn-block.next-button(aria-hidden='true') Take me to my next challenge
.col-sm-12.col-md-4.col-xs-12
include ../partials/challenges

View File

@ -100,6 +100,7 @@ block content
h2 Does Free Code Camp have an application process?
ul
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 nonprofits' projects, you will become an employable software engineer.
br
.text-center
a.btn.btn-cta.btn-primary(href="/login") Sign in now to start coding (it's free)
br
.text-center
a.btn.btn-cta.btn-primary(href="/login") Sign in now to start coding (it's free)
br

View File

@ -2,6 +2,7 @@ doctype html
html
head
script(src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js")
link(href='http://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext', rel='stylesheet', type='text/css')
include partials/meta
title #{title} | Free Code Camp