Commit 1be9196d by Galen Frechette

wip header, wip header refactoring, improves course object visual design, improves footer

parent 897a89c5
lms/static/images/logo.png

2.74 KB | W: | H:

lms/static/images/logo.png

4.04 KB | W: | H:

lms/static/images/logo.png
lms/static/images/logo.png
lms/static/images/logo.png
lms/static/images/logo.png
  • 2-up
  • Swipe
  • Onion skin
$(document).ready(function () { $(document).ready(function () {
$('a.options').toggle(function() { $('a.dropdown').toggle(function() {
$('ol.user-options').addClass("expanded"); $('ul.dropdown-menu').addClass("expanded");
$('a.options').addClass("active"); $('a.dropdown').addClass("active");
}, function() { }, function() {
$('ol.user-options').removeClass("expanded"); $('ul.dropdown-menu').removeClass("expanded");
$('a.options').removeClass("active"); $('a.dropdown').removeClass("active");
}); });
}); });
...@@ -87,7 +87,7 @@ ...@@ -87,7 +87,7 @@
} }
.faq { .faq {
//display: none; display: none;
@include clearfix; @include clearfix;
nav.categories { nav.categories {
...@@ -99,6 +99,7 @@ ...@@ -99,6 +99,7 @@
width: flex-grid(3); width: flex-grid(3);
a { a {
color: $lighter-base-font-color;
display: block; display: block;
letter-spacing: 1px; letter-spacing: 1px;
margin-right: -20px; margin-right: -20px;
...@@ -107,6 +108,7 @@ ...@@ -107,6 +108,7 @@
text-transform: uppercase; text-transform: uppercase;
&:hover { &:hover {
color: $blue;
background: rgb(245,245,245); background: rgb(245,245,245);
} }
} }
......
...@@ -77,6 +77,11 @@ a:link, a:visited { ...@@ -77,6 +77,11 @@ a:link, a:visited {
} }
} }
.content-wrapper {
margin: 0 auto 0;
width: flex-grid(12);
}
.container { .container {
@include clearfix; @include clearfix;
margin: 0 auto 0; margin: 0 auto 0;
......
.find-courses { .find-courses {
.container {
margin-bottom: 60px;
}
header.search-intro { header.search-intro {
background: rgb(240,240,240); background: rgb(240,240,240);
border-bottom: 1px solid rgb(200,200,200); border-bottom: 1px solid rgb(200,200,200);
@include box-shadow(inset 0 1px 5px 0 rgba(0,0,0, 0.1)); @include box-shadow(inset 0 -1px 5px 0 rgba(0,0,0, 0.1));
width: 100%; width: 100%;
.inner-wrapper { .inner-wrapper {
......
.home { .home {
margin: 50px 10px 100px; margin: 0px 0px 100px;
> header { > header {
background: rgb(250,250,250);
border-bottom: 1px solid rgb(200,200,200);
@include box-shadow(inset 0 -1px 5px 0 rgba(0,0,0, 0.1));
@include clearfix; @include clearfix;
min-height: 335px; min-height: 335px;
margin-bottom: 40px; padding: 60px 0px 50px;
position: relative;
width: flex-grid(12); width: flex-grid(12);
.inner-wrapper {
max-width: 1200px;
margin: 0 auto;
position: relative;
}
.video-wrapper { .video-wrapper {
right: 0px; right: 0px;
position: absolute; position: absolute;
...@@ -98,7 +106,6 @@ ...@@ -98,7 +106,6 @@
@include background-image(linear-gradient(180deg, rgba(245,245,245, 0) 0%, @include background-image(linear-gradient(180deg, rgba(245,245,245, 0) 0%,
rgba(245,245,245, 1) 50%, rgba(245,245,245, 1) 50%,
rgba(245,245,245, 0) 100%)); rgba(245,245,245, 0) 100%));
border-top: 1px solid rgb(210,210,210);
border-bottom: 1px solid rgb(210,210,210); border-bottom: 1px solid rgb(210,210,210);
margin-bottom: 0px; margin-bottom: 0px;
overflow: hidden; overflow: hidden;
...@@ -234,25 +241,23 @@ ...@@ -234,25 +241,23 @@
width: flex-grid(12); width: flex-grid(12);
> h2 { > h2 {
background: rgb(245,245,245); @include background-image(linear-gradient(-90deg, rgb(250,250,250), rgb(230,230,230)));
border: 1px solid rgb(220,220,220); @include box-shadow(inset 0 0 0 1px rgba(255,255,255, 0.4));
border: 1px solid rgb(210,210,210);
border-top: none; border-top: none;
@include border-bottom-radius(4px); @include border-bottom-radius(4px);
@include box-shadow(0 1px 8px 0 rgba(0,0,0, 0.1)); @include box-shadow(0 1px 8px 0 rgba(0,0,0, 0.1));
color: $lighter-base-font-color; color: $lighter-base-font-color;
letter-spacing: 1px; letter-spacing: 1px;
margin-bottom: 0px;
padding: 15px 10px; padding: 15px 10px;
text-align: center; text-align: center;
text-transform: uppercase; text-transform: uppercase;
} text-shadow: 0 1px rgba(255,255,255, 0.6);
.courses { .lowercase {
//background: rgb(245,245,245); text-transform: none;
//@include background-image(linear-gradient(180deg, rgba(255,255,255, 1) 0%, }
//rgba(255,255,255, 0.5) 20%,
//rgba(255,255,255, 0) 50%,
//rgba(255,255,255, 0.5) 80%,
//rgba(255,255,255, 1) 100%));
} }
} }
......
footer { footer {
max-width: 1200px; background: rgb(250,250,250);
border-top: 1px solid rgb(200,200,200);
@include box-shadow(inset 0 1px 3px 0 rgba(0,0,0, 0.1));
margin: 0 auto; margin: 0 auto;
padding: 0 0 40px; padding: 0 0 40px;
width: flex-grid(12); width: flex-grid(12);
...@@ -11,7 +13,6 @@ footer { ...@@ -11,7 +13,6 @@ footer {
} }
nav { nav {
border-top: 1px solid rgb(200,200,200);
@include box-sizing(border-box); @include box-sizing(border-box);
@include clearfix; @include clearfix;
max-width: 1200px; max-width: 1200px;
...@@ -24,16 +25,23 @@ footer { ...@@ -24,16 +25,23 @@ footer {
padding-top: 2px; padding-top: 2px;
a.logo { a.logo {
@include box-sizing(border-box); @include background-image(url('/static/images/logo.png'));
background-position: 0 -24px;
background-repeat: no-repeat;
@include inline-block; @include inline-block;
float: left; float: left;
height: 100%; height: 23px;
margin-right: 14px; margin-right: 15px;
margin-top: 1px; margin-top: 2px;
padding-right: 15px; padding-right: 15px;
position: relative; position: relative;
width: 47px;
vertical-align: middle; vertical-align: middle;
&:hover {
background-position: 0 0;
}
&::after { &::after {
@extend .faded-vertical-divider; @extend .faded-vertical-divider;
content: ""; content: "";
...@@ -44,16 +52,11 @@ footer { ...@@ -44,16 +52,11 @@ footer {
top: -2px; top: -2px;
width: 1px; width: 1px;
} }
img {
position: relative;
z-index: 2;
}
} }
p { p {
color: $lighter-base-font-color; color: $lighter-base-font-color;
font: normal 1.2rem/1.6rem $serif; font: italic 1.2rem/1.6rem $serif;
@include inline-block; @include inline-block;
margin: 0 auto; margin: 0 auto;
padding-top: 4px; padding-top: 4px;
...@@ -62,9 +65,9 @@ footer { ...@@ -62,9 +65,9 @@ footer {
a { a {
color: $lighter-base-font-color; color: $lighter-base-font-color;
font: normal 1.2rem/1.6rem $serif; font: italic 1.2rem/1.6rem $serif;
margin-left: 5px; margin-left: 5px;
text-decoration: underline; //text-decoration: underline;
} }
} }
} }
...@@ -74,7 +77,6 @@ footer { ...@@ -74,7 +77,6 @@ footer {
font-size: 0em; font-size: 0em;
li { li {
//border-right: 1px solid rgb(200,200,200);
@include inline-block; @include inline-block;
list-style: none; list-style: none;
padding: 0px 15px; padding: 0px 15px;
...@@ -94,7 +96,8 @@ footer { ...@@ -94,7 +96,8 @@ footer {
a:link, a:visited { a:link, a:visited {
color: $lighter-base-font-color; color: $lighter-base-font-color;
font: normal 1.2rem/1.6rem $serif; font: 300 1.2rem/1.6rem $sans-serif;
letter-spacing: 1px;
padding: 6px 0px; padding: 6px 0px;
} }
......
header.app { header.global {
background: rgb(255,255,255);
border-bottom: 1px solid rgb(200,200,200); border-bottom: 1px solid rgb(200,200,200);
@include background-image(linear-gradient(-90deg, rgb(245,245,245), rgb(230,230,230))); @include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.1));
height: 55px; //@include background-image(linear-gradient(-90deg, rgb(255,255,255), rgba(245,245,245, 1)));
height: 75px;
position: relative;
width: 100%; width: 100%;
z-index: 10;
.wrapper { nav {
@include clearfix; @include clearfix;
@include box-sizing(border-box); @include box-sizing(border-box);
max-width: 1200px; height: 40px;
margin: 0 auto; margin: 0 auto;
padding: 0px 10px; max-width: 1200px;
padding-top: 20px;
width: flex-grid(12); width: flex-grid(12);
} }
a.logo { h1.logo {
@include box-sizing(border-box);
display: block;
float: left; float: left;
height: 100%; margin: 7px 15px 0px 0px;
margin: 16px 15px 0px 0px; padding-right: 20px;
position: relative; position: relative;
img { &::before {
position: relative; @extend .faded-vertical-divider;
z-index: 2; content: "";
display: block;
height: 45px;
position: absolute;
right: 1px;
top: -12px;
width: 1px;
} }
}
.divider {
@extend .vertical-divider;
@include inline-block;
height: 40px;
vertical-align: middle;
}
&::after {
@extend .faded-vertical-divider-light;
content: "";
display: block;
height: 36px;
position: absolute;
right: 0px;
top: 0px;
width: 1px;
}
nav { a {
height: 40px; @include background-image(url('/static/images/logo.png'));
margin-top: 8px; background-position: 0 0;
background-repeat: no-repeat;
display: block;
height: 23px;
width: 47px;
}
}
ol {
&.find-courses { &.find-courses {
float: left; float: left;
} }
...@@ -47,67 +65,70 @@ header.app { ...@@ -47,67 +65,70 @@ header.app {
float: right; float: right;
} }
ol { > li {
font-size: 0em; @include inline-block;
margin-right: 20px;
position: relative;
vertical-align: middle;
li { &:last-child {
@include inline-block; margin-right: 0px;
vertical-align: top; }
a {
letter-spacing: 1px;
vertical-align: middle;
} }
}
li.secondary { li.secondary {
margin: 0px 15px; > a {
color: $lighter-base-font-color;
color: $blue;
display: block;
//font: italic 1.2rem/1.4rem $serif;
font: normal 1.2rem/1.4rem $sans-serif;
@include inline-block;
margin: 0px 20px 0px 0px;
text-decoration: none;
//text-transform: lowercase;
text-transform: uppercase;
text-shadow: 0 1px rgba(255,255,255, 0.6);
a { &:last-child {
@include border-radius(3px); margin-right: 0px;
border: 1px solid transparent; }
@include box-sizing(border-box);
color: $lighter-base-font-color;
display: block;
font: italic 1.2rem/1.4rem $serif;
height: 30px;
@include inline-block;
margin: 5px 15px 5px 0px;
padding: 7px 2px;
text-decoration: none;
text-transform: lowercase;
text-shadow: 0 1px rgba(255,255,255, 0.6);
vertical-align: middle;
&:last-child {
margin-right: 0px;
}
&:hover { &:hover {
color: $base-font-color; color: $base-font-color;
}
} }
} }
}
li.primary { li.primary {
position: relative; > a {
@include background-image(linear-gradient(-90deg, rgb(245,245,245) 0%, rgb(243,243,243) 50%, rgb(237,237,237) 50%, rgb(235,235,235) 100%));
border: 1px solid transparent;
border-color: rgb(200,200,200);
@include border-radius(3px);
@include box-sizing(border-box);
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
color: $base-font-color;
display: inline-block;
font: normal 1.2rem/1.4rem $sans-serif;
@include inline-block;
margin: 1px 5px;
padding: 8px 12px;
text-decoration: none;
text-transform: uppercase;
text-shadow: 0 1px rgba(255,255,255, 0.6);
vertical-align: middle;
a { &:last-child {
border: 1px solid transparent; margin-right: 0px;
@include border-radius(3px); }
@include box-sizing(border-box);
color: $base-font-color; &:hover, &.active {
display: block;
font: normal 1.2rem/1.4rem $sans-serif;
height: 38px;
@include inline-block;
margin: 1px 5px;
padding: 10px 8px;
text-decoration: none;
text-transform: uppercase;
text-shadow: 0 1px rgba(255,255,255, 0.6);
vertical-align: middle;
&:hover, &.active {
@include background-image(linear-gradient(-90deg, rgb(245,245,245) 0%, rgb(243,243,243) 50%, rgb(237,237,237) 50%, rgb(235,235,235) 100%));
border-color: rgb(200,200,200);
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
}
} }
} }
} }
...@@ -116,7 +137,7 @@ header.app { ...@@ -116,7 +137,7 @@ header.app {
float: right; float: right;
a.user-link { a.user-link {
padding: 9px 8px 11px 40px; padding: 8px 12px 8px 40px;
position: relative; position: relative;
text-transform: none; text-transform: none;
...@@ -129,15 +150,15 @@ header.app { ...@@ -129,15 +150,15 @@ header.app {
.avatar { .avatar {
background: rgb(220,220,220); background: rgb(220,220,220);
@include border-radius(3px); @include border-radius(3px);
border: 1px solid rgb(180,180,180); border: 1px solid rgb(80,80,80);
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6)); @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
height: 22px; height: 21px;
@include inline-block; @include inline-block;
left: 8px; left: 6px;
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
top: 6px; top: 5px;
width: 22px; width: 21px;
&::after { &::after {
@include background-image(linear-gradient((-60deg), rgba(0,0,0, 0) 0%, rgba(0,0,0, 0.1) 50%, rgba(0,0,0, 0.2) 50%, rgba(0,0,0, 0.3) 100%)); @include background-image(linear-gradient((-60deg), rgba(0,0,0, 0) 0%, rgba(0,0,0, 0.1) 50%, rgba(0,0,0, 0.2) 50%, rgba(0,0,0, 0.3) 100%));
...@@ -160,17 +181,17 @@ header.app { ...@@ -160,17 +181,17 @@ header.app {
} }
} }
ol.user-options { ul.dropdown-menu {
@include border-radius(4px); @include border-radius(4px);
@include box-shadow(0 1px 6px 0 rgba(0,0,0, 0.3)); @include box-shadow(0 1px 6px 0 rgba(0,0,0, 0.3));
border: 1px solid rgb(0,0,0); border: 1px solid rgb(0,0,0);
@include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.9) 0%, @include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.9) 0%,
rgba(0,0,0, 0.7) 100%)); rgba(0,0,0, 0.7) 100%));
display: none; display: none;
right: 0px;
padding: 5px 10px; padding: 5px 10px;
position: absolute; position: absolute;
top: 52px; right: 4px;
top: 50px;
width: 150px; width: 150px;
z-index: 3; z-index: 3;
...@@ -209,6 +230,7 @@ header.app { ...@@ -209,6 +230,7 @@ header.app {
> a { > a {
@include box-sizing(border-box); @include box-sizing(border-box);
@include border-radius(3px);
color: rgba(255,255,255, 0.9); color: rgba(255,255,255, 0.9);
display: block; display: block;
font: italic 1.2rem/1.4rem $serif; font: italic 1.2rem/1.4rem $serif;
......
...@@ -21,26 +21,27 @@ ...@@ -21,26 +21,27 @@
margin-right: 0; margin-right: 0;
} }
//.meta-info { .meta-info {
//background: rgba(0,0,0, 0.6); background: rgba(0,0,0, 0.6);
//bottom: 8px; bottom: 6px;
//border: 1px solid rgba(0,0,0, 0.5); border: 1px solid rgba(0,0,0, 0.5);
//@include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.15)); @include border-right-radius(2px);
//@include clearfix; @include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.15));
//left: -4px; @include clearfix;
//position: absolute; position: absolute;
//@include transition(all, 0.15s, linear); right: -3px;
@include transition(all, 0.15s, linear);
//p {
//color: rgb(255,255,255); p {
//font: 300 1.2rem/1.4rem $sans-serif; color: rgb(255,255,255);
//padding: 5px 12px; font: 300 1.2rem/1.4rem $sans-serif;
padding: 5px 12px;
//&.university {
//float: left; &.university {
//} float: left;
//} }
//} }
}
.inner-wrapper { .inner-wrapper {
border: 1px solid rgba(255,255,255, 1); border: 1px solid rgba(255,255,255, 1);
...@@ -114,6 +115,7 @@ ...@@ -114,6 +115,7 @@
} }
.info { .info {
background: rgb(255,255,255);
height: 180px + 130px; height: 180px + 130px;
left: 0px; left: 0px;
position: absolute; position: absolute;
...@@ -121,31 +123,6 @@ ...@@ -121,31 +123,6 @@
@include transition(all, 0.15s, linear); @include transition(all, 0.15s, linear);
width: 100%; width: 100%;
.meta-info {
background: rgba(0,0,0, 0.6);
bottom: 130px;
border-top: 1px solid rgba(0,0,0, 0.5);
@include clearfix;
position: absolute;
@include transition(all, 0.15s, linear);
width: 100%;
p {
color: rgb(255,255,255);
font: 300 1.2rem/1.4rem $sans-serif;
padding: 5px 10px;
&.university {
float: left;
}
&.dates {
float: right;
margin-top: 0px;
}
}
}
.cover-image { .cover-image {
height: 180px; height: 180px;
overflow: hidden; overflow: hidden;
...@@ -159,13 +136,49 @@ ...@@ -159,13 +136,49 @@
} }
.desc { .desc {
background: rgb(255,255,255);
@include box-sizing(border-box); @include box-sizing(border-box);
height: 130px; height: 100px;
overflow: hidden; overflow: hidden;
padding: 10px; padding: 10px 10px 15px 10px;
position: relative;
width: 100%; width: 100%;
p {
height: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
}
.bottom {
@include box-sizing(border-box);
@include clearfix;
padding: 6px 10px;
width: 100%;
> p, a {
color: $lighter-base-font-color;
font: 300 1.2rem/1.4rem $sans-serif;
letter-spacing: 1px;
padding: 0;
&.university {
border-right: 1px solid $lighter-base-font-color;
display: block;
float: left;
margin-right: 10px;
padding-right: 10px;
&:hover {
color: $blue;
}
}
&.dates {
float: left;
margin-top: 0px;
}
}
} }
} }
...@@ -176,10 +189,10 @@ ...@@ -176,10 +189,10 @@
.info { .info {
top: -130px; top: -130px;
}
.meta-info { .meta-info {
opacity: 0; opacity: 0;
}
} }
} }
} }
......
...@@ -14,16 +14,188 @@ ...@@ -14,16 +14,188 @@
</a> </a>
</header> </header>
<section class="info"> <section class="info">
<div class="meta-info">
<p class="university">${course.get_about_section('university')}</p>
<p class="dates"><span class="start">7/23/12</span> &rarr; <span class="end">12/15/12</span></p>
</div>
<div class="cover-image"> <div class="cover-image">
<img src="${static.url('images/courses/history.png')}"> <img src="${static.url('images/courses/history.png')}">
</div> </div>
<div class="desc"> <div class="desc">
<p>${course.get_about_section('university')} An advanced introduction to analog circuits. An advanced introduction to analog circuits.</p>
</div>
<div class="bottom">
<a href="#" class="university">${course.institution}</a>
<p class="dates"><span class="start">7/23/12</span></p>
</div>
</section>
</div>
<div class="meta-info">
<p class="university">${course.institution}</p>
</div>
</article>
%endfor
<article id="${course.id}"class="course">
<div class="inner-wrapper">
<header class="course-preview">
<a href="${reverse('about_course', args=[course.id])}">
<hgroup>
<h2>${course.title}</h2>
</hgroup>
<div class="info-link">&#x2794;</div>
</a>
</header>
<section class="info">
<div class="cover-image">
<img src="${static.url('images/courses/math.png')}">
</div>
<div class="desc">
<p>An advanced introduction to analog circuits.</p>
</div>
<div class="bottom">
<a href="#" class="university">${course.institution}</a>
<p class="dates"><span class="start">7/23/12</span></p>
</div>
</section>
</div>
<div class="meta-info">
<p class="university">${course.institution}</p>
</div>
</article>
<article id="${course.id}"class="course">
<div class="inner-wrapper">
<header class="course-preview">
<a href="${reverse('about_course', args=[course.id])}">
<hgroup>
<h2>${course.title}</h2>
</hgroup>
<div class="info-link">&#x2794;</div>
</a>
</header>
<section class="info">
<div class="cover-image">
<img src="${static.url('images/courses/python.png')}">
</div>
<div class="desc">
<p>An advanced introduction to analog circuits.</p>
</div>
<div class="bottom">
<a href="#" class="university">${course.institution}</a>
<p class="dates"><span class="start">7/23/12</span></p>
</div>
</section>
</div>
<div class="meta-info">
<p class="university">${course.institution}</p>
</div>
</article>
<article id="${course.id}"class="course">
<div class="inner-wrapper">
<header class="course-preview">
<a href="${reverse('about_course', args=[course.id])}">
<hgroup>
<h2>${course.title}</h2>
</hgroup>
<div class="info-link">&#x2794;</div>
</a>
</header>
<section class="info">
<div class="cover-image">
<img src="${static.url('images/courses/space1.jpg')}">
</div>
<div class="desc">
<p>An advanced introduction to analog circuits.</p>
</div>
<div class="bottom">
<a href="#" class="university">${course.institution}</a>
<p class="dates"><span class="start">7/23/12</span></p>
</div>
</section>
</div>
<div class="meta-info">
<p class="university">${course.institution}</p>
</div>
</article>
<article id="${course.id}"class="course">
<div class="inner-wrapper">
<header class="course-preview">
<a href="${reverse('about_course', args=[course.id])}">
<hgroup>
<h2>${course.title}</h2>
</hgroup>
<div class="info-link">&#x2794;</div>
</a>
</header>
<section class="info">
<div class="cover-image">
<img src="${static.url('images/courses/space2.jpg')}">
</div>
<div class="desc">
<p>An advanced introduction to analog circuits.</p>
</div>
<div class="bottom">
<a href="#" class="university">${course.institution}</a>
<p class="dates"><span class="start">7/23/12</span></p>
</div>
</section>
</div>
<div class="meta-info">
<p class="university">${course.institution}</p>
</div>
</article>
<article id="${course.id}"class="course">
<div class="inner-wrapper">
<header class="course-preview">
<a href="${reverse('about_course', args=[course.id])}">
<hgroup>
<h2>${course.title}</h2>
</hgroup>
<div class="info-link">&#x2794;</div>
</a>
</header>
<section class="info">
<div class="cover-image">
<img src="${static.url('images/courses/space4.jpg')}">
</div>
<div class="desc">
<p>An advanced introduction to analog circuits.</p> <p>An advanced introduction to analog circuits.</p>
</div> </div>
<div class="bottom">
<a href="#" class="university">${course.institution}</a>
<p class="dates"><span class="start">7/23/12</span></p>
</div>
</section> </section>
</div> </div>
<div class="meta-info">
<p class="university">${course.institution}</p>
</div>
</article>
<article id="${course.id}"class="course">
<div class="inner-wrapper">
<header class="course-preview">
<a href="${reverse('about_course', args=[course.id])}">
<hgroup>
<h2>${course.title}</h2>
</hgroup>
<div class="info-link">&#x2794;</div>
</a>
</header>
<section class="info">
<div class="cover-image">
<img src="${static.url('images/courses/space3.jpg')}">
</div>
<div class="desc">
<p>An advanced introduction to analog circuits.</p>
</div>
<div class="bottom">
<a href="#" class="university">${course.institution}</a>
<p class="dates"><span class="start">7/23/12</span></p>
</div>
</section>
</div>
<div class="meta-info">
<p class="university">${course.institution}</p>
</div>
</article> </article>
...@@ -4,10 +4,8 @@ ...@@ -4,10 +4,8 @@
<footer> <footer>
<nav> <nav>
<section class="copyright"> <section class="copyright">
<a href="${reverse('root')}" class="logo"> <a href="${reverse('root')}" class="logo"></a>
<img src="${static.url('images/logo.png')}" /> <p>&copy; 2012 edX, <a href="#">some rights reserved.</a></p>
</a>
<p>Copyright &copy; 2012.edX. <a href="#">Some rights reserved.</a></p>
</section> </section>
<ol> <ol>
<li> <li>
......
...@@ -2,9 +2,9 @@ ...@@ -2,9 +2,9 @@
<%inherit file="main.html" /> <%inherit file="main.html" />
<%namespace name='static' file='static_content.html'/> <%namespace name='static' file='static_content.html'/>
<section class="container"> <section class="content-wrapper home">
<section class="home"> <header>
<header> <div class="inner-wrapper">
<section class="video-wrapper"> <section class="video-wrapper">
<div class="video-player"> <div class="video-player">
<div class="video-inner"> <div class="video-inner">
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
<div class="intro"> <div class="intro">
<h1>The Future of Online Education</h1> <h1>The Future of Online Education</h1>
<p> <p>
EdX is a joint partnership between The Massachusetts Institute of Technology (MIT) and Harvard University to offer online learning to millions of people around the world. EdX will offer Harvard and MIT classes online for free. Through this partnership, the institutions aim to extend their collective reach to build a global community of online learners and to improve education. edX is a joint partnership between The Massachusetts Institute of Technology (MIT) and Harvard University to offer online learning to millions of people around the world. edX will offer Harvard and MIT classes online for free. Through this partnership, the institutions aim to extend their collective reach to build a global community of online learners and to improve education.
</p> </p>
</div> </div>
<div class="signup-wrapper"> <div class="signup-wrapper">
...@@ -25,39 +25,42 @@ ...@@ -25,39 +25,42 @@
</section> </section>
</div> </div>
</section> </section>
</header> </div>
</header>
<section class="university-partners">
<ol class="partners">
<li class="partner mit">
<a href="/university_profile.html">
<img src="${static.url('images/mit.png')}" />
<div class="name">
<span>MITx</span>
</div>
</a>
</li>
<li class="partner">
<a href="/university_profile.html">
<img src="${static.url('images/harvard.png')}" />
<div class="name">
<span>HarvardX</span>
</div>
</a>
</li>
<li class="partner">
<a href="/university_profile.html">
<img src="${static.url('images/berkeley.png')}" />
<div class="name">
<span>BerkeleyX</span>
</div>
</a>
</li>
</ol>
</section>
<section class="container">
<section class="highlighted-courses"> <section class="highlighted-courses">
<h2>Explore courses from edX universities</h2> <h2>Explore courses from <span class="lowercase">edX</span> universities</h2>
<section class="university-partners">
<ol class="partners">
<li class="partner mit">
<a href="/university_profile.html">
<img src="${static.url('images/mit.png')}" />
<div class="name">
<span>MITx</span>
</div>
</a>
</li>
<li class="partner">
<a href="/university_profile.html">
<img src="${static.url('images/harvard.png')}" />
<div class="name">
<span>HarvardX</span>
</div>
</a>
</li>
<li class="partner">
<a href="/university_profile.html">
<img src="${static.url('images/berkeley.png')}" />
<div class="name">
<span>BerkeleyX</span>
</div>
</a>
</li>
</ol>
</section>
<section class="courses"> <section class="courses">
%for course in courses: %for course in courses:
<%include file="course.html" args="course=course" /> <%include file="course.html" args="course=course" />
......
<%namespace name='static' file='static_content.html'/>
<%inherit file="main.html" /> <%inherit file="main.html" />
<section class="container jobs"> <section class="container jobs">
...@@ -7,7 +9,7 @@ ...@@ -7,7 +9,7 @@
<section class="company-mission message left"> <section class="company-mission message left">
<div class="inner-wrapper"> <div class="inner-wrapper">
<div class="photo"> <div class="photo">
<img src=""> <img src="${static.url('images/courses/space5.jpg')}">
</div> </div>
<h2>Mission: Educate 1 billion people around the world</h2> <h2>Mission: Educate 1 billion people around the world</h2>
<p>“EdX represents a unique opportunity to improve education on our own campuses through online learning, while simultaneously creating a bold new educational path for millions of learners worldwide,” MIT President Susan Hockfield said.</p> <p>“EdX represents a unique opportunity to improve education on our own campuses through online learning, while simultaneously creating a bold new educational path for millions of learners worldwide,” MIT President Susan Hockfield said.</p>
...@@ -18,7 +20,7 @@ ...@@ -18,7 +20,7 @@
<section class="our-culture message right"> <section class="our-culture message right">
<div class="photo"> <div class="photo">
<img src=""> <img src="${static.url('images/courses/space2.jpg')}">
</div> </div>
<h2>What it's like to work here</h2> <h2>What it's like to work here</h2>
<p>“Harvard and MIT will use these new technologies and the research they will make possible to lead the direction of online learning in a way that benefits our students, our peers, and people across the nation and the globe,” Faust continued.</p> <p>“Harvard and MIT will use these new technologies and the research they will make possible to lead the direction of online learning in a way that benefits our students, our peers, and people across the nation and the globe,” Faust continued.</p>
...@@ -28,7 +30,7 @@ ...@@ -28,7 +30,7 @@
<section class="benefits message left"> <section class="benefits message left">
<div class="photo"> <div class="photo">
<img src=""> <img src="${static.url('images/courses/space3.jpg')}">
</div> </div>
<h2>Mission: Educate 1 billion people around the world</h2> <h2>Mission: Educate 1 billion people around the world</h2>
<p>“EdX represents a unique opportunity to improve education on our own campuses through online learning, while simultaneously creating a bold new educational path for millions of learners worldwide,” MIT President Susan Hockfield said.</p> <p>“EdX represents a unique opportunity to improve education on our own campuses through online learning, while simultaneously creating a bold new educational path for millions of learners worldwide,” MIT President Susan Hockfield said.</p>
......
...@@ -3,63 +3,48 @@ ...@@ -3,63 +3,48 @@
## instead of using settings.COURSE_TITLE ## instead of using settings.COURSE_TITLE
<%namespace name='static' file='static_content.html'/> <%namespace name='static' file='static_content.html'/>
<%! from django.core.urlresolvers import reverse %> <%! from django.core.urlresolvers import reverse %>
<header class="app" aria-label="Global Navigation">
<section class="wrapper">
<a href="${reverse('root')}" class="logo">
<img src="${static.url('images/logo.png')}" />
</a>
<nav class="find-courses">
<ol>
<li class="primary">
<div class="divider"></div>
<a href="${reverse('courses')}">Find Courses</a>
<div class="divider"></div>
</li>
%if not user.is_authenticated():
<li class="secondary">
<a href="${reverse('about_edx')}">About</a>
<a href="#">Blog</a>
<a href="${reverse('jobs')}">Jobs</a>
</li>
%endif
</ol>
</nav>
%if user.is_authenticated(): <header class="global" aria-label="Global Navigation">
<nav class="user"> <nav>
<ol> <h1 class="logo"><a href="${reverse('root')}"></a></h1>
<li class="primary"> <ol class="find-courses">
<div class="divider"></div> <li class="primary">
<a href="${reverse('dashboard')}" class="user-link"> <a href="${reverse('courses')}">Find Courses</a>
<span class="avatar"><img src="${static.url('images/profile.jpg')}" /></span> </li>
${user.username} </ol>
</a>
<div class="divider"></div> %if user.is_authenticated():
<a href="#" class="options">&#9662</a> <ol class="user">
<div class="divider"></div> <li class="primary">
<ol class="user-options"> <a href="${reverse('dashboard')}" class="user-link">
<span class="avatar"><img src="${static.url('images/profile.jpg')}" /></span>
${user.username}
</a>
</li>
<li class="primary">
<a href="#" class="dropdown">&#9662</a>
<ul class="dropdown-menu">
<li><a href="#">Account Settings</a></li> <li><a href="#">Account Settings</a></li>
<li><a href="${reverse('help')}">Help</a></li> <li><a href="${reverse('help')}">Help</a></li>
<li><a href="${reverse('logout')}">Log Out</a></li> <li><a href="${reverse('logout')}">Log Out</a></li>
</ol> </ul>
</li> </li>
</ol> </ol>
</nav>
%else: %else:
<nav class="guest"> <ol class="guest">
<ol> <li class="secondary">
<li class="primary"> <a href="${reverse('about_edx')}">About</a>
<div class="divider"></div> <a href="#">Blog</a>
<a href="#" id="login">Log In</a> <a href="${reverse('jobs')}">Jobs</a>
<div class="divider"></div> <a href="#" id="login">Log In</a>
<a href="#" id="signup">Sign Up</a> </li>
<div class="divider"></div> <li class="primary">
</li> <a href="#" id="signup">Sign Up</a>
</ol> </li>
</nav> </ol>
%endif </nav>
</section> %endif
</header> </header>
%if not user.is_authenticated(): %if not user.is_authenticated():
......
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