Initial Calendar Commit

Author: TheGuyWhoCodes

pages/calendar/calendar.html

@@ -49,14 +49,14 @@
 
     <!-- Page Content -->
     <div class="container main-page">
-
-
-
       <h1>Calendar!</h1>
-
-
-
-    </div>
+        <div class="d-none d-md-block  responsive-iframe-container ">
+            <iframe src="https://calendar.google.com/calendar/embed?src=fivd9ll4lvpkeoqoa8mo2dvqh4%40group.calendar.google.com&ctz=America%2FChicago" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe> 
+        </div>
+        <div class="d-md-none d-lg-none d-xl-none responsive-iframe-container ">
+            <iframe src="https://calendar.google.com/calendar/embed?mode=AGENDA&amp;height=600&amp;wkst=1&amp;bgcolor=%23FFFFFF&amp;src=acmatku%40gmail.com&amp;color=%23AB8B00&amp;ctz=America%2FChicago" style="border-width:0; width:95%" width="800" height="600" frameborder="0" scrolling="no" class = "mobile"></iframe>
+        </div>
+      </div>
     <!-- /.container -->
 
     <!-- Footer -->

pages/calendar/css/calendar.css

@@ -0,0 +1,19 @@
+.responsive-iframe-container {
+    position: relative;
+    padding-bottom: 56.25%;
+    padding-top: 1rem;
+    margin-bottom:1rem;
+    height: 0;
+    display:block;
+    overflow: hidden;
+    }
+
+    .responsive-iframe-container iframe,
+    .vresponsive-iframe-container object,
+    .vresponsive-iframe-container embed {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 80%;
+    height: 100%;
+    }