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,
go <a href="/">log in</a> and try the course. Otherwise, e-mail us to
let us know what happened.</p>
<p>Something went wrong. Did you already activate the account? Otherwise, e-mail us to
let us know what happened at <a href="mailto:bugs@mitx.mit.edu">bugs@mitx.mit.edu</a>.</p>
</section>
create_account.html
<!-- TODO: Add pattern field to username. See HTML5 cookbook,
page 84 for details-->
<!-- TODO: Add pattern field to username. See HTML5 cookbook, page 84 for details-->
<div name="enroll_form" id="enroll_form">
<form name="login" method="get">
<%
if 'error' in locals():
e = error
%>
<table width=360><tr><td>
<tr><td colspan=3 align=center
style="color:red;"><div id="enroll_error"
name="enroll_error"></div></td></tr>
<tr><td align=right>E-mail</td><td><input name="email" id="ca_email"
type="email" required> </td><td></td></tr>
<tr><td align=right>Password</td><td><input name="password"
id="ca_password" type="password" required> </td><td></td></tr>
<tr><td align=right>Public Name</td><td><input name="username"
id="ca_username" type="text" required> </td><td><span class="ui-icon ui-icon-help" id="spinner_nick" style="display:inline-block;"></td></tr>
<tr><td colspan=3 align=center><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></td></tr>
<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>
<tr><td colspan=3 align=center><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> </td></tr>
<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,
&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></td></tr>
<tr><td align=right>Preferred Language</td><td><input name="language"
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
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></td></tr>
<tr><td align=right><input name="terms_of_service"
id="cb_terms_of_service" type="checkbox"
value="terms_of_service" required></td><td colspan=2>I agree to the Terms of
Service</td></tr>
<tr><td align=right><input name="honor_code" id="cb_honor_code"
type="checkbox" value="honor_code" required></td><td colspan=2>I agree
to:</td></tr>
<tr><td colspan=3 align=center>
<br>
Not engage in any activities that would dishonestly improve my
results, or improve or hurt those of others
<br><br>
Never post answers to problems
<br><br>
Maintain only one account
<br><br>
</ol>
</td></tr>
<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>
<h1>Enroll in 6.002 Circuits &amp; Electronics</h1>
<form name="login" method="get">
<% if 'error' in locals(): e = error %>
<div id="enroll_error" name="enroll_error"></div>
<ol>
<li>
<label>E-mail*</label>
<input name="email" id="ca_email" type="email" required />
</li>
<li>
<label>Password*</label>
<input name="password" id="ca_password" type="password" required />
</li>
<li>
<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 />
<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>
</li>
<li>
<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" />
<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>
</li>
<li>
<label>Location <span class="ui-icon ui-icon-help" id="spinner_location" style="display:inline-block;"></span></label>
<input name="location" id="ca_location" type="text" />
<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>
</li>
<li>
<label>Preferred Language <span class="ui-icon ui-icon-help" id="spinner_language" style="display:inline-block;"></span></label>
<input name="language" id="ca_language" type="text" />
<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>
</li>
<li class="terms">
<label>
<input name="terms_of_service" id="cb_terms_of_service" type="checkbox" value="terms_of_service" required />I agree to the Terms of Service
</label>
</li>
<li class="honor-code">
<label>
<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.
</label>
</li>
</ol>
<input name="create_account_button" id="create_account_button" type="button" value="Create Account">
</form>
</div>
index.html
<%inherit file="main.html" />
<a href="/course_info/">Course</a>
<a class="modal" href="#login">Log In</a>
<header class="announcement">
<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 id="login"><%include file="login.html" /></div>
......@@ -14,6 +49,7 @@
<div style="display:none">
<div id="reset_done"></div>
</div>
</section>
<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 @@
// Line-height
@function lh($amount: 1) {
@return $base-line-height * $amount;
@return $body-line-height * $amount;
}
// 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 {
@include box-shadow(0 1px 0 #fff);
@include box-sizing(border-box);
background: #fff;
border-top: 0;
border: 1px solid #ccc;
border-top: 0;
}
img {
......
sass/application.scss
......@@ -5,12 +5,15 @@
// Base layout
@import "base-variables", "base-extends", "base";
@import "layout";
@import "fancybox";
// pages
@import "courseware";
@import "textbook";
@import "profile";
@import "wiki-create", "wiki";
@import "index";
@import "activation";
// left over
@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