adds motivation wars

this is gonna be awesome

adds motivation wars
a57f5d54 · ck85nori · 7bf0d66f · a57f5d54 · a57f5d54
Verified Commit a57f5d54 authored 6 years ago by ck85nori
--- a/basics.html
+++ b/basics.html
@@ -13,6 +13,7 @@
    <link rel="stylesheet" href="reveal.js/css/theme/black.css" id="theme" />
    <link rel="stylesheet" href="css/company-logo.css" />
    <link rel="stylesheet" href="css/ribbon.css" />
+    <link rel="stylesheet" href="css/crawl.css" />
  </head>

  <body>
@@ -263,6 +264,33 @@
            notes:
            - basically, everything you can script
          </section>
+
+          <section class="star-wars" id="motivation-wars">
+            <div class="crawl">
+              <div class="title">
+                <h1>motivation #wars</h1>
+              </div>
+
+              <div data-markdown>
+                1.  revert a bad change?
+                1.  view the history?
+                1.  know why someone changed it?
+                1.  maintain multiple versions?
+                1.  see the diff of two versions?
+                1.  find commit that broke something?
+                1.  have free backup?
+                1.  have non-interfering playgrounds?
+                1.  have automated testing?
+                1.  have automated deployment?
+                1.  forget about ms word comments?
+                1.  contribute to a project?
+                1.  share your code?
+                1.  let other people do the work for you?
+              </div>
+
+              <img src="http://i.giphy.com/90F8aUepslB84.gif" />
+            </div>
+          </section>
        </section>

        <!---------------------------------------------------------------------

--- a/css/crawl.css
+++ b/css/crawl.css
+.star-wars {
+    height: 800px;
+    perspective: 400px;
+
+    color: #feda4a;
+    letter-spacing: 6px;
+}
+
+.crawl {
+    position: relative;
+    animation: crawl 120s linear;
+}
+
+.crawl > .title > h1 {
+    color: #feda4a;
+}
+
+@keyframes crawl {
+    0% {
+        top: 0;
+        transform: rotateX(20deg)  translateZ(0);
+    }
+
+    100% {
+        top: -6000px;
+        transform: rotateX(25deg) translateZ(-2500px);
+    }
+}