Co za animacja loga to ja nawet nie.

service/src/main/resources/assets/index.html

@@ -10,7 +10,9 @@
 
 <nav>
     <div class="nav-wrapper container">
-        <a href="#" class="brand-logo">Capture the flAGH</a>
+        <a href="#" class="brand-logo">
+            <span class="title"></span>
+        </a>
         <ul id="nav-mobile" class="right hide-on-med-and-down">
             <li><a href="page#/home">Początek</a></li>
             <li><a href="page#/tasks">Zadania</a></li>
@@ -31,5 +33,18 @@
 <script type="text/javascript" src="/webjars/angular-ui-router/angular-ui-router.min.js"></script>
 <script type="text/javascript" src="/page/statics/libs/angular-materialize.js"></script>
 <script type="text/javascript" src="/page/statics/libs/angular-breadcrumb.min.js"></script>
+<script type="text/javascript" src="/page/statics/libs/typed.js"></script>
 <script type="text/javascript" src="/page/statics/js/main.js"></script>
+<script>
+
+    $(function(){
+        $(".title").typed({
+            strings: ["<b>capture the flag</b>", "<b>capture the flAGH 2016</b>"],
+            startDelay: 10,
+            backDelay: 500
+        });
+    });
+
+</script>
 </html>
+

service/src/main/resources/assets/statics/css/main.css

@@ -8,3 +8,25 @@ nav {
     line-height: 120px;
     height: 120px;
 }
+
+.typed-cursor{
+    opacity: 1;
+    -webkit-animation: blink 0.7s infinite;
+    -moz-animation: blink 0.7s infinite;
+    animation: blink 0.7s infinite;
+}
+@keyframes blink{
+    0% { opacity:1; }
+    50% { opacity:0; }
+    100% { opacity:1; }
+}
+@-webkit-keyframes blink{
+    0% { opacity:1; }
+    50% { opacity:0; }
+    100% { opacity:1; }
+}
+@-moz-keyframes blink{
+    0% { opacity:1; }
+    50% { opacity:0; }
+    100% { opacity:1; }
+}
\ No newline at end of file