gjankowiak/homepage
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

new footer

Browse source
This commit is contained in:
Gapato 2014-09-06 19:27:35 +02:00
commit ff9664eeae
8 changed files with 109 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

27
_sass/screen.scss
View file

@ -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); }
}