Skip to content

E
edx-platform
Commit 42c16953 by Galen Frechette
Options

refines some visual design to course objects, changes university logos on… 

refines some visual design to course objects, changes university logos on homepage, starts adding about pages and layout
parent e729cc32
Showing with 931 additions and 127 deletions
lms/static/images/courses/space2.jpg.REMOVED.git-id 0 → 100644
69017eed8a9ec5b9caf28814cadf01ba69b4b3bc
\ No newline at end of file
lms/static/images/courses/space3.jpg.REMOVED.git-id 0 → 100644
74bca798766449c9f2c87244410ca8fa30d5482e
\ No newline at end of file
lms/static/images/courses/space4.jpg.REMOVED.git-id 0 → 100644
184bae027b6853b575b8de2329f77089bcc87966
\ No newline at end of file
lms/static/images/harvard.png
lms/static/images/harvard.png

22.2 KB | W: | H:

lms/static/images/harvard.png

9.47 KB | W: | H:

lms/static/images/harvard.png
lms/static/images/harvard.png
lms/static/images/harvard.png
lms/static/images/harvard.png
  • 2-up
  • Swipe
  • Onion skin
lms/static/images/mit.png
lms/static/images/mit.png

1.9 KB | W: | H:

lms/static/images/mit.png

5.58 KB | W: | H:

lms/static/images/mit.png
lms/static/images/mit.png
lms/static/images/mit.png
lms/static/images/mit.png
  • 2-up
  • Swipe
  • Onion skin
