updates and imporves design of the home page header

lms/static/sass/_course_about.scss

@@ -10,21 +10,21 @@
     @include box-shadow(0 1px 80px 0 rgba(0,0,0, 0.5));
     border-bottom: 1px solid rgb(100,100,100);
     @include box-shadow(inset 0 1px 5px 0 rgba(0,0,0, 0.1));
+    height: 280px;
     margin-top: -69px;
+    padding-top: 150px;
     overflow: hidden;
-    padding: 134px 0px 60px;
     position: relative;
     width: 100%;
 
     .intro-inner-wrapper {
-      background: rgba(255,255,255, 0.9);
+      background: rgba(255,255,255, 0.93);
       border: 1px solid rgb(100,100,100);
       @include box-shadow(0 4px 25px 0 rgba(0,0,0, 0.5));
       @include box-sizing(border-box);
       @include clearfix;
       margin: 0 auto;
       max-width: 1200px;
-      padding: 0px 10px;
       position: relative;
       width: grid-width(12);
       z-index: 2;

lms/static/sass/_courses.scss

@@ -8,6 +8,7 @@
     background-size: cover;
     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));
+    height: 430px;
     margin-top: -69px;
     width: 100%;
 
@@ -15,26 +16,13 @@
       height: 120px;
       margin: 0 auto;
       max-width: 1200px;
-      overflow: hidden;
-      padding: 154px 0px 80px;
+      padding-top: 150px;
       position: relative;
       text-align: center;
       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 {
-        background: rgba(255,255,255, 0.9);
+        background: rgba(255,255,255, 0.93);
         border: 1px solid rgb(100,100,100);
         @include box-shadow(0 4px 25px 0 rgba(0,0,0, 0.5));
         padding: 20px 30px;

lms/static/sass/base/_base.scss

@@ -18,7 +18,7 @@ h1 {
   letter-spacing: 1px;
   margin-bottom: 30px;
   text-align: center;
-  text-transform: uppercase;
+  //text-transform: uppercase;
 }
 
 h2 {

lms/templates/course.html

@@ -59,3 +59,31 @@
     <p class="university">${course.get_about_section('university')}</p>
   </div>
 </article>
+
+<article id="${course.id}"class="course">
+  <div class="inner-wrapper">
+    <header class="course-preview">
+        <a href="${reverse('about_course', args=[course.id])}">
+        <hgroup>
+          <h2>${course.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 @@
 <section class="home">
   <header>
     <div class="outer-wrapper">
-      <div class="inner-wrapper">
-        <div class="title">
-          <h1>Online education for anyone, anywhere, at anytime</h1>
+      <div class="title">
+        <hgroup>
+          <h1>The Future of Online Education</h1>
+          <h2>For anyone, anywhere, anytime.</h2>
+        </hgroup>
 
+        <section class="actions">
           <div class="main-cta">
             <a href="#signup-modal" class="find-courses" rel="leanModal">Sign Up</a>
           </div>
@@ -26,19 +29,17 @@
                 <img src="${static.url('images/email-sharing.png')}">
               </a>
             </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>
+        </section>
       </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>
   </header>
 
@@ -121,6 +122,13 @@
             </div>
           </article>
         </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>