studio - soft landing UI: how it works pathing, html and basic layout styling
This commit is contained in:
Brian Talbot
@@ -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 ==================================
|
||||
|
||||
|
||||
BIN
cms/static/img/pl-1x1-000.png
Normal file
BIN
cms/static/img/pl-1x1-000.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 924 B |
BIN
cms/static/img/pl-1x1-fff.png
Normal file
BIN
cms/static/img/pl-1x1-fff.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 925 B |
@@ -5,7 +5,7 @@
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
footer {
|
||||
footer.primary {
|
||||
@include clearfix();
|
||||
@include font-size(13);
|
||||
max-width: $fg-max-width;
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
header {
|
||||
header.primary {
|
||||
@include clearfix();
|
||||
max-width: $fg-max-width;
|
||||
min-width: $fg-min-width;
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -30,6 +30,7 @@
|
||||
@import "alerts";
|
||||
@import "login";
|
||||
@import "account";
|
||||
@import "index";
|
||||
@import 'jquery-ui-calendar';
|
||||
|
||||
@import 'content-types';
|
||||
|
||||
139
cms/templates/howitworks.html
Normal file
139
cms/templates/howitworks.html
Normal file
@@ -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">
|
||||
|
||||
<div class="wrapper-content-header wrapper">
|
||||
<section class="content content-header">
|
||||
<header>
|
||||
<h1>Welcome to edX Studio</h1>
|
||||
<p class="tagline">Studio helps manage your courses online, so you can focus on teaching them</p>
|
||||
</header>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="wrapper-content-features wrapper">
|
||||
<section class="content content-features">
|
||||
<header>
|
||||
<h2 class="sr">Studio's Many Features</h2>
|
||||
</header>
|
||||
|
||||
<ol class="list-features">
|
||||
<li class="feature">
|
||||
<figure class="img zoom">
|
||||
<img src="/static/img/pl-1x1-000.png" alt="Studio Helps You Keep Your Courses Organized" />
|
||||
<figcaption class="sr">Studio Helps You Keep Your Courses Organized</figcaption>
|
||||
</figure>
|
||||
|
||||
<div class="copy">
|
||||
<h3>Keeping Your Course Organized</h3>
|
||||
<p>The backbone of your course is how it is organized. Studio offers an <strong>Outline Mode</strong>, providing a simple hierarchy and easy drag and drop to help you and your students stay organized.</p>
|
||||
|
||||
<ul class="list-proofpoints">
|
||||
<li class="proofpoint">
|
||||
<h4 class="title">Simple Organization For Content</h4>
|
||||
<p>Studio uses <strong>Sections</strong> and <strong>Learning Sequences</strong> to organize your content into a simple hierarchy.</p>
|
||||
</li>
|
||||
|
||||
<li class="proofpoint">
|
||||
<h4 class="title">Change Your Mind Anytime</h4>
|
||||
<p>Draft your outline and build content anywhere. Simple drag and drop tools let your reorganize quickly.</p>
|
||||
</li>
|
||||
|
||||
<li class="proofpoint">
|
||||
<h4 class="title">Go A Week Or A Semester At A Time</h4>
|
||||
<p>Build and release <strong>Sections</strong> to your students incrementally. You don't have to have it all done at once.</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="feature">
|
||||
<figure class="img zoom">
|
||||
<img src="/static/img/pl-1x1-000.png" alt="Studio Keeps Your Learning Sequences and Lectures, Together" />
|
||||
<figcaption class="sr">Studio Keeps Your Learning Sequences and Lectures, Together</figcaption>
|
||||
</figure>
|
||||
|
||||
<div class="copy">
|
||||
<h3>Learning Sequences: Lectures and Exercises, Together </h3>
|
||||
<p>The heart of the student experience is being immersed in <strong>Learning Sequences</strong> — 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. </p>
|
||||
|
||||
<ul class="list-proofpoints">
|
||||
<li class="proofpoint">
|
||||
<h4 class="title">Create Learning Pathways</h4>
|
||||
<p>Help your students understand a small interactive piece at a time. <strong>Learning Sequences</strong> are built from <strong>Learning Units</strong>.</p>
|
||||
</li>
|
||||
|
||||
<li class="proofpoint">
|
||||
<h4 class="title">Work Visually, Organize Quickly</h4>
|
||||
<p>Work visually and see exactly what your students will see. Reorganize your <strong>Learning Units</strong> with drag and drop.</p>
|
||||
</li>
|
||||
|
||||
<li class="proofpoint">
|
||||
<h4 class="title">A Broad Library of Problem Types</h4>
|
||||
<p>It's more than just multiple choice. Studio has nearly a dozen types of problems to challenge your learners.</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="feature">
|
||||
<figure class="img zoom">
|
||||
<img src="/static/img/pl-1x1-000.png" alt="Studio Gives You Simple, Fast, and Incremental Publishing. With Friends." />
|
||||
<figcaption class="sr">Studio Gives You Simple, Fast, and Incremental Publishing. With Friends.</figcaption>
|
||||
</figure>
|
||||
|
||||
<div class="copy">
|
||||
<h3>Simple, Fast, and Incremental Publishing. With Friends.</h3>
|
||||
<p>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.</p>
|
||||
|
||||
<ul class="list-proofpoints">
|
||||
<li class="proofpoint">
|
||||
<h4 class="title">Instant Changes</h4>
|
||||
<p>Caught a bug? No problem. When you want, your changes to live when you hit Save.</p>
|
||||
</li>
|
||||
|
||||
<li class="proofpoint">
|
||||
<h4 class="title">Release-On Date Publishing</h4>
|
||||
<p>When you've finished a <strong>Section</strong>, pick when you want it to go live and Studio takes care of the rest. Build your course incrementally.</p>
|
||||
</li>
|
||||
|
||||
<li class="proofpoint">
|
||||
<h4 class="title">Work in Teams</h4>
|
||||
<p>Co-authors have full access to all the same authoring tools. Make your course better through a team effort.</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="wrapper-content-cta wrapper">
|
||||
<section class="content content-cta">
|
||||
<header>
|
||||
<h2 class="sr">Sign Up for Studio Today!</h2>
|
||||
</header>
|
||||
|
||||
<ul class="list-actions">
|
||||
<li>
|
||||
<a href="${reverse('signup')}" class="action action-primary">Sign Up & Start Making an edX Course</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="${reverse('login')}" class="action action-secondary">Already have a Studio Account? Sign In</a>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
</%block>
|
||||
|
||||
<%block name="jsextra">
|
||||
<script type="text/javascript">
|
||||
(function() {
|
||||
|
||||
})(this)
|
||||
</script>
|
||||
</%block>
|
||||
@@ -1,7 +1,7 @@
|
||||
<%! from django.core.urlresolvers import reverse %>
|
||||
|
||||
<div class="wrapper-footer wrapper">
|
||||
<footer class="main" role="contentinfo">
|
||||
<footer class="primary" role="contentinfo">
|
||||
<div class="colophon">
|
||||
<p>© 2013 <a href="http://www.edx.org" rel="external">edX</a>. All rights reversed.</p>
|
||||
</div>
|
||||
|
||||
@@ -76,6 +76,7 @@ urlpatterns = ('',
|
||||
|
||||
# User creation and updating views
|
||||
urlpatterns += (
|
||||
url(r'^howitworks$', 'contentstore.views.howitworks', name='howitworks'),
|
||||
url(r'^signup$', 'contentstore.views.signup', name='signup'),
|
||||
|
||||
url(r'^create_account$', 'student.views.create_account'),
|
||||
|
||||
Reference in New Issue
Block a user