weird anim

This commit is contained in:
Set Sakrecoer 2019-07-10 01:22:54 +02:00
parent b1a5523885
commit d2beca0c43
3 changed files with 82 additions and 13 deletions

View file

@ -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>

View file

@ -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 */

View file

@ -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;">
<h1>GREETINGS<br />ROBOT!</h1>
<div>
<div id="hero">
<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>
<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>