lms/static/sass/_about.scss
.about { .about {
margin: 40px auto 120px;
> nav {
margin-bottom: 80px;
text-align: center;
width: flex-grid(12);
&::after {
@extend .faded-hr-divider;
content: "";
display: block;
}
a {
border-bottom: 3px solid transparent;
@include inline-block;
letter-spacing: 1px;
margin: 0px 5px;
padding: 20px 10px;
@include transition(all, 0.15s, linear);
text-transform: uppercase;
&:hover, &.active {
border-color: rgb(200,200,200);
color: $base-font-color;
}
}
}
.vision {
display: none;
h1 + hr {
margin-bottom: 80px;
}
.message {
@include clearfix;
margin-bottom: 60px;
padding-bottom: 60px;
position: relative;
hr {
bottom: 0px;
margin: 0px;
position: absolute;
width: 100%;
}
.photo {
background: rgb(255,255,255);
border: 1px solid rgb(210,210,210);
padding: 1px;
width: flex-grid(4);
img {
background: rgb(245,245,245);
display: block;
height: 200px;
width: 100%;
}
}
&.left {
.photo {
float: left;
margin-right: flex-gutter();
}
}
&.right {
h2 {
text-align: right;
}
.photo {
float: right;
margin-left: flex-gutter();
}
}
&:last-child {
margin-bottom: 0px;
}
}
}
.faq {
//display: none;
@include clearfix;
nav.categories {
border-right: 1px solid rgb(220,220,220);
@include box-sizing(border-box);
float: left;
margin-right: flex-gutter();
padding-right: 20px;
width: flex-grid(3);
a {
display: block;
letter-spacing: 1px;
margin-right: -20px;
padding: 10px 20px 10px 0;
text-align: right;
text-transform: uppercase;
&:hover {
background: rgb(245,245,245);
}
}
}
.responses {
float: left;
width: flex-grid(9);
.category {
padding-top: 40px;
&:first-child {
padding-top: 0px;
}
> h2 {
border-bottom: 1px solid rgb(220,220,220);
margin-bottom: 40px;
padding-bottom: 20px;
}
}
.response {
margin-bottom: 40px;
h3 {
font-family: $sans-serif;
font-weight: bold;
margin-bottom: 15px;
}
}
}
}
.press {
display: none;
.press-story {
border-bottom: 1px solid rgb(220,220,220);
@include clearfix;
margin-bottom: 40px;
padding-bottom: 40px;
&:last-child {
border: none;
margin: 0px;
padding: 0px;
}
.article-cover {
background: rgb(255,255,255);
border: 1px solid rgb(120,120,120);
@include box-sizing(border-box);
float: left;
height: 120px;
margin-right: flex-gutter();
overflow: hidden;
width: flex-grid(2);
img {
display: block;
min-height: 100%;
width: 100%;
}
}
.press-info {
float: left;
width: flex-grid(10);
header {
margin-bottom: 15px;
h3 {
font-family: $sans-serif;
font-weight: bold;
}
a {
}
}
}
}
}
.contact {
display: none;
@include clearfix;
margin: 0 auto;
width: flex-grid(10);
.map {
background: rgb(245,245,245);
float: left;
height: 180px;
margin-right: flex-gutter();
width: flex-grid(6);
}
.address {
float: left;
width: flex-grid(6);
}
}
} }
lms/static/sass/_course_info.scss
...@@ -183,9 +183,9 @@ ...@@ -183,9 +183,9 @@
a { a {
border-bottom: 3px solid transparent; border-bottom: 3px solid transparent;
color: $lighter-base-font-color;
@include inline-block; @include inline-block;
font: normal 1.2rem/1.6rem $sans-serif; font: normal 1.2rem/1.6rem $sans-serif;
letter-spacing: 1px;
margin: 0 15px; margin: 0 15px;
padding: 0px 5px 15px; padding: 0px 5px 15px;
text-align: center; text-align: center;
...@@ -196,8 +196,7 @@ ...@@ -196,8 +196,7 @@
} }
&:hover, &.active { &:hover, &.active {
border-color: $pink; border-color: rgb(200,200,200);
//background: rgb(240,240,240);
color: $base-font-color; color: $base-font-color;
} }
} }
......
lms/static/sass/_index.scss
...@@ -120,13 +120,12 @@ ...@@ -120,13 +120,12 @@
.partners { .partners {
font-size: 0em; font-size: 0em;
margin: 0 auto; margin: 0 auto;
padding: 15px 0px; padding: 20px 0px;
text-align: center; text-align: center;
li.partner { li.partner {
@include inline-block; @include inline-block;
margin-right: 20px; padding: 0px 30px;
padding-right: 20px;
position: relative; position: relative;
vertical-align: middle; vertical-align: middle;
...@@ -134,10 +133,10 @@ ...@@ -134,10 +133,10 @@
@extend .faded-vertical-divider; @extend .faded-vertical-divider;
content: ""; content: "";
display: block; display: block;
height: 100px; height: 80px;
right: 0px; right: 0px;
position: absolute; position: absolute;
top: 0px; top: -5px;
width: 1px; width: 1px;
} }
...@@ -145,21 +144,14 @@ ...@@ -145,21 +144,14 @@
@extend .faded-vertical-divider-light; @extend .faded-vertical-divider-light;
content: ""; content: "";
display: block; display: block;
height: 100px; height: 80px;
right: 1px; right: 1px;
position: absolute; position: absolute;
top: 0px; top: -5px;
width: 1px; width: 1px;
} }
&.mit {
padding: 0 35px 0 20px;
}
&:last-child { &:last-child {
margin-right: 0px;
padding-right: 0px;
&::before { &::before {
display: none; display: none;
} }
...@@ -171,7 +163,6 @@ ...@@ -171,7 +163,6 @@
} }
a { a {
opacity: 0.7;
@include transition(all, 0.25s, ease-in-out); @include transition(all, 0.25s, ease-in-out);
&::before { &::before {
...@@ -191,21 +182,28 @@ ...@@ -191,21 +182,28 @@
} }
.name { .name {
color: $base-font-color;
font: 800 italic 2rem/2.2rem $sans-serif;
left: 0px; left: 0px;
position: absolute; position: absolute;
text-align: center; text-align: center;
text-shadow: 0 1px rgba(255,255,255, 0.6);
bottom: -60px; bottom: -60px;
@include transition(all, 0.25s, ease-in-out); @include transition(all, 0.25s, ease-in-out);
vertical-align: middle;
width: 100%; width: 100%;
z-index: 2; z-index: 2;
span {
color: $base-font-color;
font: 800 italic 2rem/2.2rem $sans-serif;
text-shadow: 0 1px rgba(255,255,255, 0.6);
@include transition(all, 0.15s, ease-in-out);
&:hover {
color: $lighter-base-font-color;
}
}
} }
img { img {
max-width: 140px; max-width: 160px;
position: relative; position: relative;
@include transition(all, 0.25s, ease-in-out); @include transition(all, 0.25s, ease-in-out);
vertical-align: middle; vertical-align: middle;
...@@ -213,18 +211,16 @@ ...@@ -213,18 +211,16 @@
} }
&:hover { &:hover {
opacity: 0.9;
&::before { &::before {
opacity: 1; opacity: 1;
} }
.name { .name {
bottom: 30px; bottom: 20px;
} }
img { img {
top: -120px; top: -100px;
} }
} }
} }
......
lms/static/sass/_jobs.scss
...@@ -40,7 +40,7 @@ ...@@ -40,7 +40,7 @@
} }
&.right { &.right {
h2, p { h2 {
text-align: right; text-align: right;
} }
...@@ -64,7 +64,6 @@ ...@@ -64,7 +64,6 @@
border-bottom: 1px solid rgb(220,220,220); border-bottom: 1px solid rgb(220,220,220);
margin-bottom: 60px; margin-bottom: 60px;
padding-bottom: 20px; padding-bottom: 20px;
//text-align: center;
} }
.jobs-sidebar { .jobs-sidebar {
...@@ -93,7 +92,7 @@ ...@@ -93,7 +92,7 @@
a { a {
display: block; display: block;
margin-left: -20px; margin-left: -20px;
padding: 10px 0px 10px 20px; padding: 10px 0 10px 20px;
position: relative; position: relative;
text-transform: uppercase; text-transform: uppercase;
...@@ -111,9 +110,6 @@ ...@@ -111,9 +110,6 @@
&:hover { &:hover {
background: rgb(245,245,245); background: rgb(245,245,245);
//@include background-image(linear-gradient(180deg, rgba(245,245,245, 0) 0%,
//rgba(245,245,245, 1) 80%,
//rgba(245,245,245, 1) 100%));
} }
} }
} }
......
lms/static/sass/_shared_list_of_courses.scss
...@@ -5,14 +5,15 @@ ...@@ -5,14 +5,15 @@
.course { .course {
background: rgb(250,250,250); background: rgb(250,250,250);
border: 1px solid rgb(220,220,220); border: 1px solid rgb(180,180,180);
@include border-radius(2px); @include border-radius(2px);
@include box-sizing(border-box); @include box-sizing(border-box);
@include box-shadow(0 1px 8px 0 rgba(0,0,0, 0.1), inset 0 0 0 1px rgba(255,255,255, 0.9)); @include box-shadow(0 1px 10px 0 rgba(0,0,0, 0.15), inset 0 0 0 1px rgba(255,255,255, 0.9));
float: left; float: left;
font-size: 0em; font-size: 0em;
margin-right: flex-gutter(); margin-right: flex-gutter();
margin-bottom: 25px; margin-bottom: 30px;
position: relative;
width: flex-grid(4); width: flex-grid(4);
@include transition(all, 0.15s, linear); @include transition(all, 0.15s, linear);
...@@ -20,6 +21,27 @@ ...@@ -20,6 +21,27 @@
margin-right: 0; margin-right: 0;
} }
//.meta-info {
//background: rgba(0,0,0, 0.6);
//bottom: 8px;
//border: 1px solid rgba(0,0,0, 0.5);
//@include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.15));
//@include clearfix;
//left: -4px;
//position: absolute;
//@include transition(all, 0.15s, linear);
//p {
//color: rgb(255,255,255);
//font: 300 1.2rem/1.4rem $sans-serif;
//padding: 5px 12px;
//&.university {
//float: left;
//}
//}
//}
.inner-wrapper { .inner-wrapper {
border: 1px solid rgba(255,255,255, 1); border: 1px solid rgba(255,255,255, 1);
height: 100%; height: 100%;
...@@ -36,7 +58,7 @@ ...@@ -36,7 +58,7 @@
z-index: 3; z-index: 3;
> a { > a {
@include background-image(linear-gradient(-90deg, rgba(255,255,255, 0.95), rgba(255,255,255, 0.75))); @include background-image(linear-gradient(-90deg, rgba(255,255,255, 1), rgba(255,255,255, 0.85)));
@include box-shadow(inset 0 -1px 0 0 rgba(255,255,255, 0.2)); @include box-shadow(inset 0 -1px 0 0 rgba(255,255,255, 0.2));
border-bottom: 1px solid rgba(150,150,150, 0.7); border-bottom: 1px solid rgba(150,150,150, 0.7);
display: block; display: block;
...@@ -83,6 +105,10 @@ ...@@ -83,6 +105,10 @@
color: $blue; color: $blue;
opacity: 1; opacity: 1;
} }
h2 {
text-decoration: underline;
}
} }
} }
} }
...@@ -127,7 +153,8 @@ ...@@ -127,7 +153,8 @@
img { img {
display: block; display: block;
min-width: 100%; min-height: 100%;
width: 100%;
} }
} }
...@@ -144,8 +171,8 @@ ...@@ -144,8 +171,8 @@
&:hover { &:hover {
background: rgb(245,245,245); background: rgb(245,245,245);
border-color: rgb(190,190,190); border-color: rgb(170,170,170);
@include box-shadow(0 1px 16px 0 rgba($blue, 0.35)); @include box-shadow(0 1px 16px 0 rgba($blue, 0.4));
.info { .info {
top: -130px; top: -130px;
......
lms/static/sass/application.css
...@@ -404,7 +404,7 @@ a:link, a:visited { ...@@ -404,7 +404,7 @@ a:link, a:visited {
.container:after { .container:after {
clear: both; } clear: both; }
.faded-hr-divider, .horizontal-divider, .modal .inner-wrapper header hr::after, .modal .inner-wrapper form .honor-code-summary hr::after, .course-info .container nav::after, .course-info .details .inner-wrapper > section::after, .course-info .details .course-staff .teacher::after { .faded-hr-divider, .horizontal-divider, .modal .inner-wrapper header hr::after, .modal .inner-wrapper form .honor-code-summary hr::after, .course-info .container nav::after, .course-info .details .inner-wrapper > section::after, .course-info .details .course-staff .teacher::after, .about > nav::after {
background-image: -webkit-linear-gradient(180deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0)); background-image: -webkit-linear-gradient(180deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0));
background-image: -moz-linear-gradient(180deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0)); background-image: -moz-linear-gradient(180deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0));
background-image: -ms-linear-gradient(180deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0)); background-image: -ms-linear-gradient(180deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0));
...@@ -1767,7 +1767,7 @@ header.app { ...@@ -1767,7 +1767,7 @@ header.app {
clear: both; } clear: both; }
.highlighted-courses .courses .course, .find-courses .courses .course { .highlighted-courses .courses .course, .find-courses .courses .course {
background: #fafafa; background: #fafafa;
border: 1px solid #dcdcdc; border: 1px solid #b4b4b4;
-webkit-border-radius: 2px; -webkit-border-radius: 2px;
-moz-border-radius: 2px; -moz-border-radius: 2px;
-ms-border-radius: 2px; -ms-border-radius: 2px;
...@@ -1776,13 +1776,14 @@ header.app { ...@@ -1776,13 +1776,14 @@ header.app {
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
-webkit-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.9); -webkit-box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.9);
-moz-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.9); -moz-box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.9);
box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.9); box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.9);
float: left; float: left;
font-size: 0em; font-size: 0em;
margin-right: 2.024%; margin-right: 2.024%;
margin-bottom: 25px; margin-bottom: 30px;
position: relative;
width: 31.984%; width: 31.984%;
-webkit-transition-property: all; -webkit-transition-property: all;
-moz-transition-property: all; -moz-transition-property: all;
...@@ -1819,11 +1820,11 @@ header.app { ...@@ -1819,11 +1820,11 @@ header.app {
width: 100%; width: 100%;
z-index: 3; } z-index: 3; }
.highlighted-courses .courses .course header.course-preview > a, .find-courses .courses .course header.course-preview > a { .highlighted-courses .courses .course header.course-preview > a, .find-courses .courses .course header.course-preview > a {
background-image: -webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.75)); background-image: -webkit-linear-gradient(-90deg, white, rgba(255, 255, 255, 0.85));
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.75)); background-image: -moz-linear-gradient(-90deg, white, rgba(255, 255, 255, 0.85));
background-image: -ms-linear-gradient(-90deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.75)); background-image: -ms-linear-gradient(-90deg, white, rgba(255, 255, 255, 0.85));
background-image: -o-linear-gradient(-90deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.75)); background-image: -o-linear-gradient(-90deg, white, rgba(255, 255, 255, 0.85));
background-image: linear-gradient(-90deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.75)); background-image: linear-gradient(-90deg, white, rgba(255, 255, 255, 0.85));
-webkit-box-shadow: inset 0 -1px 0 0 rgba(255, 255, 255, 0.2); -webkit-box-shadow: inset 0 -1px 0 0 rgba(255, 255, 255, 0.2);
-moz-box-shadow: inset 0 -1px 0 0 rgba(255, 255, 255, 0.2); -moz-box-shadow: inset 0 -1px 0 0 rgba(255, 255, 255, 0.2);
box-shadow: inset 0 -1px 0 0 rgba(255, 255, 255, 0.2); box-shadow: inset 0 -1px 0 0 rgba(255, 255, 255, 0.2);
...@@ -1869,6 +1870,8 @@ header.app { ...@@ -1869,6 +1870,8 @@ header.app {
.highlighted-courses .courses .course header.course-preview > a:hover h2, .highlighted-courses .courses .course header.course-preview > a:hover p, .highlighted-courses .courses .course header.course-preview > a:hover .info-link, .find-courses .courses .course header.course-preview > a:hover h2, .find-courses .courses .course header.course-preview > a:hover p, .find-courses .courses .course header.course-preview > a:hover .info-link { .highlighted-courses .courses .course header.course-preview > a:hover h2, .highlighted-courses .courses .course header.course-preview > a:hover p, .highlighted-courses .courses .course header.course-preview > a:hover .info-link, .find-courses .courses .course header.course-preview > a:hover h2, .find-courses .courses .course header.course-preview > a:hover p, .find-courses .courses .course header.course-preview > a:hover .info-link {
color: #1d9dd9; color: #1d9dd9;
opacity: 1; } opacity: 1; }
.highlighted-courses .courses .course header.course-preview > a:hover h2, .find-courses .courses .course header.course-preview > a:hover h2 {
text-decoration: underline; }
.highlighted-courses .courses .course .info, .find-courses .courses .course .info { .highlighted-courses .courses .course .info, .find-courses .courses .course .info {
height: 310px; height: 310px;
left: 0px; left: 0px;
...@@ -1942,7 +1945,8 @@ header.app { ...@@ -1942,7 +1945,8 @@ header.app {
width: 100%; } width: 100%; }
.highlighted-courses .courses .course .info .cover-image img, .find-courses .courses .course .info .cover-image img { .highlighted-courses .courses .course .info .cover-image img, .find-courses .courses .course .info .cover-image img {
display: block; display: block;
min-width: 100%; } min-height: 100%;
width: 100%; }
.highlighted-courses .courses .course .info .desc, .find-courses .courses .course .info .desc { .highlighted-courses .courses .course .info .desc, .find-courses .courses .course .info .desc {
background: white; background: white;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
...@@ -1954,10 +1958,10 @@ header.app { ...@@ -1954,10 +1958,10 @@ header.app {
width: 100%; } width: 100%; }
.highlighted-courses .courses .course:hover, .find-courses .courses .course:hover { .highlighted-courses .courses .course:hover, .find-courses .courses .course:hover {
background: #f5f5f5; background: #f5f5f5;
border-color: #bebebe; border-color: #aaaaaa;
-webkit-box-shadow: 0 1px 16px 0 rgba(29, 157, 217, 0.35); -webkit-box-shadow: 0 1px 16px 0 rgba(29, 157, 217, 0.4);
-moz-box-shadow: 0 1px 16px 0 rgba(29, 157, 217, 0.35); -moz-box-shadow: 0 1px 16px 0 rgba(29, 157, 217, 0.4);
box-shadow: 0 1px 16px 0 rgba(29, 157, 217, 0.35); } box-shadow: 0 1px 16px 0 rgba(29, 157, 217, 0.4); }
.highlighted-courses .courses .course:hover .info, .find-courses .courses .course:hover .info { .highlighted-courses .courses .course:hover .info, .find-courses .courses .course:hover .info {
top: -130px; } top: -130px; }
.highlighted-courses .courses .course:hover .info .meta-info, .find-courses .courses .course:hover .info .meta-info { .highlighted-courses .courses .course:hover .info .meta-info, .find-courses .courses .course:hover .info .meta-info {
...@@ -2545,7 +2549,7 @@ header.app { ...@@ -2545,7 +2549,7 @@ header.app {
.home .university-partners .partners { .home .university-partners .partners {
font-size: 0em; font-size: 0em;
margin: 0 auto; margin: 0 auto;
padding: 15px 0px; padding: 20px 0px;
text-align: center; } text-align: center; }
.home .university-partners .partners li.partner { .home .university-partners .partners li.partner {
display: -moz-inline-box; display: -moz-inline-box;
...@@ -2555,37 +2559,30 @@ header.app { ...@@ -2555,37 +2559,30 @@ header.app {
zoom: 1; zoom: 1;
*display: inline; *display: inline;
*vertical-align: auto; *vertical-align: auto;
margin-right: 20px; padding: 0px 30px;
padding-right: 20px;
position: relative; position: relative;
vertical-align: middle; } vertical-align: middle; }
.home .university-partners .partners li.partner::before { .home .university-partners .partners li.partner::before {
content: ""; content: "";
display: block; display: block;
height: 100px; height: 80px;
right: 0px; right: 0px;
position: absolute; position: absolute;
top: 0px; top: -5px;
width: 1px; } width: 1px; }
.home .university-partners .partners li.partner::after { .home .university-partners .partners li.partner::after {
content: ""; content: "";
display: block; display: block;
height: 100px; height: 80px;
right: 1px; right: 1px;
position: absolute; position: absolute;
top: 0px; top: -5px;
width: 1px; } width: 1px; }
.home .university-partners .partners li.partner.mit { .home .university-partners .partners li.partner:last-child::before {
padding: 0 35px 0 20px; } display: none; }
.home .university-partners .partners li.partner:last-child { .home .university-partners .partners li.partner:last-child::after {
margin-right: 0px; display: none; }
padding-right: 0px; }
.home .university-partners .partners li.partner:last-child::before {
display: none; }
.home .university-partners .partners li.partner:last-child::after {
display: none; }
.home .university-partners .partners a { .home .university-partners .partners a {
opacity: 0.7;
-webkit-transition-property: all; -webkit-transition-property: all;
-moz-transition-property: all; -moz-transition-property: all;
-ms-transition-property: all; -ms-transition-property: all;
...@@ -2644,12 +2641,9 @@ header.app { ...@@ -2644,12 +2641,9 @@ header.app {
top: 50%; top: 50%;
z-index: 1; } z-index: 1; }
.home .university-partners .partners a .name { .home .university-partners .partners a .name {
color: #3c3c3c;
font: 800 italic 2rem/2.2rem "Open Sans", Verdana, Geneva, sans-serif;
left: 0px; left: 0px;
position: absolute; position: absolute;
text-align: center; text-align: center;
text-shadow: 0 1px rgba(255, 255, 255, 0.6);
bottom: -60px; bottom: -60px;
-webkit-transition-property: all; -webkit-transition-property: all;
-moz-transition-property: all; -moz-transition-property: all;
...@@ -2671,11 +2665,36 @@ header.app { ...@@ -2671,11 +2665,36 @@ header.app {
-ms-transition-delay: 0; -ms-transition-delay: 0;
-o-transition-delay: 0; -o-transition-delay: 0;
transition-delay: 0; transition-delay: 0;
vertical-align: middle;
width: 100%; width: 100%;
z-index: 2; } z-index: 2; }
.home .university-partners .partners a .name span {
color: #3c3c3c;
font: 800 italic 2rem/2.2rem "Open Sans", Verdana, Geneva, sans-serif;
text-shadow: 0 1px rgba(255, 255, 255, 0.6);
-webkit-transition-property: all;
-moz-transition-property: all;
-ms-transition-property: all;
-o-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.15s;
-moz-transition-duration: 0.15s;
-ms-transition-duration: 0.15s;
-o-transition-duration: 0.15s;
transition-duration: 0.15s;
-webkit-transition-timing-function: ease-in-out;
-moz-transition-timing-function: ease-in-out;
-ms-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
-ms-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0; }
.home .university-partners .partners a .name span:hover {
color: #a0a0a0; }
.home .university-partners .partners a img { .home .university-partners .partners a img {
max-width: 140px; max-width: 160px;
position: relative; position: relative;
-webkit-transition-property: all; -webkit-transition-property: all;
-moz-transition-property: all; -moz-transition-property: all;
...@@ -2699,14 +2718,12 @@ header.app { ...@@ -2699,14 +2718,12 @@ header.app {
transition-delay: 0; transition-delay: 0;
vertical-align: middle; vertical-align: middle;
z-index: 2; } z-index: 2; }
.home .university-partners .partners a:hover { .home .university-partners .partners a:hover::before {
opacity: 0.9; } opacity: 1; }
.home .university-partners .partners a:hover::before { .home .university-partners .partners a:hover .name {
opacity: 1; } bottom: 20px; }
.home .university-partners .partners a:hover .name { .home .university-partners .partners a:hover img {
bottom: 30px; } top: -100px; }
.home .university-partners .partners a:hover img {
top: -120px; }
.home .highlighted-courses { .home .highlighted-courses {
border-bottom: 1px solid #d2d2d2; border-bottom: 1px solid #d2d2d2;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
...@@ -3737,7 +3754,6 @@ nav.course-material { ...@@ -3737,7 +3754,6 @@ nav.course-material {
display: none; } display: none; }
.course-info .container nav a { .course-info .container nav a {
border-bottom: 3px solid transparent; border-bottom: 3px solid transparent;
color: #a0a0a0;
display: -moz-inline-box; display: -moz-inline-box;
-moz-box-orient: vertical; -moz-box-orient: vertical;
display: inline-block; display: inline-block;
...@@ -3746,6 +3762,7 @@ nav.course-material { ...@@ -3746,6 +3762,7 @@ nav.course-material {
*display: inline; *display: inline;
*vertical-align: auto; *vertical-align: auto;
font: normal 1.2rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif; font: normal 1.2rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif;
letter-spacing: 1px;
margin: 0 15px; margin: 0 15px;
padding: 0px 5px 15px; padding: 0px 5px 15px;
text-align: center; text-align: center;
...@@ -3753,7 +3770,7 @@ nav.course-material { ...@@ -3753,7 +3770,7 @@ nav.course-material {
.course-info .container nav a:first-child { .course-info .container nav a:first-child {
margin-left: 0px; } margin-left: 0px; }
.course-info .container nav a:hover, .course-info .container nav a.active, .course-info .container nav.sequence-nav ol li a.seq_video_active, .course-info .container nav.sequence-nav ol li a.seq_other_active, .course-info .container nav.sequence-nav ol li a.seq_vertical_active, .course-info .container nav.sequence-nav ol li a.seq_problem_active { .course-info .container nav a:hover, .course-info .container nav a.active, .course-info .container nav.sequence-nav ol li a.seq_video_active, .course-info .container nav.sequence-nav ol li a.seq_other_active, .course-info .container nav.sequence-nav ol li a.seq_vertical_active, .course-info .container nav.sequence-nav ol li a.seq_problem_active {
border-color: #b62568; border-color: #c8c8c8;
color: #3c3c3c; } color: #3c3c3c; }
.course-info .container h2 { .course-info .container h2 {
color: #a0a0a0; color: #a0a0a0;
...@@ -3907,7 +3924,7 @@ nav.course-material { ...@@ -3907,7 +3924,7 @@ nav.course-material {
.jobs .message.left .photo { .jobs .message.left .photo {
float: left; float: left;
margin-right: 2.024%; } margin-right: 2.024%; }
.jobs .message.right h2, .jobs .message.right p { .jobs .message.right h2 {
text-align: right; } text-align: right; }
.jobs .message.right .photo { .jobs .message.right .photo {
float: right; float: right;
...@@ -3954,7 +3971,7 @@ nav.course-material { ...@@ -3954,7 +3971,7 @@ nav.course-material {
.jobs .jobs-wrapper .jobs-sidebar nav ol li a { .jobs .jobs-wrapper .jobs-sidebar nav ol li a {
display: block; display: block;
margin-left: -20px; margin-left: -20px;
padding: 10px 0px 10px 20px; padding: 10px 0 10px 20px;
position: relative; position: relative;
text-transform: uppercase; } text-transform: uppercase; }
.jobs .jobs-wrapper .jobs-sidebar nav ol li a::after { .jobs .jobs-wrapper .jobs-sidebar nav ol li a::after {
...@@ -3990,6 +4007,191 @@ nav.course-material { ...@@ -3990,6 +4007,191 @@ nav.course-material {
font-weight: bold; font-weight: bold;
margin-bottom: 15px; } margin-bottom: 15px; }
.about {
margin: 40px auto 120px; }
.about > nav {
margin-bottom: 80px;
text-align: center;
width: 100%; }
.about > nav::after {
content: "";
display: block; }
.about > nav a {
border-bottom: 3px solid transparent;
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
letter-spacing: 1px;
margin: 0px 5px;
padding: 20px 10px;
-webkit-transition-property: all;
-moz-transition-property: all;
-ms-transition-property: all;
-o-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.15s;
-moz-transition-duration: 0.15s;
-ms-transition-duration: 0.15s;
-o-transition-duration: 0.15s;
transition-duration: 0.15s;
-webkit-transition-timing-function: linear;
-moz-transition-timing-function: linear;
-ms-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
-ms-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0;
text-transform: uppercase; }
.about > nav a:hover, .about > nav a.active, .about > nav nav.sequence-nav ol li a.seq_video_active, nav.sequence-nav ol li .about > nav a.seq_video_active, .about > nav nav.sequence-nav ol li a.seq_other_active, nav.sequence-nav ol li .about > nav a.seq_other_active, .about > nav nav.sequence-nav ol li a.seq_vertical_active, nav.sequence-nav ol li .about > nav a.seq_vertical_active, .about > nav nav.sequence-nav ol li a.seq_problem_active, nav.sequence-nav ol li .about > nav a.seq_problem_active {
border-color: #c8c8c8;
color: #3c3c3c; }
.about .vision {
display: none; }
.about .vision h1 + hr {
margin-bottom: 80px; }
.about .vision .message {
zoom: 1;
margin-bottom: 60px;
padding-bottom: 60px;
position: relative; }
.about .vision .message:before, .about .vision .message:after {
content: "";
display: table; }
.about .vision .message:after {
clear: both; }
.about .vision .message hr {
bottom: 0px;
margin: 0px;
position: absolute;
width: 100%; }
.about .vision .message .photo {
background: white;
border: 1px solid #d2d2d2;
padding: 1px;
width: 31.984%; }
.about .vision .message .photo img {
background: #f5f5f5;
display: block;
height: 200px;
width: 100%; }
.about .vision .message.left .photo {
float: left;
margin-right: 2.024%; }
.about .vision .message.right h2 {
text-align: right; }
.about .vision .message.right .photo {
float: right;
margin-left: 2.024%; }
.about .vision .message:last-child {
margin-bottom: 0px; }
.about .faq {
zoom: 1; }
.about .faq:before, .about .faq:after {
content: "";
display: table; }
.about .faq:after {
clear: both; }
.about .faq nav.categories {
border-right: 1px solid #dcdcdc;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
float: left;
margin-right: 2.024%;
padding-right: 20px;
width: 23.482%; }
.about .faq nav.categories a {
display: block;
letter-spacing: 1px;
margin-right: -20px;
padding: 10px 20px 10px 0;
text-align: right;
text-transform: uppercase; }
.about .faq nav.categories a:hover {
background: #f5f5f5; }
.about .faq .responses {
float: left;
width: 74.494%; }
.about .faq .responses .category {
padding-top: 40px; }
.about .faq .responses .category:first-child {
padding-top: 0px; }
.about .faq .responses .category > h2 {
border-bottom: 1px solid #dcdcdc;
margin-bottom: 40px;
padding-bottom: 20px; }
.about .faq .responses .response {
margin-bottom: 40px; }
.about .faq .responses .response h3 {
font-family: "Open Sans", Verdana, Geneva, sans-serif;
font-weight: bold;
margin-bottom: 15px; }
.about .press {
display: none; }
.about .press .press-story {
border-bottom: 1px solid #dcdcdc;
zoom: 1;
margin-bottom: 40px;
padding-bottom: 40px; }
.about .press .press-story:before, .about .press .press-story:after {
content: "";
display: table; }
.about .press .press-story:after {
clear: both; }
.about .press .press-story:last-child {
border: none;
margin: 0px;
padding: 0px; }
.about .press .press-story .article-cover {
background: white;
border: 1px solid #787878;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
float: left;
height: 120px;
margin-right: 2.024%;
overflow: hidden;
width: 14.98%; }
.about .press .press-story .article-cover img {
display: block;
min-height: 100%;
width: 100%; }
.about .press .press-story .press-info {
float: left;
width: 82.996%; }
.about .press .press-story .press-info header {
margin-bottom: 15px; }
.about .press .press-story .press-info header h3 {
font-family: "Open Sans", Verdana, Geneva, sans-serif;
font-weight: bold; }
.about .contact {
display: none;
zoom: 1;
margin: 0 auto;
width: 82.996%; }
.about .contact:before, .about .contact:after {
content: "";
display: table; }
.about .contact:after {
clear: both; }
.about .contact .map {
background: #f5f5f5;
float: left;
height: 180px;
margin-right: 2.024%;
width: 48.988%; }
.about .contact .address {
float: left;
width: 48.988%; }
html { html {
height: 100%; height: 100%;
max-height: 100%; } max-height: 100%; }
......
lms/templates/about.html
<%namespace name='static' file='static_content.html'/>
<%inherit file="main.html" /> <%inherit file="main.html" />
<h1>About Us</h1> <section class="container about">
<nav>
<a href="#" class="active" >Vision</a>
<a href="#">Faq</a>
<a href="#">Press</a>
<a href="#">Contact</a>
</nav>
<section class="vision">
<section class="company-mission message left">
<div class="inner-wrapper">
<div class="photo">
<img src="">
</div>
<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>Harvard President Drew Faust said, “edX gives Harvard and MIT an unprecedented opportunity to dramatically extend our collective reach by conducting groundbreaking research into effective education and by extending online access to quality higher education.”
</div>
<hr class="fade-right-hr-divider">
</section>
<section class="our-culture message right">
<div class="photo">
<img src="">
</div>
<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>[fast-moving not-for-profit startup][institutional backing, funding, benefits, and stability][industry salaries]</p>
<hr class="fade-left-hr-divider">
</section>
<section class="benefits message left">
<div class="photo">
<img src="">
</div>
<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>Harvard President Drew Faust said, “edX gives Harvard and MIT an unprecedented opportunity to dramatically extend our collective reach by conducting groundbreaking research into effective education and by extending online access to quality higher education.”
</section>
</section>
<section class="faq">
<nav class="categories">
<a href="#the-orginization">The orginization</a>
<a href="#technology-platform">Technology Platform</a>
<a href="#learning-objectives">Learning Objectives</a>
<a href="#the-students">The Students</a>
</nav>
<section class="responses">
<section id="the-orginization" class="category">
<h2>The Orginization</h2>
<article class="response">
<h3>What is edX?</h3>
<p>An organization established by MIT and Harvard that will develop an open-source technology platform to deliver online courses. EdX will support Harvard and MIT faculty in conducting research on teaching and learning on campus through tools that enrich classroom and laboratory experiences. At the same time, edX also will reach learners around the world through online course materials. The edX website will begin by hosting MITx and Harvardx content, with the goal of aping content from other universities interested in joining the platform. <!-- EdX will also support the Harvard and MIT faculty in conducting research on teaching and learning.--></p>
</article>
<article class="response">
<h3>What are MITx and Harvardx?</h3>
<p>Portfolios of MIT and Harvard online courses offered to learners around the world through edX. </p>
</article>
<article class="response">
<h3>What technology will edX use?</h3>
<p>An open-source online learning platform that will feature teaching designed specifically for the web. Features will include: self-paced learning, online discussion groups, wiki-based collaborative learning, assessment of learning as a student progresses through a course, and online laboratories. The platform will also serve as a laboratory from which data will be gathered to better understand how students learn. Because it is open source, the platform will be continuously improved.</p>
</article>
<article class="response">
<h3>Is there anything innovative about the online technology?</h3>
<p>Yes. It will move beyond the standard model of online education that relies on watching video content and will offer an interactive experience for students. And the technology will be open source; other universities will be able to leverage the innovative technology to create their own online offerings.</p>
</article>
<article class="response">
<h3>Why are MIT and Harvard doing this?</h3>
<p>To improve education on campus and around the world:</p>
<ul>
<li>
<p>On campus, edX research will enhance our understanding of how students learn and how technologies can best be used as part of our larger efforts to improve teaching and learning.</p>
</li>
<li>
<p>Beyond our campuses, edX will expand access to education, allow for certificates of mastery to be earned by able learners, and make the open source platform available to other institutions.</p>
</li>
</ul>
</article>
</section>
<section id="technology-platform" class="category">
<h2>Technology Platform</h2>
<article class="response">
<h3>Why did Harvard and MIT decide to partner with each other?</h3>
<p>We share a vision for greater access to education. Based on our long history of collaboration, we know we can leverage our strengths to best serve the world.</p>
</article>
<article class="response">
<h3>How is this different from what other universities are doing online?</h3>
<p>EdX will be entirely our universities&#8217; shared educational missions. Also, a primary goal of edX is to improve teaching and learning on campus by supporting faculty from both universities in conducting significant research on how students learn. </p>
</article>
<article class="response">
<h3>Who will lead edX?</h3>
<p>EdX is a priority for the leadership of both Harvard and MIT, and it will be governed by a board made up of key leaders from both institutions, appointed by each university&#8217;s president. MIT Professor of Electrical Engineering and Computer Science Anant Agarwal will be the initial President of edX and will report to the board.</p>
</article>
<article class="response">
<h3>Does the effort have a staff?</h3>
<p>EdX is a significant undertaking that will require significant resources. The full scope of the staff has not been determined, but there will be a dedicated staff to the initiative.</p>
</article>
</section>
<section id="learning-objectives" class="category">
<h2>Learning Objectives</h2>
<article class="response">
<h3>Who can take edX courses? Will there be an admissions process?</h3>
<p>EdX will be available to anyone in the world with an internet connection, and in general, there will not be an admissions process. For a modest fee, and as determined by the edX board, MIT and Harvard, credentials will be granted only to students who earn them by demonstrating mastery of the material of a subject.</p>
</article>
<article class="response">
<h3>Will the certificates be awarded by Harvard and/or MIT?</h3>
<p>As determined by the edX board, MIT and Harvard, online learners who demonstrate mastery of subjects could earn a certificate of completion, but such certificates would not be issued under the name Harvard or MIT. </p>
</article>
<article class="response">
<h3>What will the scope of the online courses be? How many? Which faculty? </h3>
<p>Our goal is to offer a wide variety of courses across disciplines.</p>
</article>
<article class="response">
<h3>Will Harvard and MIT students be able to take these courses for credit?</h3>
<p>No. MITx and Harvardx courses will not be offered for credit at either university. The online content will be used to extend and enrich on campus courses.</p>
</article>
</section>
<section id="the-students" class="category">
<h2>The Students</h2>
<article class="response">
<h3>How will success be measured?</h3>
<p>Progress in student learning research and the demand for online courses will both be measured as indications of success. However, a plan for measuring the full success of edX will be developed in consultation with faculty from MIT and Harvard.</p>
</article>
<article class="response">
<h3>Who is the learner? Domestic or international? Age range?</h3>
<p>Improving teaching and learning for students on our campuses is one of our primary goals. Beyond that, we don&#8217;t have a target group of potential learners, as the goal is to make these courses available to anyone in the world &#8211; from any demographic &#8211; who has interest in advancing their own knowledge. The only requirement is to have a computer with an internet connection.</p>
</article>
<article class="response">
<h3>Many institutions are partnering in this space. Is the MIT/Harvard partnership exclusive? Will other institutions be able to collaborate with edX?</h3>
<p>It is our intention that over time other universities will join MIT and Harvard in offering courses on the edX platform. The gathering of many universities&#8217; educational content together on one site will enable learners worldwide to access the course content of any participating university from a single website, and to use a set of online educational tools shared by all participating universities. </p>
</article>
<article class="response">
<h3>Will MIT and Harvard standards apply here?</h3>
<p>The reach changes exponentially, but the rigor remains the same.</p>
</article>
<article class="response">
<h3>How do you intend to test whether this approach is improving learning?</h3>
<p>Both institutions have assembled faculty who will look at data collection and analytical tools for assessing the results.</p>
</article>
</section>
</section>
</section>
<section class="press">
<article class="press-story">
<div class="article-cover">
<img src="${static.url('images/courses/circuits.jpeg')}" />
</div>
<div class="press-info">
<header>
<h3>Online Classes Cut Costs, But Do They Dilute Brands?</h3>
<a href="http://www.npr.org/2012/07/02/156122748/online-classes-cut-costs-but-do-they-dilute-brands">http://n.pr/Lt5ydM</a>
</header>
<p>"You know this is the Wild West. There's a lot of things we have to figure out," Agarwal says. "And you know if anybody says they know exactly what they're doing, I think that would be a far cry from reality."</p>
</div>
</article>
<article class="press-story">
<div class="article-cover">
<img src="${static.url('images/courses/circuits.jpeg')}" />
</div>
<div class="press-info">
<header>
<h3>Online Classes Cut Costs, But Do They Dilute Brands?</h3>
<a href="http://www.npr.org/2012/07/02/156122748/online-classes-cut-costs-but-do-they-dilute-brands">http://n.pr/Lt5ydM</a>
</header>
<p>"You know this is the Wild West. There's a lot of things we have to figure out," Agarwal says. "And you know if anybody says they know exactly what they're doing, I think that would be a far cry from reality."</p>
</div>
</article>
<article class="press-story">
<div class="article-cover">
<img src="${static.url('images/courses/circuits.jpeg')}" />
</div>
<div class="press-info">
<header>
<h3>Online Classes Cut Costs, But Do They Dilute Brands?</h3>
<a href="http://www.npr.org/2012/07/02/156122748/online-classes-cut-costs-but-do-they-dilute-brands">http://n.pr/Lt5ydM</a>
</header>
<p>"You know this is the Wild West. There's a lot of things we have to figure out," Agarwal says. "And you know if anybody says they know exactly what they're doing, I think that would be a far cry from reality."</p>
</div>
</article>
<article class="press-story">
<div class="article-cover">
<img src="${static.url('images/courses/circuits.jpeg')}" />
</div>
<div class="press-info">
<header>
<h3>Online Classes Cut Costs, But Do They Dilute Brands?</h3>
<a href="http://www.npr.org/2012/07/02/156122748/online-classes-cut-costs-but-do-they-dilute-brands">http://n.pr/Lt5ydM</a>
</header>
<p>"You know this is the Wild West. There's a lot of things we have to figure out," Agarwal says. "And you know if anybody says they know exactly what they're doing, I think that would be a far cry from reality."</p>
</div>
</article>
</section>
<section class="contact">
<div class="map">
</div>
<div class="address">
Suggest a Feature
Suggest a Topic
Report a Problem
Ask the Community
Send Thanks
Submit a Comment
Mailing Address
</div>
</section>
</section>
lms/templates/course.html
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
<p class="dates"><span class="start">7/23/12</span> &rarr; <span class="end">12/15/12</span></p> <p class="dates"><span class="start">7/23/12</span> &rarr; <span class="end">12/15/12</span></p>
</div> </div>
<div class="cover-image"> <div class="cover-image">
<img src="${static.url('images/history.png')}"> <img src="${static.url('images/courses/history.png')}">
</div> </div>
<div class="desc"> <div class="desc">
<p>An advanced introduction to analog circuits.</p> <p>An advanced introduction to analog circuits.</p>
...@@ -30,29 +30,152 @@ ...@@ -30,29 +30,152 @@
</article> </article>
%endfor %endfor
<!-- <article id="${course.id}"class="course">
-<article class="course"> <div class="inner-wrapper">
- <a href="/course_info"> <header class="course-preview">
- <div class="cover"> <a href="${reverse('about_course', args=[course.id])}">
- <div class="shade"></div> <hgroup>
- <div class="arrow"></div> <h2>${course.title}</h2>
- <img src="${static.url('images/history.png')}" /> </hgroup>
- </div> <div class="info-link">&#x2794;</div>
- <section class="info"> </a>
- <hgroup> </header>
- <h2>${course.title}</h2> <section class="info">
- <p>${",".join(course.instructors)} &mdash; ${course.institution}</p> <div class="meta-info">
- <p>${course.id}</p> <p class="university">${course.institution}</p>
- <p><a href="courses/${course.id}/info">courseware</a></p> <p class="dates"><span class="start">7/23/12</span> &rarr; <span class="end">12/15/12</span></p>
- </hgroup> </div>
- <div class="edit">Register</div> <div class="cover-image">
- <section class="meta"> <img src="${static.url('images/courses/math.png')}">
- <div class="dates"> </div>
- <p>Starts: <time>6/10/12</time></p> <div class="desc">
- <p>Ends: <time>9/23/12</time></p> <p>An advanced introduction to analog circuits.</p>
- </div> </div>
- </section> </section>
- </section> </div>
- </a> </article>
-</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="meta-info">
<p class="university">${course.institution}</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">
<img src="${static.url('images/courses/python.png')}">
</div>
<div class="desc">
<p>An advanced introduction to analog circuits.</p>
</div>
</section>
</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="meta-info">
<p class="university">${course.institution}</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">
<img src="${static.url('images/courses/space1.jpg')}">
</div>
<div class="desc">
<p>An advanced introduction to analog circuits.</p>
</div>
</section>
</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="meta-info">
<p class="university">${course.institution}</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">
<img src="${static.url('images/courses/space2.jpg')}">
</div>
<div class="desc">
<p>An advanced introduction to analog circuits.</p>
</div>
</section>
</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="meta-info">
<p class="university">${course.institution}</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">
<img src="${static.url('images/courses/space4.jpg')}">
</div>
<div class="desc">
<p>An advanced introduction to analog circuits.</p>
</div>
</section>
</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="meta-info">
<p class="university">${course.institution}</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">
<img src="${static.url('images/courses/space3.jpg')}">
</div>
<div class="desc">
<p>An advanced introduction to analog circuits.</p>
</div>
</section>
</div>
</article>
lms/templates/index.html
...@@ -29,22 +29,28 @@ ...@@ -29,22 +29,28 @@
<section class="university-partners"> <section class="university-partners">
<ol class="partners"> <ol class="partners">
<li class="partner"> <li class="partner mit">
<a href="/university_profile.html"> <a href="/university_profile.html">
<img src="${static.url('images/berkeley_bw.png')}" /> <img src="${static.url('images/mit.png')}" />
<div class="name">BerkeleyX</div> <div class="name">
<span>MITx</span>
</div>
</a> </a>
</li> </li>
<li class="partner mit"> <li class="partner">
<a href="/university_profile.html"> <a href="/university_profile.html">
<img src="${static.url('images/mit_bw.png')}" /> <img src="${static.url('images/harvard.png')}" />
<div class="name">MITx</div> <div class="name">
<span>HarvardX</span>
</div>
</a> </a>
</li> </li>
<li class="partner"> <li class="partner">
<a href="/university_profile.html"> <a href="/university_profile.html">
<img src="${static.url('images/harvard_bw.png')}" /> <img src="${static.url('images/berkeley.png')}" />
<div class="name">HarvardX</div> <div class="name">
<span>BerkeleyX</span>
</div>
</a> </a>
</li> </li>
</ol> </ol>
......
lms/templates/portal/course_about.html
...@@ -93,7 +93,7 @@ ...@@ -93,7 +93,7 @@
<section class="course-sidebar"> <section class="course-sidebar">
<div class="media"> <div class="media">
<div class="hero"> <div class="hero">
<img src="${static.url('images/history.png')}" /> <img src="${static.url('images/courses/circuits.jpeg')}" />
<div class="play-intro"></div> <div class="play-intro"></div>
</div> </div>
<%include file="../video_modal.html" /> <%include file="../video_modal.html" />
......
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