From 2f6255378f3b9400eea84142efd8889be88b1d5a Mon Sep 17 00:00:00 2001
From: Brian Talbot <btalbot@edx.org>
Date: Mon, 21 Jan 2013 21:08:33 -0500
Subject: [PATCH] drupal integration - revised UI of global footer to matched
 marketing site footer content and feel

---
 lms/static/images/bg-footer-divider.jpg      | Bin 0 -> 416 bytes
 lms/static/images/social/social-facebook.png | Bin 0 -> 539 bytes
 lms/static/images/social/social-google.png   | Bin 0 -> 736 bytes
 lms/static/images/social/social-meetup.png   | Bin 0 -> 754 bytes
 lms/static/images/social/social-twitter.png  | Bin 0 -> 424 bytes
 lms/static/images/social/social-youtube.png  | Bin 0 -> 499 bytes
 lms/static/sass/shared/_footer.scss          | 264 ++++++++-----------
 lms/static/sass/shared/_header.scss          |   2 +-
 lms/templates/footer.html                    | 109 +++++---
 9 files changed, 192 insertions(+), 183 deletions(-)
 create mode 100644 lms/static/images/bg-footer-divider.jpg
 create mode 100644 lms/static/images/social/social-facebook.png
 create mode 100644 lms/static/images/social/social-google.png
 create mode 100644 lms/static/images/social/social-meetup.png
 create mode 100644 lms/static/images/social/social-twitter.png
 create mode 100644 lms/static/images/social/social-youtube.png

