diff --git a/.gitattributes b/.gitattributes
new file mode 100644
--- /dev/null
+++ b/.gitattributes
@@ -0,0 +1,2 @@
+*.mp4 filter=lfs diff=lfs merge=lfs -text
+*.webm filter=lfs diff=lfs merge=lfs -text
diff --git a/src/assets/img/night-rain.jpg b/src/assets/img/night-rain.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
literal 0
Hc$@<O00001
diff --git a/src/assets/scss/_settings.scss b/src/assets/scss/_settings.scss
--- a/src/assets/scss/_settings.scss
+++ b/src/assets/scss/_settings.scss
@@ -80,8 +80,8 @@
$dark-gray: #8a8a8a;
$black: #0a0a0a;
$white: #fefefe;
-$body-background: $white;
-$body-font-color: $black;
+$body-background: $black;
+$body-font-color: $white;
$body-font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
$body-antialiased: true;
$global-margin: 1rem;
diff --git a/src/assets/scss/app.scss b/src/assets/scss/app.scss
--- a/src/assets/scss/app.scss
+++ b/src/assets/scss/app.scss
@@ -51,3 +51,5 @@
@include motion-ui-transitions;
@include motion-ui-animations;
+
+@import 'components/video'
diff --git a/src/assets/scss/components/video.scss b/src/assets/scss/components/video.scss
new file mode 100644
--- /dev/null
+++ b/src/assets/scss/components/video.scss
@@ -0,0 +1,12 @@
+/* -------------------------------------------------------------
+ Video
+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
+
+#full-video {
+ position: fixed;
+
+ video {
+ width: 100vw;
+ height: 100vh;
+ }
+}
diff --git a/src/assets/video/night-rain.mp4 b/src/assets/video/night-rain.mp4
new file mode 100644
--- /dev/null
+++ b/src/assets/video/night-rain.mp4
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:9861e85fde1f22481b5b5012d16207a8da211dff465347c14fb5c7e0c91005b6
+size 6031746
diff --git a/src/assets/video/night-rain.webm b/src/assets/video/night-rain.webm
new file mode 100644
--- /dev/null
+++ b/src/assets/video/night-rain.webm
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:cd31c089a3bd710b16c92da8fdb8bc95dd314a1e47e04b78fa3e328d90a4a330
+size 4223029
diff --git a/src/pages/index.html b/src/pages/index.html
--- a/src/pages/index.html
+++ b/src/pages/index.html
@@ -1,153 +1,14 @@
-<div class="grid-container">
- <div class="grid-x grid-margin-x">
- <div class="large-12 cell">
- <h1>Welcome to Foundation for Sites</h1>
- </div>
- </div>
-
- <div class="grid-x grid-margin-x">
- <div class="large-12 cell">
- <div class="callout">
- <h3>We’re stoked you want to try Foundation! </h3>
- <p>To get going, this file (index.html) includes some basic styles you can modify, play around with, or totally destroy to get going.</p>
- <p>Once you've exhausted the fun in this document, you should check out:</p>
- <div class="grid-x grid-margin-x">
- <div class="large-4 medium-4 cell">
- <p><a href="http://foundation.zurb.com/docs">Foundation Documentation</a><br />Everything you need to know about using the framework.</p>
- </div>
- <div class="large-4 medium-4 cell">
- <p><a href="http://zurb.com/university/code-skills">Foundation Code Skills</a><br />These online courses offer you a chance to better understand how Foundation works and how you can master it to create awesome projects.</p>
- </div>
- <div class="large-4 medium-4 cell">
- <p><a href="http://foundation.zurb.com/forum">Foundation Forum</a><br />Join the Foundation community to ask a question or show off your knowledge.</p>
- </div>
- </div>
- <div class="grid-x grid-margin-x">
- <div class="large-4 medium-4 medium-push-2 cell">
- <p><a href="http://github.com/zurb/foundation">Foundation on Github</a><br />Latest code, issue reports, feature requests and more.</p>
- </div>
- <div class="large-4 medium-4 medium-pull-2 cell">
- <p><a href="https://twitter.com/ZURBfoundation">@zurbfoundation</a><br />Ping us on Twitter if you have questions. When you build something with this we'd love to see it (and send you a totally boss sticker).</p>
- </div>
- </div>
- </div>
- </div>
- </div>
-
- <div class="grid-x grid-margin-x">
- <div class="large-8 medium-8 cell">
- <h5>Here’s your basic grid:</h5>
- <!-- Grid Example -->
-
- <div class="grid-x grid-margin-x">
- <div class="large-12 cell">
- <div class="primary callout">
- <p><strong>This is a twelve column section in a grid-x with grid-margin-x.</strong> Each of these includes a div.callout element so you can see where the cell are - it's not required at all for the grid.</p>
- </div>
- </div>
- </div>
- <div class="grid-x grid-margin-x">
- <div class="large-6 medium-6 cell">
- <div class="primary callout">
- <p>Six cell</p>
- </div>
- </div>
- <div class="large-6 medium-6 cell">
- <div class="primary callout">
- <p>Six cell</p>
- </div>
- </div>
- </div>
- <div class="grid-x grid-margin-x">
- <div class="large-4 medium-4 small-4 cell">
- <div class="primary callout">
- <p>Four cell</p>
- </div>
- </div>
- <div class="large-4 medium-4 small-4 cell">
- <div class="primary callout">
- <p>Four cell</p>
- </div>
- </div>
- <div class="large-4 medium-4 small-4 cell">
- <div class="primary callout">
- <p>Four cell</p>
- </div>
- </div>
- </div>
-
- <hr />
-
- <h5>We bet you’ll need a form somewhere:</h5>
- <form>
- <div class="grid-x grid-margin-x">
- <div class="large-12 cell">
- <label>Input Label</label>
- <input type="text" placeholder="large-12.cell" />
- </div>
- </div>
- <div class="grid-x grid-margin-x">
- <div class="large-4 medium-4 cell">
- <label>Input Label</label>
- <input type="text" placeholder="large-4.cell" />
- </div>
- <div class="large-4 medium-4 cell">
- <label>Input Label</label>
- <input type="text" placeholder="large-4.cell" />
- </div>
- <div class="large-4 medium-4 cell">
- <div class="grid-x grid-margin-x collapse">
- <label>Input Label</label>
- <div class="input-group">
- <input class="input-group-field" type="text" placeholder="input-group" />
- <span class="input-group-label">.com</span>
- </div>
- </div>
- </div>
- </div>
- <div class="grid-x grid-margin-x">
- <div class="large-12 cell">
- <label>Select Box</label>
- <select>
- <option value="husker">Husker</option>
- <option value="starbuck">Starbuck</option>
- <option value="hotdog">Hot Dog</option>
- <option value="apollo">Apollo</option>
- </select>
- </div>
- </div>
- <div class="grid-x grid-margin-x">
- <div class="large-6 medium-6 cell">
- <label>Choose Your Favorite</label>
- <input type="radio" name="pokemon" value="Red" id="pokemonRed"><label for="pokemonRed">Radio 1</label>
- <input type="radio" name="pokemon" value="Blue" id="pokemonBlue"><label for="pokemonBlue">Radio 2</label>
- </div>
- <div class="large-6 medium-6 cell">
- <label>Check these out</label>
- <input id="checkbox1" type="checkbox"><label for="checkbox1">Checkbox 1</label>
- <input id="checkbox2" type="checkbox"><label for="checkbox2">Checkbox 2</label>
- </div>
- </div>
- <div class="grid-x grid-margin-x">
- <div class="large-12 cell">
- <label>Textarea Label</label>
- <textarea placeholder="small-12.cell"></textarea>
- </div>
- </div>
- </form>
- </div>
-
- <div class="large-4 medium-4 cell">
- <h5>Try one of these buttons:</h5>
- <p><a href="#" class="small button">Simple Button</a><br/>
- <a href="#" class="medium success button">Success Btn</a><br/>
- <a href="#" class="medium alert button">Alert Btn</a><br/>
- <a href="#" class="medium secondary button">Secondary Btn</a></p>
- <div class="callout">
- <h5>So many components, girl!</h5>
- <p>A whole kitchen sink of goodies comes with Foundation. Check out the docs to see them all, along with details on making them your own.</p>
- <a href="http://foundation.zurb.com/docs/" class="small button">Go to Foundation Docs</a>
- </div>
- </div>
- </div>
-</div>
+<section id="full-video">
+ <video
+ poster="/assets/img/night-rain.jpg"
+ autoplay
+ loop
+ >
+ <source src="/assets/video/night-rain.webm" type="video/webm">
+ <source src="/assets/video/night-rain.mp4" type="video/mp4">
+ Sorry, your browser doesn't support embedded videos. Perhaps
+ you can browse the <a href="https://commons.wikimedia.org/wiki/Category:Raindrops_on_windows">
+ Raindrops on windows</a> Commons category and pick your favourite
+ video there.
+ </video>
+</section>