weird anim
This commit is contained in:
parent
b1a5523885
commit
d2beca0c43
|
@ -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>
|
|
@ -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 */
|
||||
|
|
46
index.html
46
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;">
|
||||
<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 />&
|
||||
<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 />&
|
||||
<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 />&
|
||||
<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 />&
|
||||
<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 />&
|
||||
<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 />&
|
||||
<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>
|
||||
|
||||
|
||||
|
|
Loading…
Reference in a new issue