Skip to content

E
edx-platform
Commit c4b6cb00 by Galen Frechette
Options

updates and imporves design of the home page header

parent 76746938
Showing with 551 additions and 568 deletions
lms/static/sass/_course_about.scss
...@@ -10,21 +10,21 @@ ...@@ -10,21 +10,21 @@
@include box-shadow(0 1px 80px 0 rgba(0,0,0, 0.5)); @include box-shadow(0 1px 80px 0 rgba(0,0,0, 0.5));
border-bottom: 1px solid rgb(100,100,100); border-bottom: 1px solid rgb(100,100,100);
@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));
height: 280px;
margin-top: -69px; margin-top: -69px;
padding-top: 150px;
overflow: hidden; overflow: hidden;
padding: 134px 0px 60px;
position: relative; position: relative;
width: 100%; width: 100%;
.intro-inner-wrapper { .intro-inner-wrapper {
background: rgba(255,255,255, 0.9); background: rgba(255,255,255, 0.93);
border: 1px solid rgb(100,100,100); border: 1px solid rgb(100,100,100);
@include box-shadow(0 4px 25px 0 rgba(0,0,0, 0.5)); @include box-shadow(0 4px 25px 0 rgba(0,0,0, 0.5));
@include box-sizing(border-box); @include box-sizing(border-box);
@include clearfix; @include clearfix;
margin: 0 auto; margin: 0 auto;
max-width: 1200px; max-width: 1200px;
padding: 0px 10px;
position: relative; position: relative;
width: grid-width(12); width: grid-width(12);
z-index: 2; z-index: 2;
......
lms/static/sass/_courses.scss
...@@ -8,6 +8,7 @@ ...@@ -8,6 +8,7 @@
background-size: cover; background-size: cover;
border-bottom: 1px solid rgb(100,100,100); border-bottom: 1px solid rgb(100,100,100);
@include box-shadow(inset 0 -1px 8px 0 rgba(0,0,0, 0.2), inset 0 1px 12px 0 rgba(0,0,0, 0.3)); @include box-shadow(inset 0 -1px 8px 0 rgba(0,0,0, 0.2), inset 0 1px 12px 0 rgba(0,0,0, 0.3));
height: 430px;
margin-top: -69px; margin-top: -69px;
width: 100%; width: 100%;
...@@ -15,26 +16,13 @@ ...@@ -15,26 +16,13 @@
height: 120px; height: 120px;
margin: 0 auto; margin: 0 auto;
max-width: 1200px; max-width: 1200px;
overflow: hidden; padding-top: 150px;
padding: 154px 0px 80px;
position: relative; position: relative;
text-align: center; text-align: center;
width: flex-grid(12); width: flex-grid(12);
&::before {
@include background-image(radial-gradient(50% 50%, circle closest-side, rgba(255,255,255, 1) 0%, rgba(255,255,255, 0) 100%));
bottom: -300px;
content: "";
display: none;
height: 600px;
margin: 0 auto;
position: absolute;
width: 100%;
z-index: 1;
}
> hgroup { > hgroup {
background: rgba(255,255,255, 0.9); background: rgba(255,255,255, 0.93);
border: 1px solid rgb(100,100,100); border: 1px solid rgb(100,100,100);
@include box-shadow(0 4px 25px 0 rgba(0,0,0, 0.5)); @include box-shadow(0 4px 25px 0 rgba(0,0,0, 0.5));
padding: 20px 30px; padding: 20px 30px;
......
lms/static/sass/_home.scss
...@@ -8,239 +8,227 @@ ...@@ -8,239 +8,227 @@
border-bottom: 1px solid rgb(80,80,80); border-bottom: 1px solid rgb(80,80,80);
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.9), inset 0 -1px 5px 0 rgba(0,0,0, 0.1)); @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.9), inset 0 -1px 5px 0 rgba(0,0,0, 0.1));
@include clearfix; @include clearfix;
height: 430px;
margin-top: -69px; margin-top: -69px;
overflow: hidden; overflow: hidden;
padding: 149px 0px 90px; padding: 0px;
width: flex-grid(12); width: flex-grid(12);
.outer-wrapper { .outer-wrapper {
@extend .animation-home-header-pop-up; @extend .animation-home-header-pop-up;
max-width: 1200px;
margin: 0 auto; margin: 0 auto;
padding: 0 10px; padding: 200px 10px 0px;
position: relative; position: relative;
text-align: center; width: grid-width(12);
&:hover {
.main-cta {
@include box-shadow(0 1px 16px 0 rgba($blue, 0.35));
}
}
} }
.inner-wrapper { .title {
background: rgba(255,255,255, 0.9); background: rgba(255,255,255, 0.93);
border: 1px solid rgb(100,100,100); border: 1px solid rgb(100,100,100);
@include box-shadow(0 4px 25px 0 rgba(0,0,0, 0.5)); @include box-shadow(0 4px 25px 0 rgba(0,0,0, 0.5));
@include box-sizing(border-box);
height: 120px;
//@include clearfix;
@include inline-block; @include inline-block;
padding: 20px 30px 30px; margin-left: grid-width(1) + $gw-gutter;
margin-right: $gw-gutter;
//overflow: hidden;
//padding: 20px 30px 20px;
position: relative; position: relative;
text-align: center; text-align: center;
z-index: 1; @include transition(all, 0.2s, linear);
} //width: grid-width(6);
vertical-align: top;
.title { &:hover {
@include inline-block; height: 165px;
position: relative;
text-align: left;
vertical-align: middle;
&::after {
@extend .faded-vertical-divider-light;
content: "";
display: block;
height: 170px;
position: absolute;
right: -1px;
top: -20px;
}
h1 { > hgroup {
border-bottom: 1px solid rgb(200,200,200); h1 {
margin-bottom: 25px; border-bottom: 1px solid rgb(200,200,200);
padding-bottom: 15px; padding-bottom: 10px;
text-align: left; }
text-shadow: 0 1px rgba(255,255,255, 0.6); h2 {
opacity: 0;
}
}
.actions {
opacity: 1;
}
} }
.main-cta { > hgroup {
@include clearfix; //background: rgba(255,255,255, 0.93);
float: left; //border: 1px solid rgb(100,100,100);
margin-right: flex-gutter(); //@include box-shadow(0 4px 25px 0 rgba(0,0,0, 0.5));
@include transition(all, 0.15s, linear); @include box-sizing(border-box);
width: flex-grid(6); height: 120px;
@include inline-block;
left: 0px;
//margin-left: grid-width(1) + $gw-gutter;
//margin-right: $gw-gutter;
opacity: 1;
padding: 20px 30px;
//position: absolute;
top: 0px;
@include transition(all, 0.2s, linear);
text-align: left;
//vertical-align: middle;
> a.find-courses { &::after {
@include button(shiny, $blue); @extend .faded-vertical-divider-light;
@include box-sizing(border-box); content: "";
@include border-radius(3px);
display: block; display: block;
font: normal 1.2rem/1.6rem $sans-serif; height: 170px;
letter-spacing: 1px; position: absolute;
padding: 10px 0px; right: -1px;
text-transform: uppercase; top: -20px;
text-align: center; }
width: flex-grid(12);
&:hover { h1 {
color: rgb(255,255,255); //border-bottom: 1px solid rgb(200,200,200);
} //margin-bottom: 25px;
margin-bottom: 0px;
//padding-bottom: 15px;
text-align: left;
text-shadow: 0 1px rgba(255,255,255, 0.6);
text-transform: none;
}
h2 {
font-style: italic;
margin-bottom: 0px;
text-transform: lowercase;
} }
} }
.secondary-actions { .actions {
@include box-sizing(border-box);
@include clearfix; @include clearfix;
float: left; @include box-sizing(border-box);
height: 47px; left: 0px;
width: flex-grid(6); opacity: 0;
padding: 20px 30px 0px;
a.intro-video { position: absolute;
background: rgb(245,245,245); @include transition(opacity, 0.2s, linear);
@include background-image(linear-gradient(-90deg, rgb(250,250,250), rgb(235,235,235))); top: 75px;
border: 1px solid rgb(200,200,200); width: flex-grid(12);
@include border-radius(30px);
@include box-sizing(border-box); .main-cta {
@include box-shadow(inset 0 -1px 0 0 rgba(255,255,255, 0.8), inset 0 1px 0 0 rgba(255,255,255, 0.8)); //display: none;
@include clearfix;
display: block;
float: left; float: left;
height: 100%; margin-right: flex-gutter();
overflow: hidden;
text-align: middle;
width: flex-grid(6); width: flex-grid(6);
&:hover { > a.find-courses {
text-decoration: none; @include button(shiny, $blue);
@include box-sizing(border-box);
p { @include border-radius(3px);
color: $base-font-color; display: block;
} font: normal 1.2rem/1.6rem $sans-serif;
letter-spacing: 1px;
.video { padding: 10px 0px;
opacity: 1; text-transform: uppercase;
} text-align: center;
} width: flex-grid(12);
.video { &:hover {
@include background-image(url('/static/images/shot-2-large.jpg')); color: rgb(255,255,255);
background-size: cover;
border-right: 1px solid rgb(200,200,200);
@include border-left-radius(30px);
@include box-shadow(1px 0 0 0 rgba(255,255,255, 0.6), inset 1px 0 0 0 rgba(255,255,255, 0.8), inset 0 0 0 1px rgba(255,255,255, 0.7));
float: left;
height: 100%;
opacity: 0.8;
position: relative;
@include transition(all, 0.15s, linear);
width: 60px;
vertical-align: middle;
.play {
@include background-image(url('/static/images/portal-icons/video-play-icon.png'));
background-size: cover;
height: 31px;
margin-left: -13px;
margin-top: -15px;
left: 50%;
position: absolute;
top: 50%;
width: 31px;
} }
} }
p {
color: $lighter-base-font-color;
font-style: italic;
padding-top: 10px;
text-align: center;
text-shadow: 0 1px rgba(255,255,255, 0.6);
@include transition(all, 0.15s, linear);
vertical-align: middle;
}
} }
.social-sharing {
.secondary-actions {
//display: none;
@include box-sizing(border-box); @include box-sizing(border-box);
@include clearfix;
float: left; float: left;
height: 44px; //height: 47px;
margin-right: flex-gutter();
position: relative;
text-align: center;
width: flex-grid(6); width: flex-grid(6);
&:hover { .social-sharing {
.sharing-message {
opacity: 1;
top: 56px;
}
}
.sharing-message {
@include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.9) 0%,
rgba(0,0,0, 0.7) 100%));
border: 1px solid rgba(0,0,0, 0.5);
@include border-radius(4px);
@include box-shadow(0 4px 25px 0 rgba(0,0,0, 0.5));
@include box-sizing(border-box); @include box-sizing(border-box);
color: rgb(255,255,255); float: left;
float: right; height: 44px;
font-family: $serif; margin-right: flex-gutter();
font-size: 0.9em; position: relative;
font-style: italic;
left: 50%;
margin-left: -110px;
opacity: 0;
padding: 6px 10px;
position: absolute;
text-align: center; text-align: center;
@include transition(all, 0.15s, ease-out); width: flex-grid(12);
top: 65px;
width: 220px;
&:hover { &:hover {
opacity: 0; .sharing-message {
opacity: 1;
top: 50px;
}
} }
}
.share { .sharing-message {
height: 44px; @include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.9) 0%,
@include inline-block; rgba(0,0,0, 0.7) 100%));
margin-right: 10px; border: 1px solid rgba(0,0,0, 0.5);
opacity: 0.5; @include border-radius(4px);
@include transition(all, 0.15s, linear); @include box-shadow(0 4px 25px 0 rgba(0,0,0, 0.5));
width: 44px; @include box-sizing(border-box);
color: rgb(255,255,255);
float: right;
font-family: $serif;
font-size: 0.9em;
font-style: italic;
left: 50%;
margin-left: -110px;
opacity: 0;
padding: 6px 10px;
position: absolute;
text-align: center;
@include transition(all, 0.15s, ease-out);
top: 25px;
width: 220px;
&:hover { &:hover {
opacity: 1; opacity: 0;
}
} }
img { .share {
width: 100%; height: 44px;
} @include inline-block;
margin-right: 10px;
opacity: 0.5;
@include transition(all, 0.15s, linear);
width: 44px;
&:hover {
opacity: 1;
}
&:last-child { img {
margin-right: 0px; width: 100%;
}
&:last-child {
margin-right: 0px;
}
} }
} }
} }
} }
} }
.media { .media {
background: #fff; background: #fff;
border: 1px solid rgb(200,200,200); border: 1px solid rgb(100,100,100);
@include box-sizing(border-box); @include box-sizing(border-box);
float: left; @include box-shadow(0 4px 25px 0 rgba(0,0,0, 0.5));
height: 120px;
@include inline-block; @include inline-block;
padding: 1px; padding: 1px;
position: relative; position: relative;
vertical-align: middle; vertical-align: top;
//width: 210px; width: flex-grid(2);
width: flex-grid(3);
z-index: 2; z-index: 2;
.hero { .hero {
//height: 125px;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
...@@ -249,15 +237,16 @@ ...@@ -249,15 +237,16 @@
@include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.65), rgba(0,0,0, 0.75))); @include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.65), rgba(0,0,0, 0.75)));
@include border-radius(4px); @include border-radius(4px);
@include box-shadow(0 1px 12px 0 rgba(0,0,0, 0.4)); @include box-shadow(0 1px 12px 0 rgba(0,0,0, 0.4));
@include box-sizing(border-box);
border: 2px solid rgba(255,255,255, 0.8); border: 2px solid rgba(255,255,255, 0.8);
height: 80px; height: 60px;
left: 50%; left: 50%;
margin-top: -40px; margin-top: -30px;
margin-left: -40px; margin-left: -30px;
position: absolute; position: absolute;
top: 50%; top: 50%;
@include transition(all, 0.15s, linear); @include transition(all, 0.15s, linear);
width: 80px; width: 60px;
&::after { &::after {
color: rgba(255,255,255, 0.8); color: rgba(255,255,255, 0.8);
...@@ -491,10 +480,14 @@ ...@@ -491,10 +480,14 @@
.news { .news {
@include box-sizing(border-box); @include box-sizing(border-box);
@include box-shadow(inset 0 0 3px 0 rgba(0,0,0, 0.15));
padding: 20px; padding: 20px;
width: flex-grid(12); width: flex-grid(12);
.blog-posts { .blog-posts {
border-bottom: 1px solid rgb(220,220,220);
margin-bottom: 20px;
padding-bottom: 20px;
@include clearfix; @include clearfix;
> article { > article {
...@@ -552,11 +545,28 @@ ...@@ -552,11 +545,28 @@
.post-date { .post-date {
color: $lighter-base-font-color; color: $lighter-base-font-color;
display: none;
letter-spacing: 1px; letter-spacing: 1px;
} }
} }
} }
} }
.press-links {
h3 {
display: inline;
font-family: $sans-serif;
font-weight: 700;
line-height: 1.6em;
}
a {
line-height: 1.6em;
font-family: $serif;
font-style: italic;
margin-left: 10px;
}
}
} }
} }
} }
lms/static/sass/application.css
...@@ -380,8 +380,7 @@ h1 { ...@@ -380,8 +380,7 @@ h1 {
font: normal 2em/1.4em "Open Sans", Verdana, Geneva, sans-serif; font: normal 2em/1.4em "Open Sans", Verdana, Geneva, sans-serif;
letter-spacing: 1px; letter-spacing: 1px;
margin-bottom: 30px; margin-bottom: 30px;
text-align: center; text-align: center; }
text-transform: uppercase; }
h2 { h2 {
color: #a0a0a0; color: #a0a0a0;
...@@ -541,7 +540,7 @@ a:link, a:visited { ...@@ -541,7 +540,7 @@ a:link, a:visited {
height: 100%; height: 100%;
width: 1px; } width: 1px; }
.faded-vertical-divider-light, .vertical-divider::after, header.global h1.logo::after, .home > header .title::after, .home .university-partners .partners li.partner::after { .faded-vertical-divider-light, .vertical-divider::after, header.global h1.logo::after, .home > header .title > hgroup::after, .home .university-partners .partners li.partner::after {
background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0)); background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0));
background-image: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0)); background-image: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0));
background-image: -ms-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0)); background-image: -ms-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0));
...@@ -2690,9 +2689,10 @@ header.global { ...@@ -2690,9 +2689,10 @@ header.global {
-moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.9), inset 0 -1px 5px 0 rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.9), inset 0 -1px 5px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.9), inset 0 -1px 5px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.9), inset 0 -1px 5px 0 rgba(0, 0, 0, 0.1);
zoom: 1; zoom: 1;
height: 430px;
margin-top: -69px; margin-top: -69px;
overflow: hidden; overflow: hidden;
padding: 149px 0px 90px; padding: 0px;
width: 100%; } width: 100%; }
.home > header:before, .home > header:after { .home > header:before, .home > header:after {
content: ""; content: "";
...@@ -2700,21 +2700,20 @@ header.global { ...@@ -2700,21 +2700,20 @@ header.global {
.home > header:after { .home > header:after {
clear: both; } clear: both; }
.home > header .outer-wrapper { .home > header .outer-wrapper {
max-width: 1200px;
margin: 0 auto; margin: 0 auto;
padding: 0 10px; padding: 200px 10px 0px;
position: relative; position: relative;
text-align: center; } width: 1180px; }
.home > header .outer-wrapper:hover .main-cta { .home > header .title {
-webkit-box-shadow: 0 1px 16px 0 rgba(29, 157, 217, 0.35); background: rgba(255, 255, 255, 0.93);
-moz-box-shadow: 0 1px 16px 0 rgba(29, 157, 217, 0.35);
box-shadow: 0 1px 16px 0 rgba(29, 157, 217, 0.35); }
.home > header .inner-wrapper {
background: rgba(255, 255, 255, 0.9);
border: 1px solid #646464; border: 1px solid #646464;
-webkit-box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.5);
box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.5); box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.5);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 120px;
display: -moz-inline-box; display: -moz-inline-box;
-moz-box-orient: vertical; -moz-box-orient: vertical;
display: inline-block; display: inline-block;
...@@ -2722,48 +2721,66 @@ header.global { ...@@ -2722,48 +2721,66 @@ header.global {
zoom: 1; zoom: 1;
*display: inline; *display: inline;
*vertical-align: auto; *vertical-align: auto;
padding: 20px 30px 30px; margin-left: 100px;
margin-right: 20px;
position: relative; position: relative;
text-align: center; text-align: center;
z-index: 1; } -webkit-transition-property: all;
.home > header .title { -moz-transition-property: all;
display: -moz-inline-box; -ms-transition-property: all;
-moz-box-orient: vertical; -o-transition-property: all;
display: inline-block; transition-property: all;
vertical-align: baseline; -webkit-transition-duration: 0.2s;
zoom: 1; -moz-transition-duration: 0.2s;
*display: inline; -ms-transition-duration: 0.2s;
*vertical-align: auto; -o-transition-duration: 0.2s;
position: relative; transition-duration: 0.2s;
text-align: left; -webkit-transition-timing-function: linear;
vertical-align: middle; } -moz-transition-timing-function: linear;
.home > header .title::after { -ms-transition-timing-function: linear;
content: ""; -o-transition-timing-function: linear;
display: block; transition-timing-function: linear;
height: 170px; -webkit-transition-delay: 0;
position: absolute; -moz-transition-delay: 0;
right: -1px; -ms-transition-delay: 0;
top: -20px; } -o-transition-delay: 0;
.home > header .title h1 { transition-delay: 0;
border-bottom: 1px solid #c8c8c8; vertical-align: top; }
margin-bottom: 25px; .home > header .title:hover {
padding-bottom: 15px; height: 165px; }
text-align: left; .home > header .title:hover > hgroup h1 {
text-shadow: 0 1px rgba(255, 255, 255, 0.6); } border-bottom: 1px solid #c8c8c8;
.home > header .title .main-cta { padding-bottom: 10px; }
.home > header .title:hover > hgroup h2 {
opacity: 0; }
.home > header .title:hover .actions {
opacity: 1; }
.home > header .title > hgroup {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 120px;
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1; zoom: 1;
float: left; *display: inline;
margin-right: 2.024%; *vertical-align: auto;
left: 0px;
opacity: 1;
padding: 20px 30px;
top: 0px;
-webkit-transition-property: all; -webkit-transition-property: all;
-moz-transition-property: all; -moz-transition-property: all;
-ms-transition-property: all; -ms-transition-property: all;
-o-transition-property: all; -o-transition-property: all;
transition-property: all; transition-property: all;
-webkit-transition-duration: 0.15s; -webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.15s; -moz-transition-duration: 0.2s;
-ms-transition-duration: 0.15s; -ms-transition-duration: 0.2s;
-o-transition-duration: 0.15s; -o-transition-duration: 0.2s;
transition-duration: 0.15s; transition-duration: 0.2s;
-webkit-transition-timing-function: linear; -webkit-transition-timing-function: linear;
-moz-transition-timing-function: linear; -moz-transition-timing-function: linear;
-ms-transition-timing-function: linear; -ms-transition-timing-function: linear;
...@@ -2774,319 +2791,245 @@ header.global { ...@@ -2774,319 +2791,245 @@ header.global {
-ms-transition-delay: 0; -ms-transition-delay: 0;
-o-transition-delay: 0; -o-transition-delay: 0;
transition-delay: 0; transition-delay: 0;
width: 48.988%; } text-align: left; }
.home > header .title .main-cta:before, .home > header .title .main-cta:after { .home > header .title > hgroup::after {
content: ""; content: "";
display: table; }
.home > header .title .main-cta:after {
clear: both; }
.home > header .title .main-cta > a.find-courses {
border: 1px solid #002e88;
border-bottom: 1px solid #001e5f;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: inset 0 1px 0 0 #42bae5;
-moz-box-shadow: inset 0 1px 0 0 #42bae5;
box-shadow: inset 0 1px 0 0 #42bae5;
color: white;
display: inline;
font-size: 14px;
font-weight: bold;
background-color: #1d9dd9;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1d9dd9), color-stop(50%, #006bb8), color-stop(50%, #0052a9), color-stop(100%, #0057ab));
background-image: -webkit-linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%);
background-image: -moz-linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%);
background-image: -ms-linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%);
background-image: -o-linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%);
background-image: linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%);
padding: 7px 20px 8px;
text-align: center;
text-decoration: none;
text-shadow: 0 -1px 1px #001067;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
display: block; display: block;
font: normal 1.2rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif; height: 170px;
letter-spacing: 1px; position: absolute;
padding: 10px 0px; right: -1px;
text-transform: uppercase; top: -20px; }
text-align: center; .home > header .title > hgroup h1 {
width: 100%; } margin-bottom: 0px;
.home > header .title .main-cta > a.find-courses:hover { text-align: left;
cursor: pointer; text-shadow: 0 1px rgba(255, 255, 255, 0.6);
background-color: #108ec7; text-transform: none; }
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #108ec7), color-stop(50%, #005fa6), color-stop(50%, #004897), color-stop(100%, #004d9a)); .home > header .title > hgroup h2 {
background-image: -webkit-linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%); font-style: italic;
background-image: -moz-linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%); margin-bottom: 0px;
background-image: -ms-linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%); text-transform: lowercase; }
background-image: -o-linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%); .home > header .title .actions {
background-image: linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%); } zoom: 1;
.home > header .title .main-cta > a.find-courses:active {
-webkit-box-shadow: inset 0 0 20px 0 #00295f, 0 1px 0 white;
-moz-box-shadow: inset 0 0 20px 0 #00295f, 0 1px 0 white;
box-shadow: inset 0 0 20px 0 #00295f, 0 1px 0 white; }
.home > header .title .main-cta > a.find-courses:hover {
color: white; }
.home > header .title .secondary-actions {
-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;
zoom: 1; left: 0px;
float: left; opacity: 0;
height: 47px; padding: 20px 30px 0px;
width: 48.988%; } position: absolute;
.home > header .title .secondary-actions:before, .home > header .title .secondary-actions:after { -webkit-transition-property: opacity;
-moz-transition-property: opacity;
-ms-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
-ms-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
transition-duration: 0.2s;
-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;
top: 75px;
width: 100%; }
.home > header .title .actions:before, .home > header .title .actions:after {
content: ""; content: "";
display: table; } display: table; }
.home > header .title .secondary-actions:after { .home > header .title .actions:after {
clear: both; } clear: both; }
.home > header .title .secondary-actions a.intro-video { .home > header .title .actions .main-cta {
background: #f5f5f5; float: left;
background-image: -webkit-linear-gradient(-90deg, #fafafa, #ebebeb); margin-right: 2.024%;
background-image: -moz-linear-gradient(-90deg, #fafafa, #ebebeb); width: 48.988%; }
background-image: -ms-linear-gradient(-90deg, #fafafa, #ebebeb); .home > header .title .actions .main-cta > a.find-courses {
background-image: -o-linear-gradient(-90deg, #fafafa, #ebebeb); border: 1px solid #002e88;
background-image: linear-gradient(-90deg, #fafafa, #ebebeb); border-bottom: 1px solid #001e5f;
border: 1px solid #c8c8c8; -webkit-border-radius: 5px;
-webkit-border-radius: 30px; -moz-border-radius: 5px;
-moz-border-radius: 30px; -ms-border-radius: 5px;
-ms-border-radius: 30px; -o-border-radius: 5px;
-o-border-radius: 30px; border-radius: 5px;
border-radius: 30px; -webkit-box-shadow: inset 0 1px 0 0 #42bae5;
-moz-box-shadow: inset 0 1px 0 0 #42bae5;
box-shadow: inset 0 1px 0 0 #42bae5;
color: white;
display: inline;
font-size: 14px;
font-weight: bold;
background-color: #1d9dd9;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1d9dd9), color-stop(50%, #006bb8), color-stop(50%, #0052a9), color-stop(100%, #0057ab));
background-image: -webkit-linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%);
background-image: -moz-linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%);
background-image: -ms-linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%);
background-image: -o-linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%);
background-image: linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%);
padding: 7px 20px 8px;
text-align: center;
text-decoration: none;
text-shadow: 0 -1px 1px #001067;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
display: block;
font: normal 1.2rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif;
letter-spacing: 1px;
padding: 10px 0px;
text-transform: uppercase;
text-align: center;
width: 100%; }
.home > header .title .actions .main-cta > a.find-courses:hover {
cursor: pointer;
background-color: #108ec7;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #108ec7), color-stop(50%, #005fa6), color-stop(50%, #004897), color-stop(100%, #004d9a));
background-image: -webkit-linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%);
background-image: -moz-linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%);
background-image: -ms-linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%);
background-image: -o-linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%);
background-image: linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%); }
.home > header .title .actions .main-cta > a.find-courses:active {
-webkit-box-shadow: inset 0 0 20px 0 #00295f, 0 1px 0 white;
-moz-box-shadow: inset 0 0 20px 0 #00295f, 0 1px 0 white;
box-shadow: inset 0 0 20px 0 #00295f, 0 1px 0 white; }
.home > header .title .actions .main-cta > a.find-courses:hover {
color: white; }
.home > header .title .actions .secondary-actions {
-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: inset 0 -1px 0 0 rgba(255, 255, 255, 0.8), inset 0 1px 0 0 rgba(255, 255, 255, 0.8);
-moz-box-shadow: inset 0 -1px 0 0 rgba(255, 255, 255, 0.8), inset 0 1px 0 0 rgba(255, 255, 255, 0.8);
box-shadow: inset 0 -1px 0 0 rgba(255, 255, 255, 0.8), inset 0 1px 0 0 rgba(255, 255, 255, 0.8);
zoom: 1; zoom: 1;
display: block;
float: left; float: left;
height: 100%;
overflow: hidden;
text-align: middle;
width: 48.988%; } width: 48.988%; }
.home > header .title .secondary-actions a.intro-video:before, .home > header .title .secondary-actions a.intro-video:after { .home > header .title .actions .secondary-actions:before, .home > header .title .actions .secondary-actions:after {
content: ""; content: "";
display: table; } display: table; }
.home > header .title .secondary-actions a.intro-video:after { .home > header .title .actions .secondary-actions:after {
clear: both; } clear: both; }
.home > header .title .secondary-actions a.intro-video:hover { .home > header .title .actions .secondary-actions .social-sharing {
text-decoration: none; }
.home > header .title .secondary-actions a.intro-video:hover p {
color: #3c3c3c; }
.home > header .title .secondary-actions a.intro-video:hover .video {
opacity: 1; }
.home > header .title .secondary-actions a.intro-video .video {
background-image: url("/static/images/shot-2-large.jpg");
background-image: url("/static/images/shot-2-large.jpg");
background-image: url("/static/images/shot-2-large.jpg");
background-image: url("/static/images/shot-2-large.jpg");
background-image: url("/static/images/shot-2-large.jpg");
background-size: cover;
border-right: 1px solid #c8c8c8;
-webkit-border-top-left-radius: 30px;
-moz-border-top-left-radius: 30px;
-moz-border-radius-topleft: 30px;
-ms-border-top-left-radius: 30px;
-o-border-top-left-radius: 30px;
border-top-left-radius: 30px;
-webkit-border-bottom-left-radius: 30px;
-moz-border-bottom-left-radius: 30px;
-moz-border-radius-bottomleft: 30px;
-ms-border-bottom-left-radius: 30px;
-o-border-bottom-left-radius: 30px;
border-bottom-left-radius: 30px;
-webkit-box-shadow: 1px 0 0 0 rgba(255, 255, 255, 0.6), inset 1px 0 0 0 rgba(255, 255, 255, 0.8), inset 0 0 0 1px rgba(255, 255, 255, 0.7);
-moz-box-shadow: 1px 0 0 0 rgba(255, 255, 255, 0.6), inset 1px 0 0 0 rgba(255, 255, 255, 0.8), inset 0 0 0 1px rgba(255, 255, 255, 0.7);
box-shadow: 1px 0 0 0 rgba(255, 255, 255, 0.6), inset 1px 0 0 0 rgba(255, 255, 255, 0.8), inset 0 0 0 1px rgba(255, 255, 255, 0.7);
float: left;
height: 100%;
opacity: 0.8;
position: relative;
-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;
width: 60px;
vertical-align: middle; }
.home > header .title .secondary-actions a.intro-video .video .play {
background-image: url("/static/images/portal-icons/video-play-icon.png");
background-image: url("/static/images/portal-icons/video-play-icon.png");
background-image: url("/static/images/portal-icons/video-play-icon.png");
background-image: url("/static/images/portal-icons/video-play-icon.png");
background-image: url("/static/images/portal-icons/video-play-icon.png");
background-size: cover;
height: 31px;
margin-left: -13px;
margin-top: -15px;
left: 50%;
position: absolute;
top: 50%;
width: 31px; }
.home > header .title .secondary-actions a.intro-video p {
color: #a0a0a0;
font-style: italic;
padding-top: 10px;
text-align: center;
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: 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;
vertical-align: middle; }
.home > header .title .secondary-actions .social-sharing {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
float: left;
height: 44px;
margin-right: 2.024%;
position: relative;
text-align: center;
width: 48.988%; }
.home > header .title .secondary-actions .social-sharing:hover .sharing-message {
opacity: 1;
top: 56px; }
.home > header .title .secondary-actions .social-sharing .sharing-message {
background-image: -webkit-linear-gradient(-90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 100%);
background-image: -moz-linear-gradient(-90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 100%);
background-image: -ms-linear-gradient(-90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 100%);
background-image: -o-linear-gradient(-90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 100%);
background-image: linear-gradient(-90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 100%);
border: 1px solid rgba(0, 0, 0, 0.5);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.5);
box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.5);
-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;
color: white; float: left;
float: right;
font-family: Georgia, Cambria, "Times New Roman", Times, serif;
font-size: 0.9em;
font-style: italic;
left: 50%;
margin-left: -110px;
opacity: 0;
padding: 6px 10px;
position: absolute;
text-align: center;
-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-out;
-moz-transition-timing-function: ease-out;
-ms-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out;
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
-ms-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0;
top: 65px;
width: 220px; }
.home > header .title .secondary-actions .social-sharing .sharing-message:hover {
opacity: 0; }
.home > header .title .secondary-actions .social-sharing .share {
height: 44px; height: 44px;
display: -moz-inline-box; margin-right: 2.024%;
-moz-box-orient: vertical; position: relative;
display: inline-block; text-align: center;
vertical-align: baseline; width: 100%; }
zoom: 1; .home > header .title .actions .secondary-actions .social-sharing:hover .sharing-message {
*display: inline; opacity: 1;
*vertical-align: auto; top: 50px; }
margin-right: 10px; .home > header .title .actions .secondary-actions .social-sharing .sharing-message {
opacity: 0.5; background-image: -webkit-linear-gradient(-90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 100%);
-webkit-transition-property: all; background-image: -moz-linear-gradient(-90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 100%);
-moz-transition-property: all; background-image: -ms-linear-gradient(-90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 100%);
-ms-transition-property: all; background-image: -o-linear-gradient(-90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 100%);
-o-transition-property: all; background-image: linear-gradient(-90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 100%);
transition-property: all; border: 1px solid rgba(0, 0, 0, 0.5);
-webkit-transition-duration: 0.15s; -webkit-border-radius: 4px;
-moz-transition-duration: 0.15s; -moz-border-radius: 4px;
-ms-transition-duration: 0.15s; -ms-border-radius: 4px;
-o-transition-duration: 0.15s; -o-border-radius: 4px;
transition-duration: 0.15s; border-radius: 4px;
-webkit-transition-timing-function: linear; -webkit-box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.5);
-moz-transition-timing-function: linear; -moz-box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.5);
-ms-transition-timing-function: linear; box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.5);
-o-transition-timing-function: linear; -webkit-box-sizing: border-box;
transition-timing-function: linear; -moz-box-sizing: border-box;
-webkit-transition-delay: 0; box-sizing: border-box;
-moz-transition-delay: 0; color: white;
-ms-transition-delay: 0; float: right;
-o-transition-delay: 0; font-family: Georgia, Cambria, "Times New Roman", Times, serif;
transition-delay: 0; font-size: 0.9em;
width: 44px; } font-style: italic;
.home > header .title .secondary-actions .social-sharing .share:hover { left: 50%;
opacity: 1; } margin-left: -110px;
.home > header .title .secondary-actions .social-sharing .share img { opacity: 0;
width: 100%; } padding: 6px 10px;
.home > header .title .secondary-actions .social-sharing .share:last-child { position: absolute;
margin-right: 0px; } text-align: center;
-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-out;
-moz-transition-timing-function: ease-out;
-ms-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out;
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
-ms-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0;
top: 25px;
width: 220px; }
.home > header .title .actions .secondary-actions .social-sharing .sharing-message:hover {
opacity: 0; }
.home > header .title .actions .secondary-actions .social-sharing .share {
height: 44px;
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
margin-right: 10px;
opacity: 0.5;
-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;
width: 44px; }
.home > header .title .actions .secondary-actions .social-sharing .share:hover {
opacity: 1; }
.home > header .title .actions .secondary-actions .social-sharing .share img {
width: 100%; }
.home > header .title .actions .secondary-actions .social-sharing .share:last-child {
margin-right: 0px; }
.home > header .media { .home > header .media {
background: #fff; background: #fff;
border: 1px solid #c8c8c8; border: 1px solid #646464;
-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;
float: left; -webkit-box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.5);
box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.5);
height: 120px;
display: -moz-inline-box; display: -moz-inline-box;
-moz-box-orient: vertical; -moz-box-orient: vertical;
display: inline-block; display: inline-block;
...@@ -3096,8 +3039,8 @@ header.global { ...@@ -3096,8 +3039,8 @@ header.global {
*vertical-align: auto; *vertical-align: auto;
padding: 1px; padding: 1px;
position: relative; position: relative;
vertical-align: middle; vertical-align: top;
width: 23.482%; width: 14.98%;
z-index: 2; } z-index: 2; }
.home > header .media .hero { .home > header .media .hero {
height: 100%; height: 100%;
...@@ -3117,11 +3060,14 @@ header.global { ...@@ -3117,11 +3060,14 @@ header.global {
-webkit-box-shadow: 0 1px 12px 0 rgba(0, 0, 0, 0.4); -webkit-box-shadow: 0 1px 12px 0 rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 1px 12px 0 rgba(0, 0, 0, 0.4); -moz-box-shadow: 0 1px 12px 0 rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 12px 0 rgba(0, 0, 0, 0.4); box-shadow: 0 1px 12px 0 rgba(0, 0, 0, 0.4);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 2px solid rgba(255, 255, 255, 0.8); border: 2px solid rgba(255, 255, 255, 0.8);
height: 80px; height: 60px;
left: 50%; left: 50%;
margin-top: -40px; margin-top: -30px;
margin-left: -40px; margin-left: -30px;
position: absolute; position: absolute;
top: 50%; top: 50%;
-webkit-transition-property: all; -webkit-transition-property: all;
...@@ -3144,7 +3090,7 @@ header.global { ...@@ -3144,7 +3090,7 @@ header.global {
-ms-transition-delay: 0; -ms-transition-delay: 0;
-o-transition-delay: 0; -o-transition-delay: 0;
transition-delay: 0; transition-delay: 0;
width: 80px; } width: 60px; }
.home > header .media .hero .play-intro::after { .home > header .media .hero .play-intro::after {
color: rgba(255, 255, 255, 0.8); color: rgba(255, 255, 255, 0.8);
content: "\25B6"; content: "\25B6";
...@@ -3440,9 +3386,15 @@ header.global { ...@@ -3440,9 +3386,15 @@ header.global {
-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: inset 0 0 3px 0 rgba(0, 0, 0, 0.15);
-moz-box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.15);
box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.15);
padding: 20px; padding: 20px;
width: 100%; } width: 100%; }
.home .more-info .news .blog-posts { .home .more-info .news .blog-posts {
border-bottom: 1px solid #dcdcdc;
margin-bottom: 20px;
padding-bottom: 20px;
zoom: 1; } zoom: 1; }
.home .more-info .news .blog-posts:before, .home .more-info .news .blog-posts:after { .home .more-info .news .blog-posts:before, .home .more-info .news .blog-posts:after {
content: ""; content: "";
...@@ -3520,7 +3472,18 @@ header.global { ...@@ -3520,7 +3472,18 @@ header.global {
text-decoration: underline; } text-decoration: underline; }
.home .more-info .news .blog-posts > article .post-name .post-date { .home .more-info .news .blog-posts > article .post-name .post-date {
color: #a0a0a0; color: #a0a0a0;
display: none;
letter-spacing: 1px; } letter-spacing: 1px; }
.home .more-info .news .press-links h3 {
display: inline;
font-family: "Open Sans", Verdana, Geneva, sans-serif;
font-weight: 700;
line-height: 1.6em; }
.home .more-info .news .press-links a {
line-height: 1.6em;
font-family: Georgia, Cambria, "Times New Roman", Times, serif;
font-style: italic;
margin-left: 10px; }
.dashboard { .dashboard {
zoom: 1; zoom: 1;
...@@ -4173,33 +4136,19 @@ nav.course-material { ...@@ -4173,33 +4136,19 @@ nav.course-material {
-webkit-box-shadow: inset 0 -1px 8px 0 rgba(0, 0, 0, 0.2), inset 0 1px 12px 0 rgba(0, 0, 0, 0.3); -webkit-box-shadow: inset 0 -1px 8px 0 rgba(0, 0, 0, 0.2), inset 0 1px 12px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: inset 0 -1px 8px 0 rgba(0, 0, 0, 0.2), inset 0 1px 12px 0 rgba(0, 0, 0, 0.3); -moz-box-shadow: inset 0 -1px 8px 0 rgba(0, 0, 0, 0.2), inset 0 1px 12px 0 rgba(0, 0, 0, 0.3);
box-shadow: inset 0 -1px 8px 0 rgba(0, 0, 0, 0.2), inset 0 1px 12px 0 rgba(0, 0, 0, 0.3); box-shadow: inset 0 -1px 8px 0 rgba(0, 0, 0, 0.2), inset 0 1px 12px 0 rgba(0, 0, 0, 0.3);
height: 430px;
margin-top: -69px; margin-top: -69px;
width: 100%; } width: 100%; }
.find-courses header.search .inner-wrapper, .university-profile header.search .inner-wrapper { .find-courses header.search .inner-wrapper, .university-profile header.search .inner-wrapper {
height: 120px; height: 120px;
margin: 0 auto; margin: 0 auto;
max-width: 1200px; max-width: 1200px;
overflow: hidden; padding-top: 150px;
padding: 154px 0px 80px;
position: relative; position: relative;
text-align: center; text-align: center;
width: 100%; } width: 100%; }
.find-courses header.search .inner-wrapper::before, .university-profile header.search .inner-wrapper::before {
background-image: -webkit-radial-gradient(50% 50%, circle closest-side, white 0%, rgba(255, 255, 255, 0) 100%);
background-image: -moz-radial-gradient(50% 50%, circle closest-side, white 0%, rgba(255, 255, 255, 0) 100%);
background-image: -ms-radial-gradient(50% 50%, circle closest-side, white 0%, rgba(255, 255, 255, 0) 100%);
background-image: -o-radial-gradient(50% 50%, circle closest-side, white 0%, rgba(255, 255, 255, 0) 100%);
background-image: radial-gradient(50% 50%, circle closest-side, white 0%, rgba(255, 255, 255, 0) 100%);
bottom: -300px;
content: "";
display: none;
height: 600px;
margin: 0 auto;
position: absolute;
width: 100%;
z-index: 1; }
.find-courses header.search .inner-wrapper > hgroup, .university-profile header.search .inner-wrapper > hgroup { .find-courses header.search .inner-wrapper > hgroup, .university-profile header.search .inner-wrapper > hgroup {
background: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.93);
border: 1px solid #646464; border: 1px solid #646464;
-webkit-box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.5);
...@@ -4276,13 +4225,14 @@ nav.course-material { ...@@ -4276,13 +4225,14 @@ nav.course-material {
-webkit-box-shadow: inset 0 1px 5px 0 rgba(0, 0, 0, 0.1); -webkit-box-shadow: inset 0 1px 5px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 1px 5px 0 rgba(0, 0, 0, 0.1); -moz-box-shadow: inset 0 1px 5px 0 rgba(0, 0, 0, 0.1);
box-shadow: inset 0 1px 5px 0 rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 5px 0 rgba(0, 0, 0, 0.1);
height: 280px;
margin-top: -69px; margin-top: -69px;
padding-top: 150px;
overflow: hidden; overflow: hidden;
padding: 134px 0px 60px;
position: relative; position: relative;
width: 100%; } width: 100%; }
.course-info header.course-profile .intro-inner-wrapper { .course-info header.course-profile .intro-inner-wrapper {
background: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.93);
border: 1px solid #646464; border: 1px solid #646464;
-webkit-box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.5);
...@@ -4293,7 +4243,6 @@ nav.course-material { ...@@ -4293,7 +4243,6 @@ nav.course-material {
zoom: 1; zoom: 1;
margin: 0 auto; margin: 0 auto;
max-width: 1200px; max-width: 1200px;
padding: 0px 10px;
position: relative; position: relative;
width: 1180px; width: 1180px;
z-index: 2; } z-index: 2; }
......
lms/static/sass/base/_base.scss
...@@ -18,7 +18,7 @@ h1 { ...@@ -18,7 +18,7 @@ h1 {
letter-spacing: 1px; letter-spacing: 1px;
margin-bottom: 30px; margin-bottom: 30px;
text-align: center; text-align: center;
text-transform: uppercase; //text-transform: uppercase;
} }
h2 { h2 {
......
lms/templates/course.html
...@@ -59,3 +59,31 @@ ...@@ -59,3 +59,31 @@
<p class="university">${course.get_about_section('university')}</p> <p class="university">${course.get_about_section('university')}</p>
</div> </div>
</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.get_about_section('title')}</h2>
</hgroup>
<div class="info-link">&#x2794;</div>
</a>
</header>
<section class="info">
<div class="cover-image">
<img src="${static.url('images/courses/history.png')}">
</div>
<div class="desc">
<p>An advanced introduction to analog circuits. An advanced introduction to analog circuits.</p>
</div>
<div class="bottom">
<a href="#" class="university">${course.get_about_section('university')}</a>
<span class="start-date">7/23/12</span>
</div>
</section>
</div>
<div class="meta-info">
<p class="university">${course.get_about_section('university')}</p>
</div>
</article>
lms/templates/index.html
...@@ -5,10 +5,13 @@ ...@@ -5,10 +5,13 @@
<section class="home"> <section class="home">
<header> <header>
<div class="outer-wrapper"> <div class="outer-wrapper">
<div class="inner-wrapper"> <div class="title">
<div class="title"> <hgroup>
<h1>Online education for anyone, anywhere, at anytime</h1> <h1>The Future of Online Education</h1>
<h2>For anyone, anywhere, anytime.</h2>
</hgroup>
<section class="actions">
<div class="main-cta"> <div class="main-cta">
<a href="#signup-modal" class="find-courses" rel="leanModal">Sign Up</a> <a href="#signup-modal" class="find-courses" rel="leanModal">Sign Up</a>
</div> </div>
...@@ -26,19 +29,17 @@ ...@@ -26,19 +29,17 @@
<img src="${static.url('images/email-sharing.png')}"> <img src="${static.url('images/email-sharing.png')}">
</a> </a>
</div> </div>
<a href="#video-modal" class="intro-video" rel="leanModal">
<!--
-<img src="${static.url('images/courses/space1.jpg')}" />
-->
<div class="video">
<div class="play"></div>
</div>
<p>Play intro video</p>
</a>
</div> </div>
</div> </section>
</div> </div>
<a href="#video-modal" class="media" rel="leanModal">
<div class="hero">
<img src="${static.url('images/courses/circuits.jpeg')}" />
<div class="play-intro"></div>
</div>
</a>
</div> </div>
</header> </header>
...@@ -121,6 +122,13 @@ ...@@ -121,6 +122,13 @@
</div> </div>
</article> </article>
</section> </section>
<section class="press-links">
<h3>Press Links:</h3>
<a href="#">The edX Press Release</a>,
<a href="#">Online Classes Cut Costs, But Do They Dilute Brands?</a>,
<a href="#">The Harvard Press Release</a>,
<a href="#">The MIT Press Release</a>
</section>
</section> </section>
</section> </section>
</section> </section>
......
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