Skip to content

E
edx-platform
Commit f0511986 by Kyle Fiedler
Options

Added more style for the marketing pages 

--HG--
branch : kf-homepage
parent f5bcc41b
Showing with 417 additions and 82 deletions
activation_complete.html
<h1>Activation Complete</h1>
<p>Now go <a href="/">log in</a> and try the course!</a></p> <%inherit file="main.html" />
<section class="activation">
<h1>Activation Complete!</h1>
<!-- <p>Now go <a href="/">log in</a> and try the course!</a></p> -->
<p>Thanks for activating your email. We will notify you as soon as the course starts.</p>
</section>
activation_invalid.html
<h1>Activation Invalid </h1> <%inherit file="main.html" />
<section class="activation">
<h1>Activation Invalid</h1>
<p>Something went wrong. Did you already activate the account? If so, <p>Something went wrong. Did you already activate the account? Otherwise, e-mail us to
go <a href="/">log in</a> and try the course. Otherwise, e-mail us to let us know what happened at <a href="mailto:bugs@mitx.mit.edu">bugs@mitx.mit.edu</a>.</p>
let us know what happened.</p> </section>
create_account.html
<!-- TODO: Add pattern field to username. See HTML5 cookbook, <!-- TODO: Add pattern field to username. See HTML5 cookbook, page 84 for details-->
page 84 for details-->
<div name="enroll_form" id="enroll_form"> <div name="enroll_form" id="enroll_form">
<form name="login" method="get">
<% <h1>Enroll in 6.002 Circuits &amp; Electronics</h1>
if 'error' in locals(): <form name="login" method="get">
e = error <% if 'error' in locals(): e = error %>
%>
<table width=360><tr><td> <div id="enroll_error" name="enroll_error"></div>
<tr><td colspan=3 align=center <ol>
style="color:red;"><div id="enroll_error"
name="enroll_error"></div></td></tr> <li>
<tr><td align=right>E-mail</td><td><input name="email" id="ca_email" <label>E-mail*</label>
type="email" required> </td><td></td></tr> <input name="email" id="ca_email" type="email" required />
<tr><td align=right>Password</td><td><input name="password" </li>
id="ca_password" type="password" required> </td><td></td></tr>
<li>
<tr><td align=right>Public Name</td><td><input name="username" <label>Password*</label>
id="ca_username" type="text" required> </td><td><span class="ui-icon ui-icon-help" id="spinner_nick" style="display:inline-block;"></td></tr> <input name="password" id="ca_password" type="password" required />
<tr><td colspan=3 align=center><div style="display:none" </li>
id="sregion_nick">Nickname you'd like to use on forums. We recommend
some variant of your real name (e.g. first name, last initial), but we <li>
allow you to be fully anonymous as well. </div></td></tr> <label>Public Name* <span class="ui-icon ui-icon-help" id="spinner_nick" style="display:inline-block;"></span></label>
<input name="username" id="ca_username" type="text" required />
<tr><td align=right>Full name</td><td><input name="name" id="ca_name" type="input"> </td><td><span class="ui-icon ui-icon-help" id="spinner_name" style="display:inline-block;"></td></tr> <div style="display:none" id="sregion_nick">Nickname you'd like to use on forums. We recommend some variant of your real name (e.g. first name, last initial), but we allow you to be fully anonymous as well. </div>
<tr><td colspan=3 align=center><div style="display:none" id="sregion_name">If you would </li>
like us to give you a certificate of completion at the end, we need
your full legal name, as you would like it to appear on the
certificate (e.g. &quot;John Smith, Jr&quot;). Otherwise, feel free to <li>
leave it blank. </div> </td></tr> <label>Full name <span class="ui-icon ui-icon-help" id="spinner_name" style="display:inline-block;"></span></label>
<input name="name" id="ca_name" type="text" />
<tr><td align=right>Location</td><td><input name="location" id="ca_location" type="input"> </td><td><span class="ui-icon ui-icon-help" id="spinner_location" style="display:inline-block;"></td></tr>
<tr><td colspan=3 align=center><div style="display:none" id="sregion_location">Preferred format is city, state, country (so for us, <div style="display:none" id="sregion_name">If you would like us to give you a certificate of completion at the end, we need your full legal name, as you would like it to appear on the certificate (e.g. &quot;John Smith, Jr&quot;). Otherwise, feel free to leave it blank. </div>
&quot;Cambridge, Massachusetts, USA&quot;). We'd eventually like to </li>
group people into study groups. Studies show that geographic proximity
helps. It'll also help us understand efforts needed for <li>
internationalization, low bandwidth, cultural issues, etc. We may also <label>Location <span class="ui-icon ui-icon-help" id="spinner_location" style="display:inline-block;"></span></label>
use statistics from this to help us raise money. </div></td></tr> <input name="location" id="ca_location" type="text" />
<tr><td align=right>Preferred Language</td><td><input name="language" <div style="display:none" id="sregion_location">Preferred format is city, state, country (so for us, &quot;Cambridge, Massachusetts, USA&quot;). We'd eventually like to group people into study groups. Studies show that geographic proximity helps. It'll also help us understand efforts needed for internationalization, low bandwidth, cultural issues, etc. We may also use statistics from this to help us raise money. </div>
id="ca_language" type="input"> </td><td><span class="ui-icon ui-icon-help" id="spinner_language" style="display:inline-block;"></td></tr>
<tr><td colspan=3 align=center><div style="display:none" id="sregion_language">Please let us </li>
know what language you'd most like to see the content in (even if not
your native). We're working on translations and <li>
internationalization. This will help us know what languages and <label>Preferred Language <span class="ui-icon ui-icon-help" id="spinner_language" style="display:inline-block;"></span></label>
regions to focus on. </div></td></tr>
<input name="language" id="ca_language" type="text" />
<tr><td align=right><input name="terms_of_service"
id="cb_terms_of_service" type="checkbox" <div style="display:none" id="sregion_language">Please let us know what language you'd most like to see the content in (even if not your native). We're working on translations and internationalization. This will help us know what languages and regions to focus on. </div>
value="terms_of_service" required></td><td colspan=2>I agree to the Terms of </li>
Service</td></tr>
<li class="terms">
<tr><td align=right><input name="honor_code" id="cb_honor_code" <label>
type="checkbox" value="honor_code" required></td><td colspan=2>I agree <input name="terms_of_service" id="cb_terms_of_service" type="checkbox" value="terms_of_service" required />I agree to the Terms of Service
to:</td></tr> </label>
<tr><td colspan=3 align=center> </li>
<br>
Not engage in any activities that would dishonestly improve my <li class="honor-code">
results, or improve or hurt those of others <label>
<br><br> <input name="honor_code" id="cb_honor_code" type="checkbox" value="honor_code" required />I agree to: Not engage in any activities that would dishonestly improve my results, or improve or hurt those of others. Never post answers to problems. Maintain only one account.
Never post answers to problems </label>
<br><br> </li>
Maintain only one account
<br><br> </ol>
</ol> <input name="create_account_button" id="create_account_button" type="button" value="Create Account">
</td></tr> </form>
<tr><td align=right></td><td align=right><input name="create_account_button"
id="create_account_button" type="button" value="Create
Account"> </td><td></td></tr>
</table>
</form>
</div> </div>
index.html
<%inherit file="main.html" /> <%inherit file="main.html" />
<a href="/course_info/">Course</a> <header class="announcement">
<a class="modal" href="#login">Log In</a> <div class="anouncement-wrapper">
<nav>
<a class="modal login" href="#login">Log In</a>
</nav>
<section>
<h1>An MIT Education Anywhere. <br />For free.</h1>
<p>MITx is an open learning software available free of cost, so that others &mdash; whether other universities or different educational institutions, such as K&ndash;12 school systems &mdash; can leverage the same software for their online education offerings.</p>
</section>
</div>
</header>
<section class="index-content">
<section class="about">
<h1>About MITx</h1>
<p>MITx is a portfolio of MIT courses through an online interactive learning platform that:</p>
<ul>
<li>organizes and presents course material to enable students to learn at their own pace</li>
<li>features interactivity, online laboratories and student-to-student communication</li>
<li>allows for the individual assessment of any student&rsquo;s work and allow students who demonstrate their mastery of subjects to earn a certificate of completion awarded by MITx</li>
<li>operates on an open-source, scalable software infrastructure in order to make it continuously improving and readily available to other educational institutions.</li>
</ul>
<p>This learning platform will enhance the educational experience of its on-campus students, offering them online tools that supplement and enrich their classroom and laboratory experiences. It will also be host to a virtual community learners around the world.</p>
</section>
<section>
<h1>Course offering</h1>
<h2>6.002 Circuits and Electronics</h2>
<p> Taught by Anant Agarwal, with Gerald Sussman, Piotr Mitros, and Chris Terman, "6.002 Circuits and Electronics" is an on-line adaption of MIT's first undergraduate analog design course. This course will run, free of charge, for students worldwide from February 1, 2012 through July 1, 2012.</p>
<p>
<a href="/course_info/" class="more-info">More information about Circuits and Electronics</a>
</p>
</section>
<div style="display:none"> <div style="display:none">
<div id="login"><%include file="login.html" /></div> <div id="login"><%include file="login.html" /></div>
...@@ -14,6 +49,7 @@ ...@@ -14,6 +49,7 @@
<div style="display:none"> <div style="display:none">
<div id="reset_done"></div> <div id="reset_done"></div>
</div> </div>
</section>
<script> <script>
......
sass/_activation.scss 0 → 100644
section.activation {
@extend .wrapper;
@include box-shadow(0 1px 0 #fff);
@include box-sizing(border-box);
background: #fff;
border-top: 0;
border: 1px solid #ccc;
max-width: 600px;
padding: lh();
margin-top: lh();
}
sass/_base-variables.scss
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
// Line-height // Line-height
@function lh($amount: 1) { @function lh($amount: 1) {
@return $base-line-height * $amount; @return $body-line-height * $amount;
} }
// Variables // Variables
......
sass/_fancybox.scss 0 → 100644
div#fancybox-overlay {
background: #333 !important;
}
div#fancybox-wrap {
div#fancybox-outer {
background: none;
max-width: 600px;
div.fancybox-bg {
display: none;
background: none;
}
div#fancybox-content {
@include border-radius(3px);
@include box-shadow(0 0 6px #000);
@include box-sizing(border-box);
background: #fff;
border: none;
padding: lh(2);
max-width: 600px;
h1 {
font-size: 24px;
margin-top: 0;
font-family: "Oswald";
padding-bottom: lh();
border-bottom: 1px solid #eee;
margin-bottom: lh();
}
form {
text-align: left;
div#enroll_error {
padding-bottom: lh();
color: #DF8B2C;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: bold;
}
ol {
li {
margin-bottom: lh();
width: grid-width(6);
float: left;
&:nth-child(odd) {
margin-right: $gw-gutter;
}
&.terms {
float: none;
width: auto;
clear: both;
padding-top: lh();
border-top: 1px solid #eee;
}
&.honor-code {
width: auto;
float: none;
}
label {
display: block;
font-weight: bold;
}
#{$all-text-inputs} {
width: 100%;
@include box-sizing(border-box);
}
input[type="checkbox"] {
margin-right: 10px;
}
}
}
input[type="button"] {
@include button($mit-red);
font-size: 18px;
padding: lh(.5);
}
}
}
}
}
sass/_index.scss 0 → 100644
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: normal;
src: local('Oswald '), local('Oswald'), url('http://themes.googleusercontent.com/static/fonts/oswald/v3/qpy-UiLNKP-VfOdbcs6r6-vvDin1pK8aKteLpeZ5c0A.woff') format('woff');
}
header.announcement {
background: $mit-red;
border-top: 3px solid darken($mit-red, 10%);
color: #fff;
div {
@extend .wrapper;
padding: 80px $body-line-height 60px;
position: relative;
@include box-sizing(border-box);
nav {
position: absolute;
top: 20px;
right: 0;
a.login {
text-transform: uppercase;
color: #fff;
font-size: 12px;
margin-right: 20px;
text-shadow: 0 -1px 0 darken($mit-red, 10%);
&:hover {
color: rgba(#fff, .6);
}
}
}
section {
@extend .clearfix;
padding-left: grid-width(3);
h1 {
font-family: "Oswald";
font-size: 62px;
line-height: 1.2em;
margin: 0;
text-transform: uppercase;
text-shadow: 0 -2px 0 darken($mit-red, 10%);
}
p {
line-height: 1.6em;
max-width: 700px;
margin: 2em 0 0;
}
&.course {
padding-left: grid-width(4) + $gw-gutter;
a.enroll {
@include button(#fff);
@include inline-block();
@include box-shadow(0 1px 0 lighten($mit-red, 10%));
margin-top: lh();
font-size: 18px;
padding: lh(.5);
border-color: darken($mit-red, 10%);
&:hover {
text-decoration: none;
}
}
}
}
}
}
section.index-content {
@extend .main-content;
@extend .wrapper;
@include box-sizing(border-box);
padding: lh();
section {
width: grid-width(6);
@extend .clearfix;
float: left;
&.about {
margin-right: $gw-gutter;
}
&.about-course {
width: grid-width(12);
float: none;
@extend .clearfix;
section {
width: grid-width(4);
margin-right: $gw-gutter;
&.requirements {
margin-right: 0;
}
}
}
&.staff {
@extend .clearfix;
border-top: 1px solid #eee;
float: none;
width: grid-width(12);
margin-top: lh();
padding-top: lh();
ul {
list-style: none;
margin: 0;
li {
width: grid-width(3);
list-style: none;
float: left;
margin-right: $gw-gutter;
img {
float: left;
margin: 0 1em 1em 0;
}
&:last-child {
margin-right: 0;
}
}
}
}
h1 {
font-size: 34px;
margin-top: 0;
font-family: "Oswald";
}
ul {
margin: 0 grid-width(1) 1em;
list-style: disc outside none;
li {
list-style: disc outside none;
}
}
p {
line-height: 1.5;
}
a.more-info {
// @extend .button;
@include button(simple, $mit-red);
@include inline-block();
margin-top: lh();
font-size: 18px;
padding: lh(.5);
&:hover {
text-decoration: none;
}
}
}
div.secondary {
border-top: 1px solid #eee;
margin-top: lh();
padding-top: lh();
section {
text-align: center;
width: auto;
float: none;
a.enroll {
@include button(simple, $mit-red);
@include inline-block();
margin-top: lh();
font-size: 18px;
padding: lh(.5);
&:hover {
text-decoration: none;
}
}
}
}
}
sass/_layout.scss
...@@ -69,8 +69,8 @@ html { ...@@ -69,8 +69,8 @@ html {
@include box-shadow(0 1px 0 #fff); @include box-shadow(0 1px 0 #fff);
@include box-sizing(border-box); @include box-sizing(border-box);
background: #fff; background: #fff;
border-top: 0;
border: 1px solid #ccc; border: 1px solid #ccc;
border-top: 0;
} }
img { img {
......
sass/application.scss
...@@ -5,12 +5,15 @@ ...@@ -5,12 +5,15 @@
// Base layout // Base layout
@import "base-variables", "base-extends", "base"; @import "base-variables", "base-extends", "base";
@import "layout"; @import "layout";
@import "fancybox";
// pages // pages
@import "courseware"; @import "courseware";
@import "textbook"; @import "textbook";
@import "profile"; @import "profile";
@import "wiki-create", "wiki"; @import "wiki-create", "wiki";
@import "index";
@import "activation";
// left over // left over
@import "theme"; @import "theme";
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment