Merged with head

mitx_global.html

@@ -6,8 +6,15 @@
   <section class="about">
 
     <section class="intro">
+      <section class="intro-text">
       <p><em>MITx</em>  will offer a portfolio of MIT courses for free to a virtual community of learners around the world. It will also enhance the educational experience of its on-campus students, offering them online tools that supplement and enrich their classroom and laboratory experiences.</p>
       <p>The first <em>MITx</em> course, 6.002x (Circuits and Electronics), will be launched in an experimental prototype form. Watch this space for further upcoming courses, which will become available in Fall 2012.</p>
+      </section>
+
+    <section class="intro-video">
+      <a rel="leanModal" href="#video-overlay"><img src="/static/images/video-image.png" alt="" /><span> Watch intro video</span></a>
+    </section>
+
     </section>
 
     <section class="features">
@@ -22,6 +29,7 @@
 
       <p><strong>Press &amp; links:</strong> <a href="http://www.boston.com/news/local/massachusetts/articles/2011/12/19/mit_to_launch_online_only_graded_courses_free_to_all/?page=full" target="_blank">Boston Globe</a>, <a href="http://www.nytimes.com/2011/12/19/education/mit-expands-free-online-courses-offering-certificates.html?_r=3&hpw=" target="_blank">New York Times</a>,  <a href="http://web.mit.edu/newsoffice/2011/mitx-education-initiative-1219.html" target="_blank">MIT Press Release</a>, <a href="http://web.mit.edu/newsoffice/2011/mitx-faq-1219" target="_blank"><em>MITx</em> FAQ</a></p>
     </section>
+
   </section>
 
   <section class="course">
@@ -38,6 +46,10 @@
     <p>Taught by Anant Agarwal, with Gerald Sussman and Piotr Mitros, 6.002x (Circuits and Electronics) is an on-line adaption of 6.002, MIT&rsquo;s first undergraduate analog design course. This prototype course will run, free of charge, for students worldwide from March 1, 2012 through June 8, 2012. Students will be given the opportunity to demonstrate their mastery of the material and earn a certificate from <em>MITx</em>.</p>
   </section>
 </section>
+
+<div id="video-overlay" class="leanModal_box">
+  <iframe width="560" height="315" src="http://www.youtube.com/embed/p2Q6BrNhdh8?rel=0" frameborder="0" allowfullscreen></iframe>
+</div>
 <script>
 
 $(function() {

sass/_index.scss

@@ -237,6 +237,40 @@ section.index-content {
           }
         }
 
+        &.intro {
+          section {
+            margin-bottom: 0;
+
+            &.intro-text {
+              margin-right: flex-gutter(8);
+              width: flex-grid(4, 8);
+
+              p {
+                margin-right: 0;
+                width: auto;
+                float: none;
+              }
+            }
+
+            &.intro-video {
+              width: flex-grid(4, 8);
+
+              a {
+                display: block;
+                width: 100%;
+
+                img {
+                  width: 100%;
+                }
+
+                span {
+                  display: none;
+                }
+              }
+            }
+          }
+        }
+
         &.features {
           border-top: 1px solid #E5E5E5;
           padding-top: lh();

sass/_leanmodal.scss

@@ -15,7 +15,6 @@ div.leanModal_box {
   @include box-sizing(border-box);
   display: none;
   border: none;
-  max-width: 600px;
   background: #fff;
   padding: lh(2);
 
@@ -27,6 +26,10 @@ div.leanModal_box {
     margin-bottom: lh();
   }
 
+  &#enroll {
+    max-width: 600px;
+  }
+
   form {
     text-align: left;