add video

formatting header

css/styles.css

@@ -133,6 +133,19 @@ main {
   margin: auto;
   display: flex;
 }
+.container {
+  display: flex;
+  flex-wrap: wrap;
+  align-content: space-around;
+  justify-content: space-evenly;
+}
+
+.column {
+  flex: 1;
+  padding: 1rem;
+  align-content: space-around;
+  justify-content: space-evenly;
+}
 img {
   max-width: 100%;
   height: auto;
@@ -179,13 +192,14 @@ h2,
 h3 {
   color: #fefff1;
   text-align: left;
+  word-break: break-word;
 }
 h4 {
   color: #a162f7;
   text-align: left;
 }
 .header-large {
-  font-size: 5em;
+  font-size: 4em;
   color: #fefff1;
   text-align: left;
 }
@@ -380,7 +394,7 @@ nav {
   display: -webkit-flex;
   display: flex;
   align-content: space-around;
-  justify-content: space-evenly;
+  justify-content: space-between;
   -webkit-flex: 1;
   flex: 1;
   -webkit-flex-wrap: wrap;
@@ -560,16 +574,17 @@ input:checked + .drop + .menu-items {
   min-height: 100%;
   z-index: -1;
 }
-.bg-vid::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
+.bg-header {
+  display: flex;
   background: rgba(160, 98, 247, 0.774);
-
-  z-index: 1;
+  align-content: space-around;
+  justify-content: space-evenly;
+  width: 100%;
+  min-height: 60vh;
+}
+.align-right {
+  display: flex;
+  justify-content: flex-end;
 }
 
 .e-mail:before {
@@ -645,4 +660,29 @@ nav a:not(.logo) {
     width: auto;
     height: auto;
   }
+  .container {
+    margin: 10px;
+    padding: 20px;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-flex-wrap: wrap;
+    flex-wrap: wrap;
+    -webkit-flex-direction: column;
+    flex-direction: column;
+    justify-content: space-evenly;
+    align-items: center;
+    -webkit-flex: 1 1 0;
+    flex: 1 1 0;
+    text-align: center;
+  }
+  h1,
+  h2,
+  h3 {
+    text-align: center;
+  }
+  .header-large {
+    text-align: center;
+    font-size: 2.5em;
+    color: #fefff1;
+  }
 }

index.html

@@ -56,25 +56,29 @@
     <header id="header"></header>
 
     <main>
-      <div class="flex-column bg-vid">
-        <video id="main" autoplay loop muted>
-          <source
-            src="https://lasthourcloud.b-cdn.net/assets/last-hour-banner-video.webm"
-            type="video/webm"
-          />
-        </video>
-        <div class="flex-container-left">
-          <div class="header-large top">Sleep Tight,</div>
-          <div class="header-large top">We've Got This</div>
-          <h2 class="top">
-            Cloud hosting for the last hour so you can follow your dreams.
-          </h2>
-          <a
-            class="button-3 top"
-            role="button"
-            href="https://my.lasthourhosting.org/register"
-            >Get Started
-          </a>
+      <div class="bg-header">
+        <div class="container">
+          <div class="column">
+            <div class="header-large top">Sleep Tight,</div>
+            <div class="header-large top">We've Got This</div>
+            <h2 class="top">
+              Cloud hosting for the last hour so you can follow your dreams.
+            </h2>
+            <a
+              class="button-3 top"
+              role="button"
+              href="https://my.lasthourhosting.org/register"
+              >Get Started
+            </a>
+          </div>
+          <div class="column align-right">
+            <video width="100%" controls>
+              <source
+                src="/assets/lasthourhostingheadervideo.webm"
+                type="video/webm"
+              />
+            </video>
+          </div>
         </div>
       </div>
       <div class="flex-row">

js/back-to-top.js

@@ -0,0 +1,13 @@
+$(document).ready(function () {
+  $(window).scroll(function () {
+    if ($(this).scrollTop() > 100) {
+      $("#back-to-top").addClass("show");
+    } else {
+      $("#back-to-top").removeClass("show");
+    }
+  });
+
+  $("#back-to-top").click(function () {
+    $("html, body").animate({ scrollTop: 0 }, "slow");
+  });
+});