diff --git a/_layouts/default.html b/_layouts/default.html
index 5c87c96..9247490 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -72,8 +72,10 @@
-
-
diff --git a/_sass/screen.scss b/_sass/screen.scss
index c3ed9ca..e0fb512 100644
--- a/_sass/screen.scss
+++ b/_sass/screen.scss
@@ -92,8 +92,13 @@ ol li:hover { border-right: 3px solid $links; padding-right: 7px; }
#wrapper { max-width: $in_width; margin: auto; }
#outter-wrapper { width: 100%; height: auto; min-height: 100%; position: relative; }
-#foot_image { height: 150px; background-image: url('../images/antennes.png');
- position: absolute; bottom: 0; width: 100%; }
+#foot_image { height: 150px; background-image: url('../images/backsky.png');
+ position: absolute; bottom: 0px; width: 100%; text-align: center; overflow: hidden; }
+#clouds { background-image: url('../images/clouds.png'); height: 150px; width: 200%;
+ position: relative; top: -150px; margin-bottom: -150px; }
+#foot_image:active #ski { visibility: visible; animation: ski 3s linear; }
+#clouds:hover { animation: clouds 100s infinite linear; }
+#ski { position: relative; visibility: hidden; top: -107px; left: -210px; }
#portrait { margin: 0 15px 15px 0; width: 150px; display: inline-block; vertical-align:middle; }
@@ -112,3 +117,21 @@ body { padding: 0 $margin; }
#foot_image { display: none; }
footer { display: none; }
}
+
+@keyframes clouds {
+ 0% { transform: translate(0, 0); }
+ 100% { transform: translate(-774px, 0); }
+}
+
+@keyframes ski {
+ 0% { transform: translate(0, 0) rotate(0deg); }
+ 10% { transform: translate(10px, 0) rotate(0deg); }
+ 20% { transform: translate(10px, 8px) rotate(45deg); }
+ 25% { transform: translate(25px, 16px) rotate(15deg); }
+ 30% { transform: translate(55px, 32px) rotate(0deg); }
+ 40% { transform: translate(90px, 20px) rotate(-20deg); }
+ 50% { transform: translate(110px, 15px) rotate(-200deg); }
+ 60% { transform: translate(130px, 35px) rotate(-380deg); }
+ 68% { transform: translate(164px, 27px) rotate(-360deg); }
+ 100% { transform: translate(300px, 66px) rotate(20deg); }
+}
diff --git a/images/antennes.png b/images/antennes.png
deleted file mode 100644
index f0c0d68..0000000
Binary files a/images/antennes.png and /dev/null differ
diff --git a/images/backsky.png b/images/backsky.png
new file mode 100644
index 0000000..b6697c8
Binary files /dev/null and b/images/backsky.png differ
diff --git a/images/clouds.png b/images/clouds.png
new file mode 100644
index 0000000..304d12d
Binary files /dev/null and b/images/clouds.png differ
diff --git a/images/devoluy.png b/images/devoluy.png
new file mode 100644
index 0000000..0a49a38
Binary files /dev/null and b/images/devoluy.png differ
diff --git a/images/ski.png b/images/ski.png
new file mode 100644
index 0000000..67c243f
Binary files /dev/null and b/images/ski.png differ
diff --git a/stylesheets/screen.css b/stylesheets/screen.css
index a6d2c15..bd21cc2 100644
--- a/stylesheets/screen.css
+++ b/stylesheets/screen.css
@@ -267,10 +267,37 @@ ol li:hover {
#foot_image {
height: 150px;
- background-image: url("../images/antennes.png");
+ background-image: url("../images/backsky.png");
position: absolute;
- bottom: 0;
+ bottom: 0px;
width: 100%;
+ text-align: center;
+ overflow: hidden;
+}
+
+#clouds {
+ background-image: url("../images/clouds.png");
+ height: 150px;
+ width: 200%;
+ position: relative;
+ top: -150px;
+ margin-bottom: -150px;
+}
+
+#foot_image:active #ski {
+ visibility: visible;
+ animation: ski 3s linear;
+}
+
+#clouds:hover {
+ animation: clouds 100s infinite linear;
+}
+
+#ski {
+ position: relative;
+ visibility: hidden;
+ top: -107px;
+ left: -210px;
}
#portrait {
@@ -321,3 +348,54 @@ ol li:hover {
display: none;
}
}
+@keyframes clouds {
+ 0% {
+ transform: translate(0, 0);
+ }
+
+ 100% {
+ transform: translate(-774px, 0);
+ }
+}
+
+@keyframes ski {
+ 0% {
+ transform: translate(0, 0) rotate(0deg);
+ }
+
+ 10% {
+ transform: translate(10px, 0) rotate(0deg);
+ }
+
+ 20% {
+ transform: translate(10px, 8px) rotate(45deg);
+ }
+
+ 25% {
+ transform: translate(25px, 16px) rotate(15deg);
+ }
+
+ 30% {
+ transform: translate(55px, 32px) rotate(0deg);
+ }
+
+ 40% {
+ transform: translate(90px, 20px) rotate(-20deg);
+ }
+
+ 50% {
+ transform: translate(110px, 15px) rotate(-200deg);
+ }
+
+ 60% {
+ transform: translate(130px, 35px) rotate(-380deg);
+ }
+
+ 68% {
+ transform: translate(164px, 27px) rotate(-360deg);
+ }
+
+ 100% {
+ transform: translate(300px, 66px) rotate(20deg);
+ }
+}