Commit e6589545 by Galen Frechette

improves course about page header, adds blog post images, works on static page layouts

parent c5ce0bdf
...@@ -37,6 +37,13 @@ ...@@ -37,6 +37,13 @@
margin-bottom: 80px; margin-bottom: 80px;
} }
h2.mission-quote {
margin: 0 auto;
text-align: center;
text-transform: none;
width: flex-grid(10);
}
.message { .message {
@include clearfix; @include clearfix;
margin-bottom: 60px; margin-bottom: 60px;
...@@ -88,6 +95,19 @@ ...@@ -88,6 +95,19 @@
margin-bottom: 0px; margin-bottom: 0px;
} }
} }
.partners {
@include clearfix;
> article {
float: left;
width: flex-grid(6);
&:first-child {
margin-right: flex-gutter();
}
}
}
} }
.faq { .faq {
......
...@@ -34,6 +34,7 @@ ...@@ -34,6 +34,7 @@
@include box-sizing(border-box); @include box-sizing(border-box);
@include clearfix; @include clearfix;
float: left; float: left;
height: 180px;
padding: 20px 20px; padding: 20px 20px;
position: relative; position: relative;
width: flex-grid(8) + flex-gutter(); width: flex-grid(8) + flex-gutter();
...@@ -42,8 +43,8 @@ ...@@ -42,8 +43,8 @@
> hgroup { > hgroup {
border-bottom: 1px solid rgb(210,210,210); border-bottom: 1px solid rgb(210,210,210);
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6)); @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
margin-bottom: 30px; margin-bottom: 27px;
padding-bottom: 15px; padding-bottom: 20px;
width: 100%; width: 100%;
h1 { h1 {
...@@ -100,18 +101,20 @@ ...@@ -100,18 +101,20 @@
} }
.media { .media {
background: #fff; background: transparent;
border-left: 1px solid rgb(100,100,100); border-left: 1px solid rgb(100,100,100);
@include box-sizing(border-box); @include box-sizing(border-box);
display: block; display: block;
float: right; float: right;
padding: 1px; height: 180px;
padding: 20px;
position: relative; position: relative;
width: flex-grid(4); width: flex-grid(4);
z-index: 2; z-index: 2;
.hero { .hero {
height: 180px; border: 1px solid rgb(100,100,100);
height: 100%;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
......
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
height: 120px; height: 120px;
margin: 0 auto; margin: 0 auto;
max-width: 1200px; max-width: 1200px;
padding-top: 150px; padding-top: 200px;
position: relative; position: relative;
text-align: center; text-align: center;
width: flex-grid(12); width: flex-grid(12);
......
...@@ -28,16 +28,12 @@ ...@@ -28,16 +28,12 @@
@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);
height: 120px; height: 120px;
//@include clearfix;
@include inline-block; @include inline-block;
margin-left: grid-width(1) + $gw-gutter; margin-left: grid-width(1) + $gw-gutter;
margin-right: $gw-gutter; margin-right: $gw-gutter;
//overflow: hidden;
//padding: 20px 30px 20px;
position: relative; position: relative;
text-align: center; text-align: center;
@include transition(all, 0.2s, linear); @include transition(all, 0.2s, linear);
//width: grid-width(6);
vertical-align: top; vertical-align: top;
&:hover { &:hover {
...@@ -59,38 +55,18 @@ ...@@ -59,38 +55,18 @@
} }
> hgroup { > hgroup {
//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 box-sizing(border-box);
height: 120px; height: 120px;
@include inline-block; @include inline-block;
left: 0px; left: 0px;
//margin-left: grid-width(1) + $gw-gutter;
//margin-right: $gw-gutter;
opacity: 1; opacity: 1;
padding: 20px 30px; padding: 20px 30px;
//position: absolute;
top: 0px; top: 0px;
@include transition(all, 0.2s, linear); @include transition(all, 0.2s, linear);
text-align: left; text-align: left;
//vertical-align: middle;
&::after {
@extend .faded-vertical-divider-light;
content: "";
display: block;
height: 170px;
position: absolute;
right: -1px;
top: -20px;
}
h1 { h1 {
//border-bottom: 1px solid rgb(200,200,200);
//margin-bottom: 25px;
margin-bottom: 0px; margin-bottom: 0px;
//padding-bottom: 15px;
text-align: left; text-align: left;
text-shadow: 0 1px rgba(255,255,255, 0.6); text-shadow: 0 1px rgba(255,255,255, 0.6);
text-transform: none; text-transform: none;
...@@ -115,7 +91,6 @@ ...@@ -115,7 +91,6 @@
width: flex-grid(12); width: flex-grid(12);
.main-cta { .main-cta {
//display: none;
float: left; float: left;
margin-right: flex-gutter(); margin-right: flex-gutter();
width: flex-grid(6); width: flex-grid(6);
...@@ -139,11 +114,9 @@ ...@@ -139,11 +114,9 @@
} }
.secondary-actions { .secondary-actions {
//display: none;
@include box-sizing(border-box); @include box-sizing(border-box);
@include clearfix; @include clearfix;
float: left; float: left;
//height: 47px;
width: flex-grid(6); width: flex-grid(6);
.social-sharing { .social-sharing {
...@@ -221,10 +194,10 @@ ...@@ -221,10 +194,10 @@
@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));
height: 120px; height: 120px;
@include inline-block; @include inline-block;
padding: 3px; padding: 4px;
position: relative; position: relative;
vertical-align: top; vertical-align: top;
width: flex-grid(2); width: 210px;
z-index: 2; z-index: 2;
&:hover { &:hover {
......
<%namespace name='static' file='static_content.html'/>
<%inherit file="main.html" />
<section class="container about">
<nav>
<a href="/t/about.html">Vision</a>
<a href="/t/faq.html">Faq</a>
<a href="/t/press.html">Press</a>
<a href="/t/contact.html" class="active">Contact</a>
</nav>
<section class="contact">
<div class="map">
<img src="${static.url('images/edx-location.png')}">
</div>
<div class="contacts">
<h2>Class Feedback</h2>
<p>We are always seeking feedback to improve our courses. If you are an enrolled student and have any questions, feedback, suggestions, or any other issues specific to a particular class, please post on the discussion forums of that class.</p>
<h2>General Inqueries and Feedback</h2>
<p>If you have a general question about edX please email <a href="mailto:info@edx.org">info@edx.org</a>. To see if your question has already been answered, visit our <a href="${reverse('faq_edx')}">FAQ page</a>. Though we may not have a chance to respond to every email, we take all feedback into consideration.</p>
<h2>Technical Inqueries and Feedback</h2>
<p>If you have suggestions/feedback about the overall edX platform, or are facing general technical issues with the platform (e.g., issues with email addresses and passwords), you can reach us at <a href="mailto:technical@edx.org">technical@edx.org</a>. For technical questions, please make sure you are using a current version of Firefox or Chrome, and include browser and version in your e-mail, as well as screenshots or other pertinent details. If you find a bug or other issues, you can reach us at the following: <a href="mailto:bugs@edx.org">bugs@edx.org</a>.</p>
<h2>Media</h2>
<p>Please visit our <a href="${reverse('faq_edx')}">media/press page</a> for more information. 
For any media or press enquiries, please email <a href="mailto:press@edx.org">press@edx.org</a>.</p>
<h2>Universities</h2>
<p>If you are a university wishing to Collaborate or with questions about edX, please email <a href="mailto:university@edx.org">university@edx.org</a>.</p>
</div>
</section>
</section>
...@@ -33,12 +33,13 @@ ...@@ -33,12 +33,13 @@
</section> </section>
</div> </div>
<a href="#video-modal" class="media" rel="leanModal"> <a href="#video-modal" class="media" rel="leanModal">
<div class="hero"> <div class="hero">
<img src="${static.url('images/courses/space3.jpg')}" /> <img src="${static.url('images/courses/space3.jpg')}" />
<div class="play-intro"></div> <div class="play-intro"></div>
</div> </div>
</a> </a>
</div> </div>
</header> </header>
...@@ -104,30 +105,27 @@ ...@@ -104,30 +105,27 @@
<article> <article>
<a href="#" class="post-graphics"> <a href="#" class="post-graphics">
<img src="${static.url('images/courses/space1.jpg')}" /> <img src="${static.url('images/laffont_temp.jpg')}" />
</a> </a>
<div class="post-name"> <div class="post-name">
<a href="">Online Classes Cut Costs, But Do They Dilute Brands?</a> <a href="">MIT Alumn. Philippe P. Laffont founder of Coatue Capital Management makes $1 million inaugural gift for edX</a>
<p class="post-date">7/12/2012</p> <p class="post-date">7/12/2012</p>
</div> </div>
</article> </article>
<article> <article>
<a href="#" class="post-graphics"> <a href="#" class="post-graphics">
<img src="${static.url('images/courses/space1.jpg')}" /> <img src="${static.url('images/brazilstory_blog_arthur.jpg')}" />
</a> </a>
<div class="post-name"> <div class="post-name">
<a href="">Online Classes Cut Costs, But Do They Dilute Brands?</a> <a href="">6.002x – Way beyond a learning experience</a>
<p class="post-date">7/12/2012</p> <p class="post-date">7/12/2012</p>
</div> </div>
</article> </article>
</section> </section>
<section class="press-links"> <section class="press-links">
<h3>Press Links:</h3> <h3>Press Links:</h3>
<a href="#">The edX Press Release</a>, <a href="${reverse('pressrelease')}">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>
......
...@@ -11,9 +11,9 @@ ...@@ -11,9 +11,9 @@
<a href="${reverse('contact')}">Contact</a> <a href="${reverse('contact')}">Contact</a>
</nav> </nav>
<h2>“The mission of edX is to enhance human fulfillment worldwide through online learning, transforming education in quality, efficiency and scale through technology and research, for the benefit of campus-based students and the worldwide community of online learners.”</h2>
<section class="vision"> <section class="vision">
<h2 class="mission-quote">“The mission of edX is to enhance human fulfillment worldwide through online learning, transforming education in quality, efficiency and scale through technology and research, for the benefit of campus-based students and the worldwide community of online learners.”</h2>
<section class="company-mission message left"> <section class="company-mission message left">
<div class="photo"> <div class="photo">
<img src=""> <img src="">
...@@ -52,6 +52,21 @@ Massachusetts Institute of Technology</p> ...@@ -52,6 +52,21 @@ Massachusetts Institute of Technology</p>
<p>Current areas of research and education include neuroscience and the study of the brain and mind, bioengineering, cancer, energy, the environment and sustainable development, information sciences and technology, new media, financial technology, and entrepreneurship.</p> <p>Current areas of research and education include neuroscience and the study of the brain and mind, bioengineering, cancer, energy, the environment and sustainable development, information sciences and technology, new media, financial technology, and entrepreneurship.</p>
</article> </article>
</section> </section>
<section class="partners">
<article>
<h2>Harvard University</h2>
<p>Harvard University is devoted to excellence in teaching, learning, and research, and to developing leaders in many disciplines who make a difference globally. Harvard faculty are engaged with teaching and research to push the boundaries of human knowledge. For students who are excited to investigate the biggest issues of the 21st century, Harvard offers an unparalleled student experience and a generous financial aid program, with over $160 million awarded to more than 60% of our undergraduate students. The University has twelve degree-granting Schools in addition to the Radcliffe Institute for Advanced Study, offering a truly global education.</p>
<p>Established in 1636, Harvard is the oldest institution of higher education in the United States. The University, which is based in Cambridge and Boston, Massachusetts, has an enrollment of over 20,000 degree candidates, including undergraduate, graduate, and professional students. Harvard has more than 360,000 alumni around the world.
Massachusetts Institute of Technology</p>
</article>
<article>
<h2>Massachusetts Institute of Technology</h2>
<p>The Massachusetts Institute of Technology — a coeducational, privately endowed research university founded in 1861 — is dedicated to advancing knowledge and educating students in science, technology, and other areas of scholarship that will best serve the nation and the world in the 21st century. The Institute has close to 1,000 faculty and 10,000 undergraduate and graduate students. It is organized into five Schools: Architecture and Urban Planning; Engineering; Humanities, Arts, and Social Sciences; Sloan School of Management; and Science.</p>
<p>MIT's commitment to innovation has led to a host of scientific breakthroughs and technological advances. Seventy-eight MIT alumni, faculty, researchers and staff have won Nobel Prizes.</p>
<p>Current areas of research and education include neuroscience and the study of the brain and mind, bioengineering, cancer, energy, the environment and sustainable development, information sciences and technology, new media, financial technology, and entrepreneurship.</p>
</article>
</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