Add Special Event for Champ the trick horse

Client/src/app/components/home/home.component.css

@@ -17,6 +17,11 @@ img{
     height: auto;
 }
 
+img.full {
+    width: 100%;
+    height: auto;
+}
+
 .action{
     font-weight: bold;
     font-size: 20px;
@@ -76,7 +81,7 @@ img{
 .row-content-header{
     font-weight: bold;
     margin-bottom: 10px;
-    font-size: 1.15em;
+    font-size: 1.35em;
 }
 
 .align-top{
@@ -127,6 +132,10 @@ img{
     padding-bottom: 35%;    
 }
 
+.center{
+    text-align: center;
+}
+
 
 .tint{
     background-color: rgb(240,240,240);
@@ -157,5 +166,8 @@ img{
         float:none;
         text-align: center;
     }
+    img.full {
+        width: 70%;
+    }
     
 }

Client/src/app/components/home/home.component.html

@@ -7,6 +7,40 @@
 
 <div id="content-wrapper">
 
+    <div class="row tint" *ngIf="showSpecial">            
+        <div class="row-content">
+            <div class="row-content-col-right align-top center">
+                <p ofbFadeInOnScroll class="row-content-header">Special Event!</p>
+                <p ofbFadeInOnScroll>
+                    Come join us for this special event happening September 5th and 6th at Old Fashion Baptist!.
+                </p>
+                <br>
+                <p ofbFadeInOnScroll>
+                    <b>Wednesday, September 5 @ 7 PM</b>
+                    <br>
+                    Bible Preaching & Bluegrass Gospel Music
+                </p>
+                <br>
+                <p ofbFadeInOnScroll>
+                    <b>Thursday, September 6 @ 5:30 PM</b>
+                    <br>
+                    Food, Games, Music & Preaching
+                </p>
+                <br>
+                <p ofbFadeInOnScroll>
+                    <a href="assets/images/champ_flyer.jpg" download="champ_flyer.jpg"><b>Click here to download the flyer</b></a>
+                </p>
+                <br>
+                <p ofbFadeInOnScroll class="action">
+                    <i ofbicon>phone</i> <a href="tel:+1-406-494-5028" class="align-top">406-494-5028</a>
+                </p>
+            </div>
+            <div class="row-content-col-left">                    
+                <a href="assets/images/champ_flyer.jpg" download="champ_flyer.jpg"><img class="full" ofbFadeInOnScroll src="assets/images/home-images/tiny/champ.jpg" height="300"></a>
+            </div>            
+        </div>
+    </div>
+
     <div class="row">
         <div class="row-content">
             <div class="row-content-col-left align-top">

Client/src/app/components/home/home.component.ts

@@ -7,6 +7,18 @@ import { Component, HostListener } from '@angular/core';
 })
 export class HomeComponent {
   backgroundTop: string = "0px";
+  public get showSpecial() : boolean {
+    let maxDate = new Date(2018,8,6); // September 6th 2018 -- Set the month one month behind since JavaScript dates are 0 based
+    let now = new Date();
+    if (now.getFullYear() > maxDate.getFullYear()) return false;
+    if (now.getFullYear() == maxDate.getFullYear()) {
+      if (now.getMonth() > maxDate.getMonth()) return false;
+      if (now.getMonth() == maxDate.getMonth()) {
+        if (now.getDate() > maxDate.getDate()) return false;
+      }
+    }
+    return true;
+  }
 
   @HostListener('window:scroll', ['$event'])
   onScroll(event){