weird anim

_includes/navmenu.html

@@ -1,11 +1,11 @@
 <div id="navigation">
   {% if page.collection == 'tracks' %}
-  <a href="{{ site.baseurl }}./index.html">
+  <a href="{{ site.baseurl }}./index.html" alt="Back" title="Back">
   {% elsif page.url == '/' %}
-  <a href="{{ site.baseurl }}/music/">
+  <a href="{{ site.baseurl }}/music/" alt="Music" title="Music">
   {% else %}
-  <a href="{{ site.baseurl }}../">
+  <a href="{{ site.baseurl }}/" alt="Back" title="About">
   {% endif %}
-    <img src="{{ site.baseurl }}/assets/img/sakrecoer-logo.svg" width="125px" height="125px" title="SAKRECOER" />
+    <img src="{{ site.baseurl }}/assets/img/sakrecoer-logo.svg" width="125px" height="125px" alt="Sakrecoer Logo" />
   </a>
 </div>

_sass/main.scss

@@ -3,7 +3,27 @@ html {
 
 }
 body{
-  background: url(/assets/img/pattern.png);
+  background: linear-gradient(230deg, rgba(218, 159, 142, 0.9), rgba(236, 0, 228, 0.9), rgba(0, 212, 236, 0.9), rgba(0, 236, 173, 0.9), rgba(110, 0, 236, 0.9));
+  background-size: 1000% 1000%;
+  -webkit-animation: AnimationName 30s ease infinite;
+  -moz-animation: AnimationName 30s ease infinite;
+  animation: AnimationName 30s ease infinite;
+  
+  @-webkit-keyframes AnimationName {
+      0%{background-position:0% 91%}
+      50%{background-position:100% 10%}
+      100%{background-position:0% 91%}
+  }
+  @-moz-keyframes AnimationName {
+      0%{background-position:0% 91%}
+      50%{background-position:100% 10%}
+      100%{background-position:0% 91%}
+  }
+  @keyframes AnimationName {
+      0%{background-position:0% 91%}
+      50%{background-position:100% 10%}
+      100%{background-position:0% 91%}
+  }
 
 
 }
@@ -11,12 +31,25 @@ a {
   font-weight: normal;
 }
 #hero {
+  display: flex;
+  flex-wrap: wrap;
+  background-color: transparent;
   position: relative;
   height: 100vh;
   width: 100%;
-  -webkit-transition: background .5s ease-in-out;
+
-  transition: background .5s ease-in-out;
+
-  background-image: url({{}});
+  div {
+    background: rgba(252, 252, 252, 0.541);
+    padding: 10px;
+    border-radius: 3px;
+    flex: 1 1 300px;
+    flex-direction: column;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  
+
 }
 
 /* MUSIC INDEX */

index.html

@@ -1,18 +1,54 @@
 ---
-title: The Mother-web of Sakrecoer
+title: Greetings Robot!
 description:
 image:
 video_path:
 layout: default
 ---
 <div class="musiflex">
-    <div id="hero" style="background-color: rgb(0, 255, 255);margin:0;padding:0;">
+    <div id="hero">
-        <h1>GREETINGS<br />ROBOT!</h1>
+        <div class="editable">  
-        <div>
+            <h1>Greetings Robot!</h1>
+        
             <p><b>Sakrecoer Uncorporated</b> Stands for independent fun-loving Activism, Art<br />&amp;
               <b>Music.</b><br /><br />I push sounds, images, thoughts and passion for <b>cool robots like you.</b><br /><br />I
               am funky and I deliver because<br /><b>I was born tomorrow.</b></p>
-          </div>
+        </div>
+        <div class="editable">  
+            <h1>Greetings Robot!</h1>
+        
+            <p><b>Sakrecoer Uncorporated</b> Stands for independent fun-loving Activism, Art<br />&amp;
+              <b>Music.</b><br /><br />I push sounds, images, thoughts and passion for <b>cool robots like you.</b><br /><br />I
+              am funky and I deliver because<br /><b>I was born tomorrow.</b></p>
+        </div>
+        <div class="editable">  
+            <h1>Greetings Robot!</h1>
+        
+            <p><b>Sakrecoer Uncorporated</b> Stands for independent fun-loving Activism, Art<br />&amp;
+              <b>Music.</b><br /><br />I push sounds, images, thoughts and passion for <b>cool robots like you.</b><br /><br />I
+              am funky and I deliver because<br /><b>I was born tomorrow.</b></p>
+        </div>
+        <div class="editable">  
+            <h1>Greetings Robot!</h1>
+        
+            <p><b>Sakrecoer Uncorporated</b> Stands for independent fun-loving Activism, Art<br />&amp;
+              <b>Music.</b><br /><br />I push sounds, images, thoughts and passion for <b>cool robots like you.</b><br /><br />I
+              am funky and I deliver because<br /><b>I was born tomorrow.</b></p>
+        </div>
+        <div class="editable">  
+            <h1>Greetings Robot!</h1>
+        
+            <p><b>Sakrecoer Uncorporated</b> Stands for independent fun-loving Activism, Art<br />&amp;
+              <b>Music.</b><br /><br />I push sounds, images, thoughts and passion for <b>cool robots like you.</b><br /><br />I
+              am funky and I deliver because<br /><b>I was born tomorrow.</b></p>
+        </div>
+        <div class="editable">  
+            <h1>Greetings Robot!</h1>
+        
+            <p><b>Sakrecoer Uncorporated</b> Stands for independent fun-loving Activism, Art<br />&amp;
+              <b>Music.</b><br /><br />I push sounds, images, thoughts and passion for <b>cool robots like you.</b><br /><br />I
+              am funky and I deliver because<br /><b>I was born tomorrow.</b></p>
+        </div>
       </div>