diff --git a/lms/static/images/bg-footer-divider.jpg b/lms/static/images/bg-footer-divider.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..9d5e6fa6cd2dcc87e68051dd81ddce5374326212
GIT binary patch
literal 416
zcmex=<Nrej3D=6uGzJDwPb~%x1_b#3hC$G!G&#GHfsug)D4fE;@c$hHpJPgXQYu5r
z0iX!u|Jw{L42;ABCIn!H1E_W;Mn<445W^*iW&A(DAjrXx%)rRZD9FGh$jB_n`2Prq
z4+IGBFfg#QvT>n`fMf+27?@dEIgwN{GEKa==#pq)Vi0rihsLByo02Dsh+P&$QUNjb
z|1Aa{W=5cm%z_N|4DXxo>=Tf9)fsnq2IJevusQk+(Gl;&jpP`T_D}CpwPA3-tQ@fI
z4paG=51KP4GgK^?HY;MLgK3~}in|4?m0^OK{4++ic@b4{%&9Nt&6=^YA>w1h|C<1V
CgGg-v

literal 0
HcmV?d00001

diff --git a/lms/static/images/social/social-facebook.png b/lms/static/images/social/social-facebook.png
new file mode 100644
index 0000000000000000000000000000000000000000..3588e7f29a9968e84ef19451a338c56c99e27b97
GIT binary patch
literal 539
zcmV+$0_6RPP)<h;3K|Lk000e1NJLTq001oj001lq0{{R3#+bnk0002JP)t-sY<Q1x
zewuH4k#l{IbAFR>e3Ep2lxKOJa)6tDg_C}UmVJbeTXd*+f|gx&sdIsxZF!Jzdy#g6
zn1_mxf{2oAd602@l6HWVgo%=ah>~=Flw59*eS?o~dXaa5m3o4Yc7c_3fRtr)k8XO9
zdV-IEhm&%BlP^(`TyBtSc#nI8mx_#!0001yla|xe)vmCzprNFgnw^J=kc5bj+S}ae
z>FTGbtN8f%%*@X4@$t5|xx~fC;^O1~|Nn}NkF{H%YybcNEp$>&Q@=mIf4{%KFJF(Z
z?+?EpKfk|E@87?_zkhGPKi|K<U%$UkzrU})A0NNJKLGpLWi|i+0N_bPK~#9!?bXK;
zf-n$(VSDercLW8y(h_+8$5O(K7=&fkiyr(>?94YgB$*IXFny{k{lYe|UiDq)ns#VH
z$)_7<8%Xf!mJJr?bk>H;b6O4%=9NCu*>^cYA8!_mvS|YAoo2o28Lamfr@Np&S-hTu
z`oN@42r=0_05x&2;mw(7O}#mV((6!dQc4X+YwUDj?XK(FlMYI!QM!)OiBPQ)LMYpB
z@;sd}Y6q7nT|?<MO2<%o^P^gf&`C}!D^On~UQ0ztPyKJK#I3HnSHx|!2zc#9Ik+M2
d-|*Mp(szfOkWDw{mwf;L002ovPDHLkV1loN2}u9|

literal 0
HcmV?d00001

diff --git a/lms/static/images/social/social-google.png b/lms/static/images/social/social-google.png
new file mode 100644
index 0000000000000000000000000000000000000000..f5c39640df91c5b71617c45aa52be2ed674962a7
GIT binary patch
literal 736
zcmeAS@N?(olHy`uVBq!ia0vp^x<IVM!3-pi%{a&lr1l2*gt&I~^e<YxY|@lzXV0FW
zK6CcsCCmSV0Z<&mfRKOx{)I5^+`R{6Y~Qg9NJ7-WRRS4s1d+w$0<8r~9XWdZ$B!S&
zSF8pqShr!*%a^YnJ$n4>*YAmwr(M2sb-}_V7cO4<@bTla6|2siIk$J;ff=*rZri@|
z(BY#KCQZF{`_Aq?`|jO;Fk{x7qtTj$KoiwUg8YK-dp*40-WQ*rug~9q{`30#?f&!R
z``^#EpU<x!@4x^2dwKi%{q+o2x0N|DFfgw1ba4!+h&y^UGrq||fbD~y*U>JHt(!t7
z-E2Pn`Nf}q@~dS#at}nj^|j3x`2L>3`qS*@2j)MeZS5x5r(f84_fkK{t3R=>{Y!n!
zPtQp4{gLd-e~FWQmhUk!&rdyj;x8#5Y}9wPP@M6q&@-O#gJ#nN=YJO$+}*ZLtm%}E
z=}UIit|H+l+EcXhJ&g`O=DfI$sc_--70OG6CuJ|vU6tB$XTje|Y4N`zQ>UrCudrF0
zvF<C|)`yz1G2*RaJ2cteF6w(Z*WfYVq;DrB8kVcwRk$m*Wx9U%(c}JekNdRvgv%J7
z-6q#stRb|tX!^7w<IcyHueRP<TPpp$D4thh<N9YScHRg!K5?k*^~)~9W5sgI-D*!f
za}Zw2_IArgbHyfuQ>(9MbFY4x8<$oSynL?L+6noh_Sbj4WUO#6@on((<lkz?+z=Lj
zX;0V}-vwWrFVz+Jn`*!I`><BuSeECwztwTC*OSj_DBKFW#h3A+NZfSuLUt{_qd&At
zv$wp~d^<7pI$Oq7ze#LGFLqjH{F-NFct-X+qe0pE@A^4=CM3@b>b<5avT^ORcQc=r
j>E8doHt+NNWv|sUW3&r6(q4K3W17L!)z4*}Q$iB}bxw+~

literal 0
HcmV?d00001

diff --git a/lms/static/images/social/social-meetup.png b/lms/static/images/social/social-meetup.png
new file mode 100644
index 0000000000000000000000000000000000000000..52a7f447d7467bd8e4f8f68b9d10505cc8c3ac9a
GIT binary patch
literal 754
zcmV<O0uB9%P)<h;3K|Lk000e1NJLTq001oj001lq0{{R3#+bnk0003*P)t-sij0qn
zjE{<pkBW?sij0qnjE{<pkBW?sij0qnjE{<pkBW?sij0o{00960|NZ^_e0+SRrKR8B
z-+q36hlhvi>gxXf{`B<pkdTn3rl!Ng!-|ZLprD}d@9*{X_2J>-{QUfvmzSKJoQ8&m
zz`($`xVVLdg`%ROo}Qk7fPnM!^T^1^r>Cd*`1p;Djj5@r?(XiAl9GLWedp)rzP`Tu
z`}=}|g4Na4nwpx4iHXR_$*8EPn3$NIot@3i&7`EHpP!%W>+96i)Z^phyu7@^!ouC%
z-L$l{?d|QaudlAIuI1(BlarH~nVHzw*wE0>)6>(BkB^LujDLTBv$M0gxw(~<mC4D;
zi;Ih`t*!a_`Nqb^y}iB8&d!R8imIxrva+(bx3~KG`mnID^78WE;NbD`@#*U7+1lIp
z_xHiU!QkQHsR6ZR0000EbW%=JkDt#U58ppuZ!hn!zW`;w<s$$90Z&OpK~#8N?bJnY
zGcgc=;k4mwGWIfsnHkH>%*_4p|KD3RmD1g~mU8I!()VWRxs7LRfl;zVyZrhmG2S8V
z(J8r2+NIO-*^Qdfso9L$N7sI%*1u5y`D;oJe|Y>hYoKMNj+lWKM+2QV>E}1{5PAnu
zNS(o;Uqf1I<l(-}K_}RWvP!j3?!z@Tc|p+C`mJ<>lOm7R8O)0d0+bMnwv_!tji5!G
z(}Z3&l{=U!&d$wi!g7Tbx7INy9Fa7SbIM(hZD&)l=}9i0KF%nc^;&EfuMo7%*Ra5)
zy9t1J5|tKD;4)p@$RrYbK+s6NZa$*Szu;B#v{G1VbWteA%G>1~AnATBfF~IsEFoC}
z2|!&1f{p;W^Q>_?^vVC9u;5owx1sf#VH+&lOXo;>jIKRKZTHcz(_z#BFNKeLhc2?i
k!}y6Y?$NIOcj+Jf0t@4<e8Xw=F#rGn07*qoM6N<$f<?TsTmS$7

literal 0
HcmV?d00001

diff --git a/lms/static/images/social/social-twitter.png b/lms/static/images/social/social-twitter.png
new file mode 100644
index 0000000000000000000000000000000000000000..c812e7dd5c38cc78b826829c4e7739547c8dac33
GIT binary patch
literal 424
zcmeAS@N?(olHy`uVBq!ia0vp^x<IVM!3-pi%{a&lq!I#rLR`Cg`iVq99ox3=JaY8-
z|NsAiT9&U^{o}`vz55PazH)Wq<Y@~QE_wO#)w&IvZr#4~;p4|gj~<^nb8g10xh+Z-
zPk=i4OM?7@{qyhluYW&3{ye|Fef@rhdq$HDfl@C#T^vIy;@)08Iq8ssKttm6nHfUK
z<(tzlf3Nq}Y<FgOIm5DN`p@(6fh?;|zT34l{`Iq<6(>vYb|%Hneep|Y#<|XY9NU7|
zSjUxb6suo#a6xsn^rAY~#S<AbKAr8mIw^zcbz|rkpQ0!UeUYffFOxUTk(<A)yvu3U
zWpl4tCa)HWtq@w5w`~n?YGUN>l((Gk?!3J*)9FvR+wo0hO=5>0dGj5;-B|dcEaKe}
z19SeLnFdiOGBc}pn(<x;&XBn`lTF)H>BRZ7Prs}EJ^EVfnswavjr+o6?9%i<?c4G7
p@XM>&_qXV0Z~H54xAgy4=B)Qs?siL>mjV6E;OXk;vd$@?2>{DH(<cA`

literal 0
HcmV?d00001

diff --git a/lms/static/images/social/social-youtube.png b/lms/static/images/social/social-youtube.png
new file mode 100644
index 0000000000000000000000000000000000000000..65f167f74271533f62515d0b9d2591561083470e
GIT binary patch
literal 499
zcmeAS@N?(olHy`uVBq!ia0vp^x<IVM!3-pi%{a&lq>2K3LR`Cg`iVh6<^TWxU%q1X
zk)y|f>L*T~He=S@1q+w#-FM*8qsJdUeth}z)x$@RFJHNO`SR5tKYnc6zVp`YJL@)V
zI&<dSy7imBfB*5}!^hKS&dp!A#6vtc1!x>!NswRg{QmRz<K^x7^Yz!i-_LMg`_*~|
z21X@M7srr_xVKksW*s&VXuG)WX72a-lDhZi?tTBiE40UZgN&tF$<CMROI9}va6Efj
z>$iW=^-h+qGUmNgCr+CeSH2)|>C770^}noMH5_eBJo0|)`p0}3GMA%FDy?2-|I|7i
zXf%O)#>Wu(M(0^m4JMl~PFlt@YYFSi^RM=>B+mE0?5;3b>MM)yvA1rWX0zsH`+mQ&
z!c6mzm*^GAwztl+93C~Tp1>5Fm}~Dcd3mYB?b(mIqeB&^o!@aubV0+ju-)0MT!BgJ
z&xKyzVjZD($au?{OJ|On?`^SKoBvBiU2GDU+M423dL>G;cPH1YEiC>}9@3k5lX-7O
zrSX%Ql?&pR_zFhuyDs2)d)xZ(jXhg#R0J2BAG%-G+_~qb+sVU=p6<!~AO0)8o~bFj
VghQ}C&=(kv44$rjF6*2UngD1!`W*lO

literal 0
HcmV?d00001

diff --git a/lms/static/sass/shared/_footer.scss b/lms/static/sass/shared/_footer.scss
index a418b887ad..f2596f7ba2 100644
--- a/lms/static/sass/shared/_footer.scss
+++ b/lms/static/sass/shared/_footer.scss
@@ -1,179 +1,143 @@
-footer {
-  background: transparent;
-  border-top: 1px solid rgb(200,200,200);
-  @include box-shadow(inset 0 1px 3px 0 rgba(0,0,0, 0.1));
-  margin: 0 auto;
-  width: flex-grid(12);
+.wrapper-footer {
+  border-top: 1px solid tint($m-gray,50%);
+  padding: $baseline ($baseline/2) ($baseline*1.5) ($baseline/2);
+  background: $white;
 
-  &.fixed-bottom {
-    bottom: 0px;
-    max-width: 100%;
-    position: absolute;
-  }
-
-  nav {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 30px 10px 0;
+  footer {
+    @include clearfix();
     max-width: grid-width(12);
     min-width: 760px;
+    margin: 0 auto;
 
-    .top {
-      border-bottom: 1px solid rgb(200,200,200);
-      @include clearfix;
-      padding-bottom: 30px;
-      width: flex-grid(12);
-      text-align: center;
+    p, ol, ul {
+      font-family: $sans-serif;
+    }
 
-      ol {
-        float: right;
+    a {
+      @include transition(color 0.15s ease-in-out, border 0.15s ease-in-out);
+
+      &:link, &:visited, &:hover, &:active {
+        border-bottom: none;
+        color: $m-blue;
+        text-decoration: none !important;
+        font-family: $sans-serif;
+      }
+
+      &:hover, &:active {
+        border-bottom: 1px dotted shade($m-blue, 20%);
+        color: shade($m-blue, 20%);
+      }
+    }
+
+    // colophon
+    .colophon {
+      margin-right: flex-gutter(2);
+      width: flex-grid(6);
+      float: left;
+
+      .nav-colophon {
+        @include clearfix();
+        margin: ($baseline/4) 0 ($baseline*1.5) 0;
 
         li {
-          @include inline-block;
-          list-style: none;
-          padding: 0px 15px;
-          position: relative;
-          vertical-align: middle;
-
-          &::after {
-            @extend .faded-vertical-divider;
-            content: "";
-            display: block;
-            height: 30px;
-            right: 0px;
-            position: absolute;
-            top: -5px;
-            width: 1px;
-          }
-
-          a:link, a:visited {
-            color: $lighter-base-font-color;
-            padding: 6px 0px;
-          }
-        }
-      }
-
-      .primary {
-        @include clearfix;
-        float: left;
-
-        a.logo {
-          @include background-image(url('/static/images/logo.png'));
-          background-position: 0 -24px;
-          background-repeat: no-repeat;
-          @include inline-block;
-          height: 22px;
-          margin-right: 15px;
-          margin-top: 2px;
-          padding-right: 15px;
-          position: relative;
-          width: 47px;
-          vertical-align: middle;
-          @include transition(none);
-
-          &:hover {
-            background-position: 0 0;
-          }
-
-          &::after {
-            @extend .faded-vertical-divider;
-            content: "";
-            display: block;
-            height: 30px;
-            right: 0px;
-            position: absolute;
-            top: -3px;
-            width: 1px;
-          }
-        }
-
-        a {
-          color: $lighter-base-font-color;
-          @include inline-block;
-          margin-right: 20px;
-          padding-top: 2px;
-          vertical-align: middle;
-
-          &:hover {
-            color: $base-font-color;
-            text-decoration: none;
-          }
-        }
-      }
-
-      .social {
-        float: right;
-
-        &.social {
-          border: none;
-          margin: 0 0 0 5px;
-          padding: 0;
+          float: left;
+          margin-right: ($baseline*0.75);
 
           a {
-            @include inline-block;
-            opacity: 0.3;
-            @include transition(all, 0.1s, linear);
+            color: tint($black, 20%);
 
-            &:hover {
-              opacity: 1;
+            &:hover, &:active {
+              color: shade($m-blue, 20%);
             }
           }
+
+          &:last-child {
+            margin-right: 0;
+          }
+        }
+      }
+
+      .colophon-about {
+
+        img {
+          width: 68px;
+          height: 34px;
+          margin-right: 0;
+          float: left;
+        }
+
+        p {
+          float: left;
+          width: 460px;
+          margin-left: $baseline;
+          padding-left: $baseline;
+          font-size: em(13);
+          background: transparent url(/static/images/bg-footer-divider.jpg) 0 0 no-repeat;
         }
       }
     }
 
-    .bottom {
-      @include clearfix;
-      opacity: 0.8;
-      padding: 10px 0px 30px;
-      @include transition(all, 0.15s, linear);
-      width: flex-grid(12);
+    // references
+    .references {
+      margin: 0;
+      width: flex-grid(4);
+      float: right;
 
-      &:hover {
-        opacity: 1;
+      .nav-social {
+        margin: 0 0 ($baseline/4) 0;
+        text-align: right;
+
+        li {
+          margin-right: ($baseline/10);
+          display: inline-block;
+
+          &:last-child {
+            margin-right: 0;
+          }
+
+          a {
+            display: block;
+
+            &:hover, &:active {
+              border: none;
+            }
+          }
+
+          img {
+            display: block;
+          }
+        }
       }
 
       .copyright {
-        float: left;
-
-        p {
-          color: $lighter-base-font-color;
-          font-style: italic;
-          @include inline-block;
-          margin: 0 auto;
-          padding-top: 1px;
-          text-align: center;
-          vertical-align: middle;
-
-          a {
-            color: $lighter-base-font-color;
-            font-style: italic;
-            margin-left: 5px;
-
-            &:hover {
-              color: $blue;
-            }
-          }
-        }
+        margin: 0 0 ($baseline/4) 0;
+        font-size: em(11);
+        color: tint($m-gray,50%);
+        text-align: right;
       }
 
-      .secondary {
-        float: right;
-        text-align: left;
+      .nav-legal {
+        @include clearfix();
+        text-align: right;
 
-        a {
-          color: $lighter-base-font-color;
-          font-family: $serif;
-          font-style: italic;
-          line-height: 1.6em;
-          margin-left: 20px;
-          text-transform: lowercase;
+        li {
+          display: inline-block;
+          font-size: em(11);
 
-          &:hover {
-            color: $blue;
+          a {
+            display: block;
+          }
+        }
+
+        .nav-legal-01 a {
+
+          &:after {
+            margin-left: 5px;
+            content: "-";
           }
         }
       }
     }
+
   }
-}
+}
\ No newline at end of file
diff --git a/lms/static/sass/shared/_header.scss b/lms/static/sass/shared/_header.scss
index 794e445141..0f0c1659d2 100644
--- a/lms/static/sass/shared/_header.scss
+++ b/lms/static/sass/shared/_header.scss
@@ -1,5 +1,5 @@
 header.global {
-  border-bottom: 1px solid rgb(190,190,190);
+  border-bottom: 1px solid tint($m-gray,50%);
   @include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.1));
   background: $white;
   height: 76px;
diff --git a/lms/templates/footer.html b/lms/templates/footer.html
index 7fe7c18ccc..34fa9f17e3 100644
--- a/lms/templates/footer.html
+++ b/lms/templates/footer.html
@@ -2,39 +2,84 @@
 <%! from django.core.urlresolvers import reverse %>
 <%namespace name='static' file='static_content.html'/>
 
-<footer>
-  <nav>
-    <section class="top">
-      <section class="primary">
-        <a href="${reverse('root')}" class="logo"></a>
-        <a href="${reverse('courses')}">Find Courses</a>
-        <a href="${reverse('about_edx')}">About</a>
-        <a href="http://blog.edx.org/">Blog</a>
-        <a href="${reverse('jobs')}">Jobs</a>
-        <a href="${reverse('contact')}">Contact</a>
-      </section>
+<div class="wrapper wrapper-footer">
+  <footer>
+    <div class="colophon">
+      <nav class="nav-colophon">
+        <ol>
+          <li class="nav-colophon-01">
+            <a href="${reverse('about_edx')}">About</a>
+          </li>
+          <li class="nav-colophon-02">
+            <a href="${reverse('jobs')}">Jobs</a>
+          </li>
+          <li class="nav-colophon-03">
+            <a href="#">Press</a>
+          </li>
+          <li class="nav-colophon-04">
+            <a href="#">FAQ</a>
+          </li>
+          <li class="nav-colophon-05">
+            <a href="${reverse('contact')}">Contact</a>
+          </li>
+          % if user.is_authenticated():
+          <li class="nav-colophon-06">
+            <a href="#">Help</a>
+          </li>
+          % endif
+        </ol>
+      </nav>
 
-      <section class="social">
-        <a href="http://youtube.com/user/edxonline"><img src="${static.url('images/social/youtube-sharing.png')}" /></a>
-        <a href="https://plus.google.com/108235383044095082735"><img src="${static.url('images/social/google-plus-sharing.png')}" /></a>
-        <a href="http://www.facebook.com/EdxOnline"><img src="${static.url('images/social/facebook-sharing.png')}" /></a>
-        <a href="https://twitter.com/edXOnline"><img src="${static.url('images/social/twitter-sharing.png')}" /></a>
-      </section>
-    </section>
+      <div class="colophon-about">
+        <img src="${MITX_ROOT_URL}/static/images/header-logo.png" />
 
-    <section class="bottom">
-      <section class="copyright">
-##        <p>&copy; 2012 edX, <a href="${reverse('copyright')}">some rights reserved.</a></p> # TODO: (bridger) Update the copyright for edX, then re-enable the link.
-        <p>&copy; 2012 edX, some rights reserved.</p>
-      </section>
+        <p>EdX is a non-profit created by founding partners Harvard and MIT whose mission is to bring the best of higher education to students of all ages anywhere in the world, wherever there is Internet access. EdX’s free online MOOCs are interactive and subjects include computer science, public health, and artificial intelligence.</p>
+      </div>
+    </div>
 
-      <section class="secondary">
-        <a href="${reverse('tos')}">Terms of Service</a>
-        <a href="${reverse('privacy_edx')}">Privacy Policy</a>
-        <a href="${reverse('honor')}">Honor Code</a>
-        <a href="${reverse('help_edx')}">Help</a>
-      </section>
-    </section>
+    <div class="references">
+      <nav class="nav-social">
+        <ul>
+          <li class="nav-social-01">
+            <a href="http://www.meetup.com/edX-Global-Community/" rel="external">
+              <img src="${MITX_ROOT_URL}/static/images/social/social-meetup.png" alt="edX on Meetup" />
+            </a>
+          </li>
+          <li class="nav-social-02">
+            <a href="http://www.facebook.com/EdxOnline" rel="external">
+              <img src="${MITX_ROOT_URL}/static/images/social/social-facebook.png" alt="edX on Facebook" />
+            </a>
+          </li>
+          <li class="nav-social-03">
+            <a href="https://twitter.com/edXOnline" rel="external">
+              <img src="${MITX_ROOT_URL}/static/images/social/social-twitter.png" alt="edX on Twitter" />
+            </a>
+          </li>
+          <li class="nav-social-04">
+            <a href="https://plus.google.com/108235383044095082735/posts" rel="external">
+              <img src="${MITX_ROOT_URL}/static/images/social/social-google.png" alt="edX on Google+" />
+            </a>
+          </li>
+          <li class="nav-social-05">
+            <a href="http://youtube.com/user/edxonline" rel="external">
+              <img src="${MITX_ROOT_URL}/static/images/social/social-youtube.png" alt="edX on YouTube" />
+            </a>
+          </li>
+        </ul>
+      </nav>
 
-  </nav>
-</footer>
+      <p class="copyright">&copy; 2013 edX, some rights reserved.</p>
+
+      <nav class="nav-legal">
+        <ul>
+          <li class="nav-legal-01">
+            <a href="${reverse('tos')}">Terms of Service and Honor Code</a>
+          </li>
+          <li class="nav-legal-02">
+            <a href="${reverse('privacy_edx')}">Privacy Policy</a>
+          </li>
+        </ul>
+      </nav>
+    </div>
+  </footer>
+</div>
\ No newline at end of file