diff --git a/cms/djangoapps/contentstore/views.py b/cms/djangoapps/contentstore/views.py index 14f96e312a..d8090cf68b 100644 --- a/cms/djangoapps/contentstore/views.py +++ b/cms/djangoapps/contentstore/views.py @@ -93,6 +93,8 @@ def login_page(request): 'forgot_password_link': "//{base}/#forgot-password-modal".format(base=settings.LMS_BASE), }) +def howitworks(request): + return render_to_response('howitworks.html', {}) # ==== Views for any logged-in user ================================== diff --git a/cms/static/img/pl-1x1-000.png b/cms/static/img/pl-1x1-000.png new file mode 100644 index 0000000000..b94b7a9746 Binary files /dev/null and b/cms/static/img/pl-1x1-000.png differ diff --git a/cms/static/img/pl-1x1-fff.png b/cms/static/img/pl-1x1-fff.png new file mode 100644 index 0000000000..7081c75d36 Binary files /dev/null and b/cms/static/img/pl-1x1-fff.png differ diff --git a/cms/static/sass/_footer.scss b/cms/static/sass/_footer.scss index f15eb1c54a..66a9ce0e95 100644 --- a/cms/static/sass/_footer.scss +++ b/cms/static/sass/_footer.scss @@ -5,7 +5,7 @@ position: relative; width: 100%; - footer { + footer.primary { @include clearfix(); @include font-size(13); max-width: $fg-max-width; diff --git a/cms/static/sass/_header.scss b/cms/static/sass/_header.scss index 518c4bb701..b65d9098e4 100644 --- a/cms/static/sass/_header.scss +++ b/cms/static/sass/_header.scss @@ -19,7 +19,7 @@ } } - header { + header.primary { @include clearfix(); max-width: $fg-max-width; min-width: $fg-min-width; diff --git a/cms/static/sass/_index.scss b/cms/static/sass/_index.scss index a3e210b558..e80f2727ef 100644 --- a/cms/static/sass/_index.scss +++ b/cms/static/sass/_index.scss @@ -1,78 +1,210 @@ -body.index { - > header { - display: none; - } +// how it works/not signed in index +.index { - > h1 { - font-weight: 300; - color: lighten($dark-blue, 40%); - text-shadow: 0 1px 0 #fff; - -webkit-font-smoothing: antialiased; - max-width: 600px; - text-align: center; - margin: 80px auto 30px; - } + &.not-signedin { - section.main-container { - border-right: 3px; - background: #FFF; - max-width: 600px; - margin: 0 auto; - display: block; - @include box-sizing(border-box); - border: 1px solid lighten( $dark-blue , 30% ); - @include border-radius(3px); - overflow: hidden; - @include bounce-in-animation(.8s); + .wrapper-header { + margin-bottom: 0; + } - header { - border-bottom: 1px solid lighten($dark-blue, 50%); - @include linear-gradient(#fff, lighten($dark-blue, 62%)); - @include clearfix(); - @include box-shadow( 0 2px 0 $light-blue, inset 0 -1px 0 #fff); - text-shadow: 0 1px 0 #fff; + .wrapper-footer { - h1 { - font-size: 14px; - padding: 8px 20px; - float: left; - color: $dark-blue; - margin: 0; - } - - a { - float: right; - padding: 8px 20px; - border-left: 1px solid lighten($dark-blue, 50%); - @include box-shadow( inset -1px 0 0 #fff); - font-weight: bold; - font-size: 22px; - line-height: 1; - color: $dark-blue; + footer.primary { + border: none; + margin-top: 0; + padding-top: 0; } } - ol { - list-style: none; + .wrapper-content-header, .wrapper-content-features, .wrapper-content-cta { margin: 0; - padding: 0; + padding: 0 $baseline; + position: relative; + width: 100%; + } - li { - border-bottom: 1px solid lighten($dark-blue, 50%); + .content { + @include clearfix(); + @include font-size(16); + max-width: $fg-max-width; + min-width: $fg-min-width; + width: flex-grid(12); + margin: 0 auto; + color: $gray-d2; + + header { - a { - display: block; - padding: 10px 20px; + } - &:hover { - color: $dark-blue; - background: lighten($yellow, 10%); - text-shadow: 0 1px 0 #fff; + h2 { + + } + + h3 { + + } + + h4 { + + } + } + + // welcome content + .wrapper-content-header { + padding-bottom: ($baseline*3); + padding-top: ($baseline*3); + background: $blue; + } + + .content-header { + text-align: center; + color: $white; + + h1 { + @include font-size(52); + float: none; + margin: 0 0 ($baseline/2) 0; + border-bottom: 1px solid $blue-l1; + padding: 0; + font-weight: 600; + } + + .tagline { + @include font-size(24); + margin: 0; + color: $white; + } + } + + // feature content + .wrapper-content-features { + padding-bottom: ($baseline*2); + padding-top: ($baseline*2); + background: $white; + } + + .content-features { + + .list-features { + + } + + // indiv features + .feature { + @include clearfix(); + margin: 0 0 ($baseline*2) 0; + border-bottom: 1px solid $gray-l4; + padding: 0 0 ($baseline*2) 0; + + .img { + float: left; + width: flex-grid(3, 12); + margin-right: flex-gutter(); + + img { + display: block; + width: 100%; + height: 100%; + background: $black; + } + } + + .copy { + float: left; + width: flex-grid(8, 12); + margin-top: -($baseline/4); + + h3 { + margin: 0 0 ($baseline) 0; + @include font-size(24); + font-weight: 600; + } + + > p { + @include font-size(18); + } + + .list-proofpoints { + @include clearfix(); + @include font-size(14); + width: flex-grid(8, 8); + margin: ($baseline*1.5) 0 0 0; + + .proofpoint { + float: left; + width: flex-grid(3, 8); + margin-right: flex-gutter(); + + &:last-child { + margin-right: 0; + } + + .title { + @include font-size(16); + margin: 0 0 ($baseline/4) 0; + font-weight: 600; + } + } + } + } + + &:nth-child(even) { + + .img { + float: right; + margin-right: 0; + margin-left: flex-gutter(); + } + + .copy { + float: right; + text-align: right; } } &:last-child { - border-bottom: none; + margin-bottom: 0; + border: none; + padding-bottom: 0; + } + } + } + + // call to action content + .wrapper-content-cta { + padding-bottom: ($baseline*2); + padding-top: ($baseline*2); + background: $white; + } + + .content-cta { + + .list-actions { + + li { + width: flex-grid(6, 12); + margin: 0 auto; + } + + .action { + display: block; + width: 100%; + text-align: center; + } + + .action-primary { + @include blue-button; + @include transition(all .15s); + @include font-size(18); + padding: ($baseline*0.75) ($baseline/2); + font-weight: 600; + text-align: center; + text-transform: uppercase; + } + + .action-secondary { + @include font-size(14); + margin-top: ($baseline/2); } } } diff --git a/cms/static/sass/base-style.scss b/cms/static/sass/base-style.scss index f77b5ca15b..dceac4233d 100644 --- a/cms/static/sass/base-style.scss +++ b/cms/static/sass/base-style.scss @@ -30,6 +30,7 @@ @import "alerts"; @import "login"; @import "account"; +@import "index"; @import 'jquery-ui-calendar'; @import 'content-types'; diff --git a/cms/templates/howitworks.html b/cms/templates/howitworks.html new file mode 100644 index 0000000000..8f7349d476 --- /dev/null +++ b/cms/templates/howitworks.html @@ -0,0 +1,139 @@ +<%inherit file="base.html" /> +<%! from django.core.urlresolvers import reverse %> + +<%block name="title">Welcome to edX Studio%block> +<%block name="bodyclass">not-signedin index howitworks%block> + +<%block name="content"> + +
Studio helps manage your courses online, so you can focus on teaching them
+
+ The backbone of your course is how it is organized. Studio offers an Outline Mode, providing a simple hierarchy and easy drag and drop to help you and your students stay organized.
+ +Studio uses Sections and Learning Sequences to organize your content into a simple hierarchy.
+Draft your outline and build content anywhere. Simple drag and drop tools let your reorganize quickly.
+Build and release Sections to your students incrementally. You don't have to have it all done at once.
+
+ The heart of the student experience is being immersed in Learning Sequences — short video lectures interleaved with exercises. Studio allows you to insert videos and author a wide variety of exercise types with just a few clicks.
+ +Help your students understand a small interactive piece at a time. Learning Sequences are built from Learning Units.
+Work visually and see exactly what your students will see. Reorganize your Learning Units with drag and drop.
+It's more than just multiple choice. Studio has nearly a dozen types of problems to challenge your learners.
+
+ Studio works like web applications you already know, yet understands how you build curriculum. Instant publishing to the web when you want it, incremental release when it makes sense. And with co-authors, you can have a whole team building a course, together.
+ +Caught a bug? No problem. When you want, your changes to live when you hit Save.
+When you've finished a Section, pick when you want it to go live and Studio takes care of the rest. Build your course incrementally.
+Co-authors have full access to all the same authoring tools. Make your course better through a team effort.
+