commit ace9a8e4da16ee41b844a131df9b1c2221eba7b4 Author: victor Date: Tue Jan 16 14:44:56 2024 +0100 great code diff --git a/index.html b/index.html new file mode 100644 index 0000000..25ccfdb --- /dev/null +++ b/index.html @@ -0,0 +1,44 @@ + + + + + + Document + + + + + + + + +
+
+

Victor´s  Userpage

+ +
+

+ Welcome to my userpage.
+ If you are more interested in me
+ please check out my website:
+ Victor Utne Stiberg +

+
+
+ +
+ + +
+ + + + + +
+ +
+ + \ No newline at end of file diff --git a/sources/Olondon.otf b/sources/Olondon.otf new file mode 100644 index 0000000..9a68b20 Binary files /dev/null and b/sources/Olondon.otf differ diff --git a/sources/animatehorse.js b/sources/animatehorse.js new file mode 100644 index 0000000..070cba0 --- /dev/null +++ b/sources/animatehorse.js @@ -0,0 +1,33 @@ +function horse(input){ + let a1 = document.getElementById("audio1"); + if (input){ + a1.play(); + } else {a1.pause();} +} + + +var round = 1; + +/* +function moveHorse() { + window.setTimeout(function() { + console.log("halo"); + addclass() + moveHorse() + }, 3900); +} + +function addclass(elem){ + let list = document.getElementById('hest1'); + console.log(list.classList); + if(round%2===0){ + list.classList.remove('moved'); + } else{ + list.classList.add('moved'); + console.log("halo"); +} round++; +console.log("halo"); +} + +moveHorse (); +*/ \ No newline at end of file diff --git a/sources/hest.svg b/sources/hest.svg new file mode 100644 index 0000000..aa20e0b --- /dev/null +++ b/sources/hest.svg @@ -0,0 +1,10 @@ + + + + + diff --git a/sources/hesten.mp3 b/sources/hesten.mp3 new file mode 100644 index 0000000..68ae160 Binary files /dev/null and b/sources/hesten.mp3 differ diff --git a/sources/style.css b/sources/style.css new file mode 100644 index 0000000..ff25b2a --- /dev/null +++ b/sources/style.css @@ -0,0 +1,139 @@ +@font-face { + font-family: 'Old London'; + src: url('Olondon.otf'); +} + +:root{ + --tekstfarge: #027bff; +} + +a{ + color: var(--tekstfarge); +} + +.landing{ + height: 100vh; + background-color: lightblue; +} + +.skrift{ + + position: absolute; + top: 0%; + margin-left: auto; + margin-right: auto; + left: 0; + right: 0; + height: 80vh; + max-width: 800px; + font-family: 'Old London'; + font-size: clamp(1.5rem, 1rem + 9vw, 5rem); + color: var(--tekstfarge); + text-align: center; + + +} + +span{ + opacity: 50; + transform: translateY(250px); + transition: all 1.5s; + display: inline-block; + +} +.tekst span:nth-child(even){ + transform: translateY(200px); + rotate: 50deg; +} + +.tekst span:nth-child(2n+3){ + transform: translateX(-120px); + rotate: -30deg; +} +.tekst span:nth-child(3n+2){ + transform: translateX(120px); +} + +.tekst span.stilig{ + opacity: 100; + transform: translateY(0px); + rotate: 0deg; + +} + + +.bio{ + font-size: 1.5rem; +} + +.stable{ + width: 100vw; + height: 100vh; +} + +#hest1{ + margin-top: 2em; + margin-left: 4em; + display: inline-block; + width: 300px; + transform: scaleX(-1); + animation: hest1 10s infinite; +} + +.moved{ + animation: hest1 4s infinite; + +} + +@keyframes hest1 { + 0%{ + translate: 0 0; + rotate: 0deg; + } + 10%{ + translate: 400px 150px; + rotate: -80deg; + } + 20%{ + translate: 500px 450px; + rotate: 20deg; + } + 30%{ + translate: 180px 150px; + rotate: 20deg; + } + 40%{ + translate: 80px 30px; + rotate: 20deg; + } + 50%{ + translate: 0 0; + rotate: 0deg; + } + 60%{ + translate: 0 0; + rotate: 0deg; + } + 70%{ + translate: 0 0; + rotate: 0deg; + } + 80%{ + translate: 0 0; + rotate: 0deg; + } + 90%{ + translate: 0 0; + rotate: 0deg; + } + 100%{ + translate: 0 0; + rotate: 0deg; + } + + +} + +.sjekk:checked~label>#hest1{ + filter: invert(88%) sepia(89%) saturate(3221%) hue-rotate(-134deg) brightness(99%) contrast(101%); +} \ No newline at end of file diff --git a/sources/textanimation.js b/sources/textanimation.js new file mode 100644 index 0000000..5fc563f --- /dev/null +++ b/sources/textanimation.js @@ -0,0 +1,25 @@ +const tekst = document.getElementById("stiligtekst"); +const tekstStr = tekst.textContent; +const splitta = tekstStr.split(""); +tekst.textContent =""; +for (let i =0; i < splitta.length; i++) { + tekst.innerHTML +="" + splitta[i] + ""; +} + +let char = 0; +let timer = setInterval(onTick, 100); + +function onTick(){ + const span = tekst.querySelectorAll('span')[char]; + span.classList.add('stilig'); + char++; + if(char === splitta.length) { + complete(); + return; + } + + function complete(){ + clearInterval(timer); + timer = null; + } +} \ No newline at end of file