diff --git a/cms/static/img/thumb-hiw-feature1.png b/cms/static/img/thumb-hiw-feature1.png new file mode 100644 index 0000000000..febdfb0a92 Binary files /dev/null and b/cms/static/img/thumb-hiw-feature1.png differ diff --git a/cms/static/sass/_index.scss b/cms/static/sass/_index.scss index 44ceeb538d..dac687449a 100644 --- a/cms/static/sass/_index.scss +++ b/cms/static/sass/_index.scss @@ -143,14 +143,50 @@ margin-right: flex-gutter(); a { + @include box-sizing(border-box); + @include box-shadow(0 1px ($baseline/10) $shadow-l1); + position: relative; + top: 0; display: block; + border: 1px solid $gray-l3; + padding: ($baseline/4); + background: $white; + + .action-zoom { + @include transition(opacity .15s ease-in-out); + opacity: 0; + position: absolute; + left: 110px; + top: 110px; + min-height: 300px; + min-width: 300px; + + .ss-icon { + @include font-size(32); + @include border-radius(($baseline)); + display: inline-block; + padding: ($baseline*1.5) $baseline $baseline $baseline; + background: $blue; + color: $white; + text-align: center; + line-height: 2.75rem; + } + } + + &:hover { + border-color: $blue; + top: -($baseline/5); + + .action-zoom { + opacity: 0.8; + } + } } img { display: block; width: 100%; height: 100%; - background: $black; } } @@ -181,10 +217,16 @@ margin: ($baseline*1.5) 0 0 0; .proofpoint { + @include box-sizing(border-box); + @include border-radius(($baseline/4)); @include transition(color .15s ease-in-out); + position: relative; + top: 0; float: left; width: flex-grid(3, 9); + min-height: ($baseline*8); margin-right: flex-gutter(); + padding: ($baseline*0.75) $baseline; color: $gray-l1; cursor: pointer; @@ -196,7 +238,13 @@ } &:hover { - color: $gray-d3; + background: $blue-l5; + color: $blue-l2; + top: -($baseline/5); + + .title { + color: $blue-d1; + } } &:last-child { diff --git a/cms/templates/howitworks.html b/cms/templates/howitworks.html index f634af77b8..38ed9a5d5d 100644 --- a/cms/templates/howitworks.html +++ b/cms/templates/howitworks.html @@ -25,8 +25,11 @@
  • - Studio Helps You Keep Your Courses Organized + Studio Helps You Keep Your Courses Organized
    Studio Helps You Keep Your Courses Organized
    + + +
    @@ -56,8 +59,11 @@
  • - Studio Keeps Your Learning Sequences and Lectures, Together + Studio Keeps Your Learning Sequences and Lectures, Together
    Studio Keeps Your Learning Sequences and Lectures, Together
    + + +
    @@ -86,9 +92,12 @@
  • - - Studio Gives You Simple, Fast, and Incremental Publishing. With Friends. + + Studio Gives You Simple, Fast, and Incremental Publishing. With Friends.
    Studio Gives You Simple, Fast, and Incremental Publishing. With Friends.
    + + +