Commit 1f247ceb by Brian Talbot

edX Homepage - revised layout (HTML/CSS) for new edX universities and created logo assets

parent 94a28f60
.home { .home {
padding: 0px; padding: 0px;
> .container {
@include box-sizing(border-box);
width: flex-grid(12);
}
> header { > header {
background: rgb(255,255,255); background: rgb(255,255,255);
@include background-image(url('/static/images/homepage-bg.jpg')); @include background-image(url('/static/images/homepage-bg.jpg'));
...@@ -175,9 +180,6 @@ ...@@ -175,9 +180,6 @@
} }
.university-partners { .university-partners {
@include background-image(linear-gradient(180deg, rgba(245,245,245, 0) 0%,
rgba(245,245,245, 1) 50%,
rgba(245,245,245, 0) 100%));
border-bottom: 1px solid rgb(210,210,210); border-bottom: 1px solid rgb(210,210,210);
margin-bottom: 0px; margin-bottom: 0px;
overflow: hidden; overflow: hidden;
...@@ -300,7 +302,6 @@ ...@@ -300,7 +302,6 @@
} }
img { img {
max-width: 190px;
position: relative; position: relative;
@include transition(all, 0.25s, ease-in-out); @include transition(all, 0.25s, ease-in-out);
vertical-align: middle; vertical-align: middle;
...@@ -324,6 +325,44 @@ ...@@ -324,6 +325,44 @@
} }
} }
} }
&.university-partners2x6 {
@include box-sizing(border-box);
width: flex-grid(12, 12);
.partners {
@include box-sizing(border-box);
@include clearfix();
margin-left: 60px;
padding: 12px 0;
.partner {
@include box-sizing(border-box);
width: flex-grid(2, 12);
display: block;
float: left;
padding: 0 12px;
a {
img {
width: 100%;
height: auto;
}
.name > span {
font-size: 1.0em;
}
&:hover {
.name {
bottom: 14px;
}
}
}
}
}
}
} }
.more-info { .more-info {
......
...@@ -47,8 +47,8 @@ ...@@ -47,8 +47,8 @@
<section class="highlighted-courses"> <section class="highlighted-courses">
<h2>Explore free courses from <span class="edx">edX</span> universities</h2> <h2>Explore free courses from <span class="edx">edX</span> universities</h2>
<section class="university-partners"> <section class="university-partners university-partners2x6">
<ol class="partners partners-primary"> <ol class="partners">
<li class="partner mit"> <li class="partner mit">
<a href="${reverse('university_profile', args=['MITx'])}"> <a href="${reverse('university_profile', args=['MITx'])}">
<img src="${static.url('images/university/mit/mit.png')}" /> <img src="${static.url('images/university/mit/mit.png')}" />
...@@ -65,7 +65,7 @@ ...@@ -65,7 +65,7 @@
</div> </div>
</a> </a>
</li> </li>
<li class="partner last"> <li class="partner">
<a href="${reverse('university_profile', args=['BerkeleyX'])}"> <a href="${reverse('university_profile', args=['BerkeleyX'])}">
<img src="${static.url('images/university/berkeley/berkeley.png')}" /> <img src="${static.url('images/university/berkeley/berkeley.png')}" />
<div class="name"> <div class="name">
...@@ -73,11 +73,6 @@ ...@@ -73,11 +73,6 @@
</div> </div>
</a> </a>
</li> </li>
</ol>
<hr />
<ol class="partners">
<li class="partner"> <li class="partner">
<a href="${reverse('university_profile', args=['UTx'])}"> <a href="${reverse('university_profile', args=['UTx'])}">
<img src="${static.url('images/university/ut/ut-rollover_350x150.png')}" /> <img src="${static.url('images/university/ut/ut-rollover_350x150.png')}" />
...@@ -87,6 +82,27 @@ ...@@ -87,6 +82,27 @@
</a> </a>
</li> </li>
<li class="partner"> <li class="partner">
<a href="${reverse('university_profile', args=['McGillX'])}">
<img src="${static.url('images/university/mcgill/mcgill.png')}" />
<div class="name">
<span>McGillX</span>
</div>
</a>
</li>
<li class="partner">
<a href="${reverse('university_profile', args=['ANUx'])}">
<img src="${static.url('images/university/anu/anu.png')}" />
<div class="name">
<span>ANUx</span>
</div>
</a>
</li>
</ol>
<hr />
<ol class="partners">
<li class="partner">
<a href="${reverse('university_profile', args=['WellesleyX'])}"> <a href="${reverse('university_profile', args=['WellesleyX'])}">
<img src="${static.url('images/university/wellesley/wellesley-rollover_350x150.png')}" /> <img src="${static.url('images/university/wellesley/wellesley-rollover_350x150.png')}" />
<div class="name"> <div class="name">
...@@ -94,7 +110,7 @@ ...@@ -94,7 +110,7 @@
</div> </div>
</a> </a>
</li> </li>
<li class="partner last"> <li class="partner">
<a href="${reverse('university_profile', args=['GeorgetownX'])}"> <a href="${reverse('university_profile', args=['GeorgetownX'])}">
<img src="${static.url('images/university/georgetown/georgetown-rollover_350x150.png')}" /> <img src="${static.url('images/university/georgetown/georgetown-rollover_350x150.png')}" />
<div class="name"> <div class="name">
...@@ -102,6 +118,38 @@ ...@@ -102,6 +118,38 @@
</div> </div>
</a> </a>
</li> </li>
<li class="partner">
<a href="${reverse('university_profile', args=['TorontoX'])}">
<img src="${static.url('images/university/toronto/toronto.png')}" />
<div class="name">
<span>TorontoX</span>
</div>
</a>
</li>
<li class="partner">
<a href="${reverse('university_profile', args=['EPFLx'])}">
<img src="${static.url('images/university/epfl/epfl.png')}" />
<div class="name">
<span>EPFLx</span>
</div>
</a>
</li>
<li class="partner">
<a href="${reverse('university_profile', args=['DelftX'])}">
<img src="${static.url('images/university/delft/delft.png')}" />
<div class="name">
<span>DelftX</span>
</div>
</a>
</li>
<li class="partner">
<a href="${reverse('university_profile', args=['RiceX'])}">
<img src="${static.url('images/university/rice/rice.png')}" />
<div class="name">
<span>RiceX</span>
</div>
</a>
</li>
</ol> </ol>
</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