Standardize Events Page - Update header section (#1213)

* Standardize Events Page - Update header section

* Updated donation gif on Join Us page

_sass/components/_events.scss

@@ -8,20 +8,24 @@
   }
 }
 
-.hacknights--header-container {
-  padding: 6rem 6rem 5rem 8rem;
+.header-container--events {
+  padding: .2rem 4rem 5.5rem 4rem;
 }
 
-.hacknights--head-content {
+.events--head-content {
   margin: 2% 0 0% 4%;
   text-align: initial;
 }
 
+.header-text-margin--events{
+  max-width: 520px;
+  margin: 0;
+}
+
 .header-desc {
   text-align: initial;
   font-weight: 530;
-  font-size: 25px;
-  line-height: 29px;
+  font-size: 1.125rem;
   margin: 2% 0 20px 5%;
 
   @media #{$bp-below-tablet} {
@@ -44,6 +48,7 @@
   flex-direction: row-reverse;
   margin-left: 40px;
   margin-bottom: -7%;
+  justify-content: center;
   @media #{$bp-below-tablet} {
     flex-direction: row-reverse;
     flex-grow: 6;
@@ -493,7 +498,7 @@
 /* These styles are for the mobile view of the events page */
 
 @media #{$bp-below-desktop} {
-  .hacknights--header-container {
+  .header-container--events {
     padding: 2rem 2rem 2rem 2rem;
   }
 
@@ -515,7 +520,7 @@
 }
 
 .fullscreen-video {
-  width: 100%;
+  margin-right: 5rem;
 }
 
 .events-video-fullscreen-container {

pages/events/events.html

@@ -4,7 +4,7 @@
 permalink: /events/
 ---
 
-<div class="header-container hacknights--header-container">
+<div class="header-container header-container--events">
   {% include_relative header-container-content.html %}
 </div>
 

pages/events/header-container-content.html

@@ -1,7 +1,7 @@
-<h1>Events</h1>
 <div class="content-hack-night">
   <div class="show-video">
-    <div>
+    <div class="header-text-margin--events">
+      <h1>Events</h1>
       <h2 class="header-desc">
         Hack for LA is the Los Angeles brigade of
         <a href="http://brigade.codeforamerica.org/" target="_blank">Code for America</a>,
@@ -17,7 +17,7 @@ <h2 class="header-desc">
         </div>
       </div>
 
-      <p id="head-content" class="hacknights--head-content">
+      <p id="head-content" class="events--head-content">
         To learn more, watch the
         <a href="https://www.ted.com/talks/jennifer_pahlka_coding_a_better_government" target="_blank">Ted Talk</a>
         by Code for America founder, Jennifer Pahlka, on maintaining a better government through code.

pages/join-us.html

@@ -155,7 +155,7 @@ <h2>How to help us continue to do impactful work</h2>
       <div class="join-us-donation">
         <img
           class="join-us-donation-png"
-          src="/assets/images/join-us/HfLA-Donate.gif"
+          src="/assets/images/about/HFLA-Donate.gif"
           alt="donation form image"
         />
         <div class="join-us-donation-body">