updates and imporves design of the home page header
This commit is contained in:
Galen Frechette
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -8,239 +8,227 @@
|
||||
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 clearfix;
|
||||
height: 430px;
|
||||
margin-top: -69px;
|
||||
overflow: hidden;
|
||||
padding: 149px 0px 90px;
|
||||
padding: 0px;
|
||||
width: flex-grid(12);
|
||||
|
||||
.outer-wrapper {
|
||||
@extend .animation-home-header-pop-up;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 10px;
|
||||
padding: 200px 10px 0px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
|
||||
&:hover {
|
||||
.main-cta {
|
||||
@include box-shadow(0 1px 16px 0 rgba($blue, 0.35));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.inner-wrapper {
|
||||
background: rgba(255,255,255, 0.9);
|
||||
border: 1px solid rgb(100,100,100);
|
||||
@include box-shadow(0 4px 25px 0 rgba(0,0,0, 0.5));
|
||||
@include inline-block;
|
||||
padding: 20px 30px 30px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
z-index: 1;
|
||||
width: grid-width(12);
|
||||
}
|
||||
|
||||
.title {
|
||||
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);
|
||||
height: 120px;
|
||||
//@include clearfix;
|
||||
@include inline-block;
|
||||
margin-left: grid-width(1) + $gw-gutter;
|
||||
margin-right: $gw-gutter;
|
||||
//overflow: hidden;
|
||||
//padding: 20px 30px 20px;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
@include transition(all, 0.2s, linear);
|
||||
//width: grid-width(6);
|
||||
vertical-align: top;
|
||||
|
||||
&::after {
|
||||
@extend .faded-vertical-divider-light;
|
||||
content: "";
|
||||
display: block;
|
||||
height: 170px;
|
||||
position: absolute;
|
||||
right: -1px;
|
||||
top: -20px;
|
||||
}
|
||||
&:hover {
|
||||
height: 165px;
|
||||
|
||||
h1 {
|
||||
border-bottom: 1px solid rgb(200,200,200);
|
||||
margin-bottom: 25px;
|
||||
padding-bottom: 15px;
|
||||
text-align: left;
|
||||
text-shadow: 0 1px rgba(255,255,255, 0.6);
|
||||
}
|
||||
|
||||
.main-cta {
|
||||
@include clearfix;
|
||||
float: left;
|
||||
margin-right: flex-gutter();
|
||||
@include transition(all, 0.15s, linear);
|
||||
width: flex-grid(6);
|
||||
|
||||
> a.find-courses {
|
||||
@include button(shiny, $blue);
|
||||
@include box-sizing(border-box);
|
||||
@include border-radius(3px);
|
||||
display: block;
|
||||
font: normal 1.2rem/1.6rem $sans-serif;
|
||||
letter-spacing: 1px;
|
||||
padding: 10px 0px;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
width: flex-grid(12);
|
||||
|
||||
&:hover {
|
||||
color: rgb(255,255,255);
|
||||
> hgroup {
|
||||
h1 {
|
||||
border-bottom: 1px solid rgb(200,200,200);
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.secondary-actions {
|
||||
@include box-sizing(border-box);
|
||||
@include clearfix;
|
||||
float: left;
|
||||
height: 47px;
|
||||
width: flex-grid(6);
|
||||
|
||||
a.intro-video {
|
||||
background: rgb(245,245,245);
|
||||
@include background-image(linear-gradient(-90deg, rgb(250,250,250), rgb(235,235,235)));
|
||||
border: 1px solid rgb(200,200,200);
|
||||
@include border-radius(30px);
|
||||
@include box-sizing(border-box);
|
||||
@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));
|
||||
@include clearfix;
|
||||
display: block;
|
||||
float: left;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
text-align: middle;
|
||||
width: flex-grid(6);
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
|
||||
p {
|
||||
color: $base-font-color;
|
||||
}
|
||||
|
||||
.video {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.video {
|
||||
@include background-image(url('/static/images/shot-2-large.jpg'));
|
||||
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 {
|
||||
@include box-sizing(border-box);
|
||||
float: left;
|
||||
height: 44px;
|
||||
margin-right: flex-gutter();
|
||||
position: relative;
|
||||
text-align: center;
|
||||
width: flex-grid(6);
|
||||
|
||||
&:hover {
|
||||
.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);
|
||||
color: rgb(255,255,255);
|
||||
float: right;
|
||||
font-family: $serif;
|
||||
font-size: 0.9em;
|
||||
font-style: italic;
|
||||
left: 50%;
|
||||
margin-left: -110px;
|
||||
h2 {
|
||||
opacity: 0;
|
||||
padding: 6px 10px;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
.actions {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
> 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);
|
||||
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;
|
||||
|
||||
&::after {
|
||||
@extend .faded-vertical-divider-light;
|
||||
content: "";
|
||||
display: block;
|
||||
height: 170px;
|
||||
position: absolute;
|
||||
right: -1px;
|
||||
top: -20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
//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;
|
||||
}
|
||||
}
|
||||
|
||||
.actions {
|
||||
@include clearfix;
|
||||
@include box-sizing(border-box);
|
||||
left: 0px;
|
||||
opacity: 0;
|
||||
padding: 20px 30px 0px;
|
||||
position: absolute;
|
||||
@include transition(opacity, 0.2s, linear);
|
||||
top: 75px;
|
||||
width: flex-grid(12);
|
||||
|
||||
.main-cta {
|
||||
//display: none;
|
||||
float: left;
|
||||
margin-right: flex-gutter();
|
||||
width: flex-grid(6);
|
||||
|
||||
> a.find-courses {
|
||||
@include button(shiny, $blue);
|
||||
@include box-sizing(border-box);
|
||||
@include border-radius(3px);
|
||||
display: block;
|
||||
font: normal 1.2rem/1.6rem $sans-serif;
|
||||
letter-spacing: 1px;
|
||||
padding: 10px 0px;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
@include transition(all, 0.15s, ease-out);
|
||||
top: 65px;
|
||||
width: 220px;
|
||||
width: flex-grid(12);
|
||||
|
||||
&:hover {
|
||||
opacity: 0;
|
||||
color: rgb(255,255,255);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.share {
|
||||
.secondary-actions {
|
||||
//display: none;
|
||||
@include box-sizing(border-box);
|
||||
@include clearfix;
|
||||
float: left;
|
||||
//height: 47px;
|
||||
width: flex-grid(6);
|
||||
|
||||
.social-sharing {
|
||||
@include box-sizing(border-box);
|
||||
float: left;
|
||||
height: 44px;
|
||||
@include inline-block;
|
||||
margin-right: 10px;
|
||||
opacity: 0.5;
|
||||
@include transition(all, 0.15s, linear);
|
||||
width: 44px;
|
||||
margin-right: flex-gutter();
|
||||
position: relative;
|
||||
text-align: center;
|
||||
width: flex-grid(12);
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
.sharing-message {
|
||||
opacity: 1;
|
||||
top: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
.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);
|
||||
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 {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0px;
|
||||
.share {
|
||||
height: 44px;
|
||||
@include inline-block;
|
||||
margin-right: 10px;
|
||||
opacity: 0.5;
|
||||
@include transition(all, 0.15s, linear);
|
||||
width: 44px;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.media {
|
||||
background: #fff;
|
||||
border: 1px solid rgb(200,200,200);
|
||||
border: 1px solid rgb(100,100,100);
|
||||
@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;
|
||||
padding: 1px;
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
//width: 210px;
|
||||
width: flex-grid(3);
|
||||
vertical-align: top;
|
||||
width: flex-grid(2);
|
||||
z-index: 2;
|
||||
|
||||
.hero {
|
||||
//height: 125px;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
@@ -249,15 +237,16 @@
|
||||
@include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.65), rgba(0,0,0, 0.75)));
|
||||
@include border-radius(4px);
|
||||
@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);
|
||||
height: 80px;
|
||||
height: 60px;
|
||||
left: 50%;
|
||||
margin-top: -40px;
|
||||
margin-left: -40px;
|
||||
margin-top: -30px;
|
||||
margin-left: -30px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
@include transition(all, 0.15s, linear);
|
||||
width: 80px;
|
||||
width: 60px;
|
||||
|
||||
&::after {
|
||||
color: rgba(255,255,255, 0.8);
|
||||
@@ -491,10 +480,14 @@
|
||||
|
||||
.news {
|
||||
@include box-sizing(border-box);
|
||||
@include box-shadow(inset 0 0 3px 0 rgba(0,0,0, 0.15));
|
||||
padding: 20px;
|
||||
width: flex-grid(12);
|
||||
|
||||
.blog-posts {
|
||||
border-bottom: 1px solid rgb(220,220,220);
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 20px;
|
||||
@include clearfix;
|
||||
|
||||
> article {
|
||||
@@ -552,11 +545,28 @@
|
||||
|
||||
.post-date {
|
||||
color: $lighter-base-font-color;
|
||||
display: none;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -18,7 +18,7 @@ h1 {
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: 30px;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
//text-transform: uppercase;
|
||||
}
|
||||
|
||||
h2 {
|
||||
|
||||
@@ -31,3 +31,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">➔</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